...

View Full Version : Need Help Centering CSS Layout



Damien1234
10-11-2007, 09:46 PM
OK, I started to make a website layout in Adobe Photoshop CS2 then I sliced it in ImageReady. I then used ImageReady to convert the sliced layout to CSS but when I uploaded the finished product to my server, a few problems occured. Here is where you can see the website at the moment: http://dcdeveloping.com/faq.html

In Internet Explorer, the buttons at the top that link to Home, About, Services etc can't be seen properly and are dragged down, so they have a bit of space above them. I don't know how to fix this as I am new with CSS.

In Firefox however this is fine.

But, what I also want to do is center the layout. Can anyone help me? Thanks. Below is the page source.


<html>
<head>
<title>DCDeveloping :: FAQ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (FAQ.psd) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
}

#FAQ-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:24px;
}

#FAQ-02 {
position:absolute;
left:0px;
top:24px;
width:236px;
height:52px;
}

#FAQ-03 {
position:absolute;
left:236px;
top:24px;
width:31px;
height:10px;
}

#FAQ-04 {
position:absolute;
left:267px;
top:24px;
width:9px;
height:52px;
}

#FAQ-05 {
position:absolute;
left:276px;
top:24px;
width:33px;
height:10px;
}

#FAQ-06 {
position:absolute;
left:309px;
top:24px;
width:9px;
height:52px;
}

#FAQ-07 {
position:absolute;
left:318px;
top:24px;
width:43px;
height:10px;
}

#FAQ-08 {
position:absolute;
left:361px;
top:24px;
width:10px;
height:52px;
}

#FAQ-09 {
position:absolute;
left:371px;
top:24px;
width:45px;
height:10px;
}

#FAQ-10 {
position:absolute;
left:416px;
top:24px;
width:10px;
height:52px;
}

#FAQ-11 {
position:absolute;
left:426px;
top:24px;
width:32px;
height:10px;
}

#FAQ-12 {
position:absolute;
left:458px;
top:24px;
width:10px;
height:52px;
}

#FAQ-13 {
position:absolute;
left:468px;
top:24px;
width:28px;
height:10px;
}

#FAQ-14 {
position:absolute;
left:496px;
top:24px;
width:10px;
height:52px;
}

#FAQ-15 {
position:absolute;
left:506px;
top:24px;
width:53px;
height:10px;
}

#FAQ-16 {
position:absolute;
left:559px;
top:24px;
width:241px;
height:52px;
}

#FAQ-17 {
position:absolute;
left:236px;
top:34px;
width:31px;
height:42px;
}

#FAQ-18 {
position:absolute;
left:276px;
top:34px;
width:33px;
height:42px;
}

#FAQ-19 {
position:absolute;
left:318px;
top:34px;
width:43px;
height:42px;
}

#FAQ-20 {
position:absolute;
left:371px;
top:34px;
width:45px;
height:42px;
}

#FAQ-21 {
position:absolute;
left:426px;
top:34px;
width:32px;
height:42px;
}

#FAQ-22 {
position:absolute;
left:468px;
top:34px;
width:28px;
height:42px;
}

#FAQ-23 {
position:absolute;
left:506px;
top:34px;
width:53px;
height:42px;
}

#FAQ-24 {
position:absolute;
left:0px;
top:76px;
width:81px;
height:95px;
}

#FAQ-25 {
position:absolute;
left:81px;
top:76px;
width:639px;
height:74px;
}

#FAQ-26 {
position:absolute;
left:720px;
top:76px;
width:80px;
height:95px;
}

#FAQ-27 {
position:absolute;
left:81px;
top:150px;
width:639px;
height:21px;
}

#FAQ-28 {
position:absolute;
left:0px;
top:171px;
width:31px;
height:429px;
}

#FAQ-29 {
position:absolute;
left:31px;
top:171px;
width:737px;
height:394px;
}

#FAQ-30 {
position:absolute;
left:768px;
top:171px;
width:32px;
height:429px;
}

#FAQ-31 {
position:absolute;
left:31px;
top:565px;
width:737px;
height:35px;
}
body {
background-color: #707070;
background-repeat: repeat;
background-image: url(images/bg.png);
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div align="center">
<!-- ImageReady Slices (FAQ.psd) -->
</div>
<div id="Table_01">
<div id="FAQ-01">
<div align="center"><img src="images/FAQ_01.gif" width="800" height="24" alt="">
</div>
</div>
<div id="FAQ-02">
<div align="center"><img src="images/FAQ_02.gif" width="236" height="52" alt="">
</div>
</div>
<div id="FAQ-03">
<a href="http://www.dcdeveloping.com/index.html"><img src="images/FAQ_03.gif" width="31" height="10" alt=""></a>
</div>
</div>
<div id="FAQ-04">
<div align="center"><img src="images/FAQ_04.gif" width="9" height="52" alt="">
</div>
</div>
<div id="FAQ-05">
<div align="center"><img src="images/FAQ_05.gif" width="33" height="10" alt="">
</div>
</div>
<div id="FAQ-06">
<div align="center"><img src="images/FAQ_06.gif" width="9" height="52" alt="">
</div>
</div>
<div id="FAQ-07">
<div align="center"><img src="images/FAQ_07.gif" width="43" height="10" alt="">
</div>
</div>
<div id="FAQ-08">
<div align="center"><img src="images/FAQ_08.gif" width="10" height="52" alt="">
</div>
</div>
<div id="FAQ-09">
<div align="center"><img src="images/FAQ_09.gif" width="45" height="10" alt="">
</div>
</div>
<div id="FAQ-10">
<div align="center"><img src="images/FAQ_10.gif" width="10" height="52" alt="">
</div>
</div>
<div id="FAQ-11">
<div align="center"><img src="images/FAQ_11.gif" width="32" height="10" alt="">
</div>
</div>
<div id="FAQ-12">
<div align="center"><img src="images/FAQ_12.gif" width="10" height="52" alt="">
</div>
</div>
<div id="FAQ-13">
<div align="center"><img src="images/FAQ_13.gif" width="28" height="10" alt="">
</div>
</div>
<div id="FAQ-14">
<div align="center"><img src="images/FAQ_14.gif" width="10" height="52" alt="">
</div>
</div>
<div id="FAQ-15">
<div align="center"><img src="images/FAQ_15.gif" width="53" height="10" alt="">
</div>
</div>
<div id="FAQ-16">
<div align="center"><img src="images/FAQ_16.gif" width="241" height="52" alt="">
</div>
</div>
<div id="FAQ-17">
<div align="center"><img src="images/FAQ_17.gif" width="31" height="42" alt="">
</div>
</div>
<div id="FAQ-18">
<div align="center"><img src="images/FAQ_18.gif" width="33" height="42" alt="">
</div>
</div>
<div id="FAQ-19">
<div align="center"><img src="images/FAQ_19.gif" width="43" height="42" alt="">
</div>
</div>
<div id="FAQ-20">
<div align="center"><img src="images/FAQ_20.gif" width="45" height="42" alt="">
</div>
</div>
<div id="FAQ-21">
<div align="center"><img src="images/FAQ_21.gif" width="32" height="42" alt="">
</div>
</div>
<div id="FAQ-22">
<div align="center"><img src="images/FAQ_22.gif" width="28" height="42" alt="">
</div>
</div>
<div id="FAQ-23">
<div align="center"><img src="images/FAQ_23.gif" width="53" height="42" alt="">
</div>
</div>
<div id="FAQ-24">
<div align="center"><img src="images/FAQ_24.gif" width="81" height="95" alt="">
</div>
</div>
<div id="FAQ-25"> <center><img src="images/FAQ_25.gif" width="639" height="74" alt=""></center>
</div>
<div id="FAQ-26">
<div align="center"><img src="images/FAQ_26.gif" width="80" height="95" alt="">
</div>
</div>
<div id="FAQ-27">
<div align="center"><img src="images/FAQ_27.gif" width="639" height="21" alt="">
</div>
</div>
<div id="FAQ-28">
<div align="center"><img src="images/FAQ_28.gif" width="31" height="429" alt="">
</div>
</div>
<div id="FAQ-29">
<div align="center"><img src="images/FAQ_29.gif" width="737" height="394" alt="">
</div>
</div>
<div id="FAQ-30">
<div align="center"><img src="images/FAQ_30.gif" width="32" height="429" alt="">
</div>
</div>
<div id="FAQ-31">
<div align="center"><img src="images/FAQ_31.gif" width="737" height="35" alt="">
</div>
</div>
</div>
<div align="center">
<!-- End ImageReady Slices -->
</div>
</body>
</html>

Dropfaith
10-11-2007, 11:49 PM
in stead of
<div align="center">

use this
<div style="margin: 0 auto;">

hrmm i looked at your code on the page and what you need to do is make a container element that holds everything and use the code i posted above to center the container make sure you set some sort of width to it tho

PappaJohn
10-12-2007, 01:13 AM
The first problem is you have not specified a DOCTYPE (http://codingforums.com/showthread.php?t=18346) for your page. This will cause browsers to render the page in quirks mode.

That would be the first problem to correct, which may well reveal other problems, but at least you'd be on the road to a page that will display properly cross-browser.

Damien1234
10-13-2007, 06:53 PM
Hmm .. read the topic & not sure what doctype to use. Thanks for the help both of you, not 100% sure by what you mean by container element though.

effpeetee
10-13-2007, 08:38 PM
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Try this.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum