SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My menu CSS is bad - I know - but I can't figure out how to fix it!!

    http://www.stoneycreekwebdesign.com/...ingstarted.php

    My gray colored submenu uses the subnav division to format it. I understand that I cannot surround the UL with this division. I tried applying the subnav to the UL as in <ul id="subnav">, but it looses the formatting. I cannot figure out how to style this submenu with CSS and have it validate.

    As usual, I am missing something here? Any suggestions on what I am missing?
    Thanks again to all...this forum is terrific.

    - dwz

    Code:
    <div id="subnav">
    			<ul>
    				<div id="subnav"><li><a href="security.php" title="Home Security" class="xx_security">Home Security</a></li>
    				<li><a href="connected.php" title="Structured Wiring" class="xx_connected">Structured Wiring</a></li>
    				<li><a href="network.php" title="Home Network" class="xx_network">Home Network</a></li>
    				<li><a href="rock.php" title="Multi-Room Audio" class="xx_rock">Multi-Room Audio</a></li>
    				<li><a href="theatre.php" title="Home Theatre" class="xx_theatre">Home Theatre</a></li>
    				<li><a href="sightsound.php" title="Audio/Video Components" class="xx_sightsound" >Audio/Video Components</a></li>
    				<li><a href="eye.php" title="Intercom & Surveillance" class="xx_eye">Intercom & Surveillance</a></li>
    				<li><a href="clean.php" title="Central Vac"  class="xx_clean">Central Vacuum</a></li></div>
    			</ul>
    		</div>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi again,

    I guess you didn't understand my advice in the other thread, as I see the lists are still incorrectly nested. I figured it would just be easier to do the thing and let you see what changes were made:

    Your new /* SUBNAV */ section:
    Code:
    /*  SUBNAV  */
    #subnav {
    	background-color:#E6E6E6;
    	padding: 2px 0 0 0;
    	margin: 0;
    	width:175px;
    	color: #D81F2A;
    	border: 0px solid blue;
    
    }
    
    #subnav li {
    	color: #D81F2A;
    	list-style: none;
    	color: #D81F2A;
    	line-height:10px;
    }
    
    #subnav li a {
    	color: #666666;
    	letter-spacing:0px;
    	background-color:#E6E6E6;
    	text-decoration: none;
    	font-size:10px;
    	line-height:10px;
    	padding:0px 0 0 5px;
    	width:170px;
    }
    #subnav li a:hover {
    	color: #666666;
    	background-color:#E6E6E6;
    	text-decoration: underline;
    	font-size:10px;
    	width:170px;
    }
    And the semantically correct Sub-Menu:
    Code:
    <ul id="menu">
    	<li><a href="index.php" title="Vitex Advanced Home Wiring - Home" class="index">Home</a></li>
    	<li><a href="gettingstarted.php" title="Vitex Advanced Home Wiring - What We Offer" class="started">What We Offer</a>
    			<ul id="subnav">
    				<li><a href="security.php" title="Home Security" class="xx_security">Home Security</a></li>
    				<li><a href="connected.php" title="Structured Wiring" class="xx_connected">Structured Wiring</a></li>
    				<li><a href="network.php" title="Home Network" class="xx_network">Home Network</a></li>
    				<li><a href="rock.php" title="Multi-Room Audio" class="xx_rock">Multi-Room Audio</a></li>
    				<li><a href="theatre.php" title="Home Theatre" class="xx_theatre">Home Theatre</a></li>
    				<li><a href="sightsound.php" title="Audio/Video Components" class="xx_sightsound" >Audio/Video Components</a></li>
    				<li><a href="eye.php" title="Intercom &amp; Surveillance" class="xx_eye">Intercom &amp; Surveillance</a></li>
    				<li><a href="clean.php" title="Central Vac"  class="xx_clean">Central Vacuum</a></li>
    			</ul>
    		</li> 
    	<li><a href="about.php" title="Vitex Advanced Home Wiring - About Vitex" class="about">About Vitex</a></li>
    	<li><a href="contact.php" title="Vitex Advanced Home Wiring - Home Audio" class="contact">Contact Us</a></li>
    </ul>
    Basically, apart from one or two style adjustments, all I changed was the nesting (which I suggested in your other earlier thread), removed the <div> wrapper as it was pointless, and modified the selectors in the stylesheet to target the newly ID'd <ul>.

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Egor. Without realizing the trouble with my SUBNAV division I was on an endless dog-chasing-tail trail with trying to correct the way it was applied ...

    Help appreciated. I read your other comments on the other post, but could not figure out the issue.

    Once again, my thanks.

    - dwz


Bookmarks

Posting Permissions

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