Non riesco ad allineare due "oggetti"

[siriuxs]

Salve a tutti, vado subito al punto della questione. Sono sempre riuscito ad allineare due oggetti, ma in questo caso non ci riesco proprio :@

Di seguito il codice css (solo quello relativo alla parte interessata):

.titolo{
    font-style:italic;
    color: #000000;
    text-align: center;    
    display: inline;
}
.titolo a{
    text-decoration: none;
    font: bold 80%;
}
.descrizione{
    color:#000000;
    float: right;
}
.data{
    color: #000000;
    text-align: right;
}
.image{
    float:left;
}

e questo è il codice php:

<blockquote class="titolo">[url="reviews/<?php echo "]" title="<?php echo "$row[title]" ?>"> <?php echo "$row[titolo]"; ?> [/url]</blockquote>

<blockquote class="image">[img]<?php echo [/img]" alt="<?php echo "$row[titolo]"; ?>"/></blockquote>

<blockquote class="descrizione"><?php echo "$row[descrizione]"; ?></blockquote>

<blockquote class="data"><?php echo date("j/n/y", $row[data]); ?></blockquote>

Mi esce una cosa di questo genere:

[foo]

forse perché manca il width dei float?

[siriuxs]

Grazie mille....

[siriuxs]

Cavolo, ma ora nemmeno va bene... Eppure non ho settato nessun margin in particolare:

.rounded:before {
 	background: transparent url(../blocchi/topReviews/images/top-right.png) scroll no-repeat top right;
  	margin-bottom: -20px;
  	height: 30px;
  	display: block;
  	border: none;
  	content: url(../blocchi/topReviews/images/top-left.png);
  	padding: 0;
  	line-height: 0.1;
  	font-size: 1px;
}
.rounded:after {
  	display: block;
  	line-height: 0.1;
  	font-size: 1px;
  	content:  url(../blocchi/topReviews/images/bottom-left.png);
  	margin: 0 0 -1px 0;
  	height: 30px;
  	background: white;
  	background: transparent url(../blocchi/topReviews/images/bottom-right.png) scroll no-repeat bottom right ;
  	padding: 0;
}
blockquote {
   	background: #EEEEEE;;
   	color: white;
   	margin-right: -1px;
   	width:50%;
}
.rounded * {
    padding-left: 0px;
    padding-right: 0px; 
    }

.rounded {
	margin-left:0;
    padding: 0;
  }
.titolo{
	font-style:italic;
	color: #000000;
	text-align: center;	
	display: inline;
}
.titolo a{
	text-decoration: none;
	font: bold 80%;
}
.descrizione{
	color:#000000;
	float: left;
	width: 25px;
}
.data{
	color: #000000;
}
.image{
	float:left;
	width:25%;
}

<blockquote class="rounded">
    <?php
        //Seleziono tutti i dati della recensione
         $query = "SELECT titolo, descrizione, autore, data, image FROM portal_reviews ORDER BY id DESC LIMIT 0,1";
        $result = mysql_query($query, $db);
        $row = mysql_fetch_array($result);
        
        $link = str_replace( " ", "-", $row[titolo] );
        $link = $link .".php";
    ?>
    
    <blockquote class="titolo">[url="reviews/<?php echo "]" title="<?php echo "$row[title]" ?>"> <?php echo "$row[titolo]"; ?> [/url]</blockquote>
    <blockquote class="image">[img]<?php echo [/img]" alt="<?php echo "$row[titolo]"; ?>"/></blockquote>
    <blockquote class="descrizione"><?php echo "$row[descrizione]"; ?></blockquote>
    <blockquote class="data"><?php echo date("j/n/y", $row[data]); ?></blockquote>
</blockquote>

Risultato:



Ho visto più volte il codice, ma non riesco a capire dov'è che sbaglio....

[foo]

ma il valore del width di "descrizione" non è eccessivamente basso?

io leggo width: 25px;

[siriuxs]

Uff... il solito distratto... invece di mettere 25% ho messo 25px... :P

Resta il fatto che ora il testo si sovrappone all'immagine e l'immagine non si trova completamente a sinistra ed il testo non arriva tutto a destra. Infatti provando anche a diminuire il width del testo, ma rimane comunque sovrapposto perchè non so come lascia sempre lo spazio sulla destra. Inoltre il box non viene visualizzato correttamente :@



Grazie per l'aiuto che mi stai dando...

[siriuxs]

Nessuno sa come aiutarmi?

[foo]

Originariamente inviato da siriuxs
Uff... il solito distratto... invece di mettere 25% ho messo 25px... :P

Resta il fatto che ora il testo si sovrappone all'immagine e l'immagine non si trova completamente a sinistra ed il testo non arriva tutto a destra. Infatti provando anche a diminuire il width del testo, ma rimane comunque sovrapposto perchè non so come lascia sempre lo spazio sulla destra. Inoltre il box non viene visualizzato correttamente :@



Grazie per l'aiuto che mi stai dando...

credo che il problema della sovrapposizione possa essere dovuto al width a 25% (sto andando "a orecchio" perché non ho modo di fare una verifica, ma credo che valga la pena di fare una piccola prova variando quei valori).

[siriuxs]

Per fortuna quel problema sono riuscito a risolverlo. Tuttavia non ho finito coi i problemi in quanto la dascrizione si affianca al titolo e non all'immagine :@

Questo è il css nuovo:

/*Top Review*/
.rounded:before {
 	background: transparent url(../blocchi/topReviews/images/top-right.png) scroll no-repeat top right;
  	margin-bottom: -20px;
  	height: 30px;
  	display: block;
  	border: none;
  	content: url(../blocchi/topReviews/images/top-left.png);
  	padding: 0;
  	line-height: 0.1;
  	font-size: 1px;
}
.rounded:after {
  	display: block;
  	line-height: 0.1;
  	font-size: 1px;
  	content:  url(../blocchi/topReviews/images/bottom-left.png);
  	margin: 0 0 -1px 0;
  	height: 30px;
  	background: white;
  	background: transparent url(../blocchi/topReviews/images/bottom-right.png) scroll no-repeat bottom right ;
  	padding: 0;
}
blockquote {
   	background: #EEEEEE;;
   	color: white;
   	margin-right: -10px;
	margin-left: 35px;
   	width:50%;
}
.rounded * {
    padding-left: 0px;
    padding-right: 0px; 
    }

.rounded {
	margin-left:0;
    padding: 0;
  }
.titolo{
	font-style:italic;
	color: #000000;
	text-align: center;
	display: inline;
}
.titolo a{
	text-decoration: none;
	font: bold 80%;
}
.descrizione{
	color:#000000;
	display: inline;
	width: 140px;
	text-align: left;
}
.data{
	color: #000000;
	text-align: inherit;
}
.image{
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	width: 150px;
	border: solid;
	border-color:#000099;
}
/*Fine Top Review*/

e questo aihmè è il risultato:



Ho provato anche a mettere un margin-top alla descrizione, ma non si sposta da li...:@

[foo]

credo sia un problema di clearing

per verificarlo prova ad inserire un

<br style="clear:both;" />

sotto al titolo




mi togli una curiosità? perché fai tutto con i blockquote? c'è un vantaggio di qualche tipo rispetto ai div?