Come posso piazzare un div in un punto preciso dentro il div "box" che si ponga visivamente fra il div mainContent e il div "Sidebar1" e sopra tutti trasparente. Utilizzando un container con misure fisse non posso utilizzare un div PA in posizione assoluta in quanto a modificando la misura della finestra del browser il div PA rimane fisso.
<!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>Documento senza titolo</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center; /
color: #000000;
}
.twoColFixRtHdr #container {
width: 960px;
background: #FFFFFF;
border: 1px solid #000000;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixRtHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.twoColFixRtHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.twoColFixRtHdr #sidebar1 {
float: right;
width: 200px;
background: #EBEBEB;
padding: 15px 10px;
}
.twoColFixRtHdr #mainContent {
margin: 0 250px 0 0;
padding: 0 20px;
}
.twoColFixRtHdr #footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
}
.twoColFixRtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<style type="text/css">
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
</style>
<![endif]--></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<h1>Intestazione</h1>
</div>
<div id="box">
<div id="sidebar1">
<h3>Contenuto Sidebar1</h3>
Il colore di sfondo di questo div viene visualizzato solo per tutta la lunghezza del contenuto. Se invece si desidera visualizzare una linea di divisione, inserire un bordo sul lato destro del div #mainContent se conterrà sempre una quantità maggiore di contenuto. </p>
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>
</div>
<div id="mainContent">
<h1> Contenuto principale</h1>
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. 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>
<h2>Titolo di livello H2 </h2>
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>
<br class="clearfloat" />
</div>
<div id="footer">
Piè di pagina
</p>
</div>
</div>
</body>
</html>
Rispondi quotando