PDA

View Full Version : I am having trouble with Posionting (CSS)



Zorroman1100
Aug 19th, 2007, 08:20 AM
Ok well i am making a test site located here

http://www.uafclan.com/user_folders/zorro/testsite/

you can already prolly see the problem ... i wanna get the nav bar up and the text box centered...

this is my css file

http://www.uafclan.com/user_folders/zorro/testsite/main/assets/style.css

and this is the code for the main index.php



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<title>Zorroman's Test Site</title>


<link href="main/assets/style.css" rel="stylesheet" type="text/css">
</head>

<body>


<div class="center">
<h1 id="banner">

<a href="http://www.uafclan.com/user_folders/zorro/testsite/" title="Zorroman's Testsite">
<img alt="Zorroman's Test site" src="http://www.uafclan.com/user_folders/zorro/testsite/main/assets/zorromantestsite.png" style="width:912px; height:78px"></a>
</h1>
</div>




<div id="middleboxes">



<div class="contentboxstyle">
<div class="mainbodybackground">

<div class="bodyheaderbars">
<div class="bodyheadertext">

Zorroman's Test Text Box
</div>

</div>

<div class="bodytext">
Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, Zorroman's Test Text Box, :D



</div>
</div>
</div>
</div>








<div class="leftnavheader">
<div class="navtext">
<div class="navbackground">

<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Home</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Samplelink</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="Samplelink">Samplelink</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="Samplelink">Samplelink</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="Samplelink">Samplelink</a>
<br>


</div>
</div>
</div>

<div class="othernavheader">
<div class="navbackground">
<div class="navtext">

<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Sample Link</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Sample Link</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Sample Link</a>
<br>
<a href="http://www.uafclan.com/user_folders/zorro/testsite/" class="navlink">Sample Link</a>
<br>


</div>
</div>
</div>
<div class="affiliatesnavheader">
<div class="navbackground">
<div class="navtext">



<a href="http://getfirefox.com/"
title="Get Firefox - Take Back the Web"><img
src="http://www.mozilla.org/products/firefox/buttons/takebacktheweb_small.png"
alt="Get Firefox" style="width:125px; height:50px;"></a></div>

</div>
</div>


<div class=" vaildcodenavheader">
<div class="navbackground">
<div class="navtext">

<a href="http://www.validome.org/referer">
<img src="http://www.validome.org/images/set2/valid_html_4_0_1.gif"
alt="Valid HTML 4.01" style="width:88px; height:31px;"></a>

<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.uafclan.com/user_folders/zorro/testsite/main/assets/style.css">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" style="width:88px; height:31px;"> </a></div>


</div>
</div>
















</body>
</html>

Pepe, the bull
Aug 19th, 2007, 11:05 PM
You could float your middleboxes to the right and drop the left positioning. I believe you should only use left, right, top and bottom positioning when the position is set to absolute.

Doing this solved both problems for me.


#middleboxes {
float:right;
width: 602px;
background: transparent;
padding-top: 5px;
position: relative;
left:500px;
}

ahallicks
Aug 19th, 2007, 11:15 PM
I think you need to reconsider your layout. You have not indicated the main sections of the page that you want to be laid out, such as the header, navigation, content etc. Stick these in an id and position them using floats from top to bottom. If you want the site centered use a wrapper with margin: auto; (and a width). At the moment there is nothing containing your navigation so try putting a #navigation div around it and floating it to the left... then float your content to the left and they should sit side-by-side

dansmailman
Aug 20th, 2007, 09:39 PM
I had a similar problem when I was setting up the web page I was working on. To keep the layout the same size regardless of screen size and resolution i used 'em' measurements rather than pixels. Also, set up a div container for the whole page, then place your other div elements (banner, middleboxes) inside it with a similarly set width. you can then center the whole div rather than trying to place all the other div elements into their own position on the page.