homepage Welcome to WebmasterWorld Guest from 54.83.133.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Centering Nested Div
christy




msg:3735531
 6:30 pm on Aug 31, 2008 (gmt 0)

The CSS:

body
{
background-color:#1f3746;
background-image:url(images/background.gif);
background-position:top;
background-repeat:no-repeat;
background-position:center;
background-position:top;
margin:0px;
topmargin:0px;
leftmargin:0px;
marginheight:0;
marginwidth:0;
text-align:center;
}

div.container
{
width:640;
margin:0 auto;
left:auto;
right:auto;
text-align:left;
}

The HTML:

<!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" />
</head>
<body>
<div class="container">
<span style="position:absolute; left: 35px; top: 10px; "><img src="images/TitleSignature.gif" alt="Title" style="width:320; height:70; "/></span>
<span style="position:absolute; left: 100px; top: 115px; "><img src="images/ButtonsStore.gif" alt="Store" style="width:100; height:27; " /></span>
</div>
</body>
</html>

I have tried the spans as divs. It 'seems' to work better with the images in spans. I'm not clear on the difference between a span and a div though.

What I'm trying to accomplish it a centered background image which you can see in the CSS body. This is working, yea! Then there are several images that I'm trying to center over the background image. I have all the images set up within the div "container". What I'm hoping to do is center the container with all of the images in tact.

Thus far it's not working. Any advice?

Thanks,
Christy

 

Marshall




msg:3735693
 1:49 am on Sep 1, 2008 (gmt 0)

Hi Christy and welcome to WebmasterWorld.

First, you can shortcut the information in your body

body
{
background: #1f3746 url(images/background.gif) top center no-repeat;
margin:0px;
topmargin:0px; /* redundant with margin: 0px */
leftmargin:0px; /* redundant with margin: 0px */
marginheight:0; /* Why? */
marginwidth:0; /* Why? */
text-align:center;
}

A <div> is a block element where as a <span> is an in-line element. You should be able to put an image in a <div> and have the div align center by using margin: 0 auto in combination with assigning a width to the <div>. A width declaration is necessary when using margin: 0 auto -

div.container
{
width:640
px;
margin:0 auto;
left:auto; /* redundant with margin: 0 auto */
right:auto; /* redundant with margin: 0 auto */
text-align:left;
}

Hope this helps.

Marshall

christy




msg:3735710
 2:32 am on Sep 1, 2008 (gmt 0)

Thanks! I got rid of the redundancies. I thought they were redundant, but I was trying so many things that I lost track.

Unfortunately I still don't have the images centering. Here's my latest attempt.

I was under the impression that the text-align:center in the body combined with the div's width setting and margin:0 auto would cause the contents of the div to be centered. Am I mistaken? Or just a little off?

<body style="text-align:center;">
<div style="width:640; margin:0 auto; text-align:left;">
<div style="position:absolute; left: 35px; top: 10px; "><img src="images/TitleSignature.gif" alt="Title" style="width:320; height:70; "/></div>
<div style="position:absolute; left: 100px; top: 115px; "><a href="store/index.php"><img src="images/ButtonsStore.gif" alt="Store" style="width:100; height:27; " /></a></div>
</div>

Thanks,
Christy

christy




msg:3735722
 3:12 am on Sep 1, 2008 (gmt 0)

BTW, I did add px to the width:640 and didn't get any better result :(

Marshall




msg:3735727
 3:27 am on Sep 1, 2008 (gmt 0)

text-align: center in the body merely aligns text and images center.

Correct me if I am wrong, but it is this <div>
<div style="position:absolute; left: 35px; top: 10px; "><img src="images/TitleSignature.gif" alt="Title" style="width:320; height:70; "/></div>

that you want centered. If that is the case, you can set the width and do margin: 0 auto; The other option is merely set the image this way:
<img src="" height="" width="" style="margin: 0 auto;"> and eliminate the surrounding <div>

Or am I misunderstanding something?

Marshall

christy




msg:3735747
 4:12 am on Sep 1, 2008 (gmt 0)

What I'm trying to do is I have set up several images in the formation I want in a div. I want the whole works to center in the browser. That will make them lay on a background image that is already centered. Make sense?

--Christy

Marshall




msg:3735758
 4:49 am on Sep 1, 2008 (gmt 0)

When you say "formation," do you mean

in-line -
<img><img><img>

stacked
<img><br />
<img><br />
<img><br />

or boxed

<img><img><br />
<img><img>

Regardless, this should achieve what you want -

CSS -
body
{
background: #1f3746 url(images/background.gif) top center no-repeat;
margin: 0;
padding: 0;
}
#Container
{
width: 640px;
margin: 0 auto;
padding: 0;
text-align: center;
}
#Container img {
margin: 0;
padding: 0;
border: none;
}

HTML -
<body>
<div id-="Container">
<img src... /><img src.... />etc
</div>
</body>

If you want to stack the images -
<body>
<div id-="Container">
<img src... /><br />
<img src.... /><br />
etc
</div>
</body>

Marshall

christy




msg:3736011
 3:38 pm on Sep 1, 2008 (gmt 0)

ERG. It's still not working. There has to be something else I'm doing wrong. I have cut down the code for positioning the images, yea!

I hope I don't get shot for too much code here, but I can only figure that I must have something somewhere else that doesn't belong:

The HTML page:

<!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" />
<link href="style.css" type="text/css" rel="stylesheet">

<title></title>
</head>
<body>
<div id="Container">
<img src="images/TitleSignature.gif" alt="Title" style="width:320; height:70; position:absolute; left: 35px; top: 10px;"/>
<a href="store/index.php"><img src="images/ButtonsStore.gif" alt="Store" style="width:100; height:27; position:absolute; left: 100px; top: 115px;" /></a>
<img src="images/ButtonsDemos.gif" alt="Demos" style="width:100; height:27; position:absolute; left: 160px; top: 170px; " />
<img src="images/ButtonsSlides.gif" alt="Slides" style="width:100; height:27; position:absolute; left: 190px; top: 225px;" />
<img src="images/ButtonsGallery.gif" alt="Gallery" style="width:100; height:27; position:absolute; left: 160px; top: 285px;" />
<img src="images/ButtonsBio.gif" alt="Biography" style="width:100; height:27; position:absolute; left: 100px; top: 345px;" />
<img src="images/ButtonContact.gif" alt="Contact" style="width:100; height:27; position:absolute; left: 40px; top: 390px;"/>
</div>
</body>
</html>

The stylesheet, style.css:

@charset "utf-8";
/* CSS Document */

body
{
background: #1f3746 url(images/background.gif) top center no-repeat;
margin:0px;
text-align:center;
}

#Container
{
width: 640px;
margin: 0 auto;
padding: 0;
text-align: center;
}

#Container img
{
margin: 0;
padding: 0;
border: none;
}

SuzyUK




msg:3736024
 4:08 pm on Sep 1, 2008 (gmt 0)

Christy,

If you add a background color to the container and also add in a non positioned paragraph into the container (temporarily), you'll see that the container div itself *is* actually centered using the code you have above.

You should also see that the images are being positioned relative to the viewport (they're not contained by the #Container div!) as that's the default containing block [w3.org],

If you want that to change you'll have to explicitly tell the #Container div to become the containing block for the absolutely positioned images. They will them take their position from it and move with it - you can do this by adding position: relative; to the #Container div

not sure if that's the answer, as your question is still confusing me a bit though as this doesn't actually center the images, if you want the whole "staggered image" set up centered.. you might also want to dimension the #container div differently all it actually needs is it's top left corner to be centered for the AP images to align with the center of the page

anyways see how it goes, & hth

csuguy




msg:3736073
 6:06 pm on Sep 1, 2008 (gmt 0)

margin:0 auto doesn't work with absolutely positioned elements.

Edit:
Put them in a containing div with position:relative. Use margin:0 auto with that div. If that doesn't work put a center tag immediately after the body tag. Hope that helps.

christy




msg:3736155
 9:02 pm on Sep 1, 2008 (gmt 0)

csuguy and SusyUK! You are gods!

#Container
{
width: 640px;
margin: 0 auto;
padding: 0;
text-align: center;
position:relative;
}

Adding position:relative; solved the whole problem. The staggered images in the div now center over the already centered background image. EUREKA!

Marshall, I have learned a great deal from you as well. Frankly I've been locked in a tower for the last several years and my coding is quite rusty.

Thanks everyone for your patience with me.

Thanks,
--Christy

swa66




msg:3736160
 9:18 pm on Sep 1, 2008 (gmt 0)

Christy,

From the code you have there: how does it work in other browsers ?

Tip:
- read up about conditional comments,
- develop in anything but IE, and fix the curve balls IE throws you in a conditional comment. (IE is just broken in many aspects)

It'll make your life a lot easier.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved