» Layout a tre colonne

Alexandro · 04-09-08, 12:57

Ragazzi non metto in dubbio l'utilità e i vantaggi dei DIV, ma c'è davvero da impazzire. Mi chiedo che la sigla non significhi Cervello Sotto Stess...

Dunque, giochicchio da un pò con i CSS, ma mi trovo ad affrontare la costruzione di un layout a tre colonne. Dopo esser riuscito ad ottenere quello che volevo, provo il tutto su i.e. e stavo per scoppiare a piangere alla vista di quello scempio...

Come posso ottenere tre normalissime colonne affiancate, con dimensioni (parlo dell'altezza) indipendenti tra loro? Ho provato ad utilizzare un layout scaricato dalla rete, ma se il contenuto della colonna centrale è inferiore rispetto a quello della colonna sinistra, tutto va a farsi strabenedire.

Ho provato a metterci un min-height ma non ha funzionato.

Posto uno screen per farmi capire

Jess · 04-09-08, 15:37

I CSS c'erano già quando si costruiva tramite tabelle. In genere mi sbatto la testa contro l'interpretazione che IE ne fa.

OK, chiuso questa parentesi, dimmi che layout ti serve esattamente, perché ci sono tanti modi per costruirne uno di 3 colonne.

Deve essere di larghezza fissa o liquida?
La colonna sinistra è sempre più lungo di quello centrale o no?
Le colonne si devono estendere per tutta la lunghezza del contenitore o no?
Si può specificare un'altezza fissa oppure deve essere tutto libero?

Alexandro · 04-09-08, 15:58

Ciao Jess, grazie per la disponibilità

Beh, semplicemente ho bisogno di questo

Ora il problema è che se riempio troppo la colonna di sx, il contenuto se ne va fuori dal corpo. A me serve solo quella struttura, senza dovermi preoccupare della roba che sbatto dentro i div.

1. Preferirei larghezza fissa, ma non è fondamentale
2. No, dipende dalle pagine
3. Si
4. No, perchè altrimenti per sicurezza dovrei abbondare dato che ogni tanto può capitare di dover inserire dei testi molto lunghi. E rischierei così di avere delle pagine vuote...

Ti ringrazio ancora per l'aiuto!

greybear · 04-09-08, 17:30

Forse puo' esserti utile questo:

http :// picoflat.altervista.org

scaricatelo e guardati il css/index.php. L'ho sviluppato da un tutorial per farci i miei siti. Sembra a due colonne, ma in verita' sono tre. Il codice php e' brutto, ma io non sono un programmatore php

ciao,
greybear

Jess · 05-09-08, 03:09

Quote:

Alexandro

Ora il problema è che se riempio troppo la colonna di sx, il contenuto se ne va fuori dal corpo. A me serve solo quella struttura, senza dovermi preoccupare della roba che sbatto dentro i div.

Se non ti crea problemi generare lo sfondo per i diversi elementi con un'immagine ripetuto-y ci sarebbe questo layout, dove non ti devi assolutamente preoccupare di quale colonna diventa più lunga:

Codice HTML:

<html>
<head>
<title>Tre colonne: Larghezza Fissa</title>
<meta  http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- 
body {
    margin:0;
    padding:0;
    text-align:center;
    background-color: #fff; 
    /*stesso colore di colonna 2 se si usa un backgroundimmagine trasparente in bodyContent*/
}
#bodyContent {
    width:760px;
    text-align:left;
    margin:0 auto;
    background-image:  url(immagini/sfondo-1.png);
    /*sfondo per le colonne a sx e dx con il centro trasparente
    oppure si mette lo sfono per tuti e tre le colonne in un immagine*/
    background-repeat: repeat-y;
    }

#testa { 
    background:#ccc; 
    border:1px solid #000; 
    padding:1em 0; 
}


#colonna1 { 
    float:left ; 
    width:160px; 
    padding:1em 0; 
}

#colonna3 { 
    float: right; 
    width:200px; 
    padding:1em 0; 
}

#colonna2 {
    margin:0 200px 0 160px;
    padding:1em 0;
    background-color: #fff;
}


#piedipagina { 
    background:#eee; 
    border:1px solid #000; 
    padding:1em 0; 
}

.clear{ 
    clear:both;
    height:0;
     font-size: 1px;
    line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="bodyContent">

    <div id="testa">
          TESTA
    </div>

  <div id="colonna1">
        COLONNA 1
  </div>

    <div id="colonna3">
        COLONNA 3
    </div>

  <div id="colonna2">
        COLONNA 2
  </div>
    
<br class="clear"  />

  <div id="piedipagina">
        PIEDIPAGINA
  </div>
    
</div>
</body>
</html>

Alexandro · 07-09-08, 15:57

Grazie mille Jess! Funziona che è una meraviglia!

Grazie anche a te grey per la risposta

04-09-08, 15:37	#2 (permalink)
Jess User Data di registrazione: Aug 2008 Messaggi: 210	I CSS c'erano già quando si costruiva tramite tabelle. In genere mi sbatto la testa contro l'interpretazione che IE ne fa. OK, chiuso questa parentesi, dimmi che layout ti serve esattamente, perché ci sono tanti modi per costruirne uno di 3 colonne. Deve essere di larghezza fissa o liquida? La colonna sinistra è sempre più lungo di quello centrale o no? Le colonne si devono estendere per tutta la lunghezza del contenitore o no? Si può specificare un'altezza fissa oppure deve essere tutto libero?

04-09-08, 17:30	#4 (permalink)
greybear User Data di registrazione: Aug 2007 Ubicazione: Caput Mundi Messaggi: 211	Forse puo' esserti utile questo: http :// picoflat.altervista.org scaricatelo e guardati il css/index.php. L'ho sviluppato da un tutorial per farci i miei siti. Sembra a due colonne, ma in verita' sono tre. Il codice php e' brutto, ma io non sono un programmatore php ciao, greybear
	__________________ TuoCMS :)

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

04-09-08, 15:58	#3 (permalink)
Alexandro Utente Premium Data di registrazione: Jan 2008 Messaggi: 225	Ciao Jess, grazie per la disponibilità Beh, semplicemente ho bisogno di questo Ora il problema è che se riempio troppo la colonna di sx, il contenuto se ne va fuori dal corpo. A me serve solo quella struttura, senza dovermi preoccupare della roba che sbatto dentro i div. 1. Preferirei larghezza fissa, ma non è fondamentale 2. No, dipende dalle pagine 3. Si 4. No, perchè altrimenti per sicurezza dovrei abbondare dato che ogni tanto può capitare di dover inserire dei testi molto lunghi. E rischierei così di avere delle pagine vuote... Ti ringrazio ancora per l'aiuto!

07-09-08, 15:57	#6 (permalink)
Alexandro Utente Premium Data di registrazione: Jan 2008 Messaggi: 225	Grazie mille Jess! Funziona che è una meraviglia! Grazie anche a te grey per la risposta

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email