souci d'affichage image dans les <li>

**{F-I}** · 19/11/2008, 05h28

Salut à tous,

J'ai un petit souci au niveau d'affichage, je n'arrive pas à obtenir ceci (barre_navig.jpg). (Pourquoi ils s'affichent en petit alors que j'ai défini la taille par image)

Je suis arrivé à ici (barre_navig2.jpg) qui a pour les codes sources suivantes :

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="barre_navig_b">
                    	<li class="bar_navig_buto_no">lien 1</li>
                        <li class="bar_navig_buto_no">lien 2</li>
                        <li class="bar_navig_buto_no">lien 3</li>
                        <li class="bar_navig_buto_no">lien 4</li>
                        <li class="bar_navig_buto_no">lien 5</li>
                        <li class="bar_navig_buto_out">lien 6</li>
                    </ul>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* Decoration base */
#barre_navig_h { background-image: url('bg_barre_navig_h.png'); }
#barre_navig_b li { display: inline; list-style-type: none; }
/* Mise en page */
#barre_navig_h { height: 33px; }
#barre_navig_b a:link, a:visited { float: left; }
/* Partie des classes */
.bar_navig_buto_no { background-image: url('barre_navig_bouton_vierge.png'); width: 111px; height: 24px; }

Merci d'éclairer ma lanterne, je ne vois pas où est la fuite.

**Bisûnûrs** · 19/11/2008, 07h27

Tu ne peux pas donner des dimensions à des éléments inline.
Remplace ton display:inline par un float:left.

**{F-I}** · 19/11/2008, 22h23

En effet, ça s'affiche un peu mieux mais j'ai déjà spécifie float: left; dans la partie mise en page... (mauvaise utilisation peut-être ??)

Bon, j'ai quelques soucis de compréhension au niveau codage, pourrez-vous s'il vous plaît m'expliquer pourquoi le bordure "view" n'est pas inclus dans la barre navig H et barre navig B

Voici la capture d'écran qui montre les parties concernés par div "view" (view_ou.jpg) et comparez de ce que j'ai l'apercu avec Firefox (bordure.jpg), vous voyez qu'il n'y a pas de bordure pour la partie barre navig alors que j'ai bien indiqué dans xhtml (voir le codage dans la capture view_ou.jpg)

Voici le codage complet de la partie CSS qui pourrait vous aider à cerner mon problème :

ps : j'ai également un souci de la qualité du codage concernant #barre_navig_b, normalement je n'ai pas à noter la position ni faire un retrait de x px pour qu'il positionne correctement

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Construction de base */
html, body      { margin: 0; padding: 0; }
 
/* Décoration de base */
body      { background-color: #c9c9c9; }
#view     { border: 1px solid #000000; }
#header   { background-image: url('bg_header.png'); }
#barre_navig_h { background-image: url('bg_barre_navig_h.png'); }
#barre_navig_b li { float: left; list-style-type: none; }
 
/* Mise en page de base */
#view     { width: 772px; margin: auto; }
#header   { height: 232px; }
#barre_navig_h { height: 33px; }
#barre_navig_b { height: 24px; margin: auto; position: absolute; margin-top: -15px; margin-left: -39px; }
 
/* Partie des classes */
.bar_navig_buto_no { background-image: url('barre_navig_bouton_vierge.png'); width: 111px; height: 24px; }
.bar_navig_buto_bout { background-image: url('barre_navig_bouton_bout.png'); width: 106px; height: 24px; }

Je vous remercie beaucoup par avant pour vos aides et si vous avez des remarques, surtout n'hésitez pas....

**GihefBey** · 19/11/2008, 22h58

Bonjour,

Pour répondre, il faudrait aussi le code HTML concerné.
Il faudrait aussi que tu unifies tes styles.
Regroupe les déclarations, ne les morcèle pas.
Par exemple, un seul #view avec tout ce qui le concerne dedans.

Sinon, en général, je m'y prendrais autrement.

Ce dont tu sembles avoir besoin, c'est de liens qui ont des dimensions, non ?
Alors, applique le .bar_navig_buto_no aux <a> et pas aux <li>.
En y ajoutant un display : block;

-

**devyan** · 19/11/2008, 23h04

Ajoute un padding afin de déplacer le texte par rapport au background

**{F-I}** · 20/11/2008, 04h26

Envoyé par GihefBey

Pour répondre, il faudrait aussi le code HTML concerné.

Merci de ta participation et le code HTML est écrit dans la capture view_ou.jpg...

Je tente de réorganiser la partie CSS et rajouter de ce que tu viens de me dire, on verra bien

**{F-I}** · 20/11/2008, 06h08

Ha, ça a l'air d'aller mieux :

Voici les codages en premier temps :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
		margin: 0;
		padding: 0;
		background-color: #c9c9c9;
		}
 
#view	{
		width: 772px;
		margin: auto;
		border: 1px solid #000000;
		}
 
#header	{
		height: 232px;
		background-image: url('bg_header.png');
		}
 
#barre_navig_h	{
		background-image: url('bg_barre_navig_h.png');
		}
 
#barre_navig_b li	{
		list-style-type: none;
		}
 
#barre_navig_b a	{
		float: left;
		display : block;
		}
 
#barre_navig_h	{
		height: 33px;
		}
 
#barre_navig_b {
		height: 24px;
		margin: auto;
		margin-top: -20px;
		margin-left: -40px; 
		}
 
.bar_navig_buto_no	{
		background-image: url('barre_navig_bouton_vierge.png');
		width: 111px;
		height: 24px;
		}
 
.bar_navig_buto_bout	{
		background-image: url('barre_navig_bouton_bout.png');
		width: 106px;
		height: 24px;
		}

J'espère que j'ai mieux présenté que la dernière fois, cependant s'il y a des remarques n'hésitez pas

Et voici :

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>TNode.Text</title>
            <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" />
		</head>
 
		<body>
        	<div id="view">
        		<div id="header">
                </div>
                <div id="barre_navig_h">
                </div>
                <div id="barre_navig_b">
                	<ul>
                    	<li><a class="bar_navig_buto_no" href="#">lien 1</a></li>
                        <li><a class="bar_navig_buto_no" href="#">lien 2</a></li>
                        <li><a class="bar_navig_buto_no" href="#">lien 3</a></li>
                        <li><a class="bar_navig_buto_no" href="#">lien 4</a></li>
                        <li><a class="bar_navig_buto_no" href="#">lien 5</a></li>
                        <li><a class="bar_navig_buto_no" href="#">lien 6</a></li>
                        <li><a class="bar_navig_buto_bout">&nbsp;</a></li>
                    </ul>
                </div>
       	</div>
		</body>
	</html>

On progresse cependant il reste encore un petit bug avec Internet Explorer, voici l'aperçu avec IE7 (ie7.jpg) alors qu'avec Firefox 3 (ff3.jpg), ça s'affiche comme qu'il se doit
Comment on le résolu ?

Ensuite, chaque image il y a une petite morceau à côté du bord à gauche et je voudrais que l'image commence juste après le petit morceau en question.

Comment m'y prends-je ? parce qu'en utilisant padding-left, afin d'avoir le lien un peu plus à droite (juste après le morceau de l'image) ça décale également l'image en elle meme, que faire ?

Merci infiniment

**devyan** · 20/11/2008, 09h22

Envoyé par {F-I}

Comment m'y prends-je ? parce qu'en utilisant padding-left, afin d'avoir le lien un peu plus à droite (juste après le morceau de l'image) ça décale également l'image en elle meme, que faire ?

Tout d'abord, je vois dans le HTML que le fond est placé sur A donc si tu places le padding sur LI ça déplace forcément le fond avec

**{F-I}** · 20/11/2008, 18h39

Je vais essayer de m'arranger et peux-tu m'expliquer comment résoudre le petit souci d'affichage chez IE7 ?

Merci

**GihefBey** · 20/11/2008, 19h28

Ah, c'est mieux.

Tu ne devrais plus avoir besoin de .bar_navig_buto_no.
Essaye de simplifier encore.

Par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="barre_navig_b">
  <ul>
      <li><a href="#">lien 1</a></li>
      <li><a href="#">lien 2</a></li>
      <li><a href="#">lien 3</a></li>
      <li><a href="#">lien 4</a></li>
      <li><a href="#">lien 5</a></li>
      <li><a href="#">lien 6</a></li>
      <li><a class="bar_navig_buto_bout">&nbsp;</a></li>
    </ul>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#barre_navig_b li {
  float: left;  /* ôté des <a> et déplacé ici  */
  list-style-type: none;
  }
 
#barre_navig_b a {
  display : block;
  background-image: url('barre_navig_bouton_vierge.png');
  width: 111px;
  height: 24px;
  }

Si ça ne marche pas, conserve .bar_navig_buto_no mais déplace quand même le float.

-

**devyan** · 20/11/2008, 20h45

Une idée vient de me traverser l'esprit ...

Pas d'inquiétude, je n'ai pas eu mal

Donc voilà :

Tu veux mettre une image puis à la suite un texte et ce dans un LI ...
N'est-il pas déjà prévu pour faire ce genre de chose ?

Effectivement il y a : list-style-image

A+

**{F-I}** · 21/11/2008, 06h34

GihefBey, ta solution fonctionne en effet mieux sous Internet Explorer, ça s'affiche en horziontalement, c'est bien cependant il y a toujours un petit souci.

Premièrement c'est que j'aimerais bien que la dernière image (tout à droite) soit une autre image donc il faut différer.

Deuxième c'est bien ce problème qui m'embête bien le plus c'est que je ne parviens pas à avoir un "padding-left: 20px" du texte de lien, parce que ça fait l'effet aussi sur l'image donc on peut voir qu'il y a un surpose d'image.

Comprends-tu de ce que je viens de dire ?

**devyan** · 21/11/2008, 10h00

Salut,

1/ si tu veux une image différente pour un LI par rapport aux autres tu peux simplement ajouter un style supplémentaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.li_type1 {list-style-image:url(mon_image_type1);}
.li_type2 {list-style-image:url(mon_image_type2);}

2/ si tu regardes bien il y a eu des modifications entre la position des styles CSS dans ton HTML entre ton premier message et le dernier (je parle de ceux où tu donnes les sources)

Dans le premier tu as : <li class="xxxxxx">toto</li>
Dans le dernier tu as : <li><a class="xxxxxx" ...>toto</a></li>

Donc si tu mets le "padding-left" sur LI il y a maintenant un problème étant donné que le "background" est désormais sur A.
La solution serait donc :
-soit de placer "class" sur LI comme au début
- soit d'ajouter "padding-left" sur l'élément qui contient le "background" (qui serait dans ton cas A, enfin la définition de class affectée à A)

**{F-I}** · 24/11/2008, 19h11

Bonsoir,

J'ai essayé avec ta 1), je ne comprends pas pourquoi rien n'affiche...

Voici le webdesign en ligne afin que vous puissez mieux regarder le code source si vous avez besoin pour cerner et m'expliquer mon souci.

En espérant de vous avoir facilité les moyens pour m'aider, je vous remercie par avance

PS : Pour info, le webdesign n'est pas de moi, j'ai pris d'une application, je me sers juste pour m'entrainer avec CSS

**Bisûnûrs** · 24/11/2008, 19h57

Rien ne s'affiche parce que tu as mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#barre_navig_b li {
   list-style-image:none;
}

Si tu l'enlèves, ton image apparaitra, mais ça fera disparaitre le texte. Une puce n'est pas une image de fond. Donc si ta puce fait 111px de large, elle prendra la place de 111px et ne passera pas sous le texte.

**{F-I}** · 24/11/2008, 21h40

Donc qu'est-ce que je dois faire car je veux afficher l'image et avec le texte par dessus.

**devyan** · 24/11/2008, 22h25

Envoyé par {F-I}

Donc qu'est-ce que je dois faire car je veux afficher l'image et avec le texte par dessus.

C'est comme aux cartes (l'atout l'emporte sur le reste)

Ici l'ID l'emporte sur la CLASS

SAUF si tu précises "!important" sur la déclaration à absolument prendre en compte...

dans ton cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.li_type1 {list-style-image:url(mon_image_type1) !important;}

**Bisûnûrs** · 24/11/2008, 22h28

Envoyé par {F-I}

Donc qu'est-ce que je dois faire car je veux afficher l'image et avec le texte par dessus.

Dans ton cas, je dirai mettre l'image en background et non en puce de liste.

**{F-I}** · 25/11/2008, 05h48

Envoyé par devyan

C'est comme aux cartes (l'atout l'emporte sur le reste)

Ici l'ID l'emporte sur la CLASS

SAUF si tu précises "!important" sur la déclaration à absolument prendre en compte...

dans ton cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.li_type1 {list-style-image:url(mon_image_type1) !important;}

En supprimant la list-style: none; je vois bien l'image afficher.

Et en laissant la list-style: none;, l'image n'affiche pas mais en rajoutant !important;, les images afficheras MAISpar au dessus du texte.

Donc, je ne pense pas que ce soit une bonne solution car je ne vois pas de ce que je pourrai faire pour afficher le texte.

Envoyé par Bisûnûrs

Dans ton cas, je dirai mettre l'image en background et non en puce de liste.

J'ai déjà tenté cette solution, le souci que j'ai après c'est que :

Voici l'image en background :

Je voudrais pouvoir déplacer un peu à droite le texte du lien afin de pouvoir voir [+] lien et non les deux ensembles surposés. Mais je n'arrive pas à déplacer seulement le texte, car en utilisant padding-left, ça déplace les deux ensembles... As-tu une idée ?