Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry CSS Div Centering Issues

    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

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    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...

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 05-14-2008 at 02:03 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by effpeetee View Post
    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.

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    pm sent to you belfastrab.

    bazz

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    JCD,

    It is centered on my PC.

    Frank
    Attached Thumbnails Attached Thumbnails CSS Div Centering Issues-screenhunter_02-may.-14-20.32.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by effpeetee View Post
    JCD,

    It is centered on my PC.

    Frank

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

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 05-15-2008 at 05:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •