Reputation: 583
This is the html code for the hyperlinks. I wanted to have a slight gap between the texts. Like between 'Menu' and 'Contact Us' for instance. Thanks in advance.
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
<a href="ContactUs.html">Contact Us</a></br>
<a href="About Us.html">About Us</a></br>
<a href="TC.html">Terms & Conditions</a></br>
<a href="jobs.html" target="_blank">Jobs</a></br>
<a href="order.html">Your Order</a>
</div>
I set the line-height property in CSS as follows:
#navbar {
line-height:2em;
}
Upvotes: 6
Views: 9692
Reputation: 7788
you should define a line-height in anchor not in navbar id see the example code:-
HTML
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
<a href="ContactUs.html">Contact Us</a></br>
<a href="About Us.html">About Us</a></br>
<a href="TC.html">Terms & Conditions</a></br>
<a href="jobs.html" target="_blank">Jobs</a></br>
<a href="order.html">Your Order</a>
CSS
#navbar a {
color: red;
line-height: 33px;
text-decoration: none;
}
And the other proper method is i am mentioning below you should make navigation in proper ul li list items like mentioned below:-
HTML
<div id="navbar">
<ul>
<li><a class="fb" href="menu.html">Menu</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="TC.html">Terms & Conditions</a></li>
<li><a href="jobs.html" target="_blank">Jobs</a></li>
<li><a href="order.html">Your Order</a></li>
</ul>
</div>
CSS
#navbar li {
display:block;
list-style-type:none;
line-height:25px;
}
#navbar li a {
text-decoration:none;
color:red;
}
#navbar li a.fb {
text-decoration:none;
color:green;
}
#navbar li a:hover {
text-decoration:none;
color:blue;
}
demo:- http://jsfiddle.net/XZ9w7/3/
Upvotes: 3
Reputation: 11731
You have to apply the style to the anchor, and add display:block;
to your CSS to make this work:
#navbar a{
line-height: 2em;
display: block;
}
Amongst some other fixes in your code you should end up with something like in this JSFiddle.
Upvotes: 5
Reputation: 6656
#navbar a{ display:block;line-height:30px;}
Remove
demo http://jsfiddle.net/psP7L/1/
Upvotes: 1
Reputation: 303559
Don't use <br/>
(which you've mistyped consistently) and line-height
, use a list and adjust the margins on the list items.
<ul id="navbar">
<li><a class="fb" href="menu.html">Menu</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="TC.html">Terms & Conditions</a></li>
<li><a href="jobs.html" target="_blank">Jobs</a></li>
<li><a href="order.html">Your Order</a></li>
</ul>
#navbar { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }
Proper, semantic markup first; then get the styling right.
However, to answer your question, it does "work", it's just that line-height
on display:inline
elements behaves differently per the spec than it does for display:block
elements.
Upvotes: 8