Position: Relative - Mi crea dello spazio vuoto

[ruttoloruttolo]

Ciao a tutti.
Ho cercato per un paio d'ore ma non ho trovato ciò che mi serve.

Sto creando in ASP una pagina riepilogativa di immagini composte, cioè una pagina che mi elenca una sere di immagini composte da + immagini sovrapposte che si compongono a seconda di una certa combinazione di codici presenti a DB.

Esempio:

1;2;3;4;4

splitto e ottendo un vettore nel quale mi ritrovo l'id 1 per il colore, l'id 2 per la seconda immagine (presumibilmente un Logo), l'id 3 per una prima scritta, l'id 4 per una seconda scritta + piccola (spostata dalla precedente), e l'altro id 4 per una qualunque altra immagine.

Ora, nessun problema a creare questa immagine usando il "position: relative" delle immagini giocando sul top e sul left, però questo mi crea uno spazio vuoto nell'immagine...tanto grosso quant'è lo spazio occupato dagli elemente riposizionati relative senza il riposizionamento.

Mi spiego meglio. Le mie immagini sono tutte a misura standard (es 100x100 pixel).
Sovrapponendole ho una immagine 100x100 e uno spazio vuoto di 400x100 pixel.

Come posso risolvere?

[fcaldera]

Originariamente inviato da ruttoloruttolo
Ora, nessun problema a creare questa immagine usando il "position: relative" delle immagini giocando sul top e sul left, però questo mi crea uno spazio vuoto nell'immagine...tanto grosso quant'è lo spazio occupato dagli elemente riposizionati relative senza il riposizionamento.

è il normale funzionamento... invece di posizionarle così prova a rendere le immagini float e spostare usando i margini

[ruttoloruttolo]

immagini float?

[webdemo]

sposto in css

ciak

[ruttoloruttolo]

Grazie...credevo fosse un problema Html...

:master:

Ho cercato un po' sulle immagini float ma nulla che me ne chiarisca il concetto o che mi abbia fornito una soluzione plausibile...ho provato ma senza risultato (senza avere una base minima è difficile trovare soluzioni)




Aspetto vostri riscontri.

[fcaldera]

Originariamente inviato da ruttoloruttolo
immagini float?

scusa.... troppo abbreviato
intendevo dire che devi assegnare tramite CSS la proprietà float: left (o float: right se credi) alle tue immagini e posizionarle utilizzando la proprietà margin.

[ruttoloruttolo]

grrrrrrrrrrrrrrrrrrrrrrrrrrrazie!

E' davvero semplicissimo!

:quote:

[ruttoloruttolo]

ora ho un'altro tipo di problema...

Nella pagina di scelta la preview è correttamente allineata...
...nella pagina di riepilogo le immagini (a partire dalla seconda sono disallineate).
Il CSS è il medesimo...cambiano solo il fatto che nella preview di scelta ho le immagini secondarie inizialmente a hidden e l'ordine con cui le ho inserite...

Incollo gli spezzoni:

Preview

        </tr>
            <td>
                [img]Images_template/portachiavi_colore1.gif[/img]
                [img]Images_template/portachiavi_colore1.gif[/img]
                [img][/img]
                [img][/img]
                [img][/img]
                [img][/img]
                [img][/img]
                [img][/img]
            </td>
        </tr> 

Riepilogo

        <td rowspan="2" > 
            [img]Images_Template/portachiavi_colore1.gif[/img]
            [img]Images_Template/logo_fronte1.gif[/img]
            [img]Images_Template/scritta_fronte3.gif[/img]
            [img]Images_Template/scritta_fronte_piccola3.gif[/img]
            [img]Images_Template/portachiavi_colore1.gif[/img]
            [img]Images_Template/logo_retro3.gif[/img]
            [img]Images_Template/scritta_retro2.gif[/img]
            [img]Images_Template/scritta_retro_piccola2.gif[/img]

        </td> 

CSS

  .Portachiavi_fronte{z-index:1;float:left; margin-left: 0px;margin-top: 0px;}
  .Logo_Fronte{z-index:2;float:left; margin-left: -257px;margin-top: 0px;}
  .Scritta_Fronte{z-index:3;float:left; margin-left: -257px;margin-top: 0px;}
  .Scritta_Fronte_Piccola{z-index:4;float:left; margin-left: -257px;margin-top: 0px;}

  .Portachiavi_retro{z-index:1;float:left; margin-left: -257px;margin-top: 100px;}
  .Logo_Retro{z-index:2;float:left; margin-left: -257px;margin-top: 100px;}
  .Scritta_Retro{z-index:3;float:left; margin-left: -257px;margin-top: 100px;}
  .Scritta_Retro_Piccola{z-index:4;float:left; margin-left: -257px;margin-top: 100px;} 

[ruttoloruttolo]

Risolto!
Conta anche l'ordine con cui si inseriscono!

Grazie a tutti!


Potete vederne il risultato su

http://ruttolo.*****.com/ElencoPren.asp

[fcaldera]

va bene postare una pagina di test con il codice, ma che non ci siano banner di google o simili, altrimenti viene considerato spam