SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding unique ID's to CSS code...

    This is my CSS code:

    HTML Code:
    /* Menu */
     #navigation ul {
     	margin: 0;
     	padding: 0;
     	list-style: none;
     }
     #navigation ul li {
     	position: relative;
     	float: left;
     	white-space:nowrap;
     }
     /*
     * html ul li {
     	width: 1px;
     }
     */
     li ul {
     	position: absolute;
     	left: 0; /* Set 1px less than menu width */
     	top: auto;
     	display: none;
     	width:1%;
     	}
     
     /* mac hide \*/
     * html li a {
     	width:1%
     }
     li ul li {
     	float:none
     }
     
     /* Styles for Menu Items */
     ul li a {
     	display: block;
     	text-decoration: none;
     	color: #777;
     	}
     
     /* commented backslash mac hiding hack \*/ 
     * html ul li a {
     	height:1%
     }
     
     /* Sub Menu Styles */
     li ul li a { 
     	padding: 2px 5px; 
     	} 
     
     /* The magic */
     li:hover ul, li.over ul { 
     	display: block; 
     }
    The problem with the above code is that it effects all the ul's and li's on the entire page.. not just the menu... however I only want it to effect one or both of these tags:

    HTML Code:
    <div id="navigation">
     <ul id="nav">
    So it would need to be something like #navigation li ul {... but I can't figure it out...

    Any ideas? The site it is on is http://www.oe-design.com/

  2. #2
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't really understand your question, but hopefully you'll find the solution in my post

    HTML Code:
     <ul id="navcontainer">
    <li id="navcontainer"></li>
    <ul>
    Code:
    #navcontainer ul, #navcontainer li {
    }
    Ofcourse you can't specify the same id twice.

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    li ul {
     	position: absolute;
     	left: 0; /* Set 1px less than menu width */
     	top: auto;
     	display: none;
     	width:1%;
     	}
     
     /* mac hide \*/
     * html li a {
     	width:1%
     }
     li ul li {
     	float:none
     }
     
     /* Styles for Menu Items */
     ul li a {
     	display: block;
     	text-decoration: none;
     	color: #777;
     	}
     
     /* commented backslash mac hiding hack \*/ 
     * html ul li a {
     	height:1%
     }
     
     /* Sub Menu Styles */
     li ul li a { 
     	padding: 2px 5px; 
     	} 
     
     /* The magic */
     li:hover ul, li.over ul { 
     	display: block; 
     }
    ...do any of the selectors above look like they're targeting something unique to you?

  4. #4
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I didn't explain very well...

    Quote Originally Posted by Egor
    ...do any of the selectors above look like they're targeting something unique to you?
    No they don't... That's my problem...

    I tried to add the #navigation to the code but I must have been putting it in the wrong place...

    I thinkl this is what I tried but ti didn't work:

    Code:
    #navigation li ul {
    	 position: absolute;
    	 left: 0; /* Set 1px less than menu width */
    	 top: auto;
    	 display: none;
    	 width:1%;
    	 }
     
     /* mac hide \*/
     #navigation * html li a {
    	 width:1%
     }
     #navigation li ul li {
    	 float:none
     }
     
     /* Styles for Menu Items */
     #navigation ul li a {
    	 display: block;
    	 text-decoration: none;
    	 color: #777;
    	 }
     
     /* commented backslash mac hiding hack \*/ 
     #navigation * html ul li a {
    	 height:1%
     }
     
     /* Sub Menu Styles */
     #navigation li ul li a { 
    	 padding: 2px 5px; 
    	 } 
     
     /* The magic */
    #navigation li:hover ul, #navigation li.over ul { 
    	 display: block; 
     }
    Am I making sense?

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to be getting your IE hacks wrong.
    Code:
    #navigation * html li a
    This will never match anything. You're specifying an A element within an LI element within an HTML element withing a grand-child or great grand-child etc of an element with id="navigation".

    What you want is probably this:
    Code:
    * html #navigation li a
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tommy,

    What about the other ones? I've tried some many combinations but they don't work either... Any suggestions?

    Do you know of any other CSS menu script that are coded correctly. I got this code off a website...

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd have to make the corresponding change to all selectors with the IE hack, of course. '* html' must come first.

    Quote Originally Posted by iTechno
    Ofcourse you can't specify the same id twice.
    Of course you can.
    That's the proper syntax.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he meant you can't attach an ID to two different elements like he has in his example.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ... OK. From the quote I got the impression that he said that the CSS syntax was wrong.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK... I'm getting somewhere... Finally... Thanks for you help so far

    I tried adding #navigation to this peice of style sheet:

    Code:
    /* Styles for Menu Items */
    #navigation ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	}
    But that didn't work... Any ideas? It opriginally looked like this:

    Code:
    /* Styles for Menu Items */
    ul li a {
     	display: block;
     	text-decoration: none;
     	color: #777;
     	}

  11. #11
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I figured it out... Can you check my css to make sure everything is correct with the #navigation placement?

    Code:
    /* Menu */
    #navigation ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #navigation ul li {
    	position: relative;
    	float: left;
    	white-space:nowrap;
    }
    /*
    * html #navigation ul li {
    	width: 1px;
    }
    */
    #navigation li ul {
    	position: absolute;
    	left: 0; /* Set 1px less than menu width */
    	top: auto;
    	display: none;
    	width:1%;
    	}
    
    /* mac hide \*/
    * html #navigation li a {
    	width:1%
    }
    #navigation li ul li {
    	float:none
    }
    
    /* Styles for Menu Items */
    #nvaigtaion li ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	}
    
    /* commented backslash mac hiding hack \*/ 
    * html #navigation ul li a {
    	height:1%
    }
    
    /* Sub Menu Styles */
    #navigation li ul li a { 
    	padding: 2px 5px; 
    	} 
    
    /* The magic */
    #navigation li:hover ul, #navigation li.over ul { 
    	display: block; 
    }

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mr. Tech
    Code:
    /* Styles for Menu Items */
    #navigation ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	}
    That will only style sub-menu items. The selector selects anchors within list items within unordered lists within the element with id="navigation".

    If you want this rule to appy to the top-level elements as well, remove the sub-list selector:
    Code:
    #navigation li a {...}
    Birnam wood is come to Dunsinane


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
  •