Elenco ul ed immagine che esce

[Lollys]

Ho questo elenco:

<div>

<ul>[*]
<h4>TITOLO</h4>
[img][/img]


testo</p>
[/list]

</div>

il css

ul {list-style: none; margin: 10px; padding: 0;}
li {position: relative; margin: 0; padding: 0;}
img {position: absolute; top: 0; right: 0;}

ho l'elenco ul che lascia un margine di 10px dal div esterno e poi i vari li con l'immagine che dovrebbe stare a desta.

Allora su Mozilla e Opera e NE funziona, l'immagine si posiziona in alto al li e tutta a destra, con IE invece l'immagine si posizione in alto però a destra esce dal blocco ul e và a sbattere nel div come mai ?

Ho provato a dare un display: block; all'ul ed anche al li ma nulla da fare !

Ho fatto qualche errore ? :master:

[ateicos]

se tutti gli elementi della lista sono così...

<h4>TITOLO</h4>
[img][/img]


testo</p>

e ti lamenti di questo

ho l'elenco ul che lascia un margine di 10px dal div esterno e poi i vari li con l'immagine che dovrebbe stare a desta.

questo css è sbagliatissimo!

ul {list-style: none; margin: 10px; padding: 0;}
li {position: relative; margin: 0; padding: 0;}
img {position: absolute; top: 0; right: 0;}

--------------------------------------------------
usa questo codice html

<div class="lista" >
<ul>[*]
<h4>TITOLO</h4>
[img][/img]


testo</p>


[/list]
</div>

e questo css

#lista ul { list-style:none; margin:0; padding:0; }
#lista li { margin:0; padding:0; }
#lista li img { float:right; }
#lista li br { clear:both; height:1px; }

-------------------------------------------------

fammi sapere

[Lollys]

Il css l'hò scritto al volo ...pardon, era per capire quali impostazioni avevo dato per ogni tag.

Comunque non voglio usare il float: right; perchè l'immagine stà sotto il TITOLO H4 invece deve stare allineata a destra.

Cosi mi và bene.

#Lista ul {margin: 10px; padding: 0;}
#Lista li {position: relative; margin: 0; padding: 0; height: 100px; border: 1px solid #000000;}
#Lista img{position: absolute; top: 0; right: 0;}

Come scritto qui sopra, l'immagine esce dal box !
Ho provato a togliere le scritte varie come il Titolo ed il paragrafo, cè solo l'immagine, ma su IE continua ad uscire !

[bagu]

mettere l'immagine in backround al li non potrebbe andarti bene ?
cmq penso che la "colpa" del comportamento sia h4...
mi pare che se non usi un display inline il tag h manda a capo...

ciao paolo

[Lollys]

Devo metter per forza l'immagine senza il background, io ho provato anche con il LI vuoto e solamente con l'immagine dentro, ma esce lo stesso, non riesco a capire !

[Lollys]

Allora ho fatto delle prove con una pagina vuota per tagliare la testa al toro, dopo molte prove ho notato che l'immagine esce sempre, e si allinea come vogliamo noi solamente se si dà al contenitore in questo caso al LI una lunghezza width idem per l'altezza che non capisco cosa c'entri, comunque con un width: 100%; al LI ho risolto almeno per ora lascio cosi.


Ciao

[Marcolino's]

L'immagine è un elemento a livello di blocco, come la lista, usare elementi a livello di blocco uno dentro l'altro, può comportare a questi sgradevoli comportamenti, specie di quella scovazza di IE, ma il tuo problema era proprio un ridimensionamento della dimensione della lista.
In pratica hai cercato di infilare una botte dentro un bicchiere e non il contrario.

[Lollys]

Originariamente inviato da Marcolino's
L'immagine è un elemento a livello di blocco, come la lista, usare elementi a livello di blocco uno dentro l'altro, può comportare a questi sgradevoli comportamenti, specie di quella scovazza di IE, ma il tuo problema era proprio un ridimensionamento della dimensione della lista.
In pratica hai cercato di infilare una botte dentro un bicchiere e non il contrario.

:master:

Intendi per via delle larghezze ?

Se non dò la larghezza all'elenco UL prende tutto l o spazio necessario che ad occhio sul video arriva sui 400px, mentre l'immagine è soltanto di 60px !!

Non ho capito. :master:

Di solito il position: relative lo usavo con div di una certa dimensione, forse IE deve sapere la dimensione per poterli gestire boh.

:master:

[Jerry Masslo]

Originariamente inviato da Marcolino's
L'immagine è un elemento a livello di blocco, come la lista, usare elementi a livello di blocco uno dentro l'altro, può comportare a questi sgradevoli comportamenti, specie di quella scovazza di IE, ma il tuo problema era proprio un ridimensionamento della dimensione della lista.
In pratica hai cercato di infilare una botte dentro un bicchiere e non il contrario.

:master: non ho capito che volevi dire

le immagini sono elementi inline e poi i block dentro i block sono una cosa normale l'anomalia è semmai block dentro inline poi ci sono alcuni tag block che non vogliono degli altri tag block dentro ma non è la regola

per Lollys, non ho capito cosa devi fare ma si può mettere l'immagine senza position:absolute dentro l'h ed eventualmente giocare col vertical-align di quell'immagine per posizionare il testo

cioé
h1 img {vertical-align:middle/*o top o bottom*/}

[*]<h1>vediamo[img]Immagine.jpg[/img]</h1>


oppure si può dare come sfondo al li o all'h dipende cosa ti serve, il posizionamento assoluto però non è consigliato in qusti casi