Solved

missing lines in nav bar

Posted on 2013-11-26
6
285 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39679186
Add to .nav ul {}

border-bottom: 2px solid #FFFFFF;
0
 

Author Comment

by:nsitedesigns
ID: 39679206
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
ID: 39679214
My bad it should be .nav > li {}
Line 132 again.
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:nsitedesigns
ID: 39679268
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
ID: 39679285
> 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
ID: 39679293
man this coding can get complicated eh?  Thanks for the explanation!
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

635 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