[PHP - MYSQL - CSS] Impostazione layout

[cenarius_88]

Salve a tutti...
Sto creando un progetto a scopo didattico su interazione php sql con elementi di "abbellimento" css.

Secondo la mia idea interrogo tramite php e mysql un database dal quale estraggo dei record. per ogni record a questo punto sempre tramite script php genero dei contenuti html/css seguendo un layout particolare... sono riuscito a ottenere il risultato che volevo ad eccezione di un unica parte: l'identificativo (segnalato in rosso)... non ne vuole sapere di andare li dove dico io...

sono sicuro che il problema è in CSS ma non ne vengo a capo...

query sql + script per creazione del contenuto

<?php
$conn=mysql_connect("localhost", "username", "pass");
$numrecord=5;
$count=0;
if (!$conn)
{
	die("Connessione a Mysql non riuscita " . mysql_error());
}
$db=mysql_select_db("my_database", $conn);
if (!$db)
{
	die("Connessione al Database non riuscita " . mysql_error());
}

$Risultato=mysql_query("select * from TABELLA", $conn);
if (!$Risultato)
{
die("La tabella selezionata non esiste " . mysql_error());
}

while ($riga=mysql_fetch_array($Risultato))
{
$count++;
echo "<div class='elemento'>";
echo "<div class='immagine'>" . "<a href='" . $riga[4] ."'  target='_blank'>" . "<img class='aspect' src=' " . $riga[4] . "' /> </a> </div>";
echo "<div class='paragrafo'>";
echo $riga[1] . "</br>"; //TITOLO
echo " <h5 class='descrizione'>" .$riga[2]. "</h5></br>"; //DESCRIZIONE

echo "</div>";
echo " <h5 class='identificativo'>" . $riga[3] . "</h5>"; //IDENTIFICATIVO
echo "</div>";
echo "<br/>";

}
?>

CSS

div.elemento {
	width:inherit;
	height:160px;
	background-color:#ffB1d5;
	/* Bordi arrotondati */
	border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0; /* per firefox */
	-webkit-border-radius: 0 20px 20px 0; /* per safari, chrome */
}

div.immagine{
	display: inline-block;
	float:left;
	width: 170px;
	height: 170px;
	margin: -12px 10px 3px -5px;
	border: 3px solid #FFF;
        background-color:#CCC;
	position: relative;
}

img.aspect {
    max-width:170px;
    max-height:170px;
    width:auto;
    height:auto;
    border: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
	float:left;

}

div.paragrafo{
	float:left;
	width:550px;
	height:90px;
}

h5.descrizione{
	font-size:11px;
}

h5.identificativo{
	font-size:14px;
	text-align:right;
}

Ho provato di tutti sul h5.identificativo... settaggio di padding, margin, vertical align, position absolute (come ho fatto per l'immagine)... ma niente... non va...

Qualcuno buono d'animo mi spiega come ottenere questo risultato..?

Ringrazio in anticipo chiunque risponderà o si prenderà la briga di leggere tutto sin qui...

[airon]

Basta mettere a paragrafo un:

position:relative;

Poi a identificativo usi:

position: absolute;
bottom: 0;
right: 0;

Così facendo posizioni in modo assoluto, rispetto a paragrafo, identificatore. Questo succede perché position: absolute prende come origine (coordinate 0,0 (sinistra,top)) il primo elemento padre con un position: xxxx settato (nel nostro caso quello messo a paragrafo).

[cenarius_88]

Originariamente inviato da airon

Basta mettere a paragrafo un:

position:relative;

Poi a identificativo usi:

position: absolute;
bottom: 0;
right: 0;

Così facendo posizioni in modo assoluto, rispetto a paragrafo, identificatore. Questo succede perché position: absolute prende come origine (coordinate 0,0 (sinistra,top)) il primo elemento padre con un position: xxxx settato (nel nostro caso quello messo a paragrafo).

Avevo già provato ma non va...
per ogni record va a mettere in una zona della pagina anche fuori dal container principale, l'elemento identificativo, e in più sovrapponendoli tra loro....

[airon]

Vuol dire che non hai messo il position relative al padre giusto e quindi lui prende il body (di default).

div.paragrafo{
	float:left;
	width:550px;
	height:90px;
position:realtive;
}



h5.identificativo{ 
position: absolute;
bottom: 0;
right: 0;
}

Ah ovviamente identificatore deve essere contenuto nel div paragrafo. Ah controlla anche che chiudi ad ogni ciclo il div elemento, non mi pare così al momento.
Un altro consiglio, non usare h5 per identificativo, usa un div

[cenarius_88]

Niente non va.... un po' è migliorato a seguito di alcune modifiche...

una prova a runtime (sorgente pagina)

<div id="pagina"> 
<div class='elemento'>
<div class='immagine'><a href='images/numero_1.png'  target='_blank'><img class='aspect' src=' images/numero_1.png' /> </a> </div>
<div class='paragrafo'>Numero1</br> 
<h5 class='descrizione'>Descrizione</h5></br> 
<h5 class='identificativo'>1.66</h5></div>
</div>

<div class='elemento'>
<div class='immagine'><a href='images/numero_2.png'  target='_blank'><img class='aspect' src=' images/numero_2.png' /> </a> </div>
<div class='paragrafo'>Numero 2</br> 
<h5 class='descrizione'>Descrizione numero 2</h5></br>
<h5 class='identificativo'>5.44</h5></div>
</div>
</div>
</div>

Body

body {
	background: #FFD1E4 url(../images/background.png) repeat; 
	font-family: Verdana, sans-serif; 
	color: #555; 
	font-size:18px; 
	text-align:justify; 
}

non c'è posizionamento...

CSS elemento -> modificato

div.elemento {
	width:inherit;
	height:160px;
	background-color:#ffB1d5;
	/* Bordi arrotondati */
	border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0; /* per firefox */
	-webkit-border-radius: 0 20px 20px 0; /* per safari, chrome */
}

div.immagine{
	display: inline-block;
	float:left;
	width: 170px;
	height: 170px;
	margin: -12px 10px 3px -5px;
	border: 3px solid #FFF;
    background-color:#CCC;
	position: relative;
}

img.aspect {
    max-width:170px;
    max-height:170px;
    width:auto;
    height:auto;
    border: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
	float:left;

}

div.paragrafo{
	float:left;
	width:550px;
	height:90px;
	
	position:relative;
}

h5.descrizione{
	font-size:11px;
}

h5.identificativo{
	font-size:14px;
	text-align:right;
	
	position: absolute;
	bottom: 0;
	right: 0;
}

In allegato il risultato che ottengo adesso...

EDIT: si prima non chiudevo nulla e non erano in relazione padre figlio i contenitori... ho modificato lo script

echo "<div class='elemento'>"; //apro div elemento
echo "<div class='immagine'>" . "<a href='" . $riga[4] ."'  target='_blank'>" . "<img class='aspect' src=' " . $riga[4] . "' /> </a> </div>"; // apro e chiudo div immagine
echo "<div class='paragrafo'>"; //apro div paragrafo
echo $riga[1] . "</br>"; //Titolo
echo " <h5 class='descrizione'>" .$riga[2]. "</h5></br>"; //Descrizione
echo " <h5 class='identificativo'>" . $riga[3] . "</h5>"; //Identificativo
echo "</div>"; // chiudo paragrafo
echo "</div>"; //chiudo elemento

echo "<br/>";

[airon]

Guarda l'altezza di paragrafo...non è quella che pensi tu...è 90px. Ecco perchè identificativo è così in alto e non al bordo di elemento. O cambi quello oppure metti il position: relative a elemento.

[cenarius_88]

Originariamente inviato da airon

Guarda l'altezza di paragrafo...non è quella che pensi tu...è 90px. Ecco perchè identificativo è così in alto e non al bordo di elemento. O cambi quello oppure metti il position: relative a elemento.

Si l'altezza l'ho settata così perchè appunto vorrei che qualunque fosse l'altezza di paragrafo identificativo vada sotto....

A questo punto dovrei scorporare identificativo da paragrafo e settare relative elemento... ora provo vediamo che succede xD

EDIT: ok facendo in questo modo ho risolto metà quesito... ora sta di lato, in basso si ma ancora non attaccato al bordo... devo utilizzare un bottom con valore negativo?

EDIT 2: si mettendo valori negativi si avvicina al bordo u.u è una buona pratica?

[airon]

Non è vicino al bordo perché gli elementi h (h1, h2, h3 ecc.) e quindi h5 hanno di default un margine.

O togli il margine all'elemento h5, o usi un div come ti avevo consigliato

Usare margini o posizionamenti negativi non è mai buona cosa


Usa l'inspector di chrome o firebug su firefox. Vedi tutte queste cose

[cenarius_88]

Originariamente inviato da airon

Non è vicino al bordo perché gli elementi h (h1, h2, h3 ecc.) e quindi h5 hanno di default un margine.

O togli il margine all'elemento h5, o usi un div come ti avevo consigliato

Usare margini o posizionamenti negativi non è mai buona cosa


Usa l'inspector di chrome o firebug su firefox. Vedi tutte queste cose

Non avevo capito assolutamente il problema del margine intrinseco dell'h*
Ho usato la distinzione in div come da te suggerito e i margini negativi non sono serviti (anzi ho dovuto aggiungere margine positivo per via dell'arrotondamento :P)

Molte grazie airon

[airon]

Di niente