Newsgroup: it.comp.www.html
Titolo: centrare box con immagine con larghezza automatica

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 Sirna ha scritto:
| 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.
Ciao Fabio, non ho capito un po' di cose....sotto la foto vuoi mettere
una descrizione? E in caso affermativo, deve essere contenuta nei
bordi del div che contiene foto e descrizione? In caso negativo,
non ti basterebbe aggiungere i bordi solo all' immagine?  La foto sarà
unica? Se puoi spiegarti meglio, vedo se si può fare qualcosa.
Saluti,
    SantaKlauss

 unica? Se puoi spiegarti meglio, vedo se si può fare qualcosa.
Cerco di spiegarmi meglio :)
Devo presentare una serie di fotografie, in particolare ho creato un
indice, costituito da thumbnails delle immagini, e successivamente
cliccando su ognuno di queste thumbnails compare una pagina con un
navigatore per andare avanti, indietro e tornare all'indice.
Un volta cliccata la thumbnails compare, come dicevo il navigatore in
alto, e sotto l'immagine.
Innanzitutto, il box principale che ho chiamato #content, è così
costituito:
#content {
position: absolute;
top: 60px; 
left: 150px; 
right: 25px;
color: #ccc; 
background: #666699; 
font: 12px Verdana, sans-serif; 
padding: 10px;
}
All'interno di questo box content, devo inserire l'immagine che viene
selezionata. Ho creato a questo proposito un altro box:
#content div.immagine {
margin: 0px auto 10px auto;
width: 300px;
padding: 15px;
text-align:center;
border-top: 1px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-left: 1px solid black;
background-color: #ffffff;
color: #000000;
font-family: Verdana, Arial; 
font-size: 10pt; 
font-weight: bold; 
text-decoration: none;
}
che è praticamente lo sfondo bianco, con il bordino dx e quello in basso
leggermente piu spessi, per dare l'effetto ombra. Dentro questo box,
posiziono l'immagine con:
#content div.immagine img {
display: block;
border-bottom: 2px solid #ffffff;
padding-bottom: 14px;
width:100%;
} 
che inserisce l'immagine e la descrizione. 
Il codice html è il seguente:
div id="content" class="immagine">
<img src="immagine.jpg" width="300" alt="immagine.jpg"> Descrizione
immagine.jpg</div>
Il tutto funziona, ma a patto che io definisca la larghezza dell'immagine,
cioè del primo box, ovvero con il width: 300px in #content div.immagine.
Quindi indipendentemente dalla larghezza dell'immagine che verrà inserita,
tutto questo funziona ma con una larghezza fissa di 300px. Io vorrei poter
adattare la larghezza del box in funzione di quella dell'immagine.
L'effetto che ottengo è più o meno il seguente:
	 -------------------------------
	|				|
	|   -------------------------   |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|  |			     |  |
	|   -------------------------	|
	|				|
	|  Descrizione immagine.jpg	|
	|				|
	 -------------------------------
Per rendere il tutto più complicato, l'insieme di questi box vorrei che
fosse centrato in #content.
Quello che ho postato funziona, è testato, ma solo a patto che la
larghezza del primo box sia fissata a priori.
Se non mi sono spiegato bene, posso mettere on line una pagina di esempio.
-- 
Fabio

Fabio ha scritto:
[... mega-cut...]
| Se non mi sono spiegato bene, posso mettere on line una pagina di esempio.
Sei stato (quasi) chiaro.. ma forse con la pagina on-line andrebbe meglio *<|:-)
Saluti,
    SantaKlauss