Hey guys, only joined a few days ago and already baffled with the css positioning of divs.

 

I have tried using the templates and they work fantastic but really want to learn to hand code.

 

i have been using the following 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=iso-8859-1" />

<title>ePod</title>

<link href="mystyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="topright">

<p> some sort of image here <P>

</div>

<div id="topleft">

</div>

 

<div id="up_div">

<div id="header">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="show me.html">about</a></li>

<li><a href="Testimonials.html">portfolio</a></li>

<li><a href="resources.html">Blog</a></li>

<li><a href="index1.html">tutorials</a></li>

<li><a href="index1.html">Contact</a></li>

</ul>

</div>

 

and the following css

 

/* CSS Document */

body{

padding:0; margin:0;

}

div, ul, p, h1, h2, h3, h4, img{

padding:0; margin:0;

}

ul{

list-style-type:none;

}

.bank{

line-height:0px; font-size:0px; clear:both;

}

 

/*------------------------------up_div---------------------*/

#header{

width:500px;

margin:0 auto;

position:relative;

height:200px;

background-image: url(images/logo1.gif);

background-repeat: no-repeat;

background-position: 0 0;

}

#header img.logo{

position:absolute; left:97px; top:124px; display:block;

}

#header ul{

width:546px; display:block; position:absolute; top:202px; left:-6px;

}

#header ul li{

float:left; display:block; margin:0 3px 0 3px;

}

#header ul li a{

text-transform:uppercase;

font-weight:bold;

padding:0 8px 0 8px;

color:#202020;

background-color:#FFFFFF;

display:block;

text-decoration:none;

font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

font-size: 16px;

line-height: 20px;

}

#header ul li a:hover{

background-color:#FF5F7B; color:#FFFFFF;

 

 

}

 

 

#topright {

position:absolute;

top:17px;

right:82px;

width:200px;

background-color: #00CCCC;

height: 200px;

float: left;

}

 

#topleft {

position:absolute;

top:207px;

right:967px;

width:364px;

background-color: #CC00CC;

height: 400px;

background-image: url(images/mock2.gif);

}

 

 

What is really need is basically a block under my navigation for the main content of the page

 

I have been looking on the web and it seems alot of sites use some sort of container for the layout.

 

I have tried applying various divs under my navigation but they always seem more to the left

 

I hope someone can help, obviously I would like someone to help with the code but theres one thing helping and another doing it for me, so any advice would be welcome

 

thanks again J

Have you done in your design in photoshop and do you have a screen shot of the design mockup?

 

If so then post it as it's easier to see where the divs should appear if we can see the design layout.

At the moment you have mixed several different principles and I daren't try to edit it.

 

You have a #container but no styles for it.

 

You have used position: absolute for some divs but position: relative for #header so header centers on your page because of the width and margin: 0 auto but #topright with right: 82px is fixed from the right and will slide behind it in small window resolutions (because #header is coded after #topright so it goes on top).

 

#topleft has right: 967px which means you can't see it in a window less than about 967px wide as it is out beyond the left side.

 

Don't mix position: absolute with position: relative EXCEPT if you make the #container position: relative perhaps like this:-

#container { width: 1000px; margin: auto; position: relative; background-color: pink;}

then all position: absolute divs inside it will take their top and left or right positions from the #container div boundary instead of the window top left or right corner.

 

Perhaps make #topleft left: 0; then it will start from the left side of #container wherever #container has centered in a large window.

 

If you want to continue with position: absolute divs, then start a #content with position: absolute:-

#content { position: absolute; left: 364px; top: 240px; width: 600px;

margin: auto; background-color: #eee; }

so that it starts below the header and nav and at the side of the #topleft div which is 364px wide.

 

A better method would be not to use position: absolute at all and let divs with either no position stated or position: relative just find their own positions relating to the previously coded div with floats or margins.

 

Check for errors here:- http://validator.w3.org/