Ciao a tutti
dovrei disporre in una pagina dei div così strutturati Originale
Ho provato a mettere per i di "ElencoImmagini" e "Testo" il float:left; solo che ottengo questo
Ho anche provato ad aggiungere dopo i 2 div un div vuoto con clear:left; ma senza ottenere il risulato voluto.
Come posso fare?
GRAZIE!
Più PILU per tutti!!
ave!
posta sia html che css così vediamo se c'è qualche "magagna"!
Ritengo di avere 2 grandi pregi: il primo è una memoria di ferro; il secondo...mmmhhh va beh ora proprio non me lo ricordo!
Ok è un estratto del codice intero della pagina cmq è:
HTML
CSScodice:<div id="Content"> <div>&nbsp;</div> <div id="Main-Menu">Menu Principale</div> <div>&nbsp;</div> <div id="FotoBox">img img img</div> <div id="TestoBox">Testo</div> <div class="clear></div> </div>
codice:#Content{ background-image:url('/modello-sfondo.jpg'); } #Content #FotoBox, #Content #TestoBox{ float:left; } #Content #FotoBox{ width:280px; background-color:#CCCCCC; } #Content #TestoBox{ width:438px; margin-left:293px; background-color:#CCCCCC; } #Content .clear{ clear:left; }
Più PILU per tutti!!
dunque
l'html è:
<html>
<head>
<title> ..| Standard |.. </title>
<link rel="stylesheet" style type="text/css" href="style.css">
</head>
<body>
<div id="contenitore">contenitore
<div id="elencoimmagini">elencoimmagini</div>
<div id="testo">testo</div>
</div>
</body>
</html>
mentre il css:
div#contenitore {background-color: yellow;
width: 800px;
height: 600px;
}
div#elencoimmagini {float:left;
background-color: red;
width: 200px;
height: 550px;
margin-left:5px;
}
div#testo {float:left;
background-color: green;
width: 200px;
height: 550px;
margin-left:5px;
}
va bene(colori a parte ovviamente)?
Ritengo di avere 2 grandi pregi: il primo è una memoria di ferro; il secondo...mmmhhh va beh ora proprio non me lo ricordo!
non mi funziona!!!
Implemento questo script in un'altra pagina e ottengo sempre i un risultato tipo questo
Vi allego l'html della pagina
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #3F525A;
background-color: #F9F2D7;
margin:0px;
padding:0px;
width:100%;
height:100%;
text-align:center;
}
#PageBox{
width:850px;
height:100%;
margin:0px auto 0px auto;
text-align:left;
}
#Main{
width:738px;
float:left;
}
#Menu-Servizio{
width:105px;
background-color:#336600;
float:left;
margin-left:7px;
}
#Header{
width:738px;
height:240px;
position:relative;
}
#Header #Background{
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:53px;
background-image:url('/immagini-gui/modello-sfondo.jpg');
}
#Header #Box1{
position:absolute;
left:0px;
top:177px;
width:293px;
height:9px;
background-color:#F9F2D7;
border-top:1px solid #A9B793;
border-bottom:1px solid #A9B793;
border-left:0px;
border-righ:0px;
}
#Header #Box2{
position:absolute;
left:292px;
bottom:0px;
width:445px;
height:211px;
border:1px solid #A9B793;
background-color:#F9F2D7;
}
#Header #Logo{
position:absolute;
left:0px;
top:0px;
width:293px;
height:178px;
border-left:1px solid #A9B793;
text-align:center;
vertical-align:middle;
line-height:20px;
font-size:12px;
color:#608053;
}
#Header #Logo img{
margin-top:30px;
}
#Header #Foto{
width:431px;
height:199px;
background-color:#CCCCCC;
margin-top:5px;
margin-left:5px;
}
#Content{
background-image:url('/immagini-gui/modello-sfondo.jpg');
}
#Content #Main-Menu{
background-image:url('/immagini-gui/modello-sfondo-menu.jpg');
height:20px;
line-height:20px;
text-align:center;
}
#Content #FotoBox,
#Content #TestoBox{
float:left;
}
#Content #FotoBox{
width:280px;
background-color:#CCCCCC;
}
#Content #TestoBox{
width:438px;
margin-left:10px;
background-color:#CCCCCC;
}
#Content .clear{
clear:left;
}
-->
</style>
<title>Documento senza titolo</title>
</head>
<div id="PageBox">
<div id="Main">
<div id="Header">
<div id="Background"></div>
<div id="Box2"><div id="Foto">Foto</div></div>
<div id="Box1"></div>
<div id="Logo">foto
testo</div>
</div>
<div id="Content">
<div></div>
<div id="Main-Menu">Menu Principale</div>
<div></div>
<div id="FotoBox">img
img
img</div>
<div id="TestoBox">Testo</div>
</div>
</div>
<div id="Menu-Servizio">Menu-Servizio</div>
</div>
<body>
</body>
</html>
Più PILU per tutti!!
Permessi di invio
Rispondi quotando