Forum Moderators: not2easy
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
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:640px;
margin:0 auto;
left:auto; /* redundant with margin: 0 auto */
right:auto; /* redundant with margin: 0 auto */
text-align:left;
}
Hope this helps.
Marshall
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
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>
Or am I misunderstanding something?
Marshall
--Christy
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
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;
}
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;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
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.
#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
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.
