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

My html:

PHP Code:


			
<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 -

Code:

<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:

Code:

<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!

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.

Code:

#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:

Quote:

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. ??

Code:

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

jerry62704 · 01-23-2013, 09:58 PM

Quote:

Originally Posted by jeddi

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. ??

Code:

#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

Quote:

Originally Posted by jeddi

I thought this would center everything inside it. ??

Code:

#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 !!

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 ?

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

.