adding spacing to horizontal list

[kevwood]

hi all i am having trouble getting the correct spacing i need between my links across a horizontal navigation bar. i would like all the links to be spaced evenlly across the space available.

here is my code as it stands

html

<div id="nav">
        <ul id="navigation">
                <li><a href="index.html">link</a></li>
                <li><a href="page1.html">link</a></li>
                <li><a href="page2.html">link</a></li>
                <li><a href="page3.html">link</a></li>
                <li><a href="page4.html">link</a></li>
                <li><a href="page5.html">link</a></li>
                <li><a href="page6.html">link</a></li>
        </ul>
</div>

css

#nav{
    width : 100%;
    background-color : #60F;
    border-bottom : solid #FFF;
    text-align : center;
}

#navigation ul{
    list-style : none;
}

#navigation li{
    display : inline;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
}

#navigation li a{
    text-decoration : none;
    font-weight : bold;
    color : #FFF;
}

any help with this would be great thanks for reading.

[elsunhoty]

You can Use margin

#navigation li{

    margin-left : 10 px ;
}

[kevwood]

adding a margin-left with a px would not help in evenly spacing the links across the width of the nav div. it wold simply just put the amount of px stated between each of the different li's.

thanks for the input though.

[JorgeM]

You can set a width and have your li elements display as inline-block. For example..

#navigation li
{
    display : inline-block;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
    width:100px;
}

[jstfsklh211]

display: table-cell; on the li

[kevwood]

thanks for the replies

JorgeM

I tried your method first and i added the following code

#navigation li{
    display : inline-block;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
    width : 10%;
}

this looks good but does not function entierly correctly with a width being set if the screen is made smaller the text overlaps and becomes unreadable. is there a way to stop this from happening?

jstfsklh211

i have not used the table cell function before i am now going to try and get that to work. would this have the same effect as above or as a width is not being set would i not have the problem with the overlapping text. I will post my code up shortly with it working or not what ever the case may be.

[kevwood]

jstfsklh211

i have updated my code to this

#navigation ul{
    list-style : none;
    display : table;
}

#navigation li{
    display : table-cell;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
}

now all the links have moved over to the left and have no spacing at all in between each of them.

is there not a way i can set the margins to auto so that they all space equally across the width of the #nav div which is set 100% width. i think i am really starting to hate css (again) haha.

[kevwood]

so i have changed my code and it seems to be working how i would like but please tell if my code is wrong in any way

#navigation ul{
    list-style : none;
}

#navigation li{
    display : inline;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
}

#navigation li a{
    display : inline-block;
    padding : .2em;
    text-decoration : none;
    font-weight : bold;
    color : #FFF;
}

also as i have never been to good with the css should i be doing all my sizes using the values as .2em above not sure if i have many px sizes in the code any way.

[JorgeM]

Your updated CSS seems OK. What is the issue or concern? there is no right or wrong way of doing it. Yes of course, some approaches are more effecient than others but if you are getting the desired results then I say its OK.

[kevwood]

yes i suppose so if it work it is all good. what about the sizing thing should i change all my sizes em from px to make sure evrything resizes in the same way if needed.

[JorgeM]

Px is fixed-size unit. One pixel is equal to one dot on the computer screen. Em is a scalable. An em is equal to the current font-size. You wouldnt use em as a unit of length unless you want it to scale as the font size scales since em is based upon font-size. you typically use % and em units in responsive web designs where as the dimensions and font-sizes change, you want to adjust the elements size and positions on the screen.

[kevwood]

i am trying to make it scalable due to the fact i have built the site once using a old small monitor and then when i moved it to a bigger srceen it all went to pot haha.

it ended up easier to restart the site than try to fix all the problems caused due to positioning (or i was to dishartened to try finish fixing it).

i have used % mostly but a few of my padding bits was done using px should i change this so it will resize for different monitors accordingly.

[JorgeM]

em and % are relative to other properties. So lets say you use em. And you change the font-size from 100% to 200%. That will affect the property that is using the em. So if your font-size is set to 12px and you have a padding of 0.5em, in essence, your padding is 6px; Then, if you change the font-size to 300%, your padding is now 18px;

[kevwood]

thanks for your help JorgeM you have given me some helpful information in understanding css a bit better.