altro layout, altro problema..

**Delas** · 08-09-2003, 16:18

ciao ragazzi... cavolo, questi div e css mi fanno diventare pazzo...
alle volte sono tentato di tornare alle tanto amate (perchè semplici) tabelle...

allora, voglio fare un semplice layout a tre colonne. ecco l'html:

codice:

<div id="main">
  <div id="sinistra">
    testo di sinistra
  </div>
  <div id="centro">
    testo centrale
  </div>
  <div id="destra">
    testo di destra
  </div>
</div>

ed ecco il codice dei css:

codice:

#sinistra {
  float: left;
  width: 152px;
  margin: 0px;
}
#centro {
  float: left;
  margin-left: 152px;
  margin-right: 152px;
  padding: 0px; 
}
#destra {
  float: right;
  width: 152px;
  margin: 0px;
}

ovviamente non va, ho la colonna di destra in basso..
:master:

**oronze** · 08-09-2003, 16:26

Tu scivi che sinistra deve essere largo 152, centro deve partire da 152 e arrivare a 152 (quindi largo 0px) mentre destra partire da 0 e essere largo 152....prova come ho scritto io anche se dubito che vada perchè io generalmente faccio tante prove prima di azzaccarci.
P.S perchè non usi le tabelle? Non è vietato usarle!
#sinistra {
float: left;
width: 152px;
margin: 0px;
}
#centro {
float: left;
margin-left: 152px;
padding: 0px;
}
#destra {
float: right;
width: 152px;
margin: 304px;
}

**Delas** · 08-09-2003, 16:30

grazie per la risposta..
il codice non funziona... non ho capito neanche il tuo ragionamento...
la colonna di sinistra è larga 152. quella di centro parte da 152 e arriva a 152 da destra. quella di destra è larga 152. mi sembra semplice, no?

**oronze** · 08-09-2003, 16:39

vero!

prova solamente aggiungndo margin-left:304px; a destra!

**Delas** · 08-09-2003, 16:41

provato, provato... niente!
:master:

**Mutato** · 08-09-2003, 16:42

Ragazzi se usate float non serve impostare il margine delle colonne...

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style>

#sinistra {
float:left;
width:150px;
height:100px; background:red;
}

#centro {
float:left;
width:300px;
height:100px; background:green;
}

#destra {
float:left;
width:150px;
height:100px; background:yellow;
}

</style>
</head>
<body>

<div id="sinistra"></div>
<div id="centro"></div>
<div id="destra"></div>

</body>
</html>

L'ultima riga di codice serve solo a mostrarle con chiarezza:
height:100px; background:***;

**Delas** · 08-09-2003, 16:47

perfetto! fino a qui ci siamo. il problema è che io vorrei le colonnine laterali di larghezza 152px, quella centrale, della larghezza rimanente...

**Mutato** · 08-09-2003, 17:00

Devi cambiare filosofia e usare position absolute.

Qui un esempio:
http://www.constile.org/template/nuo...esempio_2.html

**Delas** · 08-09-2003, 17:02

ci do un occhio. grazie!

**Delas** · 08-09-2003, 17:47

ok. quello ho risolto.
mi è venuto fuori un altro problema però.
la barra sotto, mi sale!!
in più le due colonne laterali e la centrale, non avendo la stessa altezza di contenuti (variabile), mi si incasina tutto, a livello di layout... come si può dire: "prendi la massima altezza delle tre colonne e falle tutte di quella dimensione"?

Discussione: altro layout, altro problema..

Strumenti discussione

Ricerca discussione

Visualizza

altro layout, altro problema..

Permessi di invio