CSS e div al 100%

[Sonikag]

Sto sperimentando l'impaginazione senza tabelle...
Dunque ho creato la colonna di sx dove c'è il logo pippo.gif e sotto ci andrà un menù...

Foglio stile:

body{
SCROLLBAR-FACE-COLOR: ##feefdc;
SCROLLBAR-ARROW-COLOR: #fe900c;
SCROLLBAR-BASE-COLOR: #feefdc;
scrollbar-3d-light-color: #feefdc;
scrollbar-dark-shadow-color: #fe900c;
SCROLLBAR-SHADOW-COLOR: #f4e5d2;
SCROLLBAR-3DLIGHT-COLOR:#f4e5d2;
height: 100%;
}

.barrasx {
height: 100%;
width: 125px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(img/sf.jpg);
position: absolute;
}

Nella pagina HTML ho scritto questo:

<div class="barrasx">[img]../images/pippo.gif[/img]</div>

---

La barra è correttamente visualizzata al 100%, ma una volta che implemento un menu puff anzichè al 100% me la visualizza più lunga! Why?

Grazie

[kaze]

Io proverei a dare all'IMG padding:0, e margin:0; ...

Indi per essere più sicuro metterei dei contenitori (DIV, table) all'interno di barrasx dove posizionerei i vari oggetti.

[Sonikag]

Grazie ho risolto ma ora è sbucato un altro problemino he he...
Dunque ho il body con altezza 100%, la famosa colonna di sx così:

.barrasx {
width: 125px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(img/sf.jpg);
position: absolute;
height: 100%;
}

Poi alla destra della barra ho messo l'intestazione e i contenuti, sotto i contenuti ho messo una riga con la data dell'ultima modifica in questo modo:

div.data {
margin: 30px 0px 0px 130px;
padding: 2px 6px 3px 130px;
text-align: right;
font-weight: normal;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top: 1px solid #FFCC00;
border-right: 0px solid;
border-bottom: 0px solid;
border-left: 0px solid;
font-style: italic;
vertical-align: baseline;
background-image: url(img/sf_data.jpg);
background-repeat: repeat-y;
background-position: left;
background-color: #FFFAF4;

}

e richiamato così:

<div class="data"> Ultimo aggiornamento:
22 March, 2004
</div>

---

Quello che volevo sapere è se è possibile allineare in basso il div data, perchè avendo la colonna di sx al 100% l'effetto non è bello!

Tnx

[Marcolino's]

www.constile.org

[Sonikag]

Il problema è che la barra di sx mi serve alta quanto la somma di tutte le altezze dei div che si trovano a destra! Ovviamente i div non hanno altezza fissa...

Il problema mi rimane nonostante abbia modificato in questo modo:

.barrasx {
width: 125px;
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(img/sf.jpg);
background-repeat: repeat-y;
position: absolute;
min-height: 350px;
height: auto !important;
height: 350px;
}

[Sonikag]

Ho risolto mettendo tutto il contenuto della mia pagina in un box con altezza minima 200px

.box {
min-height: 200px;
height: auto !important;
height: 200px;
}

In questo modo quando il testo di destre aumenta la colonna di sinistra aumenta di dimensioni...

Il problema è che da quando ho implementato quel box su mozilla mi da dei problemi un div dove scrivo la data:

div.data {
margin: 30px 0px 0px 130px;
padding: 2px 6px 3px 130px;
text-align: right;
font-weight: normal;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top: 1px solid #FFCC00;
border-right: 0px solid;
border-bottom: 0px solid;
border-left: 0px solid;
font-style: italic;
vertical-align: baseline;
background-image: url(img/sf_data.jpg);
background-repeat: repeat-y;
background-position: left;
background-color: #FFFAF4;
width: 100%;
}

--- nel codice è così:
<div class="data"> Ultimo aggiornamento:
23 March, 2004
</div>

Quella riga mi crea la scroll bar orizzontale, ma solo su mozilla! Ho provato a cambiare le proprietà static - relative e absolute ma nulla