Points de balle disparaissent

Question

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

Sur la page ci-dessus, une image flotte à gauche. À sa droite se trouve une liste intitulée "caractéristiques". Les éléments de la liste ont une image d’arrière-plan, mais elle n’apparaît pas. La liste 2 montre l’image d’arrière-plan.

Est-ce que quelqu'un sait comment je peux rendre les balles visibles?

Answer 1

Votre image a une propriété float: left. Les éléments de la liste sont donc rendus " derrière " l'image.

margin-left:200px;

sur l'élément UL va résoudre votre problème.

Vous pouvez également appliquer un float: left sur votre élément UL. Cela le fera flotter directement dans l'image, mais fera apparaître le contenu suivant sur la même ligne. Vous pouvez empêcher cela en effacer l'élément UL ou en ajoutant un élément après l'élément UL avec ...

clear:both

... appliqué.

Pour plus d'informations sur ce problème, consultez http://www.positioniseverything.net/easyclearing. html .

Answer 2

Je sais que c'est un article vieux d'un an, mais d'autres voudront peut-être savoir ...

Que se passe-t-il si vous utilisez un système de gestion de contenu et que certaines pages contiennent des images & amp; Certains ne voudriez-vous pas que les éléments de votre liste soient 200px dans le contenu?

Vous pouvez ajouter ce CSS à votre élément UL / OL:

overflow:hidden;

J'espère que cela aide.

Answer 3

Ce fil de discussion est vieux, mais toujours pertinent ...

Une autre solution alternative:

display: inline-block;

Placez ce sur l'UL . Il oblige tout le ul à apparaître après le flotteur. De cette façon, vous pouvez avoir une page avec ou sans l'image et elle s'affichera toujours correctement (cochée sur FF4, IE7 & 8, Chrome 11).

Answer 4

Vous pouvez également utiliser la propriété list-style-image au lieu de background-image. L’autre jour, j’ai rencontré le même problème: le comportement d’emballage du texte affiché par les «voisins» s’applique uniquement au «contenu», pas aux images d’arrière-plan (par exemple).