PDA

Click to See Complete Forum and Search --> : positioning an image help....

zandor435
12-04-2005, 01:46 PM
I am trying to center an image w/in a div tag. To do this i have set the image as the background of another div tag which is then centered w/in the main div tag. However, when i do this, my image keeps showing up aligned left.

Could anyone please help me w/ this?

Thank you in advance for any help or suggestions.

Zach


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Applied</title>
<style type="text/css">
<!--
body {
background-color: #000000;
margin: 0px;
}
/*image that is centered w/in main wrapper horizontally*/
#splash-image {
background-image: url(file:///C|/Documents%20and%20Settings/a30/Desktop/Applied%20Ultrasonics/Graphics/splash2.jpeg);
height: 343px;
width: 396px;
float: none;
background-repeat: no-repeat;
}
/*container on left*/
#main-wrapper {
width: 390;
float: none;
padding-left: 21px;
display: inline;
}
#main-body {
background-color: #990033;
width: 390px;
display: inline;
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
/*this is the container that includes the main and sidebar wrappers */
#wrapper {
background-image: url(file:///C|/Documents%20and%20Settings/a30/Desktop/Applied%20Ultrasonics/Graphics/MiddleWrapper.gif);
background-repeat: repeat-y;
width: 590;
background-position: center top;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<div id="wrapper"> <!--wraps main-wrapper and sidebar wrapper-->
<div id="main-wrapper"> <!-- wraps left content -->
<div id="main-body"><!--this should be the content part of main wrapper-->
<div id="splash-image">Content for id "splash-image" Goes Here</div> <!--end splash image-->
</div>
<!--end of main-body-->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div><!--end of main-wrapper-->
</div>
<!--end of wrapper-->
</body>
</html>
FromU2ME
12-04-2005, 02:20 PM
Try to write the div tag without the background, and replace the entire #wrapper style with <div align="center"><img src="url"></div> and/or simply add a <center>-tag inside the <div>-tag.

Always try to avoid background images since you never know whether it will be a problem in width or height in different browsers, os, resolutions etc. even though you did write background-repeat!
ray326
12-04-2005, 04:09 PM
background: url(xxx) no-repeat 50% 50%;
LJK
12-04-2005, 06:43 PM
Hi -
Try adding: text-align:center; to the body tag and margin:0 auto;
to any divs that need to be centered.

Good luck,
El