Layout a 5 colonne

gianluca634

Layout a 5 colonne

Buongiorno a tutti!
Spero di aver scritto nella sezione giusta, devo costruire una pagina html con 5 colonne con i css, fino a tre colonne sono capace dividendo nel css le parti in menusx con un float left la parte centrale ed un menudx con un float right.
Se voglio dividere la pagina in altre due parti come devo impostare i float??
Grazie!
Ciao Ciao

marcocarrieri

Potresti postare uno schizzo di come deve venire fuori l'eventuale grafica?
In questo modo possiamo aiutarmi maggiormente credo.
Magari indica nel disegno se vuoi anche un header, un footer.

gianluca634

@marcocarrieri said:

Potresti postare uno schizzo di come deve venire fuori l'eventuale grafica?
In questo modo possiamo aiutarmi maggiormente credo.
Magari indica nel disegno se vuoi anche un header, un footer.

Grazie marcocarrieri,
ho fatto il layout con un table questo è l url:
annunciamonelweb.altervista.org/prova.html
Dovrebbe essere chiaro
Grazie!

marcocarrieri

Ho provato a buttare giu questo codice.
Attendiamo anche altri medoti magari più carini.

[PHP]
<html>
<head>
<title>test</title>
<script type="text/javascript">
</script>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;text-align: center;

        }
        #contenitore
        {
            width:850px;
            margin:0px auto;
            padding:0px;
        }
        #header
        {
            background:#FFFF7F;
            width:850px;
            height:100px;
        }
        #prima
        {
            background:#D4FFFF;
            width:170px;
            height:500px;
            float:left;
        }
        #seconda
        {
            background:#7FFF2A;
            width:170px;
            height:500px;
            float:left;
        }
        #terza
        {
            background:#7FFFFF;
            width:170px;
            height:500px;
            float:left;
        }
        #quarta
        {
            background:#FFD47F;
            width:170px;
            height:500px;
            float:left;
        }
        #quinta
        {
            background:#FF55AA;
            width:170px;
            height:500px;
            float:left;
        }
        #footer
        {
            background:#FF7F55;
            width:850px;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="contenitore">
        <div id="header">HEADER</div>
        <div style="clear:both"></div>
        <div id="prima">PRIMA COLONNA</div>
        <div id="seconda">SECONDA COLONNA</div>
        <div id="terza">TERZA COLONNA</div>
        <div id="quarta">QUARTA COLONNA</div>
        <div id="quinta">QUINTA COLONNA</div>
        <div style="clear:both"></div>
        <div id="footer">FOOTER</div>
    </div>
</body>

</html>
[/PHP]

gianluca634

Grazie Marcocarieri!
Scusa la tarda risposta ma ero in trasferta, devo ancora provarlo ma sembra propio quello che cercavo!

gianluca634

Una Domandina......Cosa significa questa istruzione:

<div style="clear:both"></div>
Grazie!
Ciao Ciao

marcocarrieri

Praticamente viene usato in prossimita di div/blocchi a cui sono stati applicati dei float, come vedi prima ci sono degli elementi affiancati l'uno all'altro, di norma, un elemento che segue uno "floattato" dovrebbe andare a fianco di quest'ultimo.

Con quell'istruzione, praticamente, obblichi l'elemento che segue a riposizionarsi correttamente non seguendo il precedente posizionamento.

Forse il tutto si potrebbe ottenere con altre tecniche migliori di quelli che ti ho posto io.

Attendiamo magari anche altri suggerimenti.