Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
Help centering layers.
 
Enforcer
Posted: 20 July 2009 09:49 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2009-07-20

Hey guys, I am having a hell of a time trying to get my page centered, I have used a tutorial which seems to help everyone, but it didn’t work for me.
http://mindpalette.com/tutorials/center_layers/index.php

Here is the code, please let me know what I am doing wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Adobe GoLive" />
        <title>Ian Photography</title>
        <style type="text/css" media="screen"><!--
#layer1 { text-align: center; height: 152px; width: 861px; left: 40px; top: 30px; position: absolute; visibility: visible; }
#layer2 { text-align: center; height: 630px; width: 840px; left: 30px; top: 110px; position: absolute; visibility: visible; }
#wrapper { text-align: left; width: 850px; height: auto; margin-right: auto; margin-left: auto; }
body { text-align: center; }
--></style>
    </head>

    <body bgcolor="black">
    <div id="wrapper"> 
        <div id="layer1">
                <div style="position:relative;width:861px;height:132px;-adbe-g:p;">
                    <div style="position:absolute;top:0px;left:0px;width:812px;height:127px;">
                        <img src="Images/Title.png" alt="" height="127" width="812" border="0" /></div>
                </div>
            </div>
        <div id="layer2">
                <div style="position:relative;width:840px;height:582px;-adbe-g:p;">
                    <div style="position:absolute;top:16px;left:128px;width:182px;height:52px;">
                        <img src="Images/about.png" alt="" height="52" width="182" border="0" /></div>
                    <div style="position:absolute;top:16px;left:336px;width:182px;height:52px;">
                        <img src="Images/hire.png" alt="" height="52" width="182" border="0" /></div>
                    <div style="position:absolute;top:16px;left:544px;width:182px;height:52px;">
                        <img src="Images/contact.png" alt="" height="52" width="182" border="0" /></div>
                </div>
            </div>
        <p><img src="Images/title.gif" alt="" height="98" width="844" border="0" /><img src="Images/photo_home.gif" alt="" height="594" width="844" border="0" /></p>
    </div>
</body>

</html> 
Profile
 
 
ChooseDaily
Posted: 26 July 2009 07:35 PM   [ Ignore ]   [ # 1 ]
Newbie
Avatar
Rank
Total Posts:  4
Joined  2009-07-26

Hey Enforcer, here is an easy way to center layers (divs):

CSS

body { margin: 0; padding: 0; text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; } 

XHTML

<body>
<div id="wrapper">
    <div id="layer1"></div>
    <div id="layer2"></div>
</div>
</body> 

The wrapper is centered and the layers within it will be centered as well.  Hope this helps!

Profile
 
 
ChooseDaily
Posted: 26 July 2009 07:36 PM   [ Ignore ]   [ # 2 ]
Newbie
Avatar
Rank
Total Posts:  4
Joined  2009-07-26

I forgot to mention, you’ll want to edit the width of the wrapper div.  I simply put 960px in as an example.

Profile
 
 
Enforcer
Posted: 27 July 2009 08:29 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  2
Joined  2009-07-20

Awesome thank you so much!

Profile
 
 
ChooseDaily
Posted: 27 July 2009 09:46 PM   [ Ignore ]   [ # 4 ]
Newbie
Avatar
Rank
Total Posts:  4
Joined  2009-07-26

Glad I could help, let me know if something doesn’t work right.

Profile
 
 
Eve Leesa
Posted: 28 July 2009 09:52 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  19
Joined  2009-07-27

Just centering the layer is easy - define it’s dimensions and set it’s left and right margins to auto, like:
#mainLayer {
width: 600px;
height: 100%;
margin: 0px auto;
}
Nesting other layers in the centered layer shouldn’t be a problem, as long as you’re using relative positioning. If you’re positioning the child layers absolutely, hopefully someone else can help you.


Search engine optimization

Profile
 
 
ChooseDaily
Posted: 28 July 2009 11:05 AM   [ Ignore ]   [ # 6 ]
Newbie
Avatar
Rank
Total Posts:  4
Joined  2009-07-26

You’re right Eve, but unfortunately older versions of IE won’t center those div’s.  That’s why you have to add “text-align: center;” to the body tag and then “text-align: left;” back to your wrapper div.

Profile
 
 
   
 
 
‹‹ Help with Logo      Link Error ››