Solved

missing lines in nav bar

Posted on 2013-11-26
6
232 Views
Last Modified: 2013-11-26
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
0
Comment
Question by:nsitedesigns
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Add to .nav ul {}

border-bottom: 2px solid #FFFFFF;
0
 

Author Comment

by:nsitedesigns
Comment Utility
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;
}

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
My bad it should be .nav > li {}
Line 132 again.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:nsitedesigns
Comment Utility
That fixed it.  What does  the >li mean?  That is a new css code that was provided to me.  I never used that before.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
> 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>
0
 

Author Comment

by:nsitedesigns
Comment Utility
man this coding can get complicated eh?  Thanks for the explanation!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now