div come bacheca facebook

**aleritty** · 26-04-2009, 23:23

Scusate il titolo poco esplicativo!

Io vorrei ottenere una cosa abbastanza semplice, una serie di elementi uno sotto l'altro come i "botta e risposta" di facebook.
Questi elementi (per chi non lo sa) hanno una div contenente l'immagine personale con affiancato a destra il testo del messaggio, il tutto su sfondo azzurrino.

Ho realizzato questo, ma non riesco a capire dove stia l'errore

codice:

<html>
    <head>
        <style type="text/css">
            .contenitore {
                margin: 0 auto;
                width: 800px;
                font-size: 15px;
            } .elemento {
                background: #eceff5;
                clear: left;
                padding: 15px;
                max-width: 799px;
                min-width: 150px;
                text-decoration: none;
                text-align: left;
                margin-bottom: 20px;
            } .immagine {
                float: left;
                width: 15%;
                padding-right: 2px;
                padding-bottom: 4px;
                background-color: #ece;
            } .testo {
                float: left;
                width: 80%;
                padding-left: 2px;
                padding-bottom: 4px;
                background-color: #ff5;
            } .intestazione {
                color: #3b5998;
                font-size: 20px;
                font-weight: bold;
            } .messaggio {
                font-size: 15px;
            } .data {
                color: #777777;
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="contenitore">
            <div class="elemento">
                <div class="immagine">
                    [img]../images/avatar/noavatar.jpg[/img]
                </div>
                <div class="testo">
                    <div class="intestazione">
                        Autore dice:
                    </div>
                    <div class="messaggio">
                        Bla bla bla
                    </div>
                    <div class="data">
                        Messaggio inserito a quest'ora
                    </div>
                </div>
            </div>
            

            <div class="elemento">
                <div class="immagine">
                    [img]../images/avatar/noavatar.jpg[/img]
                </div>
                <div class="testo">
                    <div class="intestazione">
                        Autore dice:
                    </div>
                    <div class="messaggio">
                        Bla bla bla
                    </div>
                    <div class="data">
                        Messaggio inserito a quest'ora
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

la div "elemento" dovrebbe contenere le altre due, e con il suo colore di sfondo fare in modo che a me non interessi sapere l'altezza dell'immagine ne del messaggio... Perchè tanto estendendosi allungherebbero anche la div "elemento" che le contiene!

Invece no, lo sfondo di "elemento" non si vede se non con un padding...
Qualcuno sa dirmi dove sbaglio?

(nell'esempio ho impostato gli sfondi di immagine e messaggio con colori diversi apposta per evidenziarli)

**aleritty** · 03-05-2009, 00:10

Mi uppo...
Nel caso la domanda sia una cavolata, mi dite almeno dove sbaglio??
Perchè proprio non riesco a capire l'errore!

**H5N1_Aviaria** · 03-05-2009, 01:35

Aggiungi ai selettori elemento e contenitore la proprietà "overflow:auto".... magia!

PS: leggi la mia firma

**aleritty** · 04-05-2009, 16:11

Ora va, grazie mille!

E scusate per la domanda idiota!

Discussione: div come bacheca facebook

Strumenti discussione

Ricerca discussione

Visualizza

layout come bacheca facebook

Permessi di invio