Solved

missing lines in nav bar

Posted on 2013-11-26
6
253 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
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS SASS 4 35
message Alert on an empty search 10 23
How can I make a div layout like the one in the image 2 27
CSS DIV Height in Percent 1 9
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

820 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