Member Avatar for 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.

Edited by kevwood
  • 4 Contributors
  • 13 Replies
  • 179 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kevwood

Dani AI

Generated

Short summary of useful approaches and why some of the earlier attempts behaved the way they did: ’s overlap came from fixed/percent widths being forced while the text stayed large; ’s fixed-width idea will work until the viewport can’t fit those boxes; ’s table-cell aligns nicely but doesn’t give good wrapping control; ’s margin approach cannot automatically distribute space evenly. A modern, simple solution is CSS Flexbox: it evenly distributes items and, with a couple of extras, prevents labels from squashing into each other.

Example — equal columns that stay readable (no fixed px widths):

#navigation {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
  gap: 0.5rem;               /* controls spacing between items */
}

#navigation li {
  flex: 1 1 0;               /* grow/shrink equally */
  text-align: center;
  min-width: 80px;          /* prevents extreme squashing */
}

#navigation a {
  display: block;           /* larger hit area */
  padding: 0.6rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* truncates long labels instead of overlapping */
  box-sizing: border-box;
}

Responsive fallback to avoid tiny links on phones: allow wrapping or switch to a stacked layout at a breakpoint.

#navigation { flex-wrap: wrap; }

@media (max-width: 640px) {
  #navigation { justify-content: center; }
  #navigation li { flex: 1 1 100%; }   /* stack full-width items */
  #navigation a { padding: 0.75rem; }
}

Notes and cautions: use min-width and flex-wrap (or a mobile breakpoint) to prevent unreadable labels; gap is preferable to per-item margins for consistent spacing; display:block on the anchor improves click/tap targets. For semantic markup prefer a <nav> wrapper with an aria-label for accessibility. Flexbox is widely supported and removes the need for fragile fixed-width math that caused the overlap.

Recommended Answers

All 13 Replies

Member Avatar for elsunhoty

You can Use margin

#navigation li{

    margin-left : 10 px ;
}
Member Avatar for 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.

Member Avatar for 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;
}
Member Avatar for jstfsklh211

display: table-cell; on the li

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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;

Member Avatar for kevwood

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.