testo a fianco di una foto

**simones70** · 04-09-2006, 20:43

salve vorrei realizzare un box senza usare tabelle solo div con una foto sulla sinistra ed il testo sulla destra. in tale box però il testo non ha lunghezza predefinita in quanto lo estraggo da db, ho provato a realizzare tale box ma quando il testo è più lungo dell'altezza della foto, mi si va a posizionare sotto la foto, vorrei evitare questo ed avere un effetto finale come se foto e testo si trovassero in due colonne separate di una tabella.
quello di seguito è il codice da me usato:

- ----------------------------------------------------------------------------
<style>

.box1 {
width:250px;
border-bottom:1px;
border-bottom-color:#999999;
border-bottom-style:dashed;
text-align:left;
}
</style>

<div class="box1">
<div style="float:left; padding:5px;" > [img]immagini/artenew.jpg[/img]</div>
<div style="padding:5px; " > <a href="klkl"><%=rs("nome")%>
<%=rs("cognome")%> - <%=rs("citta")%> »</a>
</div>
<div style="clear:both"></div>
</div>

--------------------------------------------------------------------------

Grazie

**fcaldera** · 04-09-2006, 21:12

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=iso-8859-1" />
        <meta http-equiv="Author" 
          content="Fabrizio Calderan, http://www.fabriziocalderan.it/" />
        
        <title>Esempio</title>       
        
        <style type="text/css">
        /* <![CDATA[ */

            html, body {
                margin		: 0;
                padding		: 0;
            }        
            
            .cleared:after {
                display     : block; 
                visibility  : hidden;
                content	    : "."; 
                height      : 0; 
                clear       : both;
            }
                    
            .cleared {
                clear       : both; /* per Gecko */
                height	    : 1%; /* per IE */
            }

            .box {
                width       : 402px;
                border      : 1px #ccc solid;
            }

            .box p {
                margin      : 0;
                padding     : 0;
            }
            
            .foto, .testo {
                width     : 199px;
                float     : left;
                display   : inline;
                border    : 1px #cca dashed;
            }
            
        /* ]]> */
        </style>
        
        
        <script type="text/javascript">
        /* <![CDATA[ */
        
           
        /* ]]> */
       </script>
        
    </head>

<body>


<div class="box cleared">
   <div class="foto">
       [img]avatar2.jpg[/img]
   </div>
   <div class="testo">
      


            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
            testo testo testo testo testo testo testo testo 
      </p>

   </div>
</div>

</body>
</html>

i bordi sono solo di esempio... se li togli ricorda di aumentare anche la larghezza dei box interni

**simones70** · 04-09-2006, 23:08

ti ringrazio, funziona alla grande, ti chiederei se puoi spiegarmi il significato di

.cleared:after {
display : block;
visibility : hidden;
content : ".";
height : 0;
clear : both;
}

così se riesco a capire anche come funziona alla prossima la trovo da me la soluzione, grazie!

**fcaldera** · 04-09-2006, 23:15

Originariamente inviato da simones70
ti ringrazio, funziona alla grande, ti chiederei se puoi spiegarmi il significato di

.cleared:after {
display : block;
visibility : hidden;
content : ".";
height : 0;
clear : both;
}

così se riesco a capire anche come funziona alla prossima la trovo da me la soluzione, grazie!

leggi la mia pillola in firma... è un meccanismo di clearing senza il quale il div box finirebbe ben prima della fine del testo

Discussione: testo a fianco di una foto

Strumenti discussione

Ricerca discussione

Visualizza

testo a fianco di una foto

Permessi di invio