SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    colour coding navigation

    I am trying to achieve a colour coded page id within the main navigation. (so users can tell where they are within the site.)
    But for some reason the following code doesn't render correctly in IE & Opera - yet in FF and Netscape it is perfect...

    Can anyone help me?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    * {padding:0;margin:0;}
    html,body{margin:0;padding:0}
    
    body {
    	padding:20px 0;
    	margin:0;
    	background:#fff;
    	color: #666666;
    	text-align:center;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    }
    
    	a:link               { color:#999999; text-decoration:underline; }
      	a:hover              { color:#999999; text-decoration:underline; }
      	a:visited            { color:#999999; text-decoration:underline; }
      	a:visited:hover      { color:#999999; text-decoration:underline; } 
    
    
    /* id selectors design layout */
    
    #outer{
    	width:768px;
    	background-color: #fff;
    	color: #666666;
    	margin-left:auto;
    	margin-right:auto;	
    	text-align:left;
    	position:relative;
    }
    
    #left	{
    	float:left;
    	width:139px;
    	height: 350px;
    	background-color: #CCCC00;
    }
    
    #colourbox	{
    	height: 10px;
    	border-bottom: 12px solid #fff;
    	background-color: #CCCC00;
    }
    
    #right	{
    	float:right;
    	width:616px;
    	height: 350px;
    	border:1px solid #ccc;
    }
    
    /* id descendants */
    
    ul#mainnav{
    	margin:0 0 0 150px;
    	padding:0;
    	list-style:none;
    	width:618px;
    	height:20px;
    	position:relative;
    }
    
    ul#mainnav li {
    	display:inline;
    	padding:5px 0;
    	text-align:left;
    }
    
    /* mac hide \*/
    * html ul#mainnav li {float:left}
    * html ul#mainnav ul li {display:inline;padding:0;}
    /* end hide */
    
    ul#mainnav li a{
    	height:20px;
    	width:auto;
    	text-decoration:none;
    	color:#999999;
    	padding:0 12px;
    	font-weight:bold;
    	border-right:1px solid #ccc;
    }
    
    ul#mainnav li a.end {border-right:0px solid #000; padding-right: 0;}/*remove last border from mainlist */
    ul#mainnav li a.beginning {padding-left: 20px;}/*remove first border from mainlist */
    
    body.section1 ul#mainnav li.one a:link, ul#mainnav li.one a:hover, ul#mainnav li.one a:visited {color:#cccccc;}
    body.section2 ul#mainnav li.two a:link, ul#mainnav li.two a:hover, ul#mainnav li.two a:visited {color:#99CCFF;}
    body.section3 ul#mainnav li.three a:link, ul#mainnav li.three a:hover, ul#mainnav li.three a:visited {color:#279321;}
    body.section4 ul#mainnav li.four a:link, ul#mainnav li.four a:hover, ul#mainnav li.four a:visited {color:#CC6600;}
    body.section5 ul#mainnav li.five a:link, ul#mainnav li.five a:hover, ul#mainnav li.five a:visited {color:#993399;}
    body.section6 ul#mainnav li.six a:link, ul#mainnav li.six a:hover, ul#mainnav li.six a:visited {color:#CCCC00;}
    body.section7 ul#mainnav li.seven a:link, ul#mainnav li.seven a:hover, ul#mainnav li.seven a:visited {color:#CC3366;} 
    
    -->
    </style>
    </head>
    <body class="section6"> 
    <div id="outer"> 
      <ul id="mainnav"> 
        <li class="one"><a href="#" class="beginning">Link 1</a></li> 
        <li class="two"><a href="#">Link 2</a></li> 
        <li class="three"><a href="#">Link 3</a></li> 
        <li class="four"><a href="#">Link 4</a></li> 
        <li class="five"><a href="#">Link 5</a></li> 
        <li class="six"><a href="#">Link 6</a></li> 
        <li class="seven"><a href="#" class="end">Link 7</a></li> 
      </ul> 
      <div id="left"> 
        <div id="colourbox"></div> 
      </div> 
      <div id="right"></div> 
    </div> 
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I spotted a problem with the CSS: the declarations for link and visited are different for the mainnav items. This (with body.section* removed from the beginning of each line) gave more predicable results:
    HTML Code:
    ul#mainnav li.one a:link, ul#mainnav li.one a:hover, ul#mainnav li.one a:visited {color:#cccccc;}
    ul#mainnav li.two a:link, ul#mainnav li.two a:hover, ul#mainnav li.two a:visited {color:#99CCFF;}
    ul#mainnav li.three a:link, ul#mainnav li.three a:hover, ul#mainnav li.three a:visited {color:#279321;}
    ul#mainnav li.four a:link, ul#mainnav li.four a:hover, ul#mainnav li.four a:visited {color:#CC6600;}
    ul#mainnav li.five a:link, ul#mainnav li.five a:hover, ul#mainnav li.five a:visited {color:#993399;}
    ul#mainnav li.six a:link, ul#mainnav li.six a:hover, ul#mainnav li.six a:visited {color:#CCCC00;}
    ul#mainnav li.seven a:link, ul#mainnav li.seven a:hover, ul#mainnav li.seven a:visited {color:#CC3366;} 

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi GaryS - Sorry this is not what I was trying to achieve. By having 'body.section' in the css I am identifying what page the user is currently on.

    What I want is for all the nav links to be grey and once you roll over them you can see the various hover colours - once you click on a link it stays whatever the hover colour was to identify that particular page. Like I mentioned before FF and Netscape are working perfectly...its IE and Opera that don't want to cooperate.

    Any other suggestions?

  4. #4
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops... my mistake.

  5. #5
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Tried some reconfiguration for you & this seemed to work cross-browser:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    * {
    padding:0;margin:0;}
    html,body{
    margin:0;padding:0}
    body {
    padding:20px 0; margin:0; background:#fff none; color: #666666;
    text-align:center; font-family:"Geneva", "Arial", "Helvetica", sans-serif;
    font-size:12px;
    }
    
    /* id selectors design layout */
    #outer{
    width:768px; background-color: #fff; color: #666666;
    margin:0 auto;text-align:left; position:relative;
    }
    
    #left	{
    float:left; width:139px; height: 350px;
    background-color: #CCCC00;
    }
    
    #colourbox	{
    height: 10px; border-bottom: 12px solid #fff;
    background-color: #CCCC00;
    }
    
    #right	{
    float:right; width:616px; height: 350px; border:1px solid #ccc;
    }
    
    /* id descendants */
    ul#mainnav{
    margin:0 0 0 150px; padding:0; list-style:none; width:618px;
    height:20px; position:relative;
    }
    
    ul#mainnav li {
    display:inline; padding:5px 0; text-align:left;
    }
    
    /* mac hide \*/
    * html ul#mainnav li {
    float:left}
    * html ul#mainnav ul li {
    display:inline; padding:0;}
    /* end hide */
    
    ul#mainnav li a{
    height:20px; width:auto; text-decoration:none;
    padding:0 12px; font-weight:bold;
    border-right:1px solid #ccc;
    }
    a#beginning {
    padding-left: 20px;}
    /*remove first border from mainlist */
    a#beginning:link, a#beginning:visited{
    color:#999999;}
    a#beginning:focus, a#beginning:hover{
    color:#cccccc;}
    
    a#two:link, a#two:visited{
    color:#999999;}
    a#two:focus, a#two:hover{
    color:#99ccff;}
    
    a#three:link, a#three:visited{
    color:#999999;}
    a#three:focus, a#three:hover{
    color:#279321;}
    
    a#four:link, a#four:visited{
    color:#999999;}
    a#four:focus, a#four:hover{
    color:#cc6600;}
    
    a#five:link, a#five:visited{
    color:#999999;}
    a#five:focus, a#five:hover{
    color:#993399;}
    
    a#six:link, a#six:visited{
    color:#999999;}
    a#six:focus, a#focus:hover{
    color:#CCCC00;}
    
    a#end {
    border:none; padding-right: 0;}
    a#end:link, a#end:visited{
    color:#999999; border:none;}
    a#end:focus, a#end:hover{
    color:#cc3366; border:none;}
    /*remove last border from mainlist */
    
    #section1 a#selected:link, #section1 a#selected:visited, #section1 a#selected:focus, #section1 a#selected:hover 
    
    {color:#cccccc;}
    #section2 a#selected:link, #section2 a#selected:visited, #section2 a#selected:focus, #section2 a#selected:hover 
    
    {color:#99CCFF;}
    #section3 a#selected:link, #section3 a#selected:visited, #section3 a#selected:focus, #section3 a#selected:hover 
    
    {color:#279321;}
    #section4 a#selected:link, #section4 a#selected:visited, #section4 a#selected:focus, #section4 a#selected:hover 
    
    {color:#CC6600;}
    #section5 a#selected:link, #section5 a#selected:visited, #section5 a#selected:focus, #section5 a#selected:hover 
    
    {color:#993399;}
    #section6 a#selected:link, #section6 a#selected:visited, #section6 a#selected:focus, #section6 a#selected:hover 
    
    {color:#CCCC00;}
    #section7 a#selected:link, #section7 a#selected:visited, #section7 a#selected:focus, #section7 a#selected a:hover 
    
    {color:#CC3366;} 
    -->
    </style>
    </head>
    <body id="section6"> 
    <div id="outer"> 
      <ul id="mainnav"> 
        <li><a href="#" id="beginning">Link 1</a></li> 
        <li><a href="#" id="two">Link 2</a></li> 
        <li><a href="#" id="three">Link 3</a></li> 
        <li><a href="#" id="four">Link 4</a></li> 
        <li><a href="#" id="five">Link 5</a></li> 
        <li><a href="#" id="selected">Link 6</a></li> 
        <li><a href="#" id="end">Link 7</a></li> 
      </ul> 
      <div id="left"> 
        <div id="colourbox"></div> 
      </div> 
      <div id="right"></div> 
    </div> 
    </body>
    </html>
    Hope it helps,
    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •