Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Evenly spacing horizontal menu links
Old 07-05-2009, 04:59 PM Evenly spacing horizontal menu links
Novice Talker

Posts: 11
Trades: 0
Is it possible to space text links evenly? In this image I have made the background of each container red for easier viewing. Each red block is evenly spaced, but when the red is turned off, each word looks unevenly spaced since each word is a different length. Is there any way to remedy this?



My CSS:


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 1.2em;
background-color:#666;
}
#wrapper {
margin: 0 auto;
width: 820px;
border: 1px solid #333;
background-color:#fff;
overflow:hidden;
height:100%;
}
#header {
width: 822px;
float: left;
padding: 10px;
height: 116px;
margin: 0;
background:url(header.jpg) no-repeat;
}
#leftcolumn {
color: #666;
background:url(leftslice.jpg) no-repeat;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 198px;
float: left;
}
#rightcolumn {
color: #666;
float: left;
background:url(rightslice.jpg) repeat-x;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 502px;
display: inline;
}
#footer {
width: 820px;
height:100%;
clear: both;
color: #333;
background-color:#c4bca4;
font-size: 85%;
line-height: 1.2em;
border-top: 1px solid #333;
}
#footerleft {
width: 198px;
padding: 10px 30px 10px 30px;
float: left;
height:100%
background-color:#c4bca4;
}
#footerright {
width: 502px;
padding: 10px 30px 10px 30px;
float:left;
height:100%
background-color:#c4bca4;
}
#footer a{
text-decoration:none;
color:#84693b;
font-weight:bold;
}
#footer a:hover,#footer a:active {
text-decoration:none;
color:#ffffff;
font-weight:bold;
}
ul#menu {
list-style:none;
padding-left:290px;
width:100%;
text-align:center;
}
ul#menu li {
margin:0px; padding:0px;
list-style:none;
font-size:12pt;
line-height:1em;
display:inline;
}
ul#menu li a {
display:block;
text-align:center;
width:12%;
float:left;
margin-top:102px;
margin-right:20px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
padding:0 0 0 0;
background-color:red;
}
ul#menu a:hover,#footer a:active {
text-decoration:none;
color:#666;
font-weight:bold;
}

Last edited by jodybethw; 07-05-2009 at 05:06 PM..
jodybethw is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-05-2009, 05:09 PM Re: Evenly spacing horizontal menu links
StylaStyla's Avatar
Mad Man

Posts: 401
Name: Styla
Location: City of London
Trades: 0
left-padding the LI tag usually works for me.
StylaStyla is offline
Reply With Quote
View Public Profile Visit StylaStyla's homepage!
 
Old 07-05-2009, 05:14 PM Re: Evenly spacing horizontal menu links
Novice Talker

Posts: 11
Trades: 0
thanks

Last edited by jodybethw; 07-05-2009 at 06:04 PM..
jodybethw is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Evenly spacing horizontal menu links
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.39685 seconds with 12 queries