Salve, mi piacerebbe ottenere il risultato riportato nell'immagine allegata.
vi allego il mio foglio di stile e vi dico subito i problemi che ho riscontreto.
Codice html
<body>
<div id="box">
<div id="top"></div>
<div id="sottotitoli">|ioio|ioio|ioio|ioio|oooo</div>
<div id="sidebar">side</div>
<div id="main">main</div>
</div>
<div id="bottom">bottana</div>
</body>
di seguito il codice css
body {
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
font-size:12px;
color: Black;
background: White;
margin: 0px;
padding: 0px;
text-align:center;
}
#box {
width: 600px;
height:100%;
margin-top: 0px;
margin-bottom: 0px;
/* proviamo a centrare il paragrafo */
margin-right: auto;
margin-left: auto;
/* fine tentativo */
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
text-align:left;
}
#top {
height: 150px;
background-color: Gray;
background-image: url(acp.jpg);
/* immagine 600x150 */
background-repeat: no-repeat;
}
#sottotitoli {
padding: 5px 10px 5px 10px;
text-align: right;
background-color: Gray;
color: Fuchsia;
}
a.cavolo:link {
color: Lime;
}
#sidebar {
float:right;
background-color: Silver;
width: 200px;
right: 0px;
margin: 0px;
border-left: 1px solid #000;
}
#main {
width: 100%;
border-width: 1px;
margin: 0px;
padding: 0px;
}
#bottom {
width: 600px;
margin-top: 0px;
background-color: Aqua;
padding: 0px;
/* proviamo a centrare il paragrafo */
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
/* fine tentativo */
text-align: center;
border: 1px solid #000;
}
Lasciamo momentaneamente perdere la scelta cromatica.
Ho creato il box #box per contenere tutte le altre celle e per centrarle.
Per #top e #sottotitoli non penso ci siano problemi.
Ora arrivano i problemi:
vorrei che #main e #sidebar arrivassero fino in fondo alla pagina anche se completamente vuoti, e che (nel caso la pagina fosse vuota) #bottom arrivi appena 5 px sopra la barra di stato di windows.
Come noterete ciò non accade ... e se per di più dovessi aggiungere #bottom all'interno del box #box la cosa si complicherebbe.
Io non trovo la soluzione, qualcuno ci è per caso già caduto?
Rispondi quotando