Autore Topic: altezza di un div / p (Letto 3123 volte)

cokeduck · « **il:** 24 Maggio 2005 17:05:45 »

Dentro un div con bordo sotto
ho un' immagine con del testo allineato a dx.

Problema: l'altezza del div non considera l'altezza dell'immagine ( il bordo appare dopo l'ultima riga del testo e sovrapposta all''immagine)

miki64 · « **Risposta #1 il:** 24 Maggio 2005 17:12:35 »

Io non ci ho capito nulla... però, sicuramente, questo tuo post era da inviare nella sezione "Evangelizzazione"...

halifax · « **Risposta #2 il:** 24 Maggio 2005 17:31:23 »

E' un problema che riscontri nella visualizzazione di un sito specifico con ff o ti stai riferendo all'uso di NVU ?

the fly on the net · « **Risposta #3 il:** 24 Maggio 2005 18:23:18 »

Sicuro si tratti di un DIV?
Il problema che dici si presenta normalmente con tutti gli elementi che non sono
display: block

Prova a forzarlo in questo modo:

Codice: [Seleziona]

tuoDIV
{
  display: block ! important;
}

Ciao

cokeduck · « **Risposta #4 il:** 24 Maggio 2005 18:54:54 »

Per essere chiaro provate a copiare ed incollare il codice qui sotto in una semplicissima pagina html

(immagine.jpg è una immagine 40x40)

vedrete che il bordo dei div resta sotto le immagini.

Che sia il 'float' che dà fastidio ?

Codice: [Seleziona]


<style type="text/css">
.menuitem {
	border-bottom: 1px solid #006699;
	}

.icon {
	float: left;
	margin-right: 7px;
	}
</style>

<div class="menuitem">
	<img class="icon" src="immagine.jpg" alt="La nostra storia"> La nostra storia
</div>
<div class="menuitem">
	<img class="icon" src="immagine.jpg" alt="Informazioni"> Informazioni
</div>
<div class="menuitem">
	<img class="icon" src="immagine.jpg" alt="La nostra storia"> Pullman Gran Turismo
</div>

Reb00t · « **Risposta #5 il:** 24 Maggio 2005 19:21:20 »

Per il momento sposto in "Evangelizzazione"

flod · « **Risposta #6 il:** 24 Maggio 2005 19:56:30 »

A cosa ti serve il float?
Non hai pensato di impostare l'altezza del div, oppure usare l'immagine come background del div?

the fly on the net · « **Risposta #7 il:** 24 Maggio 2005 22:40:53 »

Citazione da: cokeduck

Che sia il 'float' che dà fastidio ?

Il comportamento di firefox nel gestire i float è esatto, come vuole il w3c
http://www.w3.org/TR/CSS21/visuren.html#img-float2p

Se vuoi mantenere questa tattica, devi modificare il codice in questa maniera:

Codice: [Seleziona]


<html>
<head></head>
<style type="text/css">
.menuitem {
   border-bottom: 1px solid #006699;
  clear: both;
	min-height: 40px;
   }

.icon {
   float: left;
   margin-right: 7px;
   }
	 
</style>
<body>
<div class="menuitem">
   <img class="icon" src="immagine.jpg" alt="La nostra storia" width="40" height="40">La nostra storia
</div>
<div class="menuitem">
   <img class="icon" src="immagine.jpg" alt="Informazioni" width="40" height="40">Informazioni
</div>
<div class="menuitem">
   <img class="icon" src="immagine.jpg" alt="La nostra storia" width="40" height="40">Pullman Gran Turismo
</div>
</body>
</html>

Citazione da: flod

oppure usare l'immagine come background del div?

In questo modo l'immagine risulterebbe tagliata se il DIV è troppo basso - non penso sia il risultato che voglia ottenere

Ciao

shaitan · « **Risposta #8 il:** 24 Maggio 2005 23:07:07 »

usando min-height poi bisogna utilizzare il workaround per far si che funzioni anche in ie (che non supporta min-height)

insomma qualcosa del genere

Codice: [Seleziona]


min-height: 40px;
height: auto !important;
height: 40px

the fly on the net · « **Risposta #9 il:** 24 Maggio 2005 23:26:36 »

Citazione da: shaitan

bisogna utilizzare il workaround per far si che funzioni anche in ie

A dire la verità ho fatto il cattivo: min-height l'ho usato apposta

cokeduck · « **Risposta #10 il:** 25 Maggio 2005 00:01:41 »

Anch'io ho pensato di impostare un'altezza per il div ed infatti l'ho impostata nello style e non nei tag img (visto che dal w3c viene caldamente consigliato di usare i CSS e abbandonare l'impostazione degli attributi direttamente nei tag).

Grazie a tutti!

the fly on the net · « **Risposta #11 il:** 27 Maggio 2005 14:44:01 »

Precisazione: il w3c non sconsiglia di usare gli attributi direttamente nel codice HTML, invece raccomanda di non usare i tag o attributi che riguardano solo la formattazione visuale (esempio il tag per il grassetto).

In questo caso l'altezza/larghezza delle immagini nel tag <img> non riguarda la formattazione, ma è un'informazione aggiuntiva sulle caratteristiche dell'immagine - quindi rimane un attributo non deprecato dal w3c, anzi... invita a specificare sempre le dimensioni reali dell'immagine ed eventualmente distorcerla se necessario con altri sistemi (CSS/JS).

Ciao

Autore Topic: altezza di un div / p (Letto 3123 volte)

Reb00t