float e immagini

**mattej** · 10-03-2008, 23:45

Vi posto subito il mio problema..
io voglio ottenere questo:

ma mi viene fuori quest'altro:

ho già provato a smanettare in tutti i modi.. ma niente..
consigli?

css:

#contenuti .img {
float: left;
border: 1px solid #ccc;
margin-right: 5px;
}

**fcaldera** · 10-03-2008, 23:54

ci sono diversi modi per ottenerlo ma il più semplice è

codice:



    <img...>
   testo testo testo....
</p>




    <img...>
   testo testo testo....
</p>


p { height: auto; overflow: hidden; margin-top: 10px; }
p img { float:left; display: inline; margin-right: 10px;  border: 1px solid #ccc; }

**mattej** · 11-03-2008, 00:53

su internet explorer continua a farmi lo stesso difetto, su firefox invece tutto ok ma solo se non metto dopo l'img <h4>Titolo</h4> poi il testo..

**enpenzieri** · 11-03-2008, 15:01

...anche a me contina a persistere lo stesso problema

come si può ovviare?

**fcaldera** · 11-03-2008, 15:19

aggiungete un clear:left al paragrafo

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">
            p { height: auto; overflow: hidden; margin-top: 10px; clear: left; }
            p img { float:left; display: inline; margin-right: 10px;  border: 1px solid #ccc; }
        </style>
       
    </head>

<body>




    [img]mici.jpg[/img]
    testo testo testo....
</p>




    [img]mici.jpg[/img]
    testo testo testo....
</p>



</body>
</html>

**mattej** · 11-03-2008, 15:28

così è perfetto, funziona con entrambi, però se aggiungo il tag <h4>testo</h4> mi manda a capo tutto il testo..

così per intenderci:

codice:



    [img]mici.jpg[/img]
    <h4>Titolo del capitolo1</h4>
    testo testo testo....
</p>




    [img]mici.jpg[/img]
    <h4>Titolo del capitolo2</h4>
    testo testo testo....
</p>

**fcaldera** · 11-03-2008, 15:34

un intestazione come h4 non può stare dentro ad un paragrafo
trasforma i paragrafi in div (e cambia le regole css in accordo)

Discussione: float e immagini

Strumenti discussione

Ricerca discussione

Visualizza

float e immagini

Permessi di invio