layout con i css

**fairydesign** · 16-03-2007, 16:40

Salve,
dovrei costruire interamente la mia home page con i css,
il layout è composto da 5 righe:
nella prima ci va il menu e va divisa in due colonne
2° e 4° sono vuote,
la 5 riga è suddivisa 5 righe di cui due più piccole.
come posso fare?

**pierofix** · 16-03-2007, 16:50

Un documento graficamente impostato tramite CSS va prima ed innanzitutto reso solido dal punto di vista del mark-up. Dai una letta a questo articolo:

- http://pesanervi.diodati.org/pn/index.asp?a=293

La prima cosa da fare quindi è scrivere un XHTML che descriva e strutturi appropriatamente i contenuti della tua pagina. L'hai già fatto? E' possibile vederlo?

**fcaldera** · 16-03-2007, 16:53

oltre a quanto già detto da pirofix ti suggerisco di postare un immagine bozza di quello che vuoi fare spiegando come deve "espandersi" il layout in caso di riempimento di testi e di resize del borwser.

La spiegazione che hai dato tu infatti è troppo generica e può essere interpretata e realizzata in diversi modi.

**fairydesign** · 16-03-2007, 16:59

il layout ha struttura fissa larga 570px con del padding tutto attorno e una cornice bianca.
ho 5 colonne più il footer
1 riga menu
2 riga di minima altezza vuota
3 riga con un'immagine che verrà centrata
4 riga vuota
5 riga con 5 colonne
6 footer

è più chiaro così

**pierofix** · 16-03-2007, 17:36

Continui a fornire una descrizione prettamente visuale del documento. Quel che ti stiamo chiedendo, invece, è la sua struttura (X)HTML.

Ripeto: leggi l'articolo linkato per capire di cosa sto parlando.

**panta1978** · 16-03-2007, 18:03

Originariamente inviato da fairydesign
il layout ha struttura fissa larga 570px con del padding tutto attorno e una cornice bianca.
ho 5 colonne più il footer
1 riga menu
2 riga di minima altezza vuota
3 riga con un'immagine che verrà centrata
4 riga vuota
5 riga con 5 colonne
6 footer

è più chiaro così

Cinque colonne? Di cui due più piccole? Ma... se uno è un pò accecato ed imposta i caratteri grandi cosa legge? Otto lettere per rigo?

**pierofix** · 16-03-2007, 18:11

Originariamente inviato da panta1978
Cinque colonne? Di cui due più piccole? Ma... se uno è un pò accecato ed imposta i caratteri grandi cosa legge? Otto lettere per rigo?

Obiezione vostro onore! Osservazione pretestuosa. Il mio cliente non ha ancora descritto la natura dei contenuti, pertanto l'accusa si fonda su argomentazioni insostenibili.

**fairydesign** · 19-03-2007, 10:47

questa è la struttura

**fcaldera** · 19-03-2007, 10:56

varia le altezze a piacimento

codice:

<!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" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>xhtml 1.0</title>
     
        <style>
            body {
                text-align: center;
            }
            #cnt {
                text-align: left;
                margin: 0 auto;
                width   : 900px;
            }
        
            #header {
                height  : auto !important;
                height  : 60px;
                min-height : 60px;
                background  : #cfc;
            }
            
            #main {
                height  : auto !important;
                height  : 400px;
                min-height : 400px;
                background  : #cca;
            }
            
            #footer {
                height      : auto; 
                overflow    : hidden;
                /*** assegna qui un background per simulare le altezze uguali dei tre blocchi ***/
            }
            
            
            #footer div {
                width       : 300px;
                float       : left;
                display     : inline;
                height      : auto !important;
                height      : 100px;
                min-height  : 100px;
                background  : #ccf;
            }
            
        
        </style>

    </head>

<body>

    <div id="cnt">
    
        <div id="header">min height: 60px;</div>
    
        <div id="main">min height: 400px;</div>
    

        <div id="footer">
            <div>Blocco1</div>
            <div>Blocco2</div>
            <div>Blocco3</div>
        </div>

    </div>

</body>
</html>

Ciauz

**fairydesign** · 19-03-2007, 11:03

era così semplice? a parte che io mi sto affacciando ora ai css, prima ero solo tabelle!!!...wow
grazie

Discussione: layout con i css

Strumenti discussione

Ricerca discussione

Visualizza

layout con i css

Permessi di invio