allineare immagine a testo

[cleaner]

ciao a tutti, avrei bisogno, se possibile, di un aiuto ad allineare la mia immagine accanto ad un testo, all'interno del mio box; nel foglio di stile l'ho dichiarata così:

.Ricerca
{
 
 background-image:url('search.png');
 background-repeat:no-repeat;
 float:left;
} 

il problema sorge nella pagina principale quando la richiamo:

se faccio così non mi fa vedere niente

<div class="Ricerca">
             
</div> 

mentre se all'interno del div metto un testo questo viene sovrapposto!come faccio ad allinearlo?
grazie mille

[fcaldera]

1) se il div è vuoto il browser correttamente non ti mostra il background perchè lo sfondo non fa parte del contenuto. Quindi devi dare un altezza minima al div in modo che sia alto q.b per visualizzare l'immagine

2) per lo stesso motivo del punto 1 il testo si sovrappone allo sfondo perchè non sa che sfondo ci sia al suo interno. Distanzialo usando dei padding.

[codencode]

E se invece di usare l'immagine come background del div, la inserisci inserisci dentro il div assegnandole float:left e poi metti il testo?

[cleaner]

@fcaldera: per definire l'altezza del div mi consigli di usare la propietà height nel css?
@codencode: mi potresti fare un esempio di quanto dici?

grassie

[fcaldera]

Originariamente inviato da cleaner
@fcaldera: per definire l'altezza del div mi consigli di usare la propietà height nel css?

no, non l'altezza bensì l'altezza Minima

diciamo che questa immagine sia alta <n> pixel e parta dall'angolo in alto a sx
allora al div aggiungi


height: auto !important;
height: <n> px;
min-height: <n> px;

[ResianTaxidrive]

ma min-height non mi pare venga interpretata da tutti i browser, o sì?

[fcaldera]

Originariamente inviato da ResianTaxidrive
ma min-height non mi pare venga interpretata da tutti i browser, o sì?

no,
ma in quel modo sì

[ResianTaxidrive]

Buono a sapersi

[fcaldera]

http://forum.html.it/forum/showthrea...t+crossbrowser

[codencode]

Originariamente inviato da cleaner
@codencode: mi potresti fare un esempio di quanto dici?

HTML

<div class="ricerca">
     [img]...[/img]
     

Testo da affiancare</p>
</div

CSS

div.ricerca img {
     float: left;
}