www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS to Create Navigation Menu

  1. #1
    Join Date
    Sep 2009
    Posts
    172

    CSS to Create Navigation Menu

    All,
    I have the following template:
    http://livedemo00.template-help.com/wt_33208/index.html

    This is in Flash but I'd like to achieve the same result of when you rollover a link it changes colors like that. Obviously the text won't move but I'm trying to get the rollover affect. Also, I'm not sure how to get the spacing for it. I tried to get it with some floats but was unsuccessful. If you could point me in the right direction on how to set that up as well I'd really appreciate it. Thanks in advance!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    a {display:inline-block;padding:3em 1em 1em 1em;font-weight:bold;}
    a:link {color:#00f;background:#000;}
    a:hover {color:#f60;background:#c90;}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    This could point you in the right direction.

    Navigation - wcTutorials

    To achieve rollover effects you can use the css selector ":hover"
    HTML Code:
    a:hover{color:#555;}
    Hope that helps.
    The next generation image gallery - PicPods

    The future of the web - wcTutorials

  4. #4
    Join Date
    Sep 2009
    Posts
    172
    Those suggestions helped but now my problem is that I used the margin to position the link towards the bottom of the table. When I hover it goes to from the top of the link to the bottom, but I need it to go from the bottom of the link to the top. Here is the code so you can see what I mean:
    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">
    .navigation_color{
     height:100px;
     background:#FFFFFF;
     display:block;
     font-size:16px;
     margin:0 0 0 0;
    }
     
    .navigation_color a{
     height:100px;
     display:inline-block;
     color:#000000;
     padding:0 20px 0 0;
     margin:40px 0 0 0;
     text-transform:lowercase;
     background:#FFFFFF;
     text-decoration:none;
     text-align:center;
    }
     
    .navigation_color a:hover{
     background:#FCE8D0;
     color:#F49855;
    }
    
    .logo_name { 
     font-size:30px; 
     color:#000000; 
     vertical-align:center; 
     margin:10px 0 0 0; 
    }
    </style>
    </head>
    
    <body>
    <table align="center" border="1" width="865">
     	<tr>
     	<td width="400"><div class="logo_name">Website</div></td>
    	<td align="right"><div class="navigation_color"><a href="login.php">Login</a><a href="contact.php">Contact Us</a></div></td>
    	</tr>
    </table>				
    </body>
    </html>

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .navigation_color{
     height:100px;
     background:#FFFFFF;
     display:block;
     font-size:16px;
     margin:0 0 0 0;
    }
     
    .navigation_color a{
     display:inline-block;
     color:#000000;
     padding:40px 20px 0 0;
     text-transform:lowercase;
     background:#fff;
     text-decoration:none;
     text-align:center;
    }
     
    .navigation_color a:hover{
     background:#FCE8D0;
     color:#F49855;
    }
    
    .logo_name { 
     font-size:30px; 
     color:#000000; 
     vertical-align:middle; 
     margin:10px 0 0 0; 
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Sep 2009
    Posts
    172
    That works great, now one additional question. When I scroll over them the text is aligned to the left. Is there anyway I can get that to align in the middle? I see the text-align property is set to center but the text is still aligned to the left of the background changed color box.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .navigation_color a{
     display:inline-block;
     width:20&#37;;
     color:#000000;
     padding:40px 0 0 0;
     text-transform:lowercase;
     background:#fff;
     text-decoration:none;
     text-align:center;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Sep 2009
    Posts
    172
    That worked great. Thank you so much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles