Layout issues

kamaro · 01-04-2012, 08:38 PM

Hi, I'm trying to create my very first site. I have the header, nav, body, and footer but when i zoom in and out of the page my nav bar shifts to the top left. Most sites stay centered when zoomed out. Im trying to go for a layout similar to this one except without the content: http://themes.devatic.com/sparky/portfolio-v1/

HERES MY CODE (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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<style>
body{
background:#242424;
}
</style>

<body>

<div id="page-wrap">

<div id="inside">

<div id="header">
<img src="envyLOGO1.jpg" height="115" />
<ul id="list-nav" style="top: -13px; left: 491px; position: absolute;">
<li><a href="#"><font face="Verdana">Home</font></a></li>
<li><a href="#"><font face="Verdana">About</font></a></li>
<li><a href="#"><font face="Verdana">Gallery</font></a></li>
<li><a href="#"><font face="Verdana">Products</font></a></li>
<li><a href="#"><font face="Verdana">Contact</font></a> </li>
</ul>
</div>

<div id="main-content">
<p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</p>
</div>

<div id="footer">

</div>

</div>

</div>

</body>
</html>

(CSS):
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}

p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}

h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}

ul {
margin-left: 25px;
}

img {
border: none;
}

#page-wrap {
background: white;
min-width: 780px;
max-width: 1024px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#main-content {
padding-top: 20px;
}

#header {
background: #101010;
padding:50px;
padding-bottom:10px;
padding-top:10px;
}

#footer {
background: #101010;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}

ul#list-nav {
margin:55px;
padding:0;
list-style:none;
width:525px;
}

ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:7px 0;
width:100px;
color:#4fdc48;
float:left;
}

ul#list-nav li a {
text-align:center;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #232323;
}

ul#list-nav li a:hover {
background:#242424;
color:#4fdc48;
}

Thanks in advance <3

Excavator · 01-04-2012, 08:50 PM

Hello kamaro,
You can keep an absolutely positioned element in position relative to it's container by using position: relative;
Like this

Code:

#header {
    background: none repeat scroll 0 0 #101010;
    padding: 10px 50px;
    position: relative;
}

But is positioning really needed here? Probably not. See the pitfalls of absolute position here.

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

kamaro · 01-04-2012, 08:55 PM

wow haaha awesome thank you so much!!