Menu
I started creating my first web-page with HTML5 and some CSS styles in it. I have faced a problem i was hoping some could clear out for me.
I'm trying to make space between my menu items like:
ABOUT HELP CONTACT
I have found a simple method in how to do that, but it does not do the job good enough. As an example i have 2 menus created out of an nav element like this:
<nav class="nav2">
<li><a href="Højtalere.html">Stereo</a></li>
<li><a href="Forstærkere.html">Højtalere</a></li>
<li><a href="åbningstider.html">TV og hjemmebiograf</a></li>
<li><a href="Computer.html">Streaming</a></li>
<li><a href="Tilbehør.html">Tilbehør</a></li>
<li><a href="Kabler.html">Kabler</a></li>
</nav>
<nav class="nav3">
<li><a href="login.html" style="display: inline;">Text</a></li>
<li><a href="support.html" style="display: inline;">Text</a></li>
<li><a href="???.html" style="display: inline;">Text</a></li>
</nav>
Right now i have made the space with this css code:
li {
display: inline;
margin-right: 20px;
}
The problem is that it makes the same space for all the li elements, how do i code it so i can control lets say the nav2 should have margin-right: 10px, but the other should have 40px in space between?
Hope you guys understand what i'm trying to do
200
I would suggest you give each nav element different classes (or Id's) so you can then target each one separately in your CSS and apply your desired styling. For example you can give the horizontal nav a class="horizontal-nav" and the vertical nav a class="vertical-nav".
The simplest way to get the effect you are looking for (for any number of buttons) is to use a table with a 100% width. A more complicated way is to give each button an equal percentage width such that with the number of buttons it adds up to 100%. You have 5 buttons, so you can put width:20%; on #nav ul li .
You can add space in HTML to any lines of text. You can use the HTML entity to create blank spaces in both paragraph text and text in tables, for example. Since there is no blank space keyboard character in HTML, you must type the entity for each space to add.
simply:
li {
margin-right: 40px;
}
.nav2 li {
margin-right: 10px;
}
You can use the following:
.nav2 li {
margin-right: 20px;
}
li {
display: inline;
margin-right: 40px;
}
Like this you set different rule to li elements that has ancestor with class .nav2.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
