Newsgroup: it.comp.www.html
Titolo: ci riprovo...era box con immagine con larghezza variabile (diapositiva)

Avevo postato già questo post, però adesso potete vedere il risultato su
http://nic.nac.wdyn.de/~farnis
nella sezione autore e nella sezione gallery, potete vedere l'effetto che
desidero. Questo funziona, ma SE E SOLO SE, la dimensione (la larghezza)
dell'immagine che do è FISSA. Nel mio caso le ho impostate tutte con una
larghezza di 300kb. Però se ho una serie di immagini che vorrei
visualizzare con una larghezza differente, questo non funziona, ovvero il
box non si adatta all'immagine, e l'immagine risulta essere piu grande del
box, con un effetto sbagliato.
di seguito trovate il post originale di un paio di settimane fa...
 
scusate la complicatezza del subject :)
cerco di spiegarmi meglio.
ho realizzato un css che contiene tre sezioni principali:
#top
#menu
#content
Quest'ultima è così definita:
#content {
margin:0px 20px 50px 200px;	 
padding:10px;	
border: 0px solid #ccc;}	
vorrei creare un box per mettere un immagine, all'interno  di content, ed
ho quindi creato i seguenti div. Avevo intenzione di dare l'idea di una
diapositiva. Quello che ho fatto funziona, ma il mio problema deriva dal
fatto che devo dare una larghezza fissa all'immagine (es.300px). Invece, mi
piacerebbe poter caricare l'immagine con la larghezza originale, e fare in
modo che il box si adatti all'immagine. Ho spulciato google, questo news,
ed altri siti, ma proprio non ce la faccio, a meno che non ci sia riuscito
ed il mio browser (Mozilla Firebird su Linux) non lo visualizzi
correttamente. Quello che ho fatto è qui di seguito. Se potete darmi un
suggerimento, grazie in anticipo, nel frattempo continuo le mia prove.
#content div.immagine {
margin: 10px auto 0px auto;
width: 300px;
padding: 15px;
text-align:center;
background-color: #ffffff;
color: #000000;
font-family: Verdana, Arial; 
font-size: 10pt; 
font-weight: bold; 
text-decoration: none;
}
#content div.immagine img {
margin: 0px auto 0px auto;
display: block;
padding-bottom:1px
vertical-align: center;
} 
-- 
Fabio

| Quello che ho fatto funziona,
A me in veritrà compare questo:
The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and
then click the Refresh button, or try again later.
----------------------------------------------------------------------------
----
End tag 'div' does not match the start tag 'img'. Line 50, Position 3
</div>
--^
Bye Cico

 A me in veritrà compare questo:
con che browser? con mozilla a me funge..
-- 
Fabio

 ha scritto nel messaggio
news:pan.2003.09.08....@libero.it...

Con IE 5.5 sp2, mentre Opera 6.01 lo visualizza.
Bye

"Fabio" ha scritto:
| Avevo postato già questo post, però adesso potete vedere il risultato su
| 
http://nic.nac.wdyn.de/~farnis
|
| nella sezione autore e nella sezione gallery, potete vedere l'effetto che
| desidero. Questo funziona, ma SE E SOLO SE, la dimensione (la larghezza)
| dell'immagine che do è FISSA. Nel mio caso le ho impostate tutte con una
| larghezza di 300kb. Però se ho una serie di immagini che vorrei
| visualizzare con una larghezza differente, questo non funziona, ovvero il
| box non si adatta all'immagine, e l'immagine risulta essere piu grande del
| box, con un effetto sbagliato.
Ciao Fabio,
    finalmente hai messo on line la pagina! Spero di aver capito: vuoi mettere nel div
con id="contentleft" un immagine, e far si che possa contenere un immagine che lo
superi in larghezza, permettendo comunque al testo di stare alla destra dell' immagine
e soprattutto non disporsi anche sotto l' immagine.
Il fatto è che anche così com' è fatto ora c'e' un problema: prova a restringere
la finestra del browser: noterai che a un certo punto il testo slitta sotto l' immagine
Questo perchè il contentright subisce il float: left del contentleft e ha dimensione
fissa al 49% del content. Per consentire un float e far si che comunque il testo
non ci vada anche sotto oltre che di lato si può:
- dimensionare entrambi i div e renderli entrambi float
-  dimensionare solo il div "contentleft" e usare tale larghezza come margine sinistro
   del div con id "contentright". Questo per far si che il testo non finisca sotto quando
   si restringe la finestra.
La seconda soluzione ha indubbi vantaggi, dato che permette al testo di non iniziare da
sotto l' immagine. Ma in ogni caso, con i float bisognerà di sicuro dimensionare la
larghezzadi contentleft, oppure dell' immagine, che comunque nel css va specificata
a "300px" e non solo a "300" (magari è solo quello!) nello stile inlinea.
Io farei così: nel css esterno specifichi:
div#contentleft{
    float: left;
    width: 300px;
    text-align: center
    }
div contentleft img{
    display: block;
    margin 0px auto
    }
div#contentright{
    margin-left: 305px
    }
che definisce un comportamento di default, che va bene anche x immagini + piccole
(resteranno centrate rispetto ai 300px del contentleft). Poi nelle pagine dove metterai
immagini + grandi metti uno stile in linea:
<div id="contentleft" style="width: 400px">
    <!-- contenuto con immagine -->
</div>
<div id="contentright" style="margin-left: 405px">
    <!-- testo -->
</div>
Lo stile in linea andrà a prevalere su quello del css esterno.
Spero di esserti stato d' aiuto, e *soprattutto* di aver capito il problema
questa volta!
Ciao,
    SantaKlauss

 Con IE 5.5 sp2, mentre Opera 6.01 lo visualizza.
Adesso dovrebbe andare.. 
-- 
Fabio