Punti elenco scomparsi

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

Nella pagina sopra c'è un'immagine fluttuata a sinistra. Alla sua destra c'è un elenco, intitolato "caratteristiche". Le voci dell'elenco hanno un'immagine di sfondo, tuttavia non viene visualizzata. L'elenco 2 mostra l'aspetto dell'immagine di sfondo.

Qualcuno sa come posso rendere visibili i proiettili?

Answer 1

La tua immagine ha una proprietà float: left. Le voci dell'elenco sono pertanto visualizzate "dietro" a " l'immagine.

margin-left:200px;

sull'elemento UL risolverà il tuo problema.

In alternativa, puoi applicare un float: lasciato sul tuo elemento UL. Questo lo farà fluttuare fino all'immagine, ma farà apparire il seguente contenuto sulla stessa linea. Puoi impedirlo cancellando l'elemento UL o aggiungendo elemento dopo l'elemento UL con ...

clear:both

... applicato ad esso.

Ulteriori informazioni su questo comportamento sono disponibili all'indirizzo http://www.positioniseverything.net/easyclearing. html .

Answer 2

So che questo è un post di un anno, ma altri potrebbero voler sapere ...

Cosa succede se si utilizza un sistema di gestione dei contenuti e alcune pagine hanno immagini e amp; alcuni non vorresti che i tuoi elementi dell'elenco fossero 200px nel contenuto?

Puoi aggiungere questo CSS al tuo elemento UL / OL:

overflow:hidden;

Spero che sia d'aiuto.

Answer 3

Questo thread è davvero vecchio, ma sempre rilevante ...

Un'altra soluzione alternativa:

display: inline-block;

Metti questo su UL . Forza l'intero ul ad apparire dopo il galleggiante. In questo modo puoi avere una pagina con o senza l'immagine e verrà sempre visualizzata correttamente (selezionata su FF4, IE7 & amp; 8, Chrome 11).

Answer 4

In alternativa, puoi usare la proprietà list-style-image invece di background-image. L'altro giorno mi sono imbattuto in questo stesso problema: il comportamento di spostamento del testo che fluttua mostra sui "vicini" si applica solo al "contenuto", non alle immagini di sfondo (ad esempio).