Top, main e bottom di un div

**sghedo** · 05-06-2008, 16:18

Ciao a tutti,

sto costruendo un sito con joomla e voglio creare un div nel cui corpo inserire il contenuto di un modulo.

Il modulo starà quindi nel centro, con uno sfondo di un certo tipo che si allungherà in altezza tanto quanto necessario... voglio però che prima del modulo ci sia una sorta di intestazione grafica.. e che poi in fondo ci sia ancora una volta una chiusura grafica.

tanto per farvi capire queste le tre immagini che voglio usare:

SOPRA.gif = intestazione, prima del corpo centrale, altezza fissa
http://www.buzzed.it/temp/sopra.gif

CORPO.gif = sfondo del corpo centrale altezza variabile
http://www.buzzed.it/temp/corpo.gif

SOTTO.gif = chiusura, dopo il corpo centrale, altezza fissa
http://www.buzzed.it/temp/sotto.gif

Come posso fare?

**fcaldera** · 05-06-2008, 16:43

copia e incolla così com'è

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">
        
        .box {
            width           : 240px;
            padding-bottom   : 15px;
            background      : url(http://www.buzzed.it/temp/sotto.gif) bottom left no-repeat;
        }
        
            .box h2 {
                height          : 36px;
                margin          : 0;
                font-size       : 0;
                text-indent     : 15px;
                
                display         : block;
                color           : #1f5c79;  /* colore di sfondo dell'immagine */
                background      : url(http://www.buzzed.it/temp/sopra.gif) top left no-repeat;
                
            }
            
            .box div {
                color           : #fff;
                background      : url(http://www.buzzed.it/temp/corpo.gif) top left repeat-y;
            }
            
                .box div p {
                    margin          : 0;
                    padding         : 1.5em 13px 0 13px;
                }

        </style>
        
    </head>

<body>

<div class="box">

    <h2>informazioni</h2>
    
    <div>
    
        


            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
            sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
            magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
            quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
            ut aliquip ex ea commodo consequat. 
        </p>
    
    </div>
</div>
</body>
</html>

**sghedo** · 05-06-2008, 16:57

eh ma se i contenuti sono dinamici? con l'estensione web-developer-tools per firefox vedo che il testo contenuto nel copro centrale appartiene al div principale e non è contenuto in altri tag.. ti farei vedere qcs ma ci sto lavorando in locale..

**fcaldera** · 05-06-2008, 17:19

Originariamente inviato da sghedo
eh ma se i contenuti sono dinamici? con l'estensione web-developer-tools per firefox vedo che il testo contenuto nel copro centrale appartiene al div principale e non è contenuto in altri tag.. ti farei vedere qcs ma ci sto lavorando in locale..

non ho capito cosa intendi con "contenuto in altri tag"

ma non credo che sia un problema se i contenuti sono dinamici: sempre lì dentro li devi mettere, che tu li scriva a mano, o li legga facendo una query ad un db, o li inserisca via javascript il risultato non cambia.

Discussione: Top, main e bottom di un div

Strumenti discussione

Ricerca discussione

Visualizza

Top, main e bottom di un div

Permessi di invio