Forum Moderators: not2easy
I'm trying to create a liquid header using a 1px wide image and a left and right float for the corner images. The problem is i'm using transparent png's and need to position them on the ends of the div container instead of overlapping. (to give them the same transparency)
Any insight?
<style type="text/css">
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
background-color: #333333;
background-image: url(Images/circuit-gradient-380x1050.jpg);
}
#container {
text-align: left; /* counter the body center */
width: 80%;
background-image: url(Images/xrepeatheader.png);
background-repeat: repeat-x;
height: 108px;
margin-right: auto;
margin-left: auto;
}
#container #leftcorner {
background-image: url(Images/leftcornerheader.png);
float: left;
height: 108px;
width: 27px;
}
#container #rightcorner {
background-image: url(Images/rightcornerheader.png);
float: right;
height: 108px;
width: 27px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcorner"></div>
<div id="rightcorner"></div>
</div>
</body>
</html>
Thanks for your help!
To get something outside the container div, why not use absolute positioning ?
To stop overloapping, why not set a fixed margin instead of the 80% width (whih leads to unknown sizes of margins
body {
font: 80% verdana, arial, helvetica, sans-serif;
background-color: #333333;
background-image: url(Images/circuit-gradient-380x1050.jpg);
}
#container {
background-image: url(Images/xrepeatheader.png);
background-repeat: repeat-x;
height: 108px;
margin: 0 27px;
}
#container #leftcorner {
background-image: url(Images/leftcornerheader.png);
position: absolute;
top: 0;
left: 0;
height: 108px;
width: 27px;
}
#container #rightcorner {
background-image: url(Images/rightcornerheader.png);
position: absolute;
top: 0;
right: 0;
height: 108px;
width: 27px;
}
Or alternatively do use the 80% width and push the two divs outside it by giving the parent position and using negative margins:
body {
font: 80% verdana, arial, helvetica, sans-serif;
background-color: #333333;
background-image: url(Images/circuit-gradient-380x1050.jpg);
}
#container {
background-image: url(Images/xrepeatheader.png);
background-repeat: repeat-x;
height: 108px;
width: 80%
margin: 0 auto;
position: relative: /* to give the container position */
}
#container #leftcorner {
background-image: url(Images/leftcornerheader.png);
position: absolute;
top: 0;
left: 0;
margin-left: -27px; /* equal to width */
height: 108px;
width: 27px;
}
#container #rightcorner {
background-image: url(Images/rightcornerheader.png);
position: absolute;
top: 0;
right: 0;
margin-right: -27px; /* equal to width */
height: 108px;
width: 27px;
}
Does this look alright to you?
<!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>
<title>Untitled Document</title>
<style type="text/css">
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
background-color: #333333;
background-image: url(Images/circuit-gradient-380x1050.jpg);
}
#container {
text-align: left; /* counter the body center */
width: 80%;
background-image: url(Images/xrepeatheader.png);
background-repeat: repeat-x;
height: 108px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#container #leftcorner {
background-image: url(Images/leftcornerheader.png);
float: left;
height: 108px;
width: 27px;
margin-left: -27px;
position: absolute;
}
#container #rightcorner {
background-image: url(Images/rightcornerheader.png);
float: right;
height: 108px;
width: 27px;
margin-right: -27px;
position: relative;
left: 0px;
top: 0px;
}
</style>
