Perché i tag <div> vanno dove vogliono loro?

**esacerbare** · 08-09-2009, 17:37

Perché i tag <div> vanno dove vogliono loro?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = author content = "Marco Rossi" />
<meta http-equiv = reply-to content="webmaster@cipenserò.com" />
<meta name = copyright content = "ci penserò" />
<meta name = description content = "ci penserò" />
<meta name = "keywords" content = "sesso mp3... hihihi..." />
<title>ci penserò</title>
<style type="text/css">
div#div01 {
width:980px;
height:30px;
padding:0px;
margin:0px auto;
border-width:0px;
border-style:solid;
border-color:white;
background-color:blue;
}
div#div02 {
float:left;
width:30px;
height:100px;
padding:0px;
margin:0px;
border-width:0px;
border-style:solid;
border-color:white;
background-color:green;
}
div#div03 {
float:middle;
width:920px;
height:100px;
padding:0px;
margin:0px auto;
border-width:0px;
border-style:solid;
border-color:white;
background-color:black;
}
div#div04 {
float:right;
width:30px;
height:100px;
margin:0px;
border-width:0px;
border-style:solid;
border-color:white;
background-color:red;
}
</style>
</head>
<body>
<div id="div01"></div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
</body>
</html>

**marco.carrieri** · 08-09-2009, 18:16

Esponi meglio come vorresti che i div apparissero.

**esacerbare** · 08-09-2009, 20:40

Il div01 in alto e al centro della pagina mentre div02, div03 e div04 impilati esattamente sotto il div01. In pratica la somma di questi 4 div o mattoncini dovrebbe essere un rettangolo perfetto di 980px per 130px.

Sotto questi div volevo impilarne altri ma sono bloccato...

In pratica volevo creare un layout esattamente identico a questo:
http://www.html.it/guide/esempi/layo...=3cfbackground
"Layout a tre colonne con float e background"
ma aggiungerci tutto in torno un'ombra come si fa in molti siti internet.
Non capisco perché non va! 920+30+30=980

mah...

**marco.carrieri** · 08-09-2009, 20:43

Quindi se ho ben capito vuoi un header ad esempio largo 800px.
Sotto tre colonne, sempre con div, lato sinistro ad esempio 150px, contenuto centrale 500px lato destro 150px.
E magari sotto un footer simile all'header?

**esacerbare** · 08-09-2009, 20:49

Si esatto, in realtà la questione é un poco più complessa, nel div01, div02 e div04 ci metterò dei jpg con ombra creati con il comando gradiente di photoshop.

**marco.carrieri** · 08-09-2009, 20:55

Una cosa del genere ti potrebbe andare?

Codice PHP:


<html> 

    <head> 

        <title>prova</title> 

        <style type="text/css"> 

            #contenitore 

            { 

                width: 800px; 

                height: 610px; 

            } 

            #header 

            { 

                width:100%; 

                height:200px; 

                background:lightgreen; 

            }            

            #sinistro 

            { 

                float:left; 

                margin-top:20px; 

                width:150px; 

                height:350px; 

                background:lightblue; 

            } 

            #centrale 

            { 

                float:left; 

                margin-top:20px; 

                width:500px; 

                height:350px; 

                background:lightgray; 

            } 

            #destro 

            { 

                float:right; 

                margin-top:20px; 

                width:150px; 

                height:350px; 

                background:lightblue; 

            } 

            #footer 

            { 

                margin-top:20px; 

                height:50px; 

                background:lightgreen; 

            } 

        </style> 

    </head> 

    <body> 

        <div align="center"> 

            <div id="contenitore"> 

                <div id="header">HEADER</div> 

                <div id="container"> 

                    <div id="sinistro">SINISTRO</div> 

                    <div id="centrale">CENTRALE</div> 

                    <div id="destro">DESTRO</div> 

                    <div style="clear:both"></div> 

                </div> 

                <div id="footer">FOOTER</div> 

            </div> 

        </div> 

    </body> 

</html>

**esacerbare** · 09-09-2009, 22:47

Il tuo metodo funziona ma non é applicabile al layout che vorrei fare. Mi spieghi perché non posso costruire con dei mattoncini il mio template e soprattutto perché il mio listato genera quello sgorbio?
Grazie per il tuo aiuto

**marco.carrieri** · 10-09-2009, 10:41

Come mai non è applicabile?
Hai un url dove posso vedere cosa ti viene fuori?

**esacerbare** · 10-09-2009, 21:20

Provo a spiegarti ma se non ti risulta chiaro ti faccio uno schemino. I div di cui ho bisogno sono almeno una ventina e il risultato é un template adattabile a centinaia di casistiche. In pratica ho bisogno di:
1) un box in alto alla pagina di larghezza prefissata (pensavo 920px) in modo che risulti visibile ad ogni risoluzione dove poter disporre il logo
2) Un box sottostante di 920px X 50px dove mettere il menu di scelta per la lingua e l'ora
3) Un box come sopra per il menu a tendina
4) Un box di 920px X 300px dove mettere un animazione in flash o qualcosa del genere
5) 3 box di larghezza 200px, 520px e 200px e altezza adattabile al contenuto come hai fatto nel tuo esempio
6) Un box finale per altre cose
7) Un sistema di bow tutto in torno al layout illustrato ai punti 1-6 dove inserire SOLO ed ESCLUSIVAMENTE rettangoli relativi all'ombra.
8) Tutto il contenuto 1-7 deve essere centrato in automatico al contenuto.
9) Arrivato al punto 8 dovrò inserire nelle colonne altri div centrati ma a questo ci penserò più avanti.

Ieri sera ho provato ad inserire i tuoi consigli sul mio caso specifico (div01, div02, div03 e div04) ma stranamente non funzionava; forse ero troppo stanco!

In sostanza il trucco c'é ma non si vede.

Comunque non ho ben capito il significato ovvero l'utilità di queste linee di codice:
<div align="center"> ... align

Se ci fosse qualche comando di javascript o simile che mi permettesse di progettare con più sicurezza e comodità sarebbe tutto molto meglio però al contempo non vorrei essere costretto a leggere un'altra guida per fare questo layout altrimenti non finisco neppure tra 100 anni.

Grazie mille Marco! Sei una persona veramente gentile e disponibile!

Discussione: Perché i tag <div> vanno dove vogliono loro?

Strumenti discussione

Ricerca discussione

Visualizza

Perché i tag <div> vanno dove vogliono loro?

Permessi di invio