allineamento verticale

**fabione_htm** · 19-08-2006, 18:57

salve.

sto creando una web galleria ed ho un problema.Ho in una pagina una serie di thumb cliccando si apre l'immagine ingrandita ma questa é sempre uguale in larghezza ma non in altezza quindi quando capita che l'immagine sia sta scattata in verticale anziche in orizontale il testo che si trova sotto la foto(nel immagine orizontale) si viene a trovare sul immagine stessa.Avrei quindi di bisogno di un codice che mi faccia spostare il testo in base all´altezza della foto.

ho giá provato con relative e static ma con scarso successo.

Grazie

**Another-Life** · 19-08-2006, 19:10

Non ho capito quasi nulla...magari un link alla Web-Gallery??

**fabione_htm** · 19-08-2006, 19:26

ciao.

Il link non te lo posso inviare perche non é ancora online provo a spiegarti il problema nuovamente.

in una pagina vi é una foto di larghezza 400px altezza 500 px sotto vi é del testo ora se la foto cambia i valori del altezza da 500 passa a 800 il testo si viene a trovare sopra la foto e questo non deve succedere.come faccio a fare in modo che il testo si sposti in base al altezza della foto?

invio in codice della pagina:
<style type="text/css">

#galleria-tasto {
position:relative;
top:219px;
width:40%;
height:100%;
left:0%;
margin:0 0 0 -10px;
}

#recht_taste {
position:absolute;
left:120px;
top:800px;
width:335px;
height:13px;
}

#id--Webmaster{
position:absolute;
left:170px;
top:495px;
width:220px;
height:19px;

}

#data {
position:relative;
left:150px;
top:500px;
width:300px;

}
</style>

</head>
<body style="background-repeat: repeat-x" background="deco/sfondo.jpg"; onLoad="carica_immagine()">

<div id="Tabella_01">
<div id="galleria-logo_">

[img]deco/logo.gif[/img]
</div>

<div id="Fotos-web-Galerie-by-Fabio_">
[img]deco/Fotos-web-Galerie-by-Fabio.gif[/img]
</div>

<div id="galleria-Livello-1_">

[img]img/pxt.gif[/img]
</div>

<div id="galleria-tasto">

[img]deco/back.jpg[/img]
<div id="id--Webmaster"><span class="footer"> Webmaster:</span> <a class="footer" href ="mailto:fhz@hotmail.com" title="Senden E-mail">Fabio </a>
</div>
<div id="data">
<span class="footer">
Last Update: <SCRIPT SRC="ora.js"></script>
</ span>
</div>
<div id="Klickt-auf-dem-Bild--um-zu-ver_">
[img]deco/recht_taste.gif[/img]
</div>

</div>
</div>
</body>
</html>

questa é la parte del codice che varia:
<div id="galleria-Livello-1_">

[img]img/pxt.gif[/img]
</div>

vi é uno script ma non lo allegato se ti serve te lo invio.

spero di essere stato abbastanza chiaro

**fabione_htm** · 19-08-2006, 20:01

ciao.

Il link non te lo posso inviare perche non é ancora online provo a spiegarti il problema nuovamente.

in una pagina vi é una foto di larghezza 400px altezza 500 px sotto vi é del testo ora se la foto cambia i valori del altezza da 500 passa a 800 il testo si viene a trovare sopra la foto e questo non deve succedere.come faccio a fare in modo che il testo si sposti in base al altezza della foto?

invio in codice della pagina:
<style type="text/css">

#galleria-tasto {
position:relative;
top:219px;
width:40%;
height:100%;
left:0%;
margin:0 0 0 -10px;
}

#recht_taste {
position:absolute;
left:120px;
top:800px;
width:335px;
height:13px;
}

#id--Webmaster{
position:absolute;
left:170px;
top:495px;
width:220px;
height:19px;

}

#data {
position:relative;
left:150px;
top:500px;
width:300px;

}
</style>

</head>
<body style="background-repeat: repeat-x" background="deco/sfondo.jpg"; onLoad="carica_immagine()">

<div id="Tabella_01">
<div id="galleria-logo_">

[img]deco/logo.gif[/img]
</div>

<div id="Fotos-web-Galerie-by-Fabio_">
[img]deco/Fotos-web-Galerie-by-Fabio.gif[/img]
</div>

<div id="galleria-Livello-1_">

[img]img/pxt.gif[/img]
</div>

<div id="galleria-tasto">

[img]deco/back.jpg[/img]
<div id="id--Webmaster"><span class="footer"> Webmaster:</span> <a class="footer" href ="mailto:fhz@hotmail.com" title="Senden E-mail">Fabio </a>
</div>
<div id="data">
<span class="footer">
Last Update: <SCRIPT SRC="ora.js"></script>
</ span>
</div>
<div id="Klickt-auf-dem-Bild--um-zu-ver_">
[img]deco/recht_taste.gif[/img]
</div>

</div>
</div>
</body>
</html>

questa é la parte del codice che varia:
<div id="galleria-Livello-1_">

[img]img/pxt.gif[/img]
</div>

vi é uno script ma non lo allegato se ti serve te lo invio.

spero di essere stato abbastanza chiaro

**Another-Life** · 19-08-2006, 20:04

hmmm.....l'immagine di cui parli che nome ha??

Edit:

Nel codice XHTML/HTML da te postato non c'è nessuna immagine con quella risoluzione^^

**fabione_htm** · 20-08-2006, 12:14

´Salve.
L'immagine in questione fisicamente non´c'é perché viene caricata su ancora tramite js.

Il tutto funziona cosi:

vi é una con una "tabbella" di immagini l'utente clicca su una immagine la pagina invia una numero ad una seconda pagina che carica una foto con quel numero.

La cosa é un pó difficile da spiegare ma funziona cosi.

fondamentalmete le immagini hanno tutte larghezza 700px mentre l'altezza varia da 1127 a 525.

se proprio non si puó fare metto immagine e testo in una tabbella e buonanotte.

Mannagia ai css w la tabbelle ma che ci vuoi fare il progresso :-(

**fcaldera** · 20-08-2006, 13:28

se il "sintomo" è una sovrapposizione di testo, probabilmente la causa risiede nel posizionamento assoluto del testo (e in effetti nel codice ho visto qualche position: absolute)

Elimina quel tipo di posizionamento oppure, se non puoi farne a meno, racchiudi immagine e didascalia in un unico blocco (mandando a capo la didascalia) che poi posizioni in modo assoluto.

**fabione_htm** · 20-08-2006, 18:57

grazie.

Il suggerimento che mi hai dato si é dimostrato giusto lo avevo giá provato ma non funzionava quindi ho tolto le misure del top agli elementi che ho incluso nell'elemeto genitore e funziona.

Grazie invio il codice
<div id="galleria-Livello-1_">
[img]img/pxt.gif[/img]
<div id="id--Webmaster-Ippolito-Fabio_">
<span class="footer">
Webmaster:
</span>
<a class="footer" href ="mailto:fabione191@hotmail.com" title="Senden E-mail">Ippolito Fabio
</a>
</div>
<div id="data">
<span class="footer">
Last Update: <SCRIPT SRC="ora.js"></script>
</ span>
</div>
</div>

il css
<style type="text/css">
<!--

#galleria-Livello-1_ {
position:absolute;

top:270px;
width:100%;
height:100%;
left:0%;
margin:0 0 0 -70px;
}

#id--Webmaster-fabio {
position:absolute;
left:230px;
top:100%;
width:220px;
height:19px;

}

#data {
position:relative;
left:210px;

width:300px;

Discussione: allineamento verticale

Strumenti discussione

Ricerca discussione

Visualizza

allineamento verticale

Permessi di invio