No replies
Waitzkin
Offline
newbie
Last seen: 8 years 48 weeks ago
Timezone: GMT-5
Joined: 2011-12-19
Posts: 3
Points: 5

I am having trouble getting my navbar to reach the edges of the browser (even though width is set to 100%). Also, I would like to get the menu options to center over the 900px page wrapper. Any help please??

Here is my html:

<!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>
    <title></title>
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header-wrap"></div>
<div id="nav-wrap">
 
		<ul id="menu">
			<li><a href="/">Option 1</a></li>
			<li><a href="/">Option 2</a></li>
			<li><a href="/">Option 3</a></li>
			<li><a href="/">Option 4</a></li>
			<li><a href="/">Option 5</a></li>
            <li><a href="/">Option 6</a></li>
			<li><a href="/">Option 7</a></li>
		</ul>
 
</div>
<div id="page-wrap">
 
	<div id="main">
		<h2>Column 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div id="sidebar">
		<h2>Column 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
		<ul>
			<li><a href="/">Link 1</a></li>
 
			<li><a href="/">Link 2</a></li>
			<li><a href="/">Link 3</a></li>
			<li><a href="/">Link 4</a></li>
			<li><a href="/">Link 5</a></li>
			<li><a href="/">Link 6</a></li>
			<li><a href="/">Link 7</a></li>
			<li><a href="/">Link 8</a></li>
            <li><a href="/">Link 5</a></li>
			<li><a href="/">Link 6</a></li>
			<li><a href="/">Link 7</a></li>
			<li><a href="/">Link 8</a></li>
            <li><a href="/">Link 8</a></li>
            <li><a href="/">Link 5</a></li>
			<li><a href="/">Link 6</a></li>
			<li><a href="/">Link 7</a></li>
			<li><a href="/">Link 8</a></li>
		</ul>
	</div>
</div>
<div id="background">
    <img src="images\bg0.jpg" class="bg" alt="" />
</div>
</body>
</html>

And here is my css:

#page-wrap { position: relative;
             z-index: 2;
             width: 900px;
             margin: 0px auto;
             background: ffffff;
             opacity:0.6;
             filter:alpha(opacity=60); /* For IE8 and earlier */
             -moz-box-shadow: 0 0 20px black;
             -webkit-box-shadow: 0 0 20px black;
             }
 
#nav-wrap { position:relative;
             z-index: 2;
             width: 100%;
             height:40px;
             margin: 0px auto;
             background: ffffff;
             opacity:0.85;
             filter:alpha(opacity=85); /* For IE8 and earlier */
             -moz-box-shadow: 0 0 20px black;
             -webkit-box-shadow: 0 0 20px black;
             }
 
#header-wrap { position: relative;
             z-index: 2;
             width: 900px;
             height: 75px;
             margin: 0px auto;
             background: ffffff;
             opacity:0.6;
             filter:alpha(opacity=60); /* For IE8 and earlier */
             -moz-box-shadow: 0 0 20px black;
             -webkit-box-shadow: 0 0 20px black;
             }                       
 
#header {
    	padding:5px 10px;
    	height:75px;
    	background-color:White;
	}
	h1 {
	    margin:0;
	    color:White;
    }
 
	ul#menu{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url("images/OFF.gif") repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
ul#menu li{
	display:block;
	float:left;
	margin:0;
	padding:0;}
ul#menu li a{
	display:block;
	float:left;
	color:#8c3a3a;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url("images/DIVIDER.gif") no-repeat top right;
	}
ul#menu li a:hover{
	background:transparent url("images/HOVER.gif") no-repeat top right;	
	}
 
 
 
 
 
	#main {
		float:left;
		width:560px;
		padding:10px;
	}
	h2 {
		margin:0 0 1em;
		color:White;
	}
	#sidebar {
		float:right;
		width:300px;
		padding:10px;
	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
	}
	#footer p {
		margin:0;      
	}
p { font: 15px/2 Georgia, Serif;
     color: White;
    margin: 0 0 30px 0;
    text-indent: 40px; }
 
img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
 
        /* Set up proportionate scaling */
        width: 100%;
        height: auto;
 
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
        z-index:-1;
}
 
@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}