...

View Full Version : Centering an Image Problem



pennella
09-07-2010, 12:28 AM
Having trouble centering an image. I have margin set to auto but it's lining up on the left. I also used a jquery fix to have full coverage of a background. THE CSS




html, body {border: 0; margin: 0; padding: 0;}

body {
font: 85%/0.9 arial, helvetica, sans-serif;
background: #99A989 url(../images/bg.jpg) repeat 0 0;
line-height: 130%;
width: 100%;
min-width: 970px;
color: black;
}

a {
color: #0099CC;
text-decoration: none;
}

a:hover {
color: #00CCFF;
}

a img {
border: none;/*remove border for linked images*/
}
.header {
margin-left: auto;
margin-right: auto;
}





h1 {
font-size: 1.6em;
height: 20px;
padding-top: 0;
}

h2{
font-size: 1.2em;
height: 20px;
padding-top: 0;
}

.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}

/***** Main Layout ****/
#container {
width: 100%;
height: 100%;
text-align: center;/* IE fix to center the page */
}


#content {
margin: 0 auto;
}



img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}


div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative;
}


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" xml:lang="en" lang="en">

<head>

<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->

<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>

</head>

<body>

<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">

<p class="grey">Home | Issues | Info | Forum | Connect</p>

</div>
<div class="left">
<!-- Login Form -->

</div>
<div class="left right">
<!-- Register Form -->

</div>
</div>
</div> <!-- /login -->

<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>

<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Navigation</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right">&nbsp;</li>
</ul>
</div> <!-- / top -->

</div> <!--panel -->
<img src="images/bg.png" class="bg" />
<div id="content">
<div id="header"><img src="images/header2.png" /></div>

</div>

</body>
</html>

Any ideas?

optimus203
09-07-2010, 01:12 AM
Are you trying to center the background image? I think margin should be set to:

html, body {border: 0; margin: 0 auto; padding: 0;}

pennella
09-07-2010, 01:26 AM
Hey thanks for the quick reply. I have the background as I want it.

I'm trying to center this image :

<div id="content">
<div id="header"><img src="images/header2.png" /></div>

</div>

header2.png is aligning to the left and not in the center. the div header has margins set to auto, so I don't know why it's not centering.

optimus203
09-07-2010, 01:36 AM
Gotcha. Change this:

.header {
margin-left: auto;
margin-right: auto;}

to this:

#header {text-align:center;}

In you original css, your calling the class name header, but you should be calling the id name header.

pennella
09-07-2010, 01:49 AM
You sir are awesome. Thanks a million times. I really appreciate it. Thank you for the explanation too.

pennella
09-07-2010, 05:53 AM
Also, just a question. I thought the difference between class and id was just a naming convention. Could you elaborate on what actually was the culprit here.
Thanks again

abduraooft
09-07-2010, 10:23 AM
http://htmldog.com/guides/cssintermediate/classid/ may help!

Major Payne
09-07-2010, 05:26 PM
CSS:



#header {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: url(../images/header2.png) no-repeat center scroll;
}


HTML:



<div id="content">
<div id="header"></div>

</div>


That's all you need for the header unless you want to make it clickable, then CSS can set up a background image as a clickable link or you can return to using the image tag and wrap it in the link tags. Be sure to set width/height to at least the size of the image used. To center an element, you must have a width set before using the CSS property, margin: 0 auto;.

If you want your page centered:

CSS:



body {
width: 1024px;
height: YYYpx; /* Optional */
font: 85%/0.9 arial, helvetica, sans-serif;
background: #99A989 url(../images/bg.jpg) repeat 0 0 scroll;
line-height: 130%;
color: #000;
}


If you want image as a link, the easy way is:

HTML:


<div id="content">
<div id="header"><a href="URL path to external link" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src="../images/bg.jpg" alt="Text Description" /></a></div>


</div>

pennella
09-07-2010, 11:22 PM
Ok thanks a lot for all the help. I do have one more question. I got the #header to center. After that I have another div (#navbar)I want to center it as well but again, its lining up on the left. Any ideas? Here's all the Code

CSS:

html, body {border: 0; margin: 0 auto; padding: 0;}

body {
font: 85%/0.9 arial, helvetica, sans-serif;
background: #99A989 url(../images/bg.jpg) repeat 0 0;
line-height: 130%;
width: 100%;
min-width: 970px;
color: black;
}

a {
color: #0099CC;
text-decoration: none;
}

a:hover {
color: #00CCFF;
}

a img {
border: none;/*remove border for linked images*/
}
#header {text-align:center;}
#navbar {
text-align:center;
background-image: url(../images/nav_bg.png);
height: 32px;
width: 737px;
margin: 0%;
background-repeat: no-repeat;
background-position: center;
}






h1 {
font-size: 1.6em;
height: 20px;
padding-top: 0;
}

h2{
font-size: 1.2em;
height: 20px;
padding-top: 0;
}

.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}

/***** Main Layout ****/
#container {
width: 100%;
height: 100%;
text-align: center;/* IE fix to center the page */
}


#content {
margin: 0 auto;
}



img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}


div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative;
}


The HTML


<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->

<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>

</head>

<body>

<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">

<p class="grey">Home | Issues | Info | Forum | Connect</p>

</div>
<div class="left">
<!-- Login Form -->

</div>
<div class="left right">
<!-- Register Form -->

</div>
</div>
</div> <!-- /login -->

<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>

<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Navigation</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right">&nbsp;</li>
</ul>
</div> <!-- / top -->

</div> <!--panel -->
<img src="images/bg.png" class="bg" />
<div id="content">
<div id="header"><img src="images/header2.png" /></div>
<div id="navbar"></div>

</div>

</body>
</html>http://www.frazierproperties.com/socialnets/TESTING/Capture.PNG

Major Payne
09-08-2010, 12:08 AM
This worked for me:


#navbar {
width: 737px;
height: 32px;
margin: 0% auto;
text-align: center;
background: url(../images/nav_bg.png) no-repeat center scroll;
}

pennella
09-08-2010, 12:15 AM
That worked! Could you please explain why it worked for you and why it didn't work for me (thus explaining what I did wrong)
Thank you so much

Major Payne
09-08-2010, 03:36 AM
You had margin: 0%; . I used margin: 0% auto;, but it should have been margin: 0 auto; without the percent sign. When using margins:

margin: [top/bottom] [right/left]; or expanded:

margin: [top] [right] [bottom] [left];

Ron



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum