Margini e/o padding in layout a 3 colonne fisse

[samiel]

Ho provato a costruire vari layout. In uno a larghezza fissa ho il problema
dei margini delle colonne. Cominciamo dalla sezione pertinente del codice CSS:

body {
margin:0;
padding:0;
text-align:center;
}

#wrapper{
margin:0 1em 0;
font-family: "Book Antiqua", Times, serif;
font-size: 101.01%;
}

#content{
position:relative;
width:1200px; /*760 */
margin:1em auto;
text-align:left;
background: #f0f0f0;
border:1px solid #000;
}

#column1{
position:absolute;
top:0; left:0;
width:350px; /*160 */
padding:1em;
}

#column2{
margin:0 350px 0 350px;
border-right:1px solid #000;
border-left:1px solid #000;
background: #fff;
padding:1em;
}

#column3{
position:absolute;
top:0; right:0;
width:350px; /*200 */
padding:1em;
}

Questo un frammento di HTML:

<div id="content">
<div id="wrapper">
	<div id="column1">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
	<div id="column2">

Sed dapibus. Nunc pulvinar felis a nulla. Integer tempus feugiat libero. Aliquam scelerisque. Cras commodo venenatis leo. In ac eros.</p>

Cras fermentum erat. Proin iaculis, massa sed scelerisque posuere, magna justo malesuada neque, et placerat quam tellus vel mi. Pellentesque dui nulla, sollicitudin a, sodales tristique, auctor eget, enim. Fusce imperdiet fermentum ipsum. Nam facilisis bibendum leo.</p></div>
	<div id="column3">

Cras fermentum erat. Proin iaculis, massa sed scelerisque posuere, magna justo malesuada neque, et placerat quam tellus vel mi.</p></div>
</div>
</div>

Ora, nella visualizzazione il lato destro della colonna 1 e il lato sinistro della colonna 3
si appoggiano al margine, mentre io vorrei applicarvi un padding. Dove sbaglio?

Grazie
M.

[Mich_]

Ora, nella visualizzazione il lato destro della colonna 1 e il lato sinistro della colonna 3

Sicuro di non aver scambiato destra con sinistra? Rispondo come se fosse viceversa.

Tu hai le due colonne esterne inserite direttamente dentro il #content.
Il wrapper non entra nel flusso dei blocchi, dato che non ha posizione assoluta o relativa.
Invece la colonna 2 e` dentro il wrapper.

Per lasciare un margine, nel tuo caso (che usi i posizionamenti), devi modificare il left (per la col.1) e il right (col.3).

Visto che usi i posizionamenti, ti conviene posizionare anche la col.2 e lasciare un left (ed eventualmente un right) in modo da lasciare lo spazio per le col.laterali.
A questo punto puoi eliminare il #wrapper.

Vedi anche:
I posizionamenti assoluti
Capire i posizionamenti relativi

[samiel]

Sì, avevo invertito le indicazioni dei margini :-(

Domande:
1. Potrei conferire al wrapper una posizione relativa?
2. Dalla tua soluzione risulta una pagina con tutti posizionamenti assoluti.
Io ho recuperato l'esempio da cui sono partito da un articolo di Troiani,
che solo spiega in modo a mio avviso (cioè per i niubbi) non chiaro
alcuni passaggi. Lui presenta il suo caso come pagina con posizionamenti
assoluti, anche se ha lo svantaggio (se ho ben capito) che la colonna
di centro deve necessariamente essere più lunga di quelle laterali.
Troiani però specifica che la colonna di centro deve essere posizionata
in modo relativo per poter posizionare in modo assoluto le due laterali.
Ora... prima di passare alla pratica: ma il caso un cui tutte e tre le colonne
sono posizionate in modo assoluto, è intrinsecamente contraddittorio?

Nel frattempo mi alleno a smanettare...
Grazie!
M.

[samiel]

In oratica, ho fatto così:

#column1{
position:absolute;
top:0; left:-8px;
width:350px;
padding:1em;
}

Il valore negativo (stessa cosa
per la colonna 3, di destra)
mi consente di impostare un margine
all'interno.
Strategia corretta?

Grazie
M.

[Mich_]

Nel frattempo mi alleno a smanettare...

Si`, ma prima leggi (e capisci) quei due articoli sui posizionamenti.
Smanettare solo non porta molto lontano, dato che i browser reagiscono in modo diverso a piccoli errori: rischi quindi di sistemare per uno e avere una pagina sballata in altri.
A mio parere non e` possibile usare il position se prima non si sono capiti quei due articoli (come minimo).

Se posizioni (assoluto o relativo) il #wrapper, allora esso entra nel flusso dei posizionamenti, ma non ne vedo la necessita`: se posizioni gli oggetti di larghezza fissa non hai bisogno di un contenitore extra (che invece potrebbe essere necessario se usi i float o se vuoi un layout elastico o fluido).

[samiel]

Allora... i due articoli li conoscevo, me li sono pure stampati
per leggerli con calma. Ma mi mancano i fondamentali.
Ho fatto un esperimento con questo codice:

body {
margin:0;
padding:0;
text-align:left;
font-family: "Book Antiqua", Times, serif;
font-size: 101.01%;}

#content{
position:relative;
width:1200px;
margin:1em auto;
text-align:left;
background: #f0f0f0;
border:1px solid #000;
}

#column1{
position:absolute;
top:0; left:0;
width:350px;
padding:1em;
}

#column2{
position:absolute;
top:0; left:370;
width:450px;
border-right:1px solid #000;
border-left:1px solid #000;
background: #fff;
padding:1em;
}

#column3{
position:absolute;
top:0; right:0;
width:350px;
padding:1em;
}

Provo a mettere solo la colonna 1, ed è a posto.
Aggiungo la colonna 3, ed è a posto.
Quando infine inserisco la colonna 2,
il layout è stravolto. Evidentemente,
c'è qualcosa di molto sbagliato... Ma cosa?

Grazie!
M.

[Mich_]

Mi sa che hai sbagliato a fare le somme. Sommando le larghezze delle tre colonne io trovo:
1152px + 6em (se non ho dimentcato qualcosa)
I 6em potrebbero facilmente essere superiori a 48px (dipende dalla dimensione del font usato).

Nota: questi conti sono validi per i browser standard, ma non per IE in quirks mode.

.... Mi sa che dovresti studiare un tutorial CSS, tipo quello presente in HTML.it ....

[samiel]

Ho provato a ridurre le dimensioni dei blocchi, ma no va.
Allora ho fatto così:

Codice CSS:

body {
margin:0;
padding:0;
text-align:left;
font-family: "Book Antiqua", Times, serif;
font-size: 101.01%;}

#wrapper{
position:relative;
width:1200px;
text-align:left;
background: #f0f0f0;
border:1px solid #000;
}

#column1{
position:absolute;
top:0; left:0;
width:200px;
padding:1em;
}

#column2{
position:absolute;
top:0; left:250;
width:450px;
background: #fff;
padding:1em;
}

#column3{
position:absolute;
top:0; right:0;
width:200px;
padding:1em;
}

Codice HTML:

<body>
<div id="wrapper">
  <div id="column2">
    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lectus. Donec id dolor. Pellentesque semper feugiat lacus. Maecenas hendrerit, purus non suscipit faucibus, lectus ipsum faucibus risus, a venenatis eros neque id dolor. Morbi mollis congue lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi quam. Vivamus vehicula, magna eu sagittis sagittis, metus sapien eleifend pede, eu congue lectus sapien vitae ipsum. Vivamus auctor enim a dui. Etiam at sapien. Quisque nisl. In urna leo, pretium laoreet, sodales id, pulvinar a, felis. Nulla condimentum, nunc a dapibus placerat, odio ipsum consequat leo, at gravida dolor nunc id risus. Donec pellentesque euismod quam. Integer pharetra elit a dui. Vestibulum ullamcorper faucibus nibh. Donec elementum risus non dui. Aenean a pede ut mi dapibus blandit. Praesent porta ligula consectetuer quam.</p>
        </div>
</body>

La colonna, nonostante l'indicazione top:0; left:250; sta cmq all'estrema sinistra
dello schermo, come se avessi messo left:0. Di certo c'è qualcosa di concettuale
sul posizionamento che non ho capito. Perché il div sta in alto a sinistra?

Cmq non credere che non abbia letto quel tutorial. Ho visto anche altro
e acquistato un paio di volumoni. La teoria (in teoria) è chiara, e in effetti
alcuni layout che ho riprodotto e personalizzato mi sono usciti correttamente.
Ma qui c'è un qualche inghippo che mi sfugge...

Grazie
M.

[Mich_]

Attenzione, nei CSS non ci sono unita` di misura default!!
left: 250; /* cosa sono? probabilmente px, ma non lo hai detto! */

[samiel]

Infatti! Scusa, sono davvero rinc*****.
I tipici abbagli del dilettante: adesso funziona.

Grazie
M.