Struttura a 3 colonne. Errore nella colonna a destra. Si sposta.

[freank]

Salve,
stiamo facendo un sito in html e css.
Il sito è a 3 colonne + l'header.
Però la colonna a destra, quando ridimensiono la finestra "non rimane al suo posto" ma si sposta e rende illegibili alcuni contenuti.
Come modificare per farla rimanere al suo posto senza dover riscrivere tutto ?
Quersto è il css :

 body{background:url(Images/background.png); font-family: Arial, Verdana, Tahoma, 'Segoe UI', sans-serif; margin:0 0}
a{color:white;text-decoration:none}
a:hover{color:#061e24 !important}
/*Zona header*/
#header{background:url(Images/backgroundheader.png) repeat-x; height:181px}
#header img{margin-top:20px}
#menu{background:url(Images/menu.png) no-repeat; position:relative; top:-110px; left:220px; width:680px}
#menu ul{list-style-type:none}
#adsense{position:relative; top:-130px; left:220px;}
#days{height:77px;background:url(Images/days.png) no-repeat; position:absolute; top:35px; right: 150px; width:50%; width:151px}

/*Colonna sinistra*/
#left{position:absolute; top:200px; width:250px; left:-25px;}
#left .first {background:url(Images/pulsante1.png) no-repeat; height:20px; }
#left .second{background:url(Images/pulsante2.png) no-repeat; margin:2px 0; height:20px}
#left .first2 {background:url(Images/pulsante1-trasp.png) no-repeat; height:20px; }
#left .second2{background:url(Images/pulsante2-trasp.png) no-repeat; margin:2px 0; height:20px}

#news{margin-left:40px; background:url(Images/tab2-trasp.png); font-size:13px; font-weight:bold; width:190px; padding:0 5px}
#screen{margin-left:40px;  width:200px; background:url(Images/tab2-trasp.png)}
#screen h2{font-size:14px; color:white; font-weight:bold; width:190px; padding:0 5px}
#screen img {margin-left:8px;padding-bottom:8px;border:none;}
#blocco{border:none; width:200px; height:200px; background:cyan; margin:20px 40px}

/*Colonna centrale*/

/*Colonna destra*/
#rights{position:absolute; right:150px; top:200px; width:260px;height:600px; padding:5px; overflow:auto;}

#stats{position:absolute; background:url(Images/tab-trasp.png); font-size:13px; font-weight:bold; width:220px; padding:5px; color:white}
#liv{position:absolute; top:120px; background:url(Images/tab2-trasp.png); font-size:13px; font-weight:bold; width:220px; padding:5px; color:white}

#vota{position:absolute; top:270px;  width:230px; background:url(Images/tab-trasp.png)}
#vota h2{font-size:18px; color:white; font-weight:bold; width:190px; padding:0 25px}
#vota p{font-size:14px; color:#316565; font-weight:bold; width:190px; padding:0 25px; line-height:14px; position:relative; top:-10px}
#vota img {margin-left:23px;padding-bottom:8px;border:none;}
#vota input{background:url(Images/vota.png) no-repeat; border:0; color:white; font-size:16px; font-weight:bold;}

[esseAemme]

E' il position absolute che ti crea problemi. Quell'assoluto è rispetto alla finestra del browser, tu ridimensioni la finestra e lui si sposta rispettando i margini che gli hai detto.

Ti suggerisco di implementare questo metodo che mi ha risolto la vita:
http://woork.blogspot.it/2008/01/thr...structure.html


Sam

[freank]

ho provato a utilizzare questo metodo, ma la terza colonna va a finire (non so perchè) sotto alla seconda.
Inoltre ho notato che se modifico la grandezza della finestra del browser, compaiono una sotto a un'altra...

[Bellu]

Ha ragione esseAemme.

Usando position absolute i div si posizionano in base alla grandezza del tuo schermo, ovvero alla risoluzione.

Quindi anche se riusciresti a risolvere il problema (che credo tu abbia in locale) quando il sito sarà on line se qualcuno lo visualizzasse con una risoluzione diversa, da quella che hai avuto te in fase di progettazione, ci sarebbero comunque dei problemi di visualizzazione.

Quello che ti consiglio è di fare un wrapper largo 960px (ormai su internet questa è una misura standard) dove inserire tutto il contenuto del sito.

Spero di essere stato chiaro.

Bellu

[freank]

Quindi deve essere largo massimo 960 ? così poco ?

come faccio poi a mettere 3 colonne fisse l'una affianco all'altro tramite div ?
ho provato a impostare (come nel link che mi ha dato sam) a tutti e 3 i div float:left; .... ma la terza colonna me la fa apparire sotto la seconda.
Ciò accade per quale motivo ?

[esseAemme]

Ciao Bellu,

io ho la larghezza totale del sito pari a 1271px, alla luce di quanto dici consigli di rifarlo o ridurre?

P.S.: Bellissimo lo slideshow che hai nel sito... 'na figata!

Sam

[Bellu]

Grazie esseAemme!

quello slideshow se ti interessa si chiama roundabout ed è sviluppato in jquery, non l'ho fatto io se cerchi su google trovi il sito dell'autore e tutta la documentazione per svilupparlo e modificarlo.

Ti consiglio di portare la risoluzione del tuo sito a 1024px almeno, cosi che tutti (anche chi ha un monitor antiquato) possano visualizzarlo in modo ottimale.

Per freank: per chiarire meglio la situazione ho scritto del codice, spero possa tornarti utile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div id="wrapper">
<div id="header">
HEADER
</div>

<div id="colonna_sinistra">sinistra </div>
<div id="colonna_centro">centro </div>
<div id="colonna_destra">destra </div>
</div>
</body>

</html>


#wrapper
{
width:960px;
margin:auto;
border:1px solid black;
}

#header
{
height:250px;
width:960px;
border:1px solid red;
margin-bottom:20px;
}

#colonna_sinistra
{
float:left;
width:300px;
height:500px;
margin-right:27px;
border:1px solid orange;
}

#colonna_centro
{
float:left;
width:300px;
height:500px;
margin-right:27px;
border:1px solid orange;
}

#colonna_destra
{
float:left;
width:300px;
height:500px;
margin-right:0;
border:1px solid orange;
}

#wrapper:after
{
content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;

}

[Bellu]

dimenticavo: #wrapper:after serve per far si che i div posizionati con float non escano dal wrapper! se provi a toglierlo vedi che succede e capisci meglio magari...

spero di averti aiuto,

Bellu

[esseAemme]

Ciao Bellu,

grazie per le info.

Ho implementato uno slideshow anch'io e li trovo veramente fantastici... anche se jquery e javascript, sono semplici da usare grazie al lavoro di questi autori...
Ho provato sulla mia pelle che usare javascript e jquery sono tutt'altro che semplici... anzi.

Per #wrapper: after non l'avevo mai mai visto...

Io pensavo che scappasse fuori il l'ultimo div perchè non sono calcolate le larghezze giuste, allora se uno è leggermente più grande e il totale supera la larghezza impostata a sito, la colonna l'ultima a dx va fuori...

Sam

[Bellu]

esseAemme, per quanto riguarda la larghezza quello che dici è corretto...

infatti se vedi il margine tra colonna e colonna è 27 px, per calcolare anche lo spazio del bordo dei div che è di 1px.

#wrapper:after non fa si che non escano a seconda della larghezza, in quanto se quest'ultima è sbagliata la colonna di destra esce comunque.

Serve per inserire i div dentro al wrapper che non è posizionato tramite float, ma bensi è static di default.

Se usi questo codice e provi a toglierlo le colonne saranno sempre perfettamente allineate, in quanto le dimensioni sono giuste, ma il wrapper si fermerà sotto l'header e le colonne sottostanti saranno al di fuori del wrapper stesso...

se provi è più semplice a vedersi che a dirsi!

Bellu