|
sticks464 -> Div behind content (9/23/2006 1:41:59)
|
I am using a layout that I want an extra div to go behind the content div an be partially visible with only want a backdround pic inside it. I have seen this done but can't remember where and have been searching all evening but no results.
Here's my code:
quote:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript" src="popup.js"></script>
<script type="text/JavaScript" src="search.js"></script>
<style type="text/css">
body {
font-family:"Georgia", Times New Roman, Times, serif;
font-size: 90%;
background-color: #CCCCCC;
margin: 0;
padding: 0;
}
a:link {
color: #993300;
text-decoration: none;
font-size: 100%;
}
a:hover, a:visited {
color:#FFCC00;
text-decoration: underline;
}
.uno {
background-color:#993300;
text-align: center;
margin: 0;
padding: 5px 0 5px 0;
}
.dos {
text-align: center;
margin: 0;
}
#content {
width: 760px;
border-left: 2px groove #000;
border-right: 2px groove #000;
margin: auto;
}
h2 {
font-size: 110%;
margin: 0;
padding: 0;
}
#header {
font-size: 200%;
font-weight: bold;
background-color:#663300;
padding: 10px 0 10px 10px;
border-bottom: 5px double #666;
}
#navigation {
background-color:#993300;
padding: 5px 0 5px 0;
border-bottom: 5px solid #630;
height: 20px;
}
#popup {
background-color: #666;
padding: 10px 0 10px 10px;
width: auto;
}
#search {
background-color: #999;
padding: 0 0 10px 0;
width: auto;
}
.middle {
width: 15px;
background-color: #666;
}
#footer {
text-align: center;
border-bottom: 5px double #000;
font-size: 75%;
}
#menu1 {
width:530px;
padding:0;
margin:0 auto;
list-style-type:none;
}
#menu1 li {
float:left;
width:100px;
border-right:3px solid #999;
font-size: 100%;
}
#menu1 a {
display:block;
width:100px;
color:#CCC;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}
#menu1 a:hover {
color:#000;
background:#999;
font-weight: bold;
}
#extraDiv {
position: absolute;
top: 350px;
left: 20px;
width: 355px;
height: 300px;
background: url(images/monkey.gif) no-repeat;
}
</style>
</head>
<body>
<div id="extraDiv"><span></span></div>
<div id="header">Heading goes here</div>
<div id="navigation">
<ul id="menu1">
<li><a href="nogo">#1 link</a></li>
<li><a href="nogo">#2 link</a></li>
<li><a href="nogo">#3 link</a></li>
<li><a href="nogo">#4 link</a></li>
<li><a href="nogo">#5 link</a></li>
</ul>
</div>
<div id="content">
<div id="popup">
<h2>Main content</h2>
<p>Popup text from another page <a href="javascript:Popup('shadow.html','Popup','700','400','','front');">Click Here</a></p>
</div>
<div id="search">
<h3 class="uno">Search</h3>
<p class="dos"><b>Choose any 4</b></p>
<form name="choose4" action="javascript:numChecked(document.choose4) //">
<table align="center">
<tr><td><b>Directories</b><br />
<input type="checkbox" name="check1" value="Yahoo"
onClick="choose4.check1.value='Yahoo'">Yahoo<br />
<input type="checkbox" name="check1" value="DMOZ"
onClick="choose4.check1.value='DMOZ'">DMOZ<br />
<input type="checkbox" name="check1" value="Snap"
onClick="choose4.check1.value='Snap'">Snap<br /><br /></td>
<td class="middle"></td>
<td><b>Search Engines</b><br />
<input type="checkbox" name="check1" value="Alta"
onClick="choose4.check1.value='Alta'">Alta Vista<br />
<input type="checkbox" name="check1" value="Direct"
onClick="choose4.check1.value='Direct'">Direct Hit<br />
<input type="checkbox" name="check1" value="Lycos"
onClick="choose4.check1.value='Lycos'">Lycos<br />
<input type="checkbox" name="check1" value="Excite"
onClick="choose4.check1.value='Excite'">Excite<br /></td>
<td><br><input type="checkbox" name="check1" value="Crawler"
onClick="choose4.check1.value='Crawler'">Webcrawler<br />
<input type="checkbox" name="check1" value="Go.com"
onClick="choose4.check1.value='Go.com'">Go.com<br />
<input type="checkbox" name="check1" value="DejaNews"
onClick="choose4.check1.value='DejaNews'">DejaNews<br />
<input type="checkbox" name="check1" value="Google"
onClick="choose4.check1.value='Google'">Google<br /> </td>
<td class="middle"></td>
<td><b>Meta Searches</b><br />
<input type="checkbox" name="check1" value="Go2Net"
onClick="choose4.check1.value='Go2Net'">Go2Net<br />
<input type="checkbox" name="check1" value="SearchCom"
onClick="choose4.check1.value='SearchCom'">Search.Com<br />
<input type="checkbox" name="check1" value="Mamma"
onClick="choose4.check1.value='Mamma'">Mamma<br />
<input type="checkbox" name="check1" value="DogPile"
onClick="choose4.check1.value='DogPile'">DogPile<br />
</td></tr></table><p align="center">
<b>Enter text to find</b>:<br />
<input type="text" name="text" size=30>
<input type="submit" name="send" value="Search"></p>
</form>
</div>
<div id="footer">2006 © Anybody dot com</div>
</div>
</body>
</html>
Thanks
|
|
|
|
