Css navigation bar (css&html) issue

Question

So, i have this navigation bar:

Nav bar without borders

I want to put a border around it, but it becomes bigger, which i do not like:

Nav bar with borders

I try to set height of the navigation bar, but the links do not fit in anymore, and there's no way to put them back in:

Nav bar with height set

Please help.

Code(CSS):

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
}
#navLi {
    display: inline-block;
    margin-right: 10px;
}
.navA {
    color: #000000;
}

Code(HTML):

<div id="navigation">
    <ul id="navUl">
        <li id="navLi"><a class="navA" href="#"><p>Page d'accueil</p></a></li>
        <li id="navLi"><a class="navA" href="#"><p>Evénements</p></a></li>
        <li id="navLi"><a class="navA" href="#"><p>Contactez nous</p></a></li>
    </ul>
</div>

Edit: I get this if i display navLi as block and Navigation as inline-block: enter image description here

If you display #navLi as a block and #navigation as a inline-block, what result do you get? — Robin
– Robin, Commented Jun 28, 2015 at 21:05

jaunt · Accepted Answer · 2015-06-28 21:15:46Z

1

The easiest option would be to add box-sizing: border-box; to #navigation but you could also try using margin:-5px;. I fixed the semantics of your example and added margin:-5px to it. Hope this helps.

#navigation {
  margin: 0 auto;
  background-color: #FFFFFF;
  //font-family: lkth;
  border: double;
  border-width: 5px;
  border-color: #663D07;
  border-radius: 10px;
  height: 40px;  
  list-style-type:none;
}
#navigation  ul {
  margin:-5px;
}
#navigation li {
  display: inline-block;
  margin-right: 10px;  
}
#navigation a {
  color: #000000;
}

<div id="navigation">
  <ul>
    <li><a href="#"><p>Page d'accueil</p></a></li>
    <li><a href="#"><p>Evénements</p></a></li>
    <li><a href="#"><p>Contactez nous</p></a></li>
  </ul>
</div>

answered Jun 28, 2015 at 21:15

jaunt

5,1294 gold badges35 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jojo01 Over a year ago

This worked, thank you! I wonder though, why did the links not get back in when i tried to put margin-bottom for the li elements.

jaunt Over a year ago

Ah that's probably because you needed to use margin-top instead. However it's just easier to correct margin as a whole to make it easier to position elements later on :)

dfsq · Accepted Answer · 2015-06-28 21:14:28Z

0

Try to set box-sizing: border-box; to the navigation. This way border should not add up to the block dimensions.

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    /* font-family: lkth; */
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
    box-sizing: border-box;
}

answered Jun 28, 2015 at 21:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

Jojo01 Over a year ago

Does not work, the links just get farther down from the navigation bar.

dfsq Over a year ago

Then check jaunt's answer with additional margin tweak.

user3590094 · Accepted Answer · 2015-06-28 21:19:29Z

0

Here is your code edited:

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
}
#navUl{
 margin: 0 auto;
 width: 500px;
 padding-top: 10px;
 }
#navLi {
   display: inline-block; 
   height: 40px;  
}

<div id="navigation">
   <ul id="navUl">
       <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li>
       <li id="navLi"><a class="navA" href="#">Evénements</a></li>
       <li id="navLi"><a class="navA" href="#">Contactez nous</a></li>
   </ul>
</div>

answered Jun 28, 2015 at 21:19

user3590094

1191 gold badge2 silver badges11 bronze badges

Comments

Mathijs Rutgers · Accepted Answer · 2015-06-28 21:19:51Z

You could do something like this:

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
    height: 40px;
    display: block;

}
#navigation li {
    margin: 0 10px 0 0;
    float: left;
    padding: 0;
    list-style: none;
    line-height: 10px;

}
#navigation a {
    color: #000000;
}

<div id="navigation">
    <ul id="navUl">
        <li><a href="#">Page d'accueil</a></li>
        <li><a href="#">Evénement</a></li>
        <li><a href="#">Contactez nous</a></li>
    </ul>
</div>

You can target your li and a in your navigation directly, you don't need to specify classes for that. I added list-style: none, because you don't want your list with bullets. Also replaced display: inline-block with float: left, which basically does the same thing. The margin is a shorthand for margin-top: 0px, margin-right: 10px, margin-bottom: 0px and margin-left: 0px;

As a last touch, the line-height: 10px; this lines your links out more in the middle.

Also a small note, id's can't be used more than once! An id is always unique, if you want to reuse it use class instead.

aleksandar · Accepted Answer · 2015-06-28 21:21:34Z

There is no reason to put the paragraphs inside the link tag.
The paragraph tag has some margin by default which makes the navigation bar higher.
Also the unordered list has margin by default which makes it even more higher.
So the easiest way would be to remove the paragraph tag.
Even if that's not enough you can remove the margin of the unordered list.
Take a look at this JSFiddle:

#navigation {
    margin: 0 auto;
    background-color: #FFFFFF;
    //font-family: lkth;
    border: double;
    border-width: 5px;
    border-color: #663D07;
    border-radius: 10px;
}
#navLi {
    display: inline-block;
    margin-right: 10px;
}
/* #navUl {
    margin: 0;
} */

/* If thats not enought you can uncomment the above code */
.navA {
    color: #000000;
}

<div id="navigation">
    <ul id="navUl">
        <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li>
        <li id="navLi"><a class="navA" href="#">Evénements</a></li>
        <li id="navLi"><a class="navA" href="#">Contactez nous</a></li>
    </ul>
</div>

Collectives™ on Stack Overflow

Css navigation bar (css&html) issue

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related