Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    112
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Navigation inheriting paragraph styles (css)

    Working on a new site and basically all my navigation li (list) properties are inheriting the (regular) p and a:link properties and I don't know why. See URL

    http://backstageweb.net/Salon/index2.htm (css validates)

    I want a horizontal navbar, nav css is:

    Code:
    #nav {
    	font-size:130%;
    	margin:50px 0 0 50px;
    	}
    
    #nav ul {
    	list-style-type:none;
    	margin:0;
    	}
    
    .nav li {
    	display:inline; /*not displaying correctly*/
    	}
    
    .nav li a, .nav li a:visited {
    	float:left;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold; /*not displaying correctly*/
    	text-transform:uppercase; /*not displaying correctly*/
    	color:#666; /*not displaying correctly*/
    	padding:0 15px;
    	text-decoration:none;
    	}
    
    .nav li a:hover {
    	color:#000;
    	text-decoration:underline;
    	}
    What do I need to do get my nav styles to display correctly?

    Thanks,

    John

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi John

    First, you have both the div and the ul with id="nav". You should be able to remove the div altogether.

    Things aren't quite working as you want them because in your css you have

    Code:
    .nav li a{...etc ...}
    This will apply to any li element within a parent element having class "nav". There aren't any of these. This should either be

    Code:
     li.nav a{...etc ...}
    which applies to li elements having class "nav" or

    Code:
     #nav li a{...etc ...}
    which applies to li elements having a parent element with id "nav".

    Hope that makes sense for a quick fix. I'd suggest that it may be a bit confusing to have both a class and an id of the same name and it may be easier to understand if you don't do this. Here's a suggestion to make things clearer

    html:note ul has an id and li elements have neither class or id
    Code:
    <ul id="nav">
    	  <li><a href="#">Home</a></li>
    	  <li><a href="#">About</a></li>
    	  <li><a href="#">Portfolio</a></li>
    	  <li><a href="#">Info</a></li>
    	 </ul>
    css:
    Code:
    #nav {
    	font-size:130%;
    	margin:50px 0 0 50px;
    	list-style-type:none;
    	}
    
    #nav li {
    	display:inline; 
    	}
    
    #nav li a, #nav li a:visited {
    	float:left;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold; 
    	text-transform:uppercase; 
    	color:#666; 
    	padding:0 15px;
    	text-decoration:none;
    	}
    
    #nav li a:hover {
    	color:#000;
    	text-decoration:underline;
    	}

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    112
    Thanks
    32
    Thanked 0 Times in 0 Posts
    SB,

    Thanks so much for your thoughtful reply. I haven't fixed it yet but I get it. : ) Navigation and LISTS!! These are the two main areas of css that I don't fully understand the relationships of what needs to be coded where.

    Thanks again very much for helping me!

    John


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •