Layout problems

P

pisco

New Member
hey guys,

I am learning how to design a website right now, and to get started I take layouts that still exists and replacet them.

I want to create a layout such such as that:

http://www.girlfriendnyc.com/

My code looks like that

Code: 
#global {
    background: none repeat ,#262626;
    display: block;
    height: 99px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#global .nav-wrapper {
    background-color: #222222;
    height: 99px;
    margin: auto;
    width: 1200px;

}

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="anna.css" />
</head>

<body>
	<div id="global">
		<div class="nav-wrapper">
			<ul>
				<li>
					<h2> Contact us </h2>
				</li>
				<li>
					<h2> Follow us </h2>
				</li>
				<li>
					<h2> Read our blog </h2>
				</li>
			</ul>
			
			<ul>
				<li>
					<h2> Learn about us </h2>
				</li>
				<li>
					<h2> See our portfolio</h2>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

My Problem is why do these 2 Boxes do not fit together?

greetings and thx in advance
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
try...
Code: 
body {
width:100%;
margin:0;
padding:0;
background-color:#262626;
}

#global {
width:1200px;
margin:0 auto;
overflow:hidden;
}

.nav-wrapper {
width:100%;
background-color:#222222;
height:99px;
}
HTML: 
<body>
   <div id="global">
     <div class="nav-wrapper">
       <ul>
         <li><a href="#">Contact Us</a></li>
         <li><a href="#">Follow Us</a></li>
         <li><a href="#">Read Our Blog</a></li>
         <li><a href="#">Learn About Us</a></li>
         <li><a href="#">See Our Portfolio</a></li>
       </ul>
     </div>
   </div>
</body>
remove the h2 from the list, and style the list accordingly.
there is a sticky thread on this forum about making nav menu's so I wont go into it.
http://www.webdesignforum.com/10971-tutorial-css-menu-basic.html

dont ever use absolute positioning until you understand how positioning works. again another sticky...
http://www.webdesignforum.com/10715-tutorial-css-positioning.html

(thanks to pixelpusher for those tutorials)
 
You must log in or register to reply here.
Top