www.webdeveloper.com
Results 1 to 3 of 3

Thread: 2 NAVBAR questions

Hybrid View

  1. #1
    Join Date
    Sep 2011
    Posts
    22

    2 NAVBAR questions

    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:

    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>
        <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. *** 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 the CSS:

    Code:
    #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% */
            }
    }

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Hope you don't mind, but I felt like doing it my way. I don't really see what the hype is about using <ul>'s for this sort of thing anyway:

    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" xml:lang="en" lang="en">
    	<head>
    		<title>2 NAVBAR questions</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    		<style type="text/css">
    
    			BODY {
    				margin: 0px;
    			}
    
    			#nav-wrap {
    				height:36px;
    				filter: alpha(opacity=85); /* For IE8 and earlier */
    				font-size: 12px;
    				opacity: 0.85;
    				text-transform: uppercase;
    				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;
    				text-align: center;
    				box-shadow: 0 0 20px black;
    				-moz-box-shadow: 0 0 20px black;
    				-webkit-box-shadow: 0 0 20px black;
    			}
    
    			#nav-wrap A {
    				display: inline-block;
    				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;
    			}
    
    			#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 */
    				box-shadow: 0 0 20px black;
    				-moz-box-shadow: 0 0 20px black;
    				-webkit-box-shadow: 0 0 20px black;
    
    				height: 300px;
    			}
    			#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 */
    				box-shadow: 0 0 20px black;
    				-moz-box-shadow: 0 0 20px black;
    				-webkit-box-shadow: 0 0 20px black;
    			}
    
    		</style>
    
    	</head>
    	<body>
    
    		<div id="header-wrap"></div>
    		<div id="nav-wrap">
    			<a href="/">Option 1</a>
    			<a href="/">Option 2</a>
    			<a href="/">Option 3</a>
    			<a href="/">Option 4</a>
    			<a href="/">Option 5</a>
    			<a href="/">Option 6</a>
    			<a href="/">Option 7</a>
    		</div>
    		<div id="page-wrap"></div>
    
    	</body>
    </html>
    Last edited by bionoid; 12-19-2011 at 05:44 PM. Reason: Added box-shadow css for IE9

  3. #3
    Join Date
    Sep 2011
    Posts
    22
    thank you very 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