Page layout with CSS.... help please

pptdgc · Joined: 13 Oct 2005 Posts: 23

I have created a web page where all of the elements have been aligned using CSS. (absolute positioning)... e.g.

div {
display:block;
position:absolute;
}

I have designed my page to be 700px wide. The problem I have is that the page is to the left. I would like the 700px page I have created in the centre of the screen, with white margins either side. (My web page is a blue colour).

What would be the easiest way to do this??

Thanks

Corey Bryant · Posted: Sat Oct 15, 2005 3:53 pm

Please post all your CSS

pptdgc · Joined: 13 Oct 2005 Posts: 23

BODY {font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}

P {margin-left: 24pt;
margin-right: 24pt;}

H1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}

H2 {font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;}

div {
display:block;
position:absolute;
}

div.title{
left:15px;
top:15px;
width:700px;
height:160px;
}

div.one {
left:15px;
top:190px;
width:350px;
height:1800px;
padding-left:20px;
padding-right:20px;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
left:15px;
top:2300px;
width:700px;
height:200px
}

div.flash {
left:385px;
top:190px;
width:350px;
height:1800px;
}

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

try adding float:center;

pptdgc · Joined: 13 Oct 2005 Posts: 23

Where would I add float:center; to though?

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

here is an example. Since i dont know exactly how you have your source set up

pptdgc · Joined: 13 Oct 2005 Posts: 23

I will try that. thanks

pptdgc · Joined: 13 Oct 2005 Posts: 23

That didn't seem to work. Prehaps I didn't make it clear what im trying to do. The page I have created is 700 pixels wide as discussed.

I want this page to be in the center of the browser window which is more than 700 pixels wide. Currently it laods on the right with the background color of my page consistent throughout the browser window.

I would like the browser window to remain white with my coloured page in the center.

Like this page for example... http://www.endclub.com/news/index.php

Thanks

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

just add this to the table align="center"

like

pptdgc · Joined: 13 Oct 2005 Posts: 23

I dont currently have a table. Do I need to set one up? Is there no way to create what i am trying to do without using a table using CSS?

Thanks

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

this should work. i am not really clear on what you are doing. Crying or Very sad

pptdgc · Joined: 13 Oct 2005 Posts: 23

Doesn't seem to work. Everything still stays on the left. Is it because I am using absolute positioning? E.g everything is positioned from 0-750 pixels horizontally.

Prehaps I could use frames? If I placed this page within a frame that was 750 pixels in width and centered could that work?

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

what is the url to your site? i will stay here so we can sort this out if you want. try changing absolute to center

pptdgc · Joined: 13 Oct 2005 Posts: 23

Thanks... dont have anything uploaded yet. Here is my complete css file and my html page without any text or images etc. but you can see the layout.

.........................CSS...............................

body {
font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}

/* Indent paragraphs */
P {margin-left: 24pt;
margin-right: 24pt;}

H1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}

H2 {font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;}

H3 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
}

div {
display:block;
position:absolute;
}

div.title{
left:15px;
top:15px;
width:700px;
height:160px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_home{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:15px;
top:185px;
width:98px;
height:25px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_help{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:135px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.menu_questions{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:255px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.one {
left:15px;
top:220px;
width:350px;
height:2500px;
padding-left:20px;
padding-right:20px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.flash {
left:385px;
top:220px;
width:350px;
height:2500px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
left:15px;
top:2750px;
width:720px;
height:200px;
}

......................main.html..........................

<html><head><title>TEST</title>
<link rel="STYLESHEET" type="text/css" href="style.css" /></head>
<body bgcolor=white>

<div class="title">
<img src="images/title.jpg" alt="TEST" width="700px" height="160px" />
</div>

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>

<div class="flash">
<object width="350px" height="700px">
<param name="movie" value="1.swf">
<embed src="1.swf" width="350px" height="700px">
<object width="350px" height="560px">
</embed><param name="movie" value="2">
<embed src="2" width="350px" height="560px">
<object width="350px" height="560px">
</embed><param name="movie" value="3.swf">
<embed src="3.swf" width="350px" height="185px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="4.swf">
<embed src="4.swf" width="350px" height="310px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="5.swf">
<embed src="5.swf" width="350px" height="310px">
</embed>
</object>
</div>
<div class="one">
<br /><h1>TITLE</h1>
text<br />
<h1>TITLE2</h1>
text2<br />
<h1>TITLE3</h1>
text3<br /><br />

</div>
<div class="footnote"><hr />
<i>footnote</i><hr />
</div>
</body></html>

............................................................................

Thanks

Corey Bryant · Posted: Sun Oct 16, 2005 8:11 am

There are some other problems with your code, but start with