PDA

View Full Version : [CSS] Spostare div

Fede 88
10-03-2011, 08:41
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:
http://img171.imageshack.us/img171/6369/001rd.gif (http://img171.imageshack.us/i/001rd.gif/)

Obiettivo:
http://img12.imageshack.us/img12/3864/002kw.gif (http://img12.imageshack.us/i/002kw.gif/)

Per necessità le div sono impostate position:absolute


Mi potete aiutare?


Grazie
ESSE-EFFE
10-03-2011, 20:00
Se position è absolute ti basta impostare i valori corretti di left e top per entrambi i div...
black_wizard
11-03-2011, 00:14
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
11-03-2011, 09:57
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
11-03-2011, 09:59
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
11-03-2011, 10:14
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
11-03-2011, 10:42
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:
http://img845.imageshack.us/img845/5716/001dh.jpg (http://img845.imageshack.us/i/001dh.jpg/)


Spero si capisca...
black_wizard
11-03-2011, 12:06
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
11-03-2011, 12:48
Hai perfettamente ragione, ora funziona... mi stavo complicando la vita. :rolleyes:


GRAZIE