...

View Full Version : CSS Div Centering Issues



belfastrab
05-14-2008, 02:22 AM
Hi Guys

First post to the site so please go easy with me.

I have been trying to covert an already established website from tables to xtml compliant css (or whatever the correct term is), I succeded in creating the site with no issues however ran into great difficulties in centering the layout.

I read up on this and understood that I needed to create a wrapper/container div to center all the content and I did this but it only centers part of the site and the rest remains locked to the left hand side.

I am completely stuck and have now been at my computer for 18 hours straight trying to sort this and I am loosing my mind, I am pretty sure I have read ever forum post out there and thats how I have got this far, but just no idea how to move forward now.

Here is the site so far:

http://www.robdevenney.com/csstest2/index2.html

If you could please spell it out to me in really simple terms as I am a complete novice.

Many Thanks

Rab

jcdevelopment
05-14-2008, 04:13 AM
you wont be able to center anything if all your elements including layers are positioned absolute.
you'll need to first get rid of that.

jhaycutexp
05-14-2008, 09:30 AM
yeah.. jcdev is right.. you won't be able to center divs like that..

try this..
1)first clear all the default paddings and margins, and your absolute position on your divs..
2)put a wrapper on your divs like the one below... this is based on your markup..
3)set the style to your wrapper.. the width of the wrapper should match the width of your design...

for example your designs width is 800px, the wrapper should have the same width.. then set your margins to auto;.. you might want to put some text-align:center to your wrapper this is for the ie centering bug...

I won't give you the exact code..just hints and starting guides... so that you can linger and extract knowledge from this...



<div id ="wrapper">

<div id="Layer-1" class="style1" >

<img src="layer-1.png" alt="header" />
</div>

<!-- This is 'title' -->
<div id="Layer-2" >
<img src="layer-2.png" alt="title" />
</div>

<!-- This is 'body_bkgnd' -->
<div id="Layer-3" >

<!-- This is 'contactbox' -->
<div id="Layer-6" >
<img src="layer-6.png" alt="contactbox" />
</div>

<!-- This is '_text' -->
<div id="Layer-4" >
Hi! This is the spot that you gave the label '_text'. Replace this with whatever text or html you want! Don't forget to edit the font and color options in the CSS id definition for this layer too (Layer-4).
</div>

</div>

<!-- This is 'mapbox' -->
<div id="Layer-5" >
<img src="layer-5.png" alt="mapbox" />
</div>

<!-- This is 'footer' -->
<div id="Layer-7" >
<img src="layer-7.png" alt="footer" />

</div>

</div><!-- end of wrapper-->

Hope you got this.. it's very easy.. i learned this from jcdeveloment...

regards...

effpeetee
05-14-2008, 01:25 PM
Is this how it is supposed to look? It is done with my WYSIWYG editor and uses inline code (inserted into the html in the <body> of the page.).

This is using absolute positioning, but is only to see if this is what you want.

http://exitfegs.co.uk/14a.html

Frank

jcdevelopment
05-14-2008, 04:00 PM
Is this how it is supposed to look? It is done with my WYSIWYG editor and uses inline code (inserted into the html in the <body> of the page.).

This is using absolute positioning, but is only to see if this is what you want.

http://exitfegs.co.uk/14a.html

Frank

I think he wants the whole section centered on the page, right now its positioned, so it wont center.

bazz
05-14-2008, 05:39 PM
pm sent to you belfastrab.

bazz

effpeetee
05-14-2008, 09:34 PM
JCD,

It is centered on my PC.

Frank

jcdevelopment
05-14-2008, 09:44 PM
JCD,

It is centered on my PC.

Frank


Probably because you have a resolution of 1024x768. I am at 1280x1024.

effpeetee
05-14-2008, 09:59 PM
This is using absolute positioning, but is only to see if this is what you want.

Hi there!

It wasn't intended as a solution. I was not sure what he was after. I dragged it around in my editor and this was the only set-up that seemed possible. Some of the images are on the same div. Move one and the other moves.


http://exitfegs.co.uk/14c.html



Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum