Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Horizontal Menu Bar CSS questions

    Hi all,

    I'm working on creating a horizontal menu bar using css for my site. I have followed this tutorial to create it, however I have come across a few problems.

    1) My menu bar is somewhat off-center and I'm not sure how to fix it.
    2) In a smaller resolution, the menu bar does not fit, width-wise, into the bar, and I was wondering how to fix this problem.

    Below are my css and html codes.

    CSS
    Code:
    body {
    	background: url('images/bg.gif') #EFEFEF;
    	margin: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    }
    
    #header {
    	height: 62px;
    	background: url('images/header.png') repeat-x;
    }
    
    #logo {
    	margin-top: 20px;
    	margin-left: 20px;
    }
    
    #nav {
    	height: 35px;
    	background: #BFBBBB;
    	width: 100%;
    	font-size: 10pt;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    
    #links {
    	list-style: none;
    	margin: 0 auto;
    	padding: 5;
    }
    
    #links li {
       	float: left;
    }
    
    #links li a {
       	display: block;
       	background-color: #BFBBBB;
    	color: #7D7D7D;
    	text-decoration: none;
       	width: 150px;
    	padding: 8px;
    }
    
    #links li a:hover {
       	background-color: #A9A9A9;
       	color: #FFFFFF;
    	padding: 7px;
    	height: 20px;
    }
    			
    #updates {
    	position: relative;
    	background-image: url('images/updates_box.png');
    	width: 725px;
    	height: 105px;
    	margin-top: 50px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #wrap {
    	position: relative;
    	margin-top: 30px;
    	margin-left: 10px;
    }
    
    #sidebar {
    	float: left;
    	width: 30%;
    	height: 100%;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    }
    
    #content {
    	margin-left: 32%;
    	width: 60%;
    	height: 100%;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-bottom: 50px;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EricaFTW</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script language="JavaScript1.2" src="js/main.js" type="text/javascript"></script>   
    
    </head>
    <body>
    
    <div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
    <script language="JavaScript1.2" src="js/style.js" type="text/javascript"></script>   
    
    <div id="container">
    
    	<div id="header">
    		<img src="images/logo.png" id="logo" alt="" border="0" />
    	</div>
    	
    	<div id="nav">
    			<ul id="links">
    			<li><a href="index.php">Home</a>  
    			<li><a href="about.php">About</a> 
    			<li><a href="portfolio.php">Portfolio</a>
    			<li><a href="writing.php">Writing</a>
    			<li><a href="contact.php">Contact</a>  
    			</ul>
    	</div>
    
    	<div id="updates">
    	</div>
    
    	<div id="wrap">
    		<div id="sidebar">sidebar</div>
    		<div id="content">content</div>
    	</div>
    </div>
    </body>
    </html>
    Click here for a live demo.

    Thanks in advance,
    Erica
    Last edited by EricaL; 11-29-2009 at 09:16 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,745
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello EricaL,
    With your #nav1 and #nav2 side by side, it's hard to figure out where you want #1 to go if you center #2.

    Maybe like this?
    Code:
    #nav1 {
    	height: 35px;
    	background: url('images/nav1.png') no-repeat top right;
    	width: 40%;
    }
    
    #buttons {
    	width: 70%;
    	margin: 10px;
    }
    
    #nav2 {
    	height: 35px;
    	background: url('images/nav2.png') repeat-x;
    	width: 60%;
    margin: 0 auto;
    	font-size: 10pt;
    	text-align: center;
    }
    Although nav1.png does not look like it is part of #nav1 ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Excavator,

    Thanks for the quick response. I've recently changed the navigation bar, simply because it would make more sense for my design, and the coding was getting messy.

    The code has been updated in my original post.

    I still can't get the actual links to center though. Any ideas on how that can be done? Also, smaller resolutions will still see the buttons stacking on top of each other, rather than aligned horizontally. I'm not sure how to fix that either.


  •  

    Posting Permissions

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