Layout tableless : qualche quesito

**naighes** · 16-02-2007, 17:45

Salve a tutti.
Stavo facendo qualche prova al fine di adottare una soluzione tabless per un'applicazione che sto sviluppando.
Vista la mia scarsa dimistichezza con i CSS e dopo ore trascorse in vani tentativi, chiedo consiglio a voi!
Vi mostro il frammento di codice HTML.

codice:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width : 18px;">[img]Images/left.gif[/img]</td>
        <td style="text-align : right; background-image : url(Images/background.gif);">[img]Images/center.gif[/img]</td>
        <td style="width : 18px;">[img]Images/right.gif[/img]</td>
    </tr>
</table>

Come potete vedere, si tratta di una semplice tabella divisa in tre colonne.
Vi mostro ora come pensavo di ristrutturare il codice per il modello tableless:

HTML

codice:

<div id="header">
    <div id="headerSx">[img]Images/left.gif[/img]</div>
    <div id="headerCx">[img]Images/center.gif[/img]</div>
    <div id="headerRx">[img]Images/right.gif[/img]</div>
</div>

CSS

codice:

#header
{
    height : 66px;
    display : inline;
    margin : 0;
}

#headerSx
{
    float:left;
    width: 18px;
}

#headerCx
{
    text-align : right;
    background-image : url(Images/background.gif);
}

#headerRx
{
    float : right;
    width: 18px;
}

Come potrete intuire, non funziona!
Ho provato in svariati modi, ma niente da fare.
Sapreste darmi qualche buon consiglio?

Vi ringrazio anticipatamente

**Leilond** · 16-02-2007, 18:02

Esempio

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

<style>

#left{float: left;}

#content{float: left; background-image: url(Images/background.gif); }

#right{float: left;}

  

</style>

  <title>Titolo</title>

  </head>

  <body>

<div id="container">

    <div id="left">

      [img]Images/left.gif[/img]

    </div>

    <div id="content">

      [img]Images/center.gif[/img]

    </div>

  <div id="right">

    [img]Images/right.gif[/img]

  </div>

  </div>

</div>

  </body>

</html>

Il vantaggio della proprietà FLOAT è che fin quando "c'è spazio" continua a metterti le cose a sinistra. Quindi mettendo 3 div con float:left di seguito le affianca, fin quando non metti qualcosa con clear:left o fin quando non si esaurisce lo spazio (nel qual caso va a capo e continua a flottare a sinistra le cose)

Se vuoi che una delle colonne sia più larga, imposta la width nella relativa regola css

Ti consiglio questo articolo su html.it
http://css.html.it/articoli/leggi/53...ria-e-pratica/

E questo tutorial (veramente ben fatto e completo) in inglese
http://css.maxdesign.com.au/floatutorial/

**naighes** · 16-02-2007, 19:22

Grazie per l'interessamento, Leilond.

Originariamente inviato da Leilond
Il vantaggio della proprietà FLOAT è che fin quando "c'è spazio" continua a metterti le cose a sinistra. Quindi mettendo 3 div con float:left di seguito le affianca, fin quando non metti qualcosa con clear:left o fin quando non si esaurisce lo spazio (nel qual caso va a capo e continua a flottare a sinistra le cose)

Ok, fino a qui ci sono.

Originariamente inviato da Leilond
Se vuoi che una delle colonne sia più larga, imposta la width nella relativa regola css

Il problema è proprio qui.
Quello che vorrei è che il div centrale si estendesse per tutto lo spazio disponibile.
Mi aiuto con uno schema:

codice:

immagine w:18px - ******div centrale (finchè c'è spazio)****** - immagine w:18px

Forse dovrei seguire un approccio diverso al "float"?
Grazie ancora.

**Leilond** · 16-02-2007, 21:12

In questo caso si... studiando il box-model (cerca "capire il box model" sempre su html) scoprirai cosette interessanti
Senza che approfondisco con la teoria (che puoi studiare abbondantemente) ti faccio semplice semplice l'esempio pratico

Codice PHP:


<html>

  <head>

<style>

#destra

{

float:right;

width:50px;

}

#sinistra

{

float:left;

width:50px;

}

#centro

{

margin-left: 52px;

margin-right: 52px;

}

#piede

{

clear:both;

}

</style>

  <title>Titolo</title>

  </head>

  <body>

<div id="container">

  <div id="header">

    testata

  </div>

  <div id="destra">

    Destra

  </div>

  <div id="sinistra">

    Sinistra

  </div>

  <div id="centro">

    Centro

  </div>

  <div id="piede">

    Piede

  </div>

</div>

  </body>

</html>

Che ho fatto?
1) La testata è semplice, neanche la spiego. Va però sottolineato che qualsiasi float messo DOPO un blocco normale non infuenza tale blocco in alcun modo, quindi la testata rimane immune ai float sotto di lei

2) Poi ho preso la colonna di destra e l'ho spostata a destra con float:right

3) Prendo la colonna di sinistra e la sposto con float:left

4) Poi metto la colonna centrale e mettendo margini destro e sinistra un po' più grandi della larghezza delle due colonne faccio in modo che si "incastri" perfettamente tra le due. Se non facessi in questo modo (non mettessi i margini) la colonna centrale si SOVRAPPORREBBE a quella di sinistra

5) Metto un piede con clear:both che impedisce a questo di sovrapporsi con qualsiasi cosa floattata sia a destra che a sinistra. Questa cosa è fondamentale, poichè a differenza della testata, tutto ciò che è SOTTO un elemento floattato ne viene infuenzato con molti possibili conseguenze

So di non aver assolutamente esaurito l'argomento che va ben oltre quello che si può fare in un forum, ti consiglio quindi comunque di seguire i due link che ti ho indicato

P.S.
Ho usato 50px invece di 18px perchè le scritte "sinistra" e "destra" sono più larghe di 18 e la scritta "centro" si sarebbe sovrapposta con "sinistra" ma se tu sei certo che il contenuto di quelle colonne non supererà i 18 px puoi mettere quella larghezza e i margini a 19 (anche a 18 se ti serve che le sezioni si tocchino perfettamente

**naighes** · 17-02-2007, 09:35

Ci siamo!

E' proprio ciò che volevo ottenere!
Non posso far altro che ringraziarti per i preziosissimi consigli.

Discussione: Layout tableless : qualche quesito

Strumenti discussione

Ricerca discussione

Visualizza

Layout tableless : qualche quesito

Permessi di invio