creazione di questo layout

**Corso_04** · 02-09-2008, 16:39

ciao a tutti.
vorrei chiedere il vostro aiuto per realizzare lo scheletro del seguente layout per il mio sito web
riporto un bozzetto veloce fatto a mano, vorrei che fosse costituito da 3 colonne come in figura.
in quella di sinistra va il menu, in quella di destra l'intestazione ed il corpo del sito.
la colonna più piccola ha solo valenza decorativa.

chi mi aiuta con il codice???

grazie

**fcaldera** · 02-09-2008, 16:41

a parte che l'immagine non si vede,
ma che ne dici se invece inizi tu a scrivere del codice e poi eventualmente posti eventuali problemi?

**Corso_04** · 02-09-2008, 16:43

che tempismo...l'immagine non si vede...ma io l ho caricata correttamente...

io proverei...ma non sono in grado

**Corso_04** · 02-09-2008, 16:44

**fcaldera** · 02-09-2008, 17:10

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=utf-8" />
        <title>xhtml 1.0</title>
            
        <style type="text/css">
            * {
                margin: 0; padding: 0;
            }
            
            body { text-align: center; }
        
            #site {
                background      : #ccc url(immagine-nera-200x1.gif) top left repeat-y;
                width           : 800px;
                height          : auto;
                overflow        : hidden;
                margin          : 0 auto;
                text-align      : left;
            }
            
            #areasx, #areadx {
                float           : left;
                display         : inline;
            }
            
            #areasx { width : 200px; margin-right: 10px; }
            #areadx { width : 590px; background  : #fff; }
            #header { height: 80px; border : 1px solid #0c0;}
            #main   { height: 300px; height: auto !important;  min-height: 300px; border: 1px solid #c00; }
            
        </style>
            
    </head>

<body>

    <div id="site">
    
        <div id="areasx">
            spalla
        </div>
    
        <div id="areadx">
            <div id="header">header</div>
            <div id="main">main</div>
        </div>
    
    </div>

</body>
</html>

prepara un immagine 200px x 1 di colore nero e caricala come evidenziato.

Discussione: creazione di questo layout

Strumenti discussione

Ricerca discussione

Visualizza

aiuto per la creazione di questo layout

Permessi di invio