Immagine in un <div>

**nicyork** · 07-10-2004, 11:41

Ciao.
Sto realizzando un sito con i css (ma no solo).
Ho creato la struttura esterna con una tabella (una testata, una colonna sinistra col menù, una parte centrale) e dento mi giostro con i css per fare quadrati con bordi, scritte, e il resto.

Ora nella parte centrale dove viene riportato il testo, volevo inserire una immagine.
Ho provato a mettere:
<div class="quadrato">
[img]img.gif[/img]
sdadas dsa d sa das d sad as d d asd asd as
sdadas dsa d sa das d sad as d d asd asd as
</div>

nel css:
.quadrato{
padding:1 1 1 1em; background:#fff; border: #000 1px dotted; font-size: 11px; color: #000;
}

nella speranza che mi mettesse l'immagine a sinistra e il testo intorno.
Purtroppo il testo è poco, l'immagine è più lunga, e il quadrato praticamente finisce prima della fine dell'immagine (si vede l'immagine che esce dal bordo inferiore puntinato (dotted).

Come posso fare?
Grazie.

**Federix** · 07-10-2004, 12:09

Prova a mettere overflow: hidden; nel CSS, in pratica sega tutto quello che è intorno al contorno del DIV.

**nicyork** · 07-10-2004, 12:26

Non cambia assolutamente niente.

**Federix** · 07-10-2004, 14:03

Prova ad aggiungere anche display: block;

**jesus** · 07-10-2004, 14:14

Inserisci un'altezza minima al div tale che sia sempre più grande dell'altezza dell'immagine:

codice:

.quadrato {
  min-height: 150px;        /*misura per browser seri*/ 
  height: auto !important;  /*misura per browser seri*/ 
  height: 150px;            /*misura per IE, che interpreta height come min-height*/ 
}

**zoom** · 07-10-2004, 14:34

devi lavorare con il min-height del div.
infatti gli elementi flottati non dimensionano il contenitore.
quindi nel css del div

height:auto !important;
height:xxxxpx;
min-height:xxxxpx;

edit

ps, era un po' che avevo la pagina aperta..

**nicyork** · 08-10-2004, 09:36

OK per la definizione dell'alteza, ora sembra andare bene, anche se se metto l'img a sinistra l'elenco puntato mi mette i punti sotto l'immagine, ma va bhe, metto l'img a destra e tutto si risolve...
Però ho un altro problema... ora il mio foglio di stile è così:

.quadrato
{
padding:1 em; background:#fff; border: #000 1px dotted; font-size: 11px; color: #000;
min-height: 400px; /*misura per browser seri*/
height: auto !important; /*misura per browser seri*/
height: 400px; /*misura per IE, che interpreta height come min-height*/

}

però ora non mi viene più il bordo tratteggiato... viene un quadrato bianco (lo sfondo del resto della pagina è nero) ma niente bordino tratteggiato...
Proprio mentre scrivevo ho fatto una prova ed ho visto che se metto il bordino tratteggiato bianco non si vede (prima dell'aggiunda delle altezze si vedeva) invece se lo metto di un altro colore (es: rosso) si vede... bho... comunque va bene anche rosso... spero!

Grazie.

**zoom** · 08-10-2004, 10:04

tu stai mettendo un bordo nero su pagina nera...
come pensi di poterlo vedere? :master:

**floyd46** · 08-10-2004, 10:06

ciao
ho provato a realizzare quello che hai chiesto tu;
un div con all'interno una immagine.

il codice è il seguente:

codice:

<style type="text/css">
body, html{
font-family:Verdana, Arial, sans-serif;
text-align:center;
margin:10px 0;
padding:0;
}
.quadrato{
padding:1em; 
background:#a1a1a1; 
border:1px dotted #000; 
font-size:11px; 
color:#000;
width:300px; 
text-align:left;
}
img{
margin:5px;
}
</style>
</head>
<body>
<div class="quadrato">
[img]calvin.jpg[/img] 
Prova scrittura testo attorno alla fotografia;
Prova scrittura testo attorno alla fotografia;
Prova scrittura testo attorno alla fotografia;
Prova scrittura testo attorno alla fotografia;
Prova scrittura testo attorno alla fotografia;
</div>
</body>
</html>

l'ho testata anche con Mozilla Firefox, Opera e NN 7.1: a me tutto ok.Puoi vedere anche l'immagine allegata.
ciao e chiedi ancora se hai problemi.

**nicyork** · 08-10-2004, 11:35

Ok, ho messo sia l'altezza che il margin:5px; all'immagine, sembra essere tutto ok!

Per il bordo, capisco quello che dici, ma prima si vedeva, poi dopo la modifica dell'altezza, no!
Prima vedevo il fuori tutto nero, dentro un quadrato bianco, e sul bordo il tratteggio nero e bianco... bho.
Comuqnue l'ho messo rosso e solid e ti dico che mi ci piace anche di più!

Discussione: Immagine in un <div>

Strumenti discussione

Ricerca discussione

Visualizza

Immagine in un <div>

Permessi di invio