| Precedente :: Successivo |
| Autore |
Messaggio |
ioSOLOio
Amministratore
Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua
|
 Inviato: 17 Set 2005 15:35 Oggetto: * posizionare immagini nel layout |
 |
|
Dato il punto di partenza..layout già strutturato...
Poniamo il caso che io abbia alcune immagini, diciamo quattro...sostanzialmente rettangolari, di dimensioni un po' diverse ma non poi tanto...
in pratica occorre metterle su due righe successive, appaiate due a due..
però per rendere esteticamente più piacevole la loro collocazione, vorrei che risultassero un pochetto sfalsate [in pratica che non poggino sulla medesima linea orizzontale...]
come procedo per il meglio ?
le metto ciascuna in un DIV cui assegno un id e poi definisco delle classi nel css dove indicherò la posizione che devono assumere ?
Ma in questo modo, che posizione do loro ?
Assoluta in pixel [ad esempio dall'alto e da sinistra] ?
sentiamo la dea grafica reb che dice....
. |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 17 Set 2005 15:37 Oggetto: |
|
|
dopo la seconda metti un <br /> e la terza e la quarta andranno sulla riga sotto; siccome le immagini sono di dimensioni diverse, non puoi usare una classe ma devi usare l'id per definirne la larghezza e l'altezza: ecco, all'id relativo alla terza immagine aggiungi anche un margin-left: 30px;
edit: mi sa che non ho capito se le vuoi sfalsare solo orizzontalmente o anche verticalmente, comunque nel caso ti bastera' aggiungere un margin-top: 20px alla seconda e dovrebbero risultare sfalsate nei due sensi
il posizionamento assoluto ha delle sue indubbie utilita', ma anche dei problemi: deve essere usato "appoggiandoti" ad un elemento (generalmente un div) posizionato in maniera relativa, altrimenti te lo posiziona in maniera assoluta rispetto alla finestra ed inoltre toglie l'elemento dal flusso del codice facendolo vagare per i fatti suoi ed e' un attimo a cambiare browser o risoluzione e scoprire che e' finito in una zona dove ti impedisce di accedere a qualche link/sezione/pezzo di testo... se riesci a fare in altro modo secondo me e' meglio, altrimenti magari postami il codice della pagina e troviamo un'alternativa  |
|
| Top |
|
|
ioSOLOio
Amministratore
Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua
|
| Inviato: 17 Set 2005 15:51 Oggetto: |
|
|
Si, certo...posizionamento assoluto non ha senso....errato io, pensavo una cosa e ne ho scritta una altra....
Ok, provo a lavorare come hai suggerito per avere uno sfalsamento sui due assi.
in pratica vorrei ottenere qualcosa di simile:
li sono "riquadri di testo"...io invece dovrei utilizzare immagini...
Anche se -quasi quasi- trasformo le immagini in testo [sono banner testuali] e aggiro il problema...
. |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 17 Set 2005 16:03 Oggetto: |
|
|
| ioSOLOio ha scritto: | Si, certo...posizionamento assoluto non ha senso....errato io, pensavo una cosa e ne ho scritta una altra....
Ok, provo a lavorare come hai suggerito per avere uno sfalsamento sui due assi.
in pratica vorrei ottenere qualcosa di simile:
li sono "riquadri di testo"...io invece dovrei utilizzare immagini...
Anche se -quasi quasi- trasformo le immagini in testo [sono banner testuali] e aggiro il problema...
. |
'spe' 'n attimo!
io credevo che avessi delle immagini nel senso di foto... mmm... quell'effetto lo puoi ottenere con dei div posizionati (quelli si!) in maniera assoluta, oppure con un'immagine unica da usare come sfondo (a vederla cosi' secondo me te la caveresti con una gif di poco peso... e' che a te servono linkabili, giusto?
mmm...
se dovessi ricreare il layout dell'immagine, costruirei un div all'interno del quale ne inserirei due che posizionerei con float
all'interno del primo (diciamo colonna sx) inserirei i due riquadri verde e giallo e li distanzierei con margin, mentre all'interno del secondo metterei gli altri tre e li distanzierei con margin allo stesso modo, ad esempio
i riquadri li puoi colorare semplicemente ed inserirci il testo, oppure puoi usare le immagini come sfondo e inserire un link in un angolo o qualcosa del genere... non ho mai provato a fare una cosa del tipo:
| Codice: |
<div id="prova"><a href=""> </a></div>
|
e nel css
| Codice: |
#prova {
width: 150px;
height: 200px;
}
#prova a {
display: block;
width: 100%;
height: 100%;
}
|
magari funziona pure quello (se decidi di inserire l'immagine come sfondo, intendo) |
|
| Top |
|
|
ioSOLOio
Amministratore
Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua
|
| Inviato: 17 Set 2005 20:30 Oggetto: |
|
|
| rebelia ha scritto: | | io credevo che avessi delle immagini nel senso di foto... mmm... quell'effetto lo puoi ottenere con dei div posizionati (quelli si!) in maniera assoluta, oppure con un'immagine unica da usare come sfondo (a vederla cosi' secondo me te la caveresti con una gif di poco peso... e' che a te servono linkabili, giusto? |
mi hanno passato quattro immagini che sono dei rettangoli colorati con del semplice testo scritto....quindi nessuno mi vieta di ottenere il medesimo effetto scrivendo e formattando ad hoc il testo..
si, devono essere linkabili...ma foss'anche una singola immagine [su cui "appoggiare" il testo in maniera opportuna, se è questo che intendevi dire] potrei sempre risolvere mappandola..
| rebelia ha scritto: | se dovessi ricreare il layout dell'immagine, costruirei un div all'interno del quale ne inserirei due che posizionerei con float
all'interno del primo (diciamo colonna sx) inserirei i due riquadri verde e giallo e li distanzierei con margin, mentre all'interno del secondo metterei gli altri tre e li distanzierei con margin allo stesso modo, ad esempio
i riquadri li puoi colorare semplicemente ed inserirci il testo, oppure puoi usare le immagini come sfondo e inserire un link in un angolo o qualcosa del genere...
[...]
|
quelli dell'esempio in realtà sono 5 mentre a me bastano 4..ed in più mi andrebbe bene anche il non sovrapporli ma semplicemente sfalsarli....
l'idea di farmi delle immagini da usare come sfondo disponendole in modo opportuno mi attira...
ok, farò delle prove...grazie degli input !
. |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 17 Set 2005 20:48 Oggetto: |
 |
|
| ioSOLOio ha scritto: |
quelli dell'esempio in realtà sono 5 mentre a me bastano 4..ed in più mi andrebbe bene anche il non sovrapporli ma semplicemente sfalsarli....
l'idea di farmi delle immagini da usare come sfondo disponendole in modo opportuno mi attira...
ok, farò delle prove...grazie degli input !
|
ottieni pure di alleggerire il tutto e di renderlo compatibile con palmari & co.! |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
