PDA

View Full Version : Make Divs overlap


johnMoss
01-26-2011, 08:13 PM
http://www.lacruzconcierge.com/dreamWeaverTestFile/home.html

Down the page is a white box over a blue background. The desired look is a rounded white rectangle as you will see, so I assumed I had to create an image in order to get this look. This image is hence overlayed to a blue background.
I wish to place images and text inside this white rectangle, which will require a couple more divs at least. I seem to be using z-index incorrectly. I've left my text error where it is on purpose, so you can see it. It's desired placement is top left of the white box. I can get it where i want it, but I am failing to get it to overlay the white box. Gentlemen?


<!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>
<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body class="oneColFixCtrHdr" onload="MM_preloadImages('images/NB_homeDown.gif','images/NB_homeOver.gif','images/NB_homeDownOver.gif','images/NB_howItWorksDown.gif','images/NB_howItWorksOver.gif','images/NB_howItWorksDownOver.gif','images/NB_FAQDown.gif','images/NB_FAQOver.gif','images/NB_FAQDownOver.gif','images/NB_contactUsDown.gif','images/NB_contactUsOver.gif','images/NB_contactUsDownOver.gif','images/NB_qualityDown.gif','images/NB_qualityOver.gif','images/NB_QualityDownOver.gif')">
<div id="container">
<div id="header"><img src="images/clickHere.gif" width="275" height="117" align="left" alt="Click Here To Get Us Shopping For You!" />
<img src="images/shop17Logo.gif" width="450" height="117" align="right" alt="shop17Logo" />
<!-- end #header -->
</div>
<div class="menuBarLine"><img src="images/Orange-Line.gif" width="900" height="20" align="middle" alt="orange line" />
</div>
<div class="menu">
<table border="0" cellpadding="5" cellspacing="5">
<tr>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/NB_homeDown.gif',1)" onmouseover="MM_nbGroup('over','home','images/NB_homeOver.gif','images/NB_homeDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/NB_homeUp.gif" alt="home" name="home" border="0" id="home" onload="" /></a></td>
<td><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','howItWorks','images/NB_howItWorksDown.gif',1)" onmouseover="MM_nbGroup('over','howItWorks','images/NB_howItWorksOver.gif','images/NB_howItWorksDownOver.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/NB_howItWorksUp.gif" alt="How It Works" name="howItWorks" border="0" id="howItWorks" onload="" /></a></td>
<td><a href="home.html" target="_top" onClick="MM_nbGroup('down','group1','FAQ','images/NB_FAQDown.gif',1)" onMouseOver="MM_nbGroup('over','FAQ','images/NB_FAQOver.gif','images/NB_FAQDownOver.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="FAQ" src="images/NB_FAQUp.gif" border="0" alt="Frequently Asked Questions" onLoad="" /></a></td>
<td><a href="home.html" target="_top" onClick="MM_nbGroup('down','group1','contactUs','images/NB_contactUsDown.gif',1)" onMouseOver="MM_nbGroup('over','contactUs','images/NB_contactUsOver.gif','images/NB_contactUsDownOver.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="contactUs" src="images/NB_contactUsUp.gif" border="0" alt="Contact Us" onLoad="" /></a></td>
<td><a href="home.html" target="_top" onClick="MM_nbGroup('down','group1','qualityGuarantee','ima ges/NB_qualityDown.gif',1)" onMouseOver="MM_nbGroup('over','qualityGuarantee','images/NB_qualityOver.gif','images/NB_QualityDownOver.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="qualityGuarantee" src="images/NB_qualityUp.gif" border="0" alt="Quality Guarantee" onLoad="" /></a></td>
</tr>
</table>
</div>
<div id="mainContent"><img src="images/shopper.gif" width="773" height="305" alt="Rock Bottom Pricing for your Custom Print Project" />


<!-- end #mainContent -->
</div>
<div class="subMainContent">
<img src="images/whiteBackground.gif" width="840" height="400" alt="white background" align="middle"/></div>
<div class="productList">
<H4>Products</H4>
<ul>
<li> Business Cards</li>
<li> Flyers</li>
<li> Postcards</li>
<li> Catalogs</li>
<li> Labels</li>
<li> Doorhangers</li>

</div>

<div id="footer">
<p><a href="#">HOME</a> | <a href="#">HOW IT WORKS | </a> | <a href="#">FAQ</a> | <a href="#">CONTACT US </a> | <a href="#">QUALITY GUARANTEE</a><br/>
<strong>&copy; 2011 DIVA GRAPHICS INC. DALLAS, TX </strong></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>





@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
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;
}
.menuBarLine{
margin-left:20px;
margin-right:20px;
}

.menu{
height:44px;
margin-left:20px;
margin-right:20px;
padding-left:25px;
margin-top:-13px;

}


.oneColFixCtrHdr #container {
width: 940px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
background: #d4e3fa;
height:120px;
padding-left:60px;
padding-right:60px;

/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #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 */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #ffffff;
margin-top:5px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #d4e3fa;
text-align:center;
font-size:9px;

}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.subMainContent {
background-color:#d4e3fa;
padding-top:45px;
padding-left:50px;
margin-top:-40px;
}
.productList {
width: 200px;
float:left;
margin-top:-150px;
z-index:10;

}

johnMoss
01-26-2011, 10:53 PM
html code errors of closing ul tag & various capitals have been corrected...

johnMoss
01-27-2011, 12:52 AM
problem more or less solved; opted to create background image simulating the merge...