Descendre de quelque px le texte du menu gauche

**didouchy** · 18/02/2011, 10h18

Bonjour,

J'ai déjà poster il y a quelque mois ( ou semaines ) sur ce forum pour le modification d'une nouvelle interface graphique de mon site et j'ai encore quelques petit problème de réglage au niveau du menu.

Sur le lien suivant vous pourrait y voir que le menu n'est pas à la même hauteur que le contenu du centre ( celui avec le font blanc ) et que les lien du menu son légèrement décaler vers le haut et je n'arrive pas à mettre la balise qui convient.

J'ai réussi à localisé la balise

Code :

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

list-style:none

que j'ai modifier en mettant

Code :

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

list-style-position:inside

le problème est qu'il s'affiche parfaitement bien au milleur de l'image MAIS il y a un point noir sur la gauche. j'ai aussi essayer de modifier le padding et le margin mais sans succès...

Je fait donc appel aux personnes compétentes pour m'aider sur ce point

Lien vers la page du kit graphique: http://jeux-en-reseaux.eu/teste

CODE 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
body, html    {background:url(images/fontfont.jpg);margin:0;padding:0;font-family:Arial, sans-serif;text-align:center;color:#FFF;font-weight:bold; background-attachment: fixed;font-size:13px}        
#conteneur    {margin: 0 auto 0;position:relative;width:1024px;}	
#header       {text-align:left;height:234px; background:url(images/header.png);} 	  
.bg        {position:absolute;bottom:0;}
#bgcentre  {width:1022px;background-color:#171717;top:267px;bottom:34px; border:1px solid #fff; border-width:0px 1px 0px 1px;} 
#content, #left, #header, #footer, #centre, #centrer_menu {position:relative; z-index:2;} 	
#pied      {width:1024px;height:34px ;position:relative;margin: 0 auto 0 ; background:url(images/pied.png);clear: both;}
#left img, #right img {margin:3px 0 0 0;} 
 
/*info header */
.infoheader {background:url(images/infoheader.png);width:1024px;height:33px;padding: 8px 0 0 0;text-align:center;font-weight:normal;}
 
/*Menu*/	 
.mh	        {width:150px;height:34px;background:url(images/menu_haut.png) no-repeat;padding:10px 0 0 0;margin:15px 0 10px 0;font-size:14px;font-weight:bold}
.mf  	    {width:150px;background:url(images/menu_ligne.png);padding:0;margin:-20px 0 0 0;font-size:auto;font-weight:normal;color:#000}
.mb  	    {width:150px;height:7px;background:url(images/menu_bas.png) no-repeat;padding:0;margin:10px automargin:-20px 0 0 0;}	
.mf a 	    {color:#000;font-size:11px;font-weight:normal}  
.mf a:hover {color:#000;font-size:11px;font-weight:normal}
ul             {width:150px;padding:0;margin:0;list-style:none;}   
ul li          {padding:3px 0 0 0;} 
.mf ul li a        {width:150px;display: block;outline:none;height:24px;padding:0px 0px 0 0px;margin:0 0 0 0;color:#c59129;font-size:11px;text-decoration: none;font-weight:bold;background:url(images/menu_no.png)}	
.mf ul li a:hover  {color: #232323;background:url(images/menu_hover.png)}
 
#centrer_menu		{margin: 0 auto;padding: 0;text-align:center;width:850px; height:30px}						
table.centre {margin:0px 0px 0px 25px;padding:0; height:30px;border:0;text-align:center}	   
Span		        {color:#FF9933;font-size:15px;font-weight:bold;}	
img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr{border:0;margin:0;padding:0} 
a                   {color:#2e81cc;text-decoration:none;outline:none;font:bold 11px tahoma}	 
a:hover             {color:#fdc638}		
 
.titree		              {padding:5px 0 0 0;width:150px;font:bold italic 13px tahoma;text-decoration: none;list-style: none;background:url(images/hautmenu.png);height:22px;text-align:center;color:#fff}  
 
.footer	            {position:absolute;color:#fff;padding:0;width:480px;height:25px;}
.footer a           {margin: 0;padding: 0;color:#fff;font:  10px/12px Verdana;}
.footer a:hover     {margin: 0;padding: 0;color:#fff;text-decoration: underline;} 
 
.jeuxc {text-align: center;margin:-54px 0px 0px 0px;}
.jeuxd {text-align: right;margin:-54px 0px 0px 0px;}
 
#left {width: 150px;float: left;color:#fff;padding:10px}
#content {margin-left: 160px;margin-right: 160px;color:#205265; line-height:15pt;text-align:left}
 
.contenu_haute   {height:30px;width:850px;margin:0; background:url(images/contenu_haute.jpg) no-repeat bottom;}
.contenu_haut   {height:30px;width:850px;margin:0; background:url(images/contenu_haut.png) no-repeat bottom;}
 
.info_h       {background: url(images/info_h.png) no-repeat;width:263px;height:30px;font-size:12px;font-weight:bold;color:#191919;padding:10px 0 0 0}
 
.contenu_fond   {width:810px;margin:0; background:url(images/contenu_fond.png);padding:0 20px 0 20px;margin:0;color:#000000;text-align:left;}
.contenu_bas    {height:20px;width:850px;margin:0; background:url(images/contenu_bas.png);}		   
 
.copyright           {color:#949494;font-size:10px;font-weight:bold;padding:10px 0 0 0}   
.copyright a         {color:#949494;font-size:10px;font-weight:bold;text-decoration: none;outline:none}
.copyright a:hover   {color: #2e81cc;} 
/*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/
 
 
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
 
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
 
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
 
.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

CODE HTML:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Bient&ocirc;t disponible</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />  
  <meta http-equiv="content-language" content="fr" /> 
  <link href="style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="coin-slider.min.js"></script>
  <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
</head>
 
<body>
 
<br />
<div id="conteneur"><!-- Global -->
<div id="header"></div><!-- Header -->
<div class="infoheader"><!-- Infoheader -->
<img style="border: 0px solid ; width: 16px; height: 16px;" alt="Informations" src="images/home.png" />
Bienvenue sur <b>Jeux en Reseaux</b> !
Nous sommes le <b><script type="text/javascript" src="http://services.service-webmaster.fr/afficheurs/index.php?type=date&id_membre=28112&model=dmy"></script></b>
il est <b><script type="text/javascript" src="http://services.service-webmaster.fr/afficheurs/index.php?type=heure&id_membre=28112&model=his"></script></b>.
Il y a <b><script type="text/javascript" src="http://services.supportduweb.com/cpton/914.js"></script>(s)</b>.
Il y a eu <b><script src="http://webdezign.tutoriaux.free.fr/services/compteur_page.php?client=32128&Af=6"></script></b> visites au total.
</div>
 
<div id="left"><!-- Colonne GAUCHE -->
 
<div class="mh">Navigation</div>
<div class="mf"><!-- Menu -->
<ul>
  <li><a href="http://jeux-en-reseaux.eu/" >Accueil</a></li>
  <li><a href="http://forum.jeux-en-reseaux.eu/" >Forum</a></li>
  <li><a href="http://jeux-en-reseaux.eu/team/index.html" >Team</a></li>
  <li><a href="http://annuaire.jeux-en-reseaux.eu/" >Annuaire</a></li>
  <li><a href="http://jeux-en-reseaux.eu/partenariat/partenariat.html" >Nous aider</a></li>
  <li><a href="http://jeux-en-reseaux.eu/contact/contact.html" >Nous contacter</a></li>
</ul>
</div>
<div class="mb"></div>
 
<div class="mh">Les Jeux</div>
<div class="mf"><!-- Menu -->
<ul>
  <li><a href="http://jeux-en-reseaux.eu/fps/AVA.html" >Alliance of Valiant Arms</a></li>
  <li><a href="http://jeux-en-reseaux.eu/fps/Blackshot.html" >Blackshot</a></li>
  <li><a href="http://jeux-en-reseaux.eu/fps/CAE.html" >Combat Arms Europe</a></li>
  <li><a href="http://jeux-en-reseaux.eu/fps/level-r.html" >Level R</a></li>
  <li><a href="http://jeux-en-reseaux.eu/fps/nfsw.html" >Need For Speed World</a></li>
</ul>
</div>
<div class="mb"></div>
 
<div class="mh">Nos Serveurs</div>
<div class="mf"><!-- Menu -->
<ul>
     <li><a href="http://jeux-en-reseaux.eu/serveur/blackops.html" title="">Black ops</a></li>
     <li><a href="http://jeux-en-reseaux.eu/teamspeak/index.html" title="">TeamSpeak 3</a></li>
</ul>
</div>
<div class="mb"></div>
 
<div class="mh">A propos</div>
<div class="mf"><!-- Menu -->
<ul>
	 <li><a href="http://jeux-en-reseaux.eu/teste/faq.html" title="">FAQ</a></li>
     <li><a href="http://jeux-en-reseaux.eu/teste/equipe.html" title="">L'équipe</a></li>
	 <li><a href="http://jeux-en-reseaux.eu/teste/information.html" title="">Information</a></li>
</ul>
</div>
<div class="mb"></div>
 
<div class="mh">Partenaire</div>
<div style="text-align: center;" class="mf">
  <a href="...."><img style="border: 0px solid ; width: 140px; height: 36px;" alt="Afficher votre site !" src="images/votresiteici.png" /></a>
  <a href="http://www.easy-hebergement.fr/"><img style="border: 0px solid ; width: 140px; height: 36px;" alt="Easy H&eacute;bergement" src="images/easy-heberg.png" /></a>
  <a href="http://www.cafrance.net/"><img style="border: 0px solid ; width: 140px; height: 47px;" alt="Combat Arms France !" src="images/caf.jpg" /></a>
</div>
<div class="mb"></div>
 
</div><!-- Fin Colonne GAUCHE -->
 
<div id="content"><!-- Début centre -->
<center>
<div class="contenu_haut"></div>
<div class="contenu_fond"><!-- Texte -->
<div id='coin-slider'>
	<a href="img01_url" target="_blank">
		<img src='img_slider/img01.jpg' >
		<span>
			Description for img01
		</span>
	</a>
	<a href="imgN_url">
		<img src='img_slider/img02.jpg' >
		<span>
			Nouveau site à l'horizon !
		</span>
	</a>
</div>
<h2>Graphisque de teste</h2>
</div>
</center>
<div class="contenu_bas"></div><!-- Fin Texte -->
 
</div><!-- Fin centre -->
 
<!-- Colonne fictive -->
<div id="bgleft" class="bg left"></div>
<div id="bgright" class="bg right"></div>
<div id="bgcentre" class="bg centre"></div>
<!-- Fin Colonne fictive -->
 
<div id="pied"><!-- Début Pied -->
<div class="copyright">&copy;<a href="http://www.jeux-en-reseaux.eu">
Jeux-en-reseaux.eu</a> 2010 - 2011 | Design par<a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits gratuits"> Kitgraphiquegratuit.org</a> |
Modifier par <a href="http://www.jeux-en-reseaux.eu" onclick="window.open(this.href); return false;" title="jeux en reseaux">Jeux En Reseaux</a></div>
<br /><!-- Fin Pied -->
<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 565, height: 200, navigation: true, delay: 5000 });
	});
</script>
<!-- Fin Global -->
</body>
</html>

Merci pour votre aide

**ornitho13** · 18/02/2011, 11h53

Salut,

pour le décalage de ton bloc à gauche (menu + login) vers le haut, ajoutes ceci:

Code css :

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

1
2
3
4
5
6
7
8
#left {
    width: 150px;
    float: left;
    color: white;
    padding: 0px 10px 10px;
    margin-top: -2px;
}

Pour aligner verticalement le texte dans tes menu, tu dois jouer avec le padding et la hauteur de tes liens:

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
.mf ul li a {
   width: 150px;
   display: block;
   outline: none;
   height: 19px;
   padding: 5px 0px 0 0px;
   margin: 0 0 0 0;
   color: #C59129;
   font-size: 11px;
   text-decoration: none;
   font-weight: bold;
   background: url(images/menu_no.png);
}

Concernant le point noir, je ne le vois pas. Peux tu mettre un imprim ecran de ce phénomène et dire sous quel navigateur tu rencontres ce problème?

merci

**didouchy** · 18/02/2011, 12h07

L'image suivante est celle quand je met le code suivant:

Code :

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

ul             {width:150px;padding:0;margin:0;list-style-position:inside;}

http://www.hiboox.fr/go/images-100/0...3c23d.jpg.html

Et celle image quand je met " outside " au lieu de inside.

http://www.hiboox.fr/go/images-100/3...1b9fd.jpg.html

J'ai vue sa sur un article de forum mais je n'arrive pas a remettre la main dessus pour que vous puissiez voir.

En tout cas merci beaucoup je vais essayer le code toute suite

**didouchy** · 18/02/2011, 13h46

C'est niquel sa fonctionne pour le menu

Aurait-vous une solution à tout le menu gauche ?

Car il n'est pas aligné à la même hauteur que le centre :s j'ai pas trouver la balise qui correspond a ça :s