nsitedesigns
asked on
missing lines in nav bar
How do I add bottom border so that my tablet and mobile pages have a white line betwen nav buttons. Right now, there is none. I put red arrows in where I want white 1px border to appear.
http://screencast.com/t/fzLzpvIoV
http://nsitedesigns.com/nsitedesigns/wrb/test.html
http://screencast.com/t/fzLzpvIoV
http://nsitedesigns.com/nsitedesigns/wrb/test.html
ASKER
I did add to screen_styles.css linke 72 and it display in desktop but not for tablet or phone. I thought that if i DON'T make a note on changing something for a small or medium layout, that it will carry that design over to all 3 sizes. Was I wrong? Where did I mess up?
.nav ul {
list-style: none;
width: 9em;
border-bottom: 1px solid #FFF;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That fixed it. What does the >li mean? That is a new css code that was provided to me. I never used that before.
> means only immediate children.
If you had the following it would only apply to the LI's I've indicated as they are immediate children
<style>
ul > li {width:100px}
</style>
<ul>
<li> // This is an immediate child of UL
<ul>
<li> // This is not a immediate child
</li>
</ul>
</li>
<li> // This is an immediate child of UL
</li>
<ul>
If you had the following it would only apply to the LI's I've indicated as they are immediate children
<style>
ul > li {width:100px}
</style>
<ul>
<li> // This is an immediate child of UL
<ul>
<li> // This is not a immediate child
</li>
</ul>
</li>
<li> // This is an immediate child of UL
</li>
<ul>
ASKER
man this coding can get complicated eh? Thanks for the explanation!
border-bottom: 2px solid #FFFFFF;