BillBoe
12 Apr 2011, 02:50 AM
Hi,
I've got a bit of an alignment issue that I swear should work, I actually had it working at one point, and no matter how long I stare at it and get frustrated I'm not making any progress.
I've posted the code below, basically the div id="Productsimage" has an image set as it's background and the size of the div is set to the size of the image (for this example I kept the size the same but just set the background to black, still shows up the same way). What I want to do is position the two div tags with id="Productsheader" 130px down from the top of the (background) image contained in the parent element ("Productsimage"). These two divs hold a transparent white background with black text overtop. I'm positioning with the classes "services" and "vacations". However instead of positioning the "Productsheader" divs 130px down within the "Productsimage" div, it moves the parent element "Productsimage" div instead. Can't understand this. I'm looking at it in Firefox and Safari on a mac. In Dreamweaver it renders as I would expect it to.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Contentwrapper{
width:100%;
text-align:center;
min-width:980px;
margin:0px;
padding:0px;
}
#Productsimage{
height:260px;
width:980px;
padding:0;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color:black;
}
#Productsheader{
background-color:white;
}
.services{
padding:0 0 0 45px;
margin:130px 0 0 0;
width:200px;
}
.vacations{
padding:0 0 0 15px;
margin:0;
width:600px;
}
#Productsheader h1{
font-family:Arial;
font-size:50px;
line-height:1em;
color:black;
padding:0;
margin:0;
}
#Productsheader h2{
font-family:Arial;
font-size:35px;
line-height:1em;
color:black;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="Contentwrapper">
<div id="Productsimage">
<div id="Productsheader" class="services">
<h2>services ></h2>
</div>
<div id="Productsheader" class="vacations">
<h1>MTB Vacation Packages</h1>
</div>
</div> <!-- Productsimage -->
</div>
</body>
</html>
Thanks in advance
EDIT: I realize I could use relative positioning on the parent element and then absolute on the two child divs, however I already have a few drop down menus and would rather not have to start using z-index stuff. Also this is something that is going to repeat itself a lot and i figure the margin way seems the easiest?? Thanks
I've got a bit of an alignment issue that I swear should work, I actually had it working at one point, and no matter how long I stare at it and get frustrated I'm not making any progress.
I've posted the code below, basically the div id="Productsimage" has an image set as it's background and the size of the div is set to the size of the image (for this example I kept the size the same but just set the background to black, still shows up the same way). What I want to do is position the two div tags with id="Productsheader" 130px down from the top of the (background) image contained in the parent element ("Productsimage"). These two divs hold a transparent white background with black text overtop. I'm positioning with the classes "services" and "vacations". However instead of positioning the "Productsheader" divs 130px down within the "Productsimage" div, it moves the parent element "Productsimage" div instead. Can't understand this. I'm looking at it in Firefox and Safari on a mac. In Dreamweaver it renders as I would expect it to.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Contentwrapper{
width:100%;
text-align:center;
min-width:980px;
margin:0px;
padding:0px;
}
#Productsimage{
height:260px;
width:980px;
padding:0;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color:black;
}
#Productsheader{
background-color:white;
}
.services{
padding:0 0 0 45px;
margin:130px 0 0 0;
width:200px;
}
.vacations{
padding:0 0 0 15px;
margin:0;
width:600px;
}
#Productsheader h1{
font-family:Arial;
font-size:50px;
line-height:1em;
color:black;
padding:0;
margin:0;
}
#Productsheader h2{
font-family:Arial;
font-size:35px;
line-height:1em;
color:black;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="Contentwrapper">
<div id="Productsimage">
<div id="Productsheader" class="services">
<h2>services ></h2>
</div>
<div id="Productsheader" class="vacations">
<h1>MTB Vacation Packages</h1>
</div>
</div> <!-- Productsimage -->
</div>
</body>
</html>
Thanks in advance
EDIT: I realize I could use relative positioning on the parent element and then absolute on the two child divs, however I already have a few drop down menus and would rather not have to start using z-index stuff. Also this is something that is going to repeat itself a lot and i figure the margin way seems the easiest?? Thanks