- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Non riesco ad allineare due "oggetti"
-
Non riesco ad allineare due "oggetti"
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:; text-align: right; } .image{ float:left; }
e questo è il codice php:
[PHP]<blockquote class="titolo"><a href="reviews/<?php echo "$link"; ?>" title="<?php echo "$row[title]" ?>"> <?php echo "$row[titolo]"; ?> </a></blockquote><blockquote class="image"><img src="<?php echo "$row[image]" ?>" 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>[/PHP]
Mi esce una cosa di questo genere:
-
Problema risolto... ma ora c'è un altro problema. E' come se avessi definito dei margini, ma non l'ho fatto e non capisco perchè non si vede bene.
Questo è il codice css:
.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:; } .image{ float:left; width:25%; }
e questo è il codice php:
[PHP] <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"><a href="reviews/<?php echo "$link"; ?>" title="<?php echo "$row[title]" ?>"> <?php echo "$row[titolo]"; ?> </a></blockquote> <blockquote class="image"><img src="<?php echo "$row[image]" ?>" 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>[/PHP]
e questo è il risultato:
Ho visto più volte il codice, ma non riesco a capire dov'è che sbaglio....
-
Penso il problema sia il margin:-1px a blockquote.
Perchè hai annidiato più blockquote e quindi il valore dell'attributo si cumula.Ti consiglio di creare un blockquote contenitore e dei div figli, invece di usare blockquote figli.
-
Se metto dei div all'interno del blockquote, mi mette gli oggetti fuori dal contenitore...