SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Menu CSS link style overwrites page level links style..

    Hi There

    My CSS list menu is coming on nicely, but I have one small issue in that the style for my menu options is using being applied all over the whole page i.e I have this as my link style for my menu and because its generalised, its being use throughout the page:

    ul#navigation li a
    {
    display: block;
    text-decoration: none;
    padding: .25em;
    }
    a:link, a:visited { color: #609; }
    a:hover, a:active { color: #93c; }
    a:hover { background-color: #fff; }

    obviously the 'ahref' styles are being applied to the whole page instead of just the list menu. Is there some way I can ensure the link styles are only applied to the list menu. If yes how do I reference it within the menu etc. I need all other links within the page to be black with a brown rollover as its a content managed website and I don't want users choosing different link styles. I hope this makes sense?

    Many thanks in advance for your help

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ul#navigation li a:link, ul#navigation li a:visited { color: #609; }
    ul#navigation li a:hover, ul#navigation li a:active { color: #93c; }
    ul#navigation li a:hover { background-color: #fff; }

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I see, would I then use the following code to style ALL other links on the page?

    a:link{ color: #609; }
    a:hover { color: #609; }
    a:active { color: #93c; }
    a:visited { color: #609; }

    Many thanks again

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    yes / no
    a:link{ color: #609; }
    /*a:hover { color: #609; } no change on hover not needed */
    a:active { color: #93c; }
    /*a:visited { color: #609; } no change visited not needed */

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great!

    thanks again for your help

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool changing the style of the sub pop up menus

    One last question on this, How do I change the style of the pop up menu i.e the color and alignment. This is what my menu looks like and I need to the change the style of the sub links (pop up menu) i.e links 5 & 6? How do I create the new style (within teh CSS sheet) and then reference it from links 5 & 6 as below?

    <div class="menu">
    <div id="menulist">
    <ul id="menulist">
    <li id="menulist"><a href="#">menu 1 >></a></li>
    <li><a href="#">menu 2 >></a></li>
    <li><a href="#">menu 3 >></a></li>
    <li> <a href="#">menu 4 >></a>
    <ul>
    <li><a href="#">menu 5</a></li>
    <li><a href="#">menu 6</a></li>
    </ul>
    </li>
    <li><a href="#">menu 7 >></a></li>

    </ul>
    </div>
    </div>


    Many thanks in advance for your help

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you can have only one id="menulist" not 3

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	#menulist li a{color:#ff0000;}
    	#menulist li ul li a{color:#009900;}
    	#menulist li a:hover{color:#0000ff; } 
    	#menulist li ul li a:hover{color:#ffff00;}
    	</style>
    </head>
    <body>
    <div class="menu"> 
    <div id="menulistx"> 
    <ul id="menulist">
    <li id="menulistxx"><a href="#">menu 1 ></a></li>
    <li><a href="#">menu 2 >></a></li>
    <li><a href="#">menu 3 >></a></li>
    <li><a href="#">menu 4 >></a> 
    <ul>
    <li><a href="#">menu 5</a></li>
    <li><a href="#">menu 6</a></li>
    </ul>
    </li>
    <li><a href="#">menu 7 >></a></li>
    
    </ul>
    </div>
    </div>
    
    </body>
    </html>

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, that works now! I can change the colour etc...thanks!

    I'm not sure whether you know the answer to this query as well, but I would like to place a 1px border around each of the links (each row in pop up mnu). I know to add a border, I would do the following:

    border-bottom: 1px solid #24170c;
    border-top: 1px solid #24170c;
    border-left: 1px solid #24170c;
    border-right: 1px solid #24170c;

    However when the menu appears the bottom border seems to double up and seems to become 2px high. I think the rows float next to each other (vertically), which is the reason why it looks as though the bottom border is 2px in height. Is there any way I can make the border 1px all around? Maybe I could overlap the bottom border with the link below it, so that it would look like the border gap was 1px high- although I'm not sure if this is possible or even if its feasible? -any thoughts on how I might solve this issue?

    many thanks again for all your help, it is much appreciated!

  9. #9
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    border:1px solid #24170c;border-bottom:none;

    on last element
    .x{border-bottom: 1px solid #24170c;}

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great! where do I place the following code:

    on last element
    .x{border-bottom: 1px solid #24170c;}

    within my CSS as it doesn't seem to be working at the moment. Do I need to change the value .x to something related to my document?

    many thanks

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    give the class the proper power to cascade the border none
    #menulist .x{border-bottom: 1px solid #24170c;}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	#menulist li a{color:#ff0000;border:1px solid #24170c;border-bottom:none;text-decoration:none;display:block;width:100px;}
    	#menulist li ul li a{color:#009900;}
    	#menulist li a:hover{color:#0000ff; } 
    	#menulist li ul li a:hover{color:#ffff00;}
    	
    	#menulist .x{border-bottom: 1px solid #24170c;}
    	</style>
    </head>
    <body>
    <div class="menu"> 
    <div id="menulistx"> 
    <ul id="menulist">
    <li id="menulistxx"><a href="#">menu 1 ></a></li>
    <li><a href="#">menu 2 >></a></li>
    <li><a href="#">menu 3 >></a></li>
    <li><a href="#">menu 4 >></a> 
    <ul>
    <li><a href="#">menu 5</a></li>
    <li><a href="#">menu 6</a></li>
    </ul>
    </li>
    <li><a href="#" class="x">menu 7 >></a></li>
    
    </ul>
    </div>
    </div>
    
    </body>
    </html>


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
  •