Elementi affiancati ad altezze indipendenti

**Spoon** · 11-08-2007, 19:01

Salve, ho bisogno di aiuto per questa cosa. Vorrei ottenere questo effetto:

con una struttura fluida e ripetitiva. Normalmente piazzo in un li l'immagine e ci affianco il testo facendo flottare il tutto ma se l'immagine è troppo corta il testo le fa il giro attorno e invece voglio che il testo sia come nell'esempio, indipendente. Non so però le dimensioni dell'immagine a priori, le carica l'utente e può essere che un'immagine sia larga x e quella dopo y. Mi sapete dare una mano? Non reisco a trovare un buon metodo cross browser

Thanks ^^

**Max1** · 12-08-2007, 02:02

Vedi un pò questo codice se può andarti bene:

<html>

<head>

<title>prova</title>
</head>

<body>

<table border="0" width="70%" cellspacing="10">
<tr>
<td valign="top" align="left">[img]1.jpg[/img]</td>
<td valign="top" align="justify">
<p style="word-spacing: 0; text-indent: 0; margin: 0" align="justify">Lorem ipsum dolor sit amet, consectetur
adipisicing em, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
UI enim ad minim veniam, quis nostrud exercilation ullamco laboris nisi ut ahquip ex
ea commodo consequat. Duis aule irure dolor in reprehenderrt in voluptale velil
esse cillum dolore eu fugial nulla pariatur

Excepleur sint occaecal cupidalal non proidenl, sunI in culpa qui officia deserunl
mollil anim id esi laborum</td>
</tr>
<tr>
<td valign="top" align="left">[img]2.jpg[/img]</td>
<td valign="top" align="justify">
<p style="word-spacing: 0; text-indent: 0; margin: 0" align="justify">Lorem ipSllm dolor srt amet, consedeluf
adipisk:ing elrt, sed do eiusmod lempor incididunl ut labore el dolore magna atiqua
UI enim ad minim Vi!niam, quis fIOstrud exercilatioo ullamco laboris nisi ut aliquip ex
ea commodo consequaL Duis aule irure doler in reprehenderit in voluplale velil
esse cillum dolore eu fugial nulla parialur

EJccepteuf sint O(X',ll8cal cupidalal non proident, suni in culpa qui oIfK:ia deserunl
mollil anim id esi laborum</td>
</tr>
</table>

</body>

</html>

Ciao

Max

**Spoon** · 12-08-2007, 11:05

Thanks

Io però volevo evitare di usare una tabella per impaginare il tutto anche perchè cmq nel tuo codice dovrei splittare le righe facendo per ognuna una tabella per fare in modo che i testi non si allineino in blocco ma seguano la larghezza dell'immagine.

**Max1** · 12-08-2007, 15:06

Se ci dai il link dove hai visto quella cosa forse ci salteremo fuori

Ciao

**gabip87** · 12-08-2007, 17:19

una cosa di questo tipo ti dispiace? ovviamente devi mettere un limite di larghezza per l'immagine:

file .html

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" 
      xml:lang="it">

   <head>   
         <meta http-equiv="Content-Type" 
               content="text/html; charset=iso-8859-1" />
   
         <title> test immagine + testo</title>
      
         <link rel="stylesheet" 
               type="text/css" 
               href="style.css"/>   
   </head>
   
   <body>
	
      <div class="contentBox">

            

            


                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat felis, eleifend nec, 
                  malesuada vitae, lobortis eget, dui. Vestibulum porttitor lacinia nulla. 
                  Proin consectetuer lacinia tellus. Pellentesque tristique justo eget lorem.
		  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat felis, eleifend nec, 
                  malesuada vitae, lobortis eget, dui. Vestibulum porttitor lacinia nulla. 
                  Proin consectetuer lacinia tellus. Pellentesque tristique justo eget lorem.
            </p>
	
      </div>
		
      <div class="contentBox">

            

            


                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat felis, eleifend nec, 
                  malesuada vitae, lobortis eget, dui. Vestibulum porttitor lacinia nulla. 
                  Proin consectetuer lacinia tellus. Pellentesque tristique justo eget lorem.
		  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat felis, eleifend nec, 
                  malesuada vitae, lobortis eget, dui. Vestibulum porttitor lacinia nulla. 
                  Proin consectetuer lacinia tellus. Pellentesque tristique justo eget lorem.
            </p>
	
      </div>
	
   </body>
	
</html>

file style.css

codice:

.contentBox
{
   width:650px;
   margin:0 auto;
   height:100%;
   overflow:hidden;
   background:#ddd;
   border-bottom:2px solid #333;
}

.contentBox img
{
   margin:30px;
   float:left;
   border:2px solid #666;
}

.contentBox p
{
   width:50%;
   padding:20px;
   float:right;
   border-left:2px dotted #999;
}

**Max1** · 12-08-2007, 18:37

Quello che ti ha postato GABIP87 secondo me per il tuo uso è perfetto, se modifichi il codice css Così:

.contentBox {
width: auto;
margin: 0 auto;
overflow: hidden;
background: #ddd;
border-bottom: 2px solid #333;
height: auto;
}
.contentBox img {
margin: 30px;
float: left;
border: 2px solid #666;
width: auto;
height: auto;
}
.contentBox p {
width: auto;
padding: 20px;
float: right;
border-left: 2px dotted #999;
height: auto;
}

Ottieni anche l'effetto di sfasamento che volevi

Ciao

**Spoon** · 12-08-2007, 20:14

Grazie mille ad entrambi, la soluzione di gabip87 funziona perfettamente, quella di Max1 invece è perfetta in IE ma in Firefox gli elementi vanno su righe diverse. Suggerimenti per sistemare? Il mix delle due soluzioni sarebbe il top ^^

Al momento uso la versione di gabip87

**Max1** · 17-08-2007, 18:01

una cosa cosi come la vedi?

Discussione: Elementi affiancati ad altezze indipendenti

Strumenti discussione

Ricerca discussione

Visualizza

Elementi affiancati ad altezze indipendenti

Permessi di invio