3 colonne...con i div!

**infraviolet** · 20-07-2009, 09:53

ciao a tutti, devo montare un layout con l'area contenuti larga circa 960px al centro della pagina. (fin qui ok, ci mancherebbe!)

A sinistra e a destra ci sono però due sfondi differenti che proseguono all'infinito.
Se volete figurarvelo sono tre colonne, quella centrale con il sito, quelle laterali con solo il background.

Domanda: come faccio a creare con i CSS questo layout?

Per farla semplice ricorrerei a una tabella larghezza 100%, con la sola colonna centrale larga 960px e le laterali senza largezza definita...non esattamente web semantico!

Idee?

Grazie a tutti

**paxal78** · 20-07-2009, 10:50

se cerchi nelle guide ai layout con css in questo sito trovi quello che fa per te...

**infraviolet** · 20-07-2009, 11:04

ciao paxal78 sinceramente ci ho guardato ma non sono arrivato a capire bene come potrei gestire le due specificità di questo modello:

la prima è il fatto che non so la larghezza dei due div laterali

la seconda è questa cosa del background differente tra destra e sinistra che si ripete all'infinito

Ora guardo ancora un po' ma se sai dove indirizzarmi esattamente o hai qualcosa di già fatto è benvenuto!

Grazie per il supporto!

**ispuk** · 22-07-2009, 02:40

prova cosi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="contenitore">
<div id="left">Left</div>
<div id="front">Front</div>
<div id ="right">Right</div>
</div>
</body>
</html>

NB: la parte centrale è di 960px,ma le 2 colonne left e right sono di 200px, se vuoi ridimensionare le colonne devi anche modificare la larghezza massima del div#contenitore adesso è 1360=left(200px)+front(960px)+right(200px)

quindi per esempio left(100px)+front(960px)+right(100px) =div#container width:1260px;

spero sia ciò che cercavi
ciao

**infraviolet** · 22-07-2009, 08:10

Ciao ispuk sei gentilissimo, e complimenti per la soluzione molto elegante.

Se capisco bene, l'estensione al 100% è raggiunta tirando il contenitore oltre la presumibile estensione massima di un monitor (posso incrementare i 1360 anche a 1980 per dire).

Non ci avevo proprio pensato, mi ero fossilizzato sulle percentuali e non ne uscivo.

Ora lo provo sul mio layout, ancora grazie e a buon rendere!

E.

**infraviolet** · 22-07-2009, 10:15

un'obiezione però: questa soluzione non occuperà mai il 100% dello schermo, tu fissi un contenitore a 1360px ma in questo modo su molte risoluzioni fai comparire scrollbar orizzontali solo per scorrere gli sfondi laterali!

Io devo per forza ragionare in percentuale invece, non posso impostare una grandezza dell'intero contenitore dato che ai lati del div coi contenuti (front) ci sono solo sfondi riempitivi!

spero di essermi spiegato!

**ispuk** · 22-07-2009, 12:18

ciao cosi ci siamo su Mozzilla su Internet Explorer è un macello perchè ho dovuto usare position:absolute ,che browser deprecato!!!!!!

prova su mozilla e cerca di adattarlo se riesci fammi sapere ,interessa anche a me a questo punto

:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="contenitore1">
<div id="left">Left</div>
<div id ="right">Right</div>
</div>
<div id="contenitore2">
<div id="front">Front</div>

</div>

</body>
</html>

**ricman** · 22-07-2009, 12:57

Le position absolute sono solo una rottura.
Voto per il primo codice di ispuk, mi piace...

Tanto per parlare... La situazione layout com'è? L'ideatore del sito dovrebbe cercare di progettare "meglio" (o spiegarlo meglio qui). Magari vedere se il background si può ripetere o se le colonne effettivamente servono etc... Molti sfondi addirittura si risolvono con una foto alta 1px con le giuste impostazioni sulla ripetizione. Giusto per evitare di creare due colonne senza contenuti...

**ispuk** · 22-07-2009, 13:49

si concordo con ricman

le absolute mi fanno sempre ammattire,per questo cerco sempre di non usarle

tanto è vero che ho aperto un post in cui chiedo :chi è che ammattisce usandole?,perchè sinceramente non mi capacito neanche come mai esista una regola cosi inaffidabile!

poi magari esistono mille modi per usarle bene ma se ne può fare a meno secondo me

spero che un giorno possa essere condivisa da tutti i browser allo stesso modo , potrebbe essere la rivoluzione dei css , ci aiuterebbero alla grande!speriamo!

di più non saprei dire,serve qualcuno che è già passato sopra questo problema che ti possa aiutare

in oltre ricman dice bene ,un esempio è lo stesso logo di questo sito,se guardi l'immagine di sfondo è una semplice barretta ripetuta all'infinito sull'asse x,questo è un trucchetto decisamente producente! in più questo tipo di immagini è sempre bene usarle come background,dal momento che non hanno link o comandi annessi

**infraviolet** · 23-07-2009, 09:56

ciao a tutti, sto facendo qualche prova per venirne a capo senza absolute, se arrivo a qualcosa vi faccio sapere.

Certo che alla faccia del web semantico, con una tabella al 100% come quella che vi dicevo (3 colonne, le laterali senza dimensioni e la centrale a 900px) è di una facilità imbarazzante.

Gli sfondi sui due lati si ripetono, quindi si è un repeat-x

Ci perdo del tempo per fare le cose come si deve e vedo cosa ne esce...

Discussione: 3 colonne...con i div!

Strumenti discussione

Ricerca discussione

Visualizza

3 colonne...con i div!

Permessi di invio