Allineare img decorativa in basso a dx in <div>

**nomade_k** · 26-04-2010, 22:50

Buona sera a tutti.

"Semplicemente", avendo il caso dell'immagine in allegato, come faccio a portare l'immagine dell'angolo piegato, nell'angolo in basso a destra del contenitore?

Grazie mille e scusate le ripetizioni.
Per chiarimenti, ovviamente, sono a disposizione.

**Mich_** · 27-04-2010, 08:24

Se quella e` un'immagine di sfondo, puoi usare:

codice:

background: url(angolino.gif) no-repeat bottom right;

**nomade_k** · 27-04-2010, 10:43

Grazie della risposta Mich_.

E' così, ma non funziona. E non so perché.

Vi mostro la porzione di codice:

codice:

Css


/* content div */

div.container
							{
								border:			1px solid #000;

								background:		#fff;

								margin-bottom:		1em;
					
								width:			70%;
							}

div.container div.inner
							{
								background:		#fff url(../img/corner.gif) no-repeat bottom right;

								position:		relative;

								left:			-11%;
								
								padding:		3%;
							}

Grazie di nuovo.

**nomade_k** · 27-04-2010, 10:47

Inserisco due messaggi consecutivi (e me ne scuso coi moderatori) per annunciare che (purtroppo o per fortuna... leggendo capirete) ho risolto il problema.

Le avevo provate tutte e alla fine non mi ero accorto (l'ho fatto ora che riportavo il codice sul forum) che mancava una stramaledettissima virgola tra la dichiarazione delle due classi insieme (div.container div.inner invece di div.container,div.inner).

Grazie ancora e scusate.

P.S.: non capisco però, perché ora l'immagine, viene raddoppiata (una al posto giusto e l'altra dove stava prima); ma devo andare a lavoro, vi romperò le p*** questa sera.

Rinnovo i ringraziamenti.

**Mich_** · 27-04-2010, 11:24

Quando posti codice CSS, posta anche l'HTML relativo, ed anche il DOCTYPE (i "trucchi" per IE cambiano a seconda della DTD).

Quando fai delle prove, metti anche un bel colore di sfondo (diverso per ogni blocco), in modo da vedere dove finiscono i vari blocchi.

non capisco però, perché ora l'immagine, viene raddoppiata

Hai messo la virgola, il che significa che hai messo l'angolino a due oggetti. Probabilmente la virgola e` sbagliata.

**nomade_k** · 27-04-2010, 22:23

Originariamente inviato da Mich_
Quando posti codice CSS, posta anche l'HTML relativo, [...]

Hai ragione. Non l'ho fatto perché era "solo <div>".

codice:



				<div class="container">
					
					<div class="inner">
						<span>
							Some title here
						</span>
						


							Some text here.
						</p>
					</div>
				
				</div>

Il Doctype è

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

Originariamente inviato da Mich_
[...] Hai messo la virgola, il che significa che hai messo l'angolino a due oggetti. Probabilmente la virgola e` sbagliata.

Grazie mille.

**Mich_** · 28-04-2010, 08:40

Anzitutto attento alla semantica: una pagina con errori semantici viene penalizzata nei motori e risulta di difficile o impossibile comprensione per alcune categorie di utenti.
I titoli si rendono con i tag <hx>

Quindi il tuo blocco inner e` interno al blocco container e lo riempie completamente.
Allora:
1. la virgola di cui parlavi nel selettore NON CI VA
2. nell'inner devi metterci anche:
width: 100%;
altrimenti il blocco non si allarga al massimo.

Ma prima di inserire il width, togli la virgola e prova a dare colori di sfondo diversi ai due blocchi: vedrai che l'angolino va alla destra del blocco interno, solo che il blocco non si allarga a tutto il contenitore.

Discussione: Allineare img decorativa in basso a dx in <div>

Strumenti discussione

Ricerca discussione

Visualizza

Allineare img decorativa in basso a dx in <div>

Permessi di invio