I'm creating a html div page with external css. The problem I'm having is I can't get...

T

Thomas D

New member
...the positioning I want? I have tried the way I think it works but I got the div all over?
What i want to achieve is using the divs to create
Div for a -a banner at the top
Div for a-a left hand floating buttons
Div for a-text at the middle
Div for a-and a right floating
So can some one show me what to fix in my codes?

//my index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>index </title>
</head>
<body>
<div id="container">

<div id="header">
<a href="http://www.microsoft.com/"><img class="displayed" src="somepic.gif" alt="some picture"></a>
</div>

<div class="pushbar">
<a class="button" href="http://www.google.com/">david<br>Home</a>
<a class="button" href="http://www.microsoft.com/">microsoft<br>softy</a>
<a class="button" href="http://www.yahoo.com/">emain &<br>chat</a>
</div>
<div id="rightnav">
<a href="http://www.apple.ca/" rel="bcit home page" ><img class="adsImages" src="resources2/bcit_142x55.jpg" alt="bcit logo"></a>
<a href="http://www.microsoft.com/" rel="microsoft home page" ><img class="adsImages" src="resources2/microsoft.gif" alt="microsoft logo"></a>
<a href="http://www.amazon.com/" rel="our course website" ><img class="adsImages" src="resources2/webdev.jpg" alt="course logo"></a>
</div>
<div id="body">
<p><h3><a href="http://silverlight.net/GetStarted/">Something here </a></h3>
<p>Friday, July 10, 2009</p>
<p>Some paragraph <span><a href="http://www.microsoft.com/presspass/press/2009/jul09/07-10UXLaunchPR.mspx">Read More</a>.</span>
</p>
</div>
</div>
</body>
</html>




###################################################################
//my css code coming under
####################################################################





#container
{
width: 1000px;
}
#header
{
width: 1000px;
height: 90px;
background-color: #020a0E;
}

img.displayed
{
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}

.puchbar
{
position: absolute;
margin-top: 120px;
float: left;
width: 150px;
height: 400px;
background-color: #19344A;
padding: 3px;
text-align: center;
}

a.button
{
font-size: smaller;
background-color: #285376;
color: #FFFFFF;
padding: 2px;
border-width: 3px;
border-color: #33CCFF;
border: outset;
text-decoration: none;
display: block;
width: 80%;
height: 30px;
margin: 3px auto 3px auto;
vertical-align: middle;
text-align: center;

}

a.button:hover
{
color: #FFFF66;
border-color: #3366FF;
background-color: #3873A3;
}

a.button:active
{
border: inset;
}

#rightnav
{
float: right;
width: 20%;
}

.adsImages
{
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}

#body
{
text-align: left;
}
 
Back
Top