Alignement de liste

wd_newbie · 01/06/2011, 11h24

Bonjour,

je suis en train d'essayer de créer un nouveau template Joomla a partir de zéro.

Je suis bloqué sur le positionnement de mes images de menu. Pourtant a ce niveau , le code et le css sont très simple ... mais ça ne marche pas vraiment comme je veux ...

Code :

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
<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="fr-fr" lang="fr-fr" dir="ltr" >
<head>
	<link rel="stylesheet" href="/patchmania/templates/patchmania2/css/position.css" type="text/css" media="screen,projection" />
</head>
<body>
<div ID='conteneur'>		
<div ID="Menu">			
<ul class="menu-nav">
	<li id="current" class="active item55">
		<a href="/patchmania/index.php?option=com_content&amp;view=frontpage&amp;Itemid=55">
			<img src="/patchmania/images/stories/accueil_off.jpg" alt="accuiel" />
		</a>
	</li>
	<li class="item56">
		<a href="/patchmania/index.php?option=com_contact&amp;view=category&amp;catid=0&amp;Itemid=56">
			<img src="/patchmania/images/stories/boutique_off.jpg" alt="notreboutique" />
		</a>
 
	</li>
	<li class="item57">
		<a href="/patchmania/index.php?option=com_content&amp;view=article&amp;id=23&amp;Itemid=57">
			<img src="/patchmania/images/stories/noscours_off.jpg" alt="noscours" />
		</a>
	</li>
	<li class="item58">
		<a href="/patchmania/index.php?option=com_content&amp;view=article&amp;id=26&amp;Itemid=58">
			<img src="/patchmania/images/stories/noscreation_off.jpg" alt="noscreations" />
 
		</a>
	</li>
	<li class="item59">
		<a href="/patchmania/index.php?option=com_poll&amp;view=poll&amp;id=14&amp;Itemid=59">
			<img src="/patchmania/images/stories/actualite_off.jpg" alt="actualites" />
		</a>
	</li>
	<li class="item60">
		<a href="/patchmania/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=60">
 
			<img src="/patchmania/images/stories/contact_off.jpg" alt="contact" />
		</a>
	</li>
</ul>
</div>
 
</div>
</body>
</html>

et mon css :

Code :

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
/* header Top-nav */
 #Menu ul{
 	width:800px;
	border:1px solid green;
	margin-left:0px; //retire les marges externes en haut, à droite, en bas et à gauche
	padding: 0px; //retire les marges internes en haut, à droite, en bas et à gauche
 
 }
 
 #Menu li
 {
	display: inline;  
	border:1px solid red;
	margin-left: 0px; //retire les marges externes en haut, à droite, en bas et à gauche
	padding: 2px 2px 2px 30px; //place des marges interne dans l ordre suivant : haut, droite, bas, gauche
 }
 
  #Menu li a{
 
  	text-decoration:none;
  }
 
 #Menu ul img
 {
 
 	border:0px;
 }

Le résulat sous IE est assez coorect ( selon ce que je veux en faire ), le menu <UL> est plaqué à gauche et les <LI> (bordures rouges) ont bien la hauteur des images :

Par contre sous Firefox et Chrome , il reste toujours un espace a gauche entre le <UL> (en vert)et la premiere <LI> (??) et la hauteur de mes <LI> (en rouge) ne fait pas la hauteur des images , et je voudrais mettre une boder-right pour séparer les menus. Sous FF cette bordure ne fait pas la hauteur complète de l'image

Si vous avez une idée ? j'y arrive plus ... il me semble avoir tout essayé , sauf la bonne solution

.

Merci d'avance et bonne journée

Olivier

NoSmoking · 01/06/2011, 12h18

Bonjour,
une seule remarque sur la façon de mettre des commentaires dans la partie style, on utilise /* en début et */ en fin de commentaire

Code :

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

1
2
3
4
5
6
#Menu ul{
  width:800px;
  border:1px solid green;
  margin-left:0px; /* retire les marges externes en haut, à droite, en bas et à gauche */
  padding: 0px;    /* retire les marges internes en haut, à droite, en bas et à gauche */
 }

matlow · 02/06/2011, 21h14

http://www.w3.org/TR/CSS21/box.html

02/06/2011, 21h14	#3
matlow Membre régulier Développeur Web Inscription : octobre 2009 Messages : 72 Détails du profil Informations personnelles : Sexe : Localisation : Vietnam Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : octobre 2009 Messages : 72 Points : 99 Points : 99	http://www.w3.org/TR/CSS21/box.html
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email