Log In · Register

 
 
Closed TopicStart new topic
css centering????? please help
deejay21
post Nov 7 2009, 11:39 PM
Post #1


Newbie
*

Group: Member
Posts: 3
Joined: Nov 2009
Member No: 751,627



hello below is my css code on my page.. all i want to do is for the image to be center on any screen resolution... not sure how to do it..

CODE
<div class="masthead"><span></span></div>


<style>

body {margin-top: 180px; }

</style>
<style>

.masthead {width: 800px; height: 169px;
position: absolute; margin-left: 0px; left: 12%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}


</style>
Reason for edit: Please use [codebox] tags when posting long codes. - Mike
 
Mickey
post Nov 8 2009, 05:14 AM
Post #2


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127



To center things for all screen resolutions, position the element(s) like this:

CODE
<div style="position:absolute; top:#px; left:50%; margin-left:-#px; z-index:9;">
Insert centered content here.
</div>

The top and margin-left attributes need to be replaced with appropriate values. For margin-left, the value must equal half the width of the content inside the container. Do not remove the minus symbol as it's there to pull the content to where it needs to be. Now, if you were to apply that method to the code you have now, this bit here:

CODE
.masthead {width: 800px; height: 169px;
position: absolute; margin-left: 0px; left: 12%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

Would instead look like this:

CODE
.masthead {width: 800px; height: 169px;
position: absolute; margin-left: -400px; left: 50%; top: 10px;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

If you also wanted to center it horizontally, use the 50% method again but with the top attribute, so it'll look like this:

CODE
.masthead {width: 800px; height: 169px;
position: absolute; margin-left: -400px; left: 50%; margin-top: -84px; top: 50%;
background-image:url(http://i1021.photobucket.com/Header.jpg);}

I used 50% for top and -84px for margin-top because 84 is about half the height of your header (169px).
 
deejay21
post Nov 8 2009, 11:00 AM
Post #3


Newbie
*

Group: Member
Posts: 3
Joined: Nov 2009
Member No: 751,627



Thank you very much this worked PERFECTLY!!!!!!!!!!!!! biggrin.gif
 
Mickey
post Nov 8 2009, 11:23 AM
Post #4


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127



Topic closed & moved.
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: