Testo al lato dell'immagine con float sfasa

[Alejandro]

Salve,
sto cercando di creare una lista semplice con un immagine a sx, testo alla sua destra e sotto tra una riga e l'altra dei trattini.

Ecco il codice html:

<div class="image"></div>
<div class="text">)

<CODICE PHP CHE RICHIAMA TESTO></div>

codice css:

.blocka .text {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 8pt;
	padding: 10px 0px 10px 0px;
	vertical-align:top;
	border-bottom: 1px dotted #666666;	
}

.blocka .image {
    vertical-align:top;
	padding: 10px 10px 10px 0px;
	float:left;
	clear:left;
	
}

Funziona ma non benissimo perchè dando il parametro float all'immagine questa non rimane più legata al testo e pian piano sfasa anche sopra la barra dei puntini.

Spero di essermi spiegato

[Mich_]

Non vedo corrispondenza tra il testo della domanda ed ilcodice HTML.

Provo ad interpretare la richiesta testuale con codice HTML:

<ul>[*]
    [img]...[/img]
    <h2>Titolo</h2>
    

testo</p>
  [*] ... 
  ...[/list]

Nota: si potrebbe usare anche una <dl>, con <dt> per l'immagine e <dd class="titolo"> per il titolo e <dd class="descr"> per la descrizione.

Nella tua descrizione non parli di link (che sono invece nel codice), per cui non li ho inseriti, ma si puo` farlo senza problemi (solo il CSS cambia leggermente nella sintassi, non nella logica)

CSS:

li {
  width: 99%;
  margin-bottom: dashed 1px black;
  clear: both;
  padding: 10px 0;        /* qui il padding verticale */
}
li img {
  float: left;
  padding: 0 10px;       /* padding orizzontale */
  ...
}
li h2 {
  font ...;
  float: left;
  padding: 0 10px;       /* padding orizzontale */
}
li p {
  font ...;                      /* ma forse conviene inserirlo nel li */
  float: left;
}

[Alejandro]

Niente non ci siamo.
Allora prima di tutto bisogna pensare che questo testo come vedi dal server di prova è dentro un blocco di cui avevamo creato il cess. Quello del problema della barra ricordi?

Io ora ho messo questo html come da te suggerito:

<div class="blocka" style="width: 360px;">
	<div class="top"><h2><?=$NLS['LATEST_REVIEWS']?></h2></div>
	<div class="middle">
	<? $counter=0; foreach($reviews as $review) { ?>
	<ul>[*]
    <?=$review->game->getScreenShotImg(1, 140, 80, false)?>
    <h3><?=$review->game->titles[$language]?>(<?=$review->game->category->shortDescription?>)</h3>
    

<?=$review->getSampleText(30, true, true)?></p>
  [/list]
	<? } ?>
	</div>

e tutto questo è il relativo css:

.blocka {
margin:10px 10px 10px 10px;
}

.blocka .top {
 display: block;
  height: 100%;
  background: transparent url(../img/bar_top_right.png) no-repeat top right; 
  margin: 0 auto;
  padding-right:12px;
  height: 22px;
}

.blocka h2 {
  background: transparent url(../img/bar_tot.png) no-repeat top left;    
  font-size:10pt;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 22px;
  color: white;
  letter-spacing:-1px;
  text-align: right;
  text-transform: uppercase;
  margin: 0 auto;
}

.blocka .middle {
    background-color: white;
    border-left: 1px solid #B5B6B7;
    border-right: 1px solid #B5B6B7;
	border-bottom: 2px solid #B5B6B7;
    padding: 0px 10px 0px 10px;
}

.blocka .text {
	font-family: Verdana, Arial, Sans-Serif;
    font-size: 8pt;
	padding: 10px 0px 10px 0px;
	/*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/
	vertical-align:top;
	border-top: 1px dotted #666666;
}

.blocka .image {
    vertical-align:top;
	padding: 10px 10px 10px 0px;
	float:left;
	clear:both;
}

.blocka .bottomlink {
border-top: 2px solid #B5B6B7;
background-color:#B5B6B7;
font-weight:bold;
float:right;
font-family:Arial,Helvetica,sans-serif;
font-size:8pt;
padding:2px 7px;
}

.blocka li {
  width: 99%;
  margin-bottom: dashed 1px black;
  clear: both;
  padding: 10px 0;        /* qui il padding verticale */
}
.blocka li img {
  float: left;
  padding: 0 10px;       /* padding orizzontale */
  
}
.blocka li h3 {
  font-family:Arial,Helvetica,sans-serif;
  margin: 0 auto;
  font-size:8pt;
  float: left;
  padding: 0 10px;       /* padding orizzontale */
}
.blocka li p {
  font-family:Arial,Helvetica,sans-serif;
  margin: 0 auto;
  font-size:8pt;
  float: left;
}

il risultato lo vedi nel server di prova che ti ho dato
E' il blocco latest reviews

[Mich_]

Non avevo presente il tutto.
In una pagina non puoi far uso di float come fosse prezzemolo.
Purtroppo il float e soprattutto il clear hanno effetto su tutta la pagina, non solo nel blocco in cui sono contenuti. E questo fa scivolar eil secondo blocco sotto al primo.

Mi pare che tu abbia due livelli di float/clear.
Se per un livello puoi usare il left e per l'altro il right, la cosa si risolve in modo semplice (ma attenzione al clear: il clear:both non si puo` piu` usare).
In alternativa occore usare i posizionamenti (e la cosa diventa quindi molto piu` complessa: saper usare i posizionamenti in modo corretto richiede un buona dose di esperienza e di ).

Per l'effetto "tratteggio in mezzo al titolo", il clear, andrebbe spostato da .blocka li { a .blocka li:after {, come consigliato da fcaldera in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.

Quindi sono due problemi separati, che puoi risolvere in modo distinto.
PS: oggi pomeriggio non ci sono in giro; possiamo risentirci lunedi`.

[Alejandro]

Guarda fosse per me non userei il float.

Io voglio semplicemente avere un blocco, il blocka appunto che sia standard. Con quel top come abbiamo sistemato e con quel tipo di lista. E' così complicato? Se guardi l'esempio sotto, le latest news, quello è il risultato che vorrei ottenere. Li ovviamente non funziona perchè se sposto il blocco il float mi incasina tutto. Devo tornare alle vecchie tr e td?