Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I'm a CSS newbie,today i saw an article after:
http://css.maxdesign.com.au/listamatic/horizontal05.htm
it is about how to create a navbar,use the ul - li - a structure...
but i think set A 's border-bottom as white cannot override UL's border-bottom...they are in difference block
my english is so poor that can't tell clearly,sorry
i refer to why the #current selector can hide the UL's bottom border.
ThanQ -
The A's border-bottom is overriding the UL's border-bottom in that example. Can you show us your CSS and HTML that you're having the problem with so we can help you better?
-
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
------
the code above run very well,but i just do not understand...
How the #current works?
Please help me... -
The reason the A's border-bottom overrides the UL's border-bottom is because an A element's display is inline, while a UL's display is block. The height of an inline element can exceed the height of the block element that contains it when you add padding and/or borders to the inline element, making the inline element appear to be on top of the block element. That is what is happening here... since #navlist li a#current is inline, it's "border-bottom: 1px solid white" covers the containing #navlist "border-bottom: 1px solid #778;"
Hopefully that makes sense and was what you were asking. -
Thank you for your valuable answer!
Did you mean that an inline elem didn't have border/margin/padding normally,when we add it,the width or height increase while the content keep in orginal position,so cover the parent element.
Right?
That's why the #navlist and #navlist li a all have same 3px padding-bottom,don't it? -
Yes, you've got it.
Although technically, the margin doesn't affect the height & width, only the border and padding affect the visual space the element occupies. -
In the case of it, margin didn't affect,but does it has same rule as padding/border? Does it really "doesn't affect the height"? On the view,they have no difference of course.
I was told that a box's height/width comprise content+margin+padding(mozilla box model) ,Does that mean the margin of such LI exsited but doesn't affect the view?
Wake up...a beautiful morning,Thanq for your patient -
That's half correct, at least as far as inline elements go. If you apply a 50px margin to an inline element (I'm using a large number to make the effect more obvious), it does add 50px to the left and right of its box model, increasing the width by 100px (50px + 50px). However, the height of the box model of the inine element is unaffected.
1 to 8 of 8