layout 3 colonne (2 equivalenti)

**Gold34gl3** · 04-06-2007, 18:25

Ciao,
devo realizzare un layout tipo quello dell'immagine in allegato.
Ho la necessita che la 1° e la 3° colonna siano equivalenti, cioè come se fossero tutt'una in altezza, mentre quella centrale deve essere a parte.
Il problmea deriva dal fatto che nella 1° colonna avrò dei contenuti nella parte del corpo, mentra nella 3° no, e ciò fa si che mentre la 1° si ridimensiona in altezza allungandosi o accorciandosi, la 3° rimane fissa.
come devo fare affinche le altezze siano sempre equivalenti?

pagina:

Codice PHP:




<body>



<div id="container">



<div id="colonna_1">

<div id="header">

<div id="top_1">ffff</div>

<div class="ombra_1"></div>

<div id="sotto_top_1"></div> 

<div id="corpo_1"></div>



<div class="ombra_1"></div>

</div>



</div>



<div id="colonna_2"> ast wertwert wert wet  wer</div>







<div id="colonna_3">

<div class="header">

<div id="top_3">dddd</div>

<div class="ombra_3"></div>

<div id="sotto_top_3"></div> 

<div id="corpo_3"> </div>

<div class="ombra_3"></div>

</div>

</div>

<div id="sopra_footer"></div>

<div id="footer"></div>



</div>



</body>

css:

Codice PHP:


/* CSS Document */

body, html {

    text-align: left;

    margin-top:10px;

    font-family:Geneva, Arial, Helvetica, sans-serif;

    font-size:12px;

    text-align:center;

    background-color: #C8C8C8;

}





#container {

    margin:auto;

    width:800px;

    background-color:#FFFFFF;

    background-image:url(../img/sfondo_pagina.jpg);

    background-repeat:repeat-y;

}



#colonna_1 {

    margin-top:0px;

    width:555px;

    float:left;

    min-height:600px;

    max-height:800px;

    height:100%;

    background-color:#FFFFFF;

}



#colonna_2 {

    width:206px;

    min-height:600px;

    max-height:800px;

    height:100%;

    float:left;

    margin-top:0px;

    background-color:#B95315;

    border-right-width: 2px;

    border-left-width: 2px;

    border-right-style: solid;

    border-left-style: solid;

    border-right-color: #FFFFFF;

    border-left-color: #FFFFFF;

}



#colonna_3 {    

    margin-top:0px;

    width:35px;

    min-height:600px;

    max-height:800px;

    float:left;

    background-color:#FFFFFF;

}



.header {

    height:210px;

}



#top_1 {

    float:left;

    width:555px;

    height:110px;

    margin-top:20px;

    background-color:#E56619;

}



#top_3 {

    float:left;

    width:35px;

    height:110px;

    margin-top:20px;

    background-color:#E56619;

}



#sotto_top_1 {

    width:555px;

    float:left;

    height:100px;

    background-color:#FFFFFF;

}

#sotto_top_3 {

    width:35px;

    float:left;

    height:100px;

    background-color:#FFFFFF;

}



.ombra_1 {

    width:555px;

    height:9px;

    float:left;

    background-image:url(../img/sotto_top.jpg);

    background-position:left bottom;

    background-repeat:no-repeat;

}



.ombra_3 {

    width:35px;

    height:9px;

    float:left;

    background-image:url(../img/sotto_top_corto.jpg);

    background-position:bottom;

    background-repeat:repeat-x;

}



#corpo_1 {

    float:left;

    width:100%;

    background-color:#E56619;

 }

 

 #corpo_3 {

    float:left;

    height:200px;

    width:100%;

    background-color:#E56619;

 }

 #sopra_footer {

     height:3px;

    padding-top:0px;

    background-color:#FFFFFF;

    clear:both;

    width:100%;

 }

 #footer {

    height:30px;

    vertical-align:bottom;

    clear:both;

    width:100%;

    background-color:#FFFFFF;

    border-top-width: 2px;

    border-top-style: solid;

    border-top-color: #B95315;

}

Grazie anticipatamente per la disponibilità di tutti coloro che vorranno dare un aiuto.

Roberto

**Gold34gl3** · 05-06-2007, 10:04

1° probabile soluzione

se la colonna n°1 e n°3 le uniscoe dando un posizionamento assoluto alla colonna n° 2 le cose migliorano, ma se la finestra viene aperta sempre alla stessa risoluzione... altrimenti si sposta tutto.

2° probabile soluzione

se la colonna n°1 e n°3 le unisco come nel 1° caso dando un posizionamento relativo alla colonna n° 2 le cose migliorano ma solo nel caso di firefox... altrimenti si sposta tutto.

avete un'idea di come risolvere?? mi sa che devo lasciare i css :quote: ed appoggiarmi alle tabelle...

perchè le tabelle è l'unico metodo che mi permette di mantenere la simmetria tra due colonne separate usando un rowspan 2..3... ecc... e quindi riuscirei nel gioco delle 3 colonne

Comunque resto sempre in attesa di un qualche suggerimento.

Grazie ciao

**Mich_** · 05-06-2007, 12:26

Non ho capito le soluzioni proposte nell'ultimo messaggio, e non ho studiato il codice del primo messaggio.

Occorre sapere se il tutto ha una larghezza massima, o ha dimensioni fisse, o se deve essere elastico, in base al contenuto o alla finestra.

Comunque la cosa migliore penso sia che le colonne A e C siano generate dallo stesso blocco, mentre la colonna B e` un blocco con uno z-index piu` alto.
Il posizionamento del blocco B puo` essere assoluto o relativo, ma sempre relativo al body.

Per capire i posizionamenti, ci sono un paio di articoli che ho trovato fatti bene e che se dovessi usarli andrei a rivedermi:
I posizionamenti assoluti
Capire i posizionamenti relativi

**Gold34gl3** · 05-06-2007, 15:27

ciao mich.
sempre presente e ti ringrazio molto per l'interessamento.
la struttura generale è larga 800px, il top ha un'altezza di 100px per ogni riga per un totale di 220 px circa (riga arancione e riga bianca).
L'altezza della parte centrale è elestica, così per la colonna A e C, mentre la colonna B (chiamata da me n°2) ha un'altezza anchessa elestica, ma che arriva sempre fino a sopra il bottom, e supera sempre la parte del corpo centrale delle due colonne laterali (A,C).
In pratica la foto che ho inviato deve essere rispettata anche quando il corpo centrale si allunga.
Ho provato con i posizionamenti relativi ed assoluti, ma a causa della mia poca esperineza mi è rimasto un pò difficile riuscire a posizionarli correttamente.
Con il relative andava bene su firefox, ma creava problemi in IE, mentre con il posizionamento assoluto non potevo farlo in percentuale al body, in quanto avrei dovuto andare a calcolare le percentuali per tutte e due le altre colonne e loro contenuti (ho fatto prima a ripartire da zero con l'uso delle tabelle).
Una domanda per il posizionamento assoluto:
dando un posizionamento assoluto in percentuale al body, calcolando la distanza dal top e dal lato sinistro, se la finestra è ad una risoluzione di 1024x768 si vede in un certo modo, allargando o restringendo la risoluzione, la colonna B perde la giusta posizione rispetto a tutto il resto. Questo perchè solo la colonna B è in percentuale e il resto della struttura ha dimensioni fisse con allineamento centrale??

Grazie ciao

**Gold34gl3** · 05-06-2007, 15:37

O CAVOLO.... ora che ho letto quegli articoli...posso dire che ero molto vicino alla soluzione...
praticamente ho trovato la risposta alla domanda!! bastava che inceve di dare posizionamento assoluto in base alla finestra (body) lo dava in base al container

PErò non mi è chiaro una cosa... avrei dovuto dare un posizionamento relativo al container invece di dargli un float:left, così che il posizionamento assoluto per la colonna B partissi proprio dal posizionamento relativo cel suo initial containing block

vabbò... mi servirà per la prox volta... ormai questa mattina ho risolto con le tabelline :P un casino !!

Grazie mille!

**Gold34gl3** · 05-06-2007, 18:44

TABELLE DI ME...

una sola cosa e mando quelle santissime tabelle a quel paese... però devo prima capire una cosa... come faccio a dare una posizione assoluta alla tabella B, e farla posizionare sopra alla colonna A+C che dovranno essere unite, usando come initial containing block il container e non il body?

**Mich_** · 06-06-2007, 08:27

Sta scritto in quegli articoli:
Il container deve avere posizionamento assoluto o relativo, e natualmente il blocco da posizionare deve essere interno al container.

**Gold34gl3** · 06-06-2007, 09:04

PERFETTO!!!

struttura:

Codice PHP:


<body>



<div id="container">



<div id="principale" >



<div id="colonna_1">

<!-- Pagina principale dove inserirò top, e il resto del sito 

larga totale 800px altezza ne ho data una minima



!-->



</div>



<div id="colonna_2">



</div>



<div id="footer"></div>

</div>



</body>

css:

Codice PHP:


/* CSS Document */

body, html {

    text-align: left;

    margin-top:10px;

    font-family:Geneva, Arial, Helvetica, sans-serif;

    font-size:12px;

    text-align:center;

    background-color: #C8C8C8;

}





#container {

    margin:auto;

    width:800px;

    background-color:#FFFFFF;



}



#principale {

    width:800px;

    min-height:inherit;

    position:relative;

    }

    

#colonna_1 {

    margin-top:0px;

    width:800px;

    float:left;

    min-height:500px;

    height:100%;

    background-color:#FFFFFF;

}



#colonna_2 {

    width:206px;

    min-height:500px;

    height:100%;

    position:absolute;

    top:0px;

    left:555px;

    background-color:#B95315;

    border-right-width: 2px;

    border-left-width: 2px;

    border-right-style: solid;

    border-left-style: solid;

    border-right-color: #FFFFFF;

    border-left-color: #FFFFFF;

}



 #footer {

    height:30px;

    clear:both;

    width:100%;

    background-color:#FFFFFF;

    border-top-width: 2px;

    border-top-style: solid;

    border-top-color: #B95315;

}

Grazie mille Mich_ sei davvero come quello di Baywatch

mi hai lanciato proprio un bel salvagente... altrimenti in mezzo a tutte quelle tabelle ci sarei affogato!

Grazie

Discussione: layout 3 colonne (2 equivalenti)

Strumenti discussione

Ricerca discussione

Visualizza

layout 3 colonne (2 equivalenti)

Permessi di invio