[CSS] Spostare div

[Fede 88]

Ho un problema con 2 div.

Attualmente la div 2 è su un livello superiore rispetto alla div 1, vorrei far si che la div 2 inizi 10 pixel prima della div 1.
Però non voglio farlo spostando in basso la div 2, ma mettendo più in alto la div 2.

Il problema è che non riesco a spostare la div di -10px in verticale.

Situazione attuale:


Obiettivo:


Per necessità le div sono impostate position:absolute


Mi potete aiutare?


Grazie

[ESSE-EFFE]

Se position è absolute ti basta impostare i valori corretti di left e top per entrambi i div...

[black_wizard]

oppure imposti il div 1 con position relative e poi metti il div 2 dentro il div1 con position absolute e top -10 e right 0

[Fede 88]

Originariamente inviato da ESSE-EFFE

Se position è absolute ti basta impostare i valori corretti di left e top per entrambi i div...

Purtroppo le div non sono a inizio pagina, ma all'interno di altre div che possono variare la grandezza, quindi non posso dargli un posizionamento fisso.

Non è possibile fare una cosa del tipo:

top: posizione attuale-10px;

[Fede 88]

Originariamente inviato da black_wizard

oppure imposti il div 1 con position relative e poi metti il div 2 dentro il div1 con position absolute e top -10 e right 0

Faccio una prova e ti faccio sapere, devo verificare se cambiando position da absolute a relative non sballi la struttura del sito.

[ESSE-EFFE]

Originariamente inviato da Fede 88

Purtroppo le div non sono a inizio pagina, ma all'interno di altre div che possono variare la grandezza, quindi non posso dargli un posizionamento fisso.

E allora perchè imposti position: absolute?

Certo che postare un po' di codice non sarebbe male...

[Fede 88]

Ho fatto qualche modifica, ho tolto le div ed ho lasciato direttamente il link all'immagine applicando class e style su di esso.

Questo è il codice:

			<div class="center_block">
				{if $product.new == 1}
					<!-- IMMAGINE NOVITA' -->
					<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$base_dir}themes/earth/img/new.png" alt=""  style="position:absolute;z-index:200" /></a>
				{else}
					{if $product.on_sale}
						<!-- IMMAGINE PRODOTTO IN SALDO -->
						<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$base_dir}themes/earth/img/offer.png" alt=""  style="position:absolute;z-index:200" /></a>
					{/if}
				{/if}
				{if $product.esclusiva}
						<!-- IMMAGINE CHE DOVREBBE ESSERE 10px PIU' IN ALTO -->
						<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$base_dir}themes/earth/img/esclusiva1.png" alt=""  style="position:absolute;z-index:300;padding-left:70px;" /></a>
					{/if}
				<!-- IMMAGINE PRODOTTO -->
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"  style="z-index:100" ><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'categorie')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>

Queste sono le classi nel css:

ul#product_list a.product_img_link{
	float:left;
	margin-right:0.6em;
}

ul#product_list a.product_img_link img{
	vertical-align:bottom;
}

Da qui potete vedere quello che vorrei fare:



Spero si capisca...

[black_wizard]

sinceramente vedendo il tuo codice non capisco dove è il problema...
Devi solo mettere il div contenitore di tutto (quel center block) position relative che non cambierà niente nella visualizzazione del sito..
poi aggiungi top:-10px al div che deve andare un pò più sopra.

[Fede 88]

Hai perfettamente ragione, ora funziona... mi stavo complicando la vita.


GRAZIE