...

View Full Version : 2 Simple Header images not centering ??



jeddi
01-23-2013, 10:22 AM
Hi,

Some very basic html code.

Should give me centered images, but I must have got it
wrong somewhere :confused:

My html:

<html>
<head>
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}

#mainC {
width:100%;
margin:0px auto;
}

#mainL {
width:100%;
float:left;
}

#mainR {
width:100%;
float:right;
}

#banner {
display: none;
position: relative;
top: 0px;
left: 0px;
border: 3px solid black;
overflow: hidden;
}

#imgContainer {
position: absolute;
top: 0px;
left: 0px;
}

#imgContainer img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}


img {
border: none;
}

h1{
color:#4B4B4B;
}

h2{
font-size:32px;
text-align:center;
font-weight: bold;
color:#773500;
}
</style>
</head>
<body>
<div id="bk_image"> </div>

<div id="mainC">

<div style="margin:10px 0 0 100px ; ">
<span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Auto World</span>
<span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The Maddest Auto Community</span>
<br><br>
</div>
<img alt="Auto World" title = "Auto World" src="/images/trees.jpg" >
<div style = "margin: 0 auto;">
<div id="banner">
<div id="imgContainer"></div>
</div> // end banner div
</div> // end center div
<br><br>
</div>
</div>
</body>
</html>


The live page is here:

http://professional-world.com/

Any one see the problem ??


Thanks




.

niralsoni
01-23-2013, 01:34 PM
Enclose your piece of code in a <center> tag as shown below -


<center>
<img alt="Auto World" title = "Auto World" src="/images/trees.jpg" >
<div style = "margin: 0 auto;">
<div id="banner">
<div id="imgContainer"></div>
</div> // end banner div
</div> // end center div
</center>

jerry62704
01-23-2013, 01:58 PM
Since you have a fixed width (1800) you could put in a fixed padding of 1800 - 900 / 2 or 450. But if the screen is less than the 1800 then the image will not appear centered.

If you wanted to do it more that css way then add margin-left: auto; and margin-right: auto; to the image container. This also has the problem that it won't appear centered if the screen is less than 1800 wide.

tempz
01-23-2013, 03:21 PM
Try this:



<div id="container" style="width: 960px;margin: 0 auto;">
<div id="bk_image"></div><div id="mainC">

<div style="margin:10px 0 0 100px ; ">
<span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Auto World</span>
<span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The Maddest Auto Community</span>
<br><br>
</div>
<img alt="Auto World" title="Auto World" src="/images/trees.jpg">
<div style="margin: 0 auto;">
<div id="banner" style="height: 150px; width: 900px; display: block;">
<div id="imgContainer" style="width: 1800px; left: 0px;"><img id="img_1" src="http://expert-world.org/banners/top-ten-fitness-diets.jpg"><img id="img_2" src="http://expert-world.org/banners/family-fitness-activities.jpg"></div>
</div> // end banner div
</div> // end center div
<br><br>
</div>

</div>

Excavator
01-23-2013, 04:24 PM
Hello jeddi,
Do not use deprecated <center> tags (http://www.w3schools.com/tags/tag_center.asp)!

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


Since your #banner gets it's 900px width from inline styling, adding this bit in red to your CSS will center it.

#banner {
border: 3px solid black;
display: none;
/*top: 0;
left: 0; */
margin: auto;
overflow: hidden;
position: relative;
}

jeddi
01-23-2013, 09:23 PM
Thanks for all the replies.

I don't understand this comment:


Since you have a fixed width (1800)


I have declared width:100%;

I don't think I have any 1800 statement ???


I thought this would center everything inside it. ??


#mainC {
width:100%;
margin:0px auto;
}

jerry62704
01-23-2013, 09:58 PM
Thanks for all the replies.

I don't understand this comment:




I have declared width:100%;

I don't think I have any 1800 statement ???


I thought this would center everything inside it. ??


#mainC {
width:100%;
margin:0px auto;
}

When I looked at it in Firebug and the element.style width.

You override the mainC margin. Look at "banner" in firebug and you will see the margin becomes "0".

Excavator
01-23-2013, 11:13 PM
I thought this would center everything inside it. ??


#mainC {
width:100%;
margin:0px auto;
}

No, not quite. In that bit of CSS the margin: 0 auto; only affects the outside of #mainC, not the contents. It can't center #mainC because, at 100% width, there is nothing to center.

jeddi
01-24-2013, 06:37 AM
OK - thanks for your patience.

I really should know this stuff by now !! :o

Anyway, so the answer is,
If I want to center my page - I NEED to give it a width ?

So If I choose, say 1200px.
For 90 % of monitors, I guess that will be OK ? :confused:


EDIT: Well, just tried that on mine and the image was not centered
but over to the LEFT hand side.

I changed the width to 1000px and now, on my monitor, it looks centered.

Don't know about others though


.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum