Posted By

valcartei on 09/11/07


Tagged

menu layout


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

SpinZ
vali29


highlight selected item in menu CSS only


 / Published in: CSS
 

give a class name to each link according to the page it redirects to. give attribute id to the body of the template and make the attribute editable (Dreamweaver lets you do that: select the attrib, Modify>Templates>Make attribute editable and tick the checkbox. For each page change id value to be the same as the class of the link referring to the page. (to do that, go to Modify>Template properties)

  1. #home #menu .home a,
  2. #about #menu .about a,
  3. #services #menu .services a,
  4. #products #menu .products a{ color:#000000; text-decoration:underline;}
  5.  
  6. html example code for page "about":
  7. <body id="about">
  8. ...
  9. <ul id="menu">
  10. <li class="about"><a href="../about/index.html">About</a></li>
  11. <li class="services"><a href="../services/index.html">Services</a></li>
  12. <li class="projects"><a href="../projects/index.html">Projects</a></li>
  13. </ul>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: kalithswe on July 23, 2010

  • Home
  • About Us
  • Services
  • Mission
  • Clients
  • Contact Us
  •             RAINBOWThe traditional description of the rainbow is that it is made up of seven colors - red, orange, yellow, green, blue, indigo, and violet.  colors from red to violet and even beyond the colors that the eye can see. 
    
    
    
                     <b>Sign In</b>
                     &nbsp;&nbsp;&nbsp;Username&nbsp;&nbsp;&nbsp;&nbsp;: 
                     &nbsp;&nbsp;&nbsp;Password&nbsp;&nbsp;&nbsp;&nbsp;: 
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    
    
    
    
                 <p>Copyright © 2008 - 2010 Open Source Models. Designed by  <a href="http://www.opensourcemodels.org">opensourcemodels</a></p>
    

    css .container {

    width:100%; height:100%; } body { background-color:fff;

    } .header {

    margin:15px; width:90%; height:120px; border:0px solid black; padding-top:-5px; padding-bottom:1px; padding-left:10px;

    }

    .logo { width:20%; height:35px;

    border:2px ; margin-left:40px; }

    .sitetitle { width:1020px; height:34px; border-left:55px; padding-bottom:-5px; border:0px solid black; margin:40px; } ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a.one:link { display:block; width:154px; font-weight:bold; color:#43444c; background-color:#0bbef2; text-align:center; padding:8px; text-decoration:none; text-transform:uppercase; } a.one:visited { display:block; width:154px; font-weight:bold; color:#43444c; background-color:#0bbef2; text-align:center; padding:8px; text-decoration:none; text-transform:uppercase; } a.one:hover { background-color:#727272; }

    menu a.select

    { font-weight:bold; background:#F96611; border:3px solid #FFB380; }

    .bottom {

    background-color:#c1f5fc; margin-left: 64px; margin-top:-20px; padding-top:5px; padding-bottom:px; padding-right:5px; width:81%; height:350px;

    border:0px solid black; } .bottom1 { margin:12px; width:100%; height:130px;

    border:0px ; } .bottom2 { float:left; margin: 12px; width:60%; height:48%; text-align:justify; color:#000; border:0px solid black; padding-left:15px; padding-right:0px; background-color:fff;

    }

    .bottom3 {

    float:right; margin: 12px; width:30%; height:48%; background-color:fff; border:0px solid black; }

    .footer {

    margin-top:25px; margin-left:63px; padding-top:-5px; padding-bottom:-5px; width:81.5%; text-align:center; height:4%;

    background-color:#0bbef2; }

    a.two:link { color:#ff0000; text-decoration:none; } a.two:visited { color:#0000ff; text-decoration:none; }

Posted By: kalithswe on July 23, 2010

  • Home
  • About Us
  • Services
  • Mission
  • Clients
  • Contact Us
  •             RAINBOWThe traditional description of the rainbow is that it is made up of seven colors - red, orange, yellow, green, blue, indigo, and violet.  colors from red to violet and even beyond the colors that the eye can see. 
    
    
    
                     <b>Sign In</b>
                     &nbsp;&nbsp;&nbsp;Username&nbsp;&nbsp;&nbsp;&nbsp;: 
                     &nbsp;&nbsp;&nbsp;Password&nbsp;&nbsp;&nbsp;&nbsp;: 
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    
    
    
    
                 <p>Copyright © 2008 - 2010 Open Source Models. Designed by  <a href="http://www.opensourcemodels.org">opensourcemodels</a></p>
    

    css .container {

    width:100%; height:100%; } body { background-color:fff;

    } .header {

    margin:15px; width:90%; height:120px; border:0px solid black; padding-top:-5px; padding-bottom:1px; padding-left:10px;

    }

    .logo { width:20%; height:35px;

    border:2px ; margin-left:40px; }

    .sitetitle { width:1020px; height:34px; border-left:55px; padding-bottom:-5px; border:0px solid black; margin:40px; } ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a.one:link { display:block; width:154px; font-weight:bold; color:#43444c; background-color:#0bbef2; text-align:center; padding:8px; text-decoration:none; text-transform:uppercase; } a.one:visited { display:block; width:154px; font-weight:bold; color:#43444c; background-color:#0bbef2; text-align:center; padding:8px; text-decoration:none; text-transform:uppercase; } a.one:hover { background-color:#727272; }

    menu a.select

    { font-weight:bold; background:#F96611; border:3px solid #FFB380; }

    .bottom {

    background-color:#c1f5fc; margin-left: 64px; margin-top:-20px; padding-top:5px; padding-bottom:px; padding-right:5px; width:81%; height:350px;

    border:0px solid black; } .bottom1 { margin:12px; width:100%; height:130px;

    border:0px ; } .bottom2 { float:left; margin: 12px; width:60%; height:48%; text-align:justify; color:#000; border:0px solid black; padding-left:15px; padding-right:0px; background-color:fff;

    }

    .bottom3 {

    float:right; margin: 12px; width:30%; height:48%; background-color:fff; border:0px solid black; }

    .footer {

    margin-top:25px; margin-left:63px; padding-top:-5px; padding-bottom:-5px; width:81.5%; text-align:center; height:4%;

    background-color:#0bbef2; }

    a.two:link { color:#ff0000; text-decoration:none; } a.two:visited { color:#0000ff; text-decoration:none; }

You need to login to post a comment.