Forum Moderators: not2easy
you will see where I specified an <img id> DIV at the bottom of the container DIV as the last element. I also specified that the <img id> div be position:relative and gave it an index:1 while other relative divs were specified with index:2.
This accomplished what i wanted (which was moving the <img id> BottomleftImageDiv under the bottom left corner of the main container), but what i see is that the container div, is extended as if the image was sitting in "normal" document flow" which is represented with the turquoise color section (i just changed the background so it was obvious).
I know that position:relative is basically positioning an element based on where it would be in normal document flow, but I wasn't aware that it should visably show.
Or can someone verify if this is correct or if not, what is wrong with the code that causes the actual div's normal document flow location to be visable.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Copy of MainTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --><style type="text/css">
<!--
.style1 {font-weight: bold}
body {
background-color: #666666;
background-image: url(Images/bkgd_color.png);
background-repeat: no-repeat;
}
-->
</style>
<link href="copy of oneColElsCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header"></div>
<div id="menu">
</div>
<div id="mainContent">
<h1 class="oneColElsCtrHdr"> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo com blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<br />
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<br />
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<div id="footer">
Footer
</div>
<div id="bottomLeftImageDiv"> <img id="bottomLeftImage" src="Images/Background/Main_daisy_bkgd.png" /> </div>
</div>
</body>
<!-- InstanceEnd --></html>
CSS
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}* {
margin:0;
padding:0;
}
img {
border:0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
display: inline;
}
#menu ul li a {
font-family: "Courier New", Courier, monospace;
color: #FFFFFF;
text-decoration: none;
}
.oneColElsCtrHdr #container {
width: 44em;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left;
background-repeat: no-repeat;
background-position: right top;
position: relative;
z-index: 2;
background-color: #00CCFF;
}
.oneColElsCtrHdr #header {
background-image: url(Images/Header/Header_bkgd.png);
width: 44em;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
height: 114px;
background-repeat: no-repeat;
z-index: 2;
position: relative;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColElsCtrHdr #menu {
height: 38px;
line-height: 30px;
background-image: url(Images/Menu/Menu_bkgd.png);
background-repeat: repeat-x;
width: 44em;
z-index: 2;
position: relative;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.oneColElsCtrHdr #mainContent {
background-color: #FFFFFF;
background-image: url(Images/Header/MainContent_bkgd.png);
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
background-repeat: no-repeat;
z-index: 2;
position: relative;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#footer {
background:#DDDDDD;
position: relative;
z-index: 2;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#bottomLeftImageDiv {
left: -177.5px;
top: -175px;
position: relative;
z-index: 1;
}
[edited by: SuzyUK at 6:53 am (utc) on Mar. 19, 2008]
[edit reason] Please No example URI's see charter [/edit]
Yes, this is correct
>>I know that position:relative is basically positioning an element based on where it would be in normal document flow,
that is exactly what position:relative; does but it offsets the position without removing the element from the flow..
maybe
position: absoluteabsolute:positioning removes from the flow.
