Sujet Précédent Sujet Suivant

Probleme d' espace dans cellule

Fermé
ced3E Messages postés 101 Date d'inscription mardi 28 décembre 2010 Statut Membre Dernière intervention 9 janvier 2013 - Modifié par ced3E le 1/04/2012 à 04:42
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 3 avril 2012 à 04:34
Bonjour,



Je viens de crée un menu image en html mais problème j' ai un espace dans mes cellules que je n' arrive pas a supprimer.


voila en image : http://ced3e.free.fr/

Merci d' avance de votre aide je joins aussi mon code :


Html 


<center> 
<table border="1" cellpadding="0" cellspacing="0" border="0" > 
<tr> 

<td width="138" height="40" align="center"> 
<ul id="menu1"> 
  <li><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li> 
</ul> 
</td> 

<td width="220" height="40" align="center"> 
<ul id="menu2"> 
  <li><a href="#" title="Classes"></a></li> 
</ul> 
</td> 

<td width="90" height="40" align="center"> 
<ul id="menu3"> 
  <li><a href="#" title="aller à la section 1"></a></li> 
</ul> 
</td> 


<td width="90" height="40" align="center"> 
<ul id="menu4"> 
  <li><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li> 
</ul> 
</td> 

<td width="80" height="40" align="center"> 
<ul id="menu5"> 
  <li><a href="#" title="aller à la section 1"></a></li> 
</ul> 
</td> 

<td width="140" height="40" align="center"> 
<ul id="menu6"> 
  <li><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li> 
</ul> 
</td> 

<td width="142" height="40" align="center" background="themes/War3/images/menu7.png"> 

<font class="content"><form method="post" action="index.php?file=User&nuked_nude=index&op=modif_langue"> 
<div style="text-align: center;"><select name="user_langue" onchange="submit();"> 
<option value="">--------^-------</option> 
<option value="english" >english</option> 
<option value="french" >french</option> 
</select></div></form> 
</font></td> 
</tr> 
</table>  

</center>





Css : 


#menu1 li a{
margin:0;
padding: 0px 0px 0px ; 
list-style:none; 
background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu1.png) no-repeat right top;
position: relative; 
display:block; 
float:left;
height:40px;
width: 138px ; 
color:#aaa;  
font-weight:bold; 
text-align:center; 
cursor:pointer;


}

#menu1 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 138px ;
  height:40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; 
}

#menu2 li a{
margin:0; 
padding: 0px 0px 0px ;
list-style:none; 
 background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu2.png)no-repeat right top;
 position:relative; 
display:block; 
float:left;
 height:40px;
width: 220px ; 
  color:#aaa;  
 font-weight:bold; 
 text-align:center; 
 cursor:pointer;

}

#menu2 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 220px ;
  height:40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; 
  }

#menu3 li a{
margin:0;
padding: 0px 0px 0px ; 
list-style:none; 
 background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu3.png)no-repeat right top; 
 position:relative; 
display:block; 
float:left;
 height:40px;
width: 90px ; 
  color:#aaa;  
 font-weight:bold; 
 text-align:center; 
 cursor:pointer;

}

#menu3 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 90px ;
  height:40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; 
}

#menu4 li a{
margin:0; 
padding: 0px 0px 0px ;
list-style:none; 
 background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu4.png) no-repeat right top; 
 position:relative; 
display:block; 
float:left;
 height:40px;
width: 90px ; 
  color:#aaa;  
 font-weight:bold; 
 text-align:center; 
 cursor:pointer;

}

#menu4 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 90px ;
  height: 40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top;
}

#menu5 li a{
margin:0; 
padding: 0px 0px 0px ;
list-style:none; 
 background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu5.png) no-repeat right top; 
 position:relative; 
display:block; 
float:left;
 height:40px;
width: 80px ; 
  color:#aaa;  
 font-weight:bold; 
 text-align:center; 
 cursor:pointer;

}

#menu5 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 80px ;
  height:40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top;
}

#menu6 li a{
margin:0; 
padding: 0px 0px 0px ;
list-style:none; 
 background:#fff url(http://localhost/UPLOAD/themes/War3/images/menu6.png) no-repeat right top;
 position:relative; 
display:block; 
float:left;
 height: 40px;
width: 140px ;  
 font-weight:bold; 
 text-align:center; 
 cursor:pointer;

}

#menu6 li a:hover, #navigation li a:focus, #navigation li a:active {
width: 140px ;
  height:40px;
  background: url(http://www.diablo3.arnogame.com/media/upload/diablo3/barbare.jpg) no-repeat right top; 
}

3 réponses

Réponse 1 / 3
ReDLoG
1 avril 2012 à 12:37
Bonjour,
A mon avis, tu n'as pas besoin d'un tableau pour la mise en page de ton menu, utilise la balise UL (balise de type bloc) à bon escient, tu arriveras à un meilleur résultat tout en étant conforme à un Doctype xHTML Transitional, d'ailleurs je te conseille de pourvoir tes pages d'un Doctype bien défini et non pas juste de la balise HTML. Donc au final, ton fichier menu devrait ressembler à ceci : 
<ul id="menu">
	<li><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li>
	<li><a href="#" title="Classes"></a></li>
	<li><a href="#" title="aller à la section 1"></a></li>
	<li><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li>
	<li><a href="#" title="aller à la section 1"></a></li>
	<li><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li>
</ul>
<form id="Language" method="post" action="index.php?file=User&nuked_nude=index&op=modif_langue">
	<font class="content">
		<select name="user_langue" onchange="submit();">
			<option value="">Choose language...</option>
			<option value="english">English</option>
			<option value="french">Français</option>
		</select>
	</font>
</form>

Je te laisse arranger le fichier CSS pour configurer correctement la balise UL du menu ainsi que le formulaire du choix de la langue...
0
Réponse 2 / 3
ced3E Messages postés 101 Date d'inscription mardi 28 décembre 2010 Statut Membre Dernière intervention 9 janvier 2013 2
1 avril 2012 à 14:58
Merci pour ton idée j' ai oublier de dir que chaque image est différentes et que sur la dernière cellule je dois coller mon select.
Quand je n' utilise pas de tableau j' ai un décalage de mon image du bas.

Je continu sur cette piste merci encore :)

Si d' autre personne ont des idées ?
0
ReDLoG
1 avril 2012 à 15:05
Considère la balise LI comme une cellule et tu peux parfaitement paramétrer celle-ci à partir de ton fichier CSS les propriétés de background, de margin, de padding, de width, etc... : 
ul#menu li#menu1 {/* propriétés de la balise LI id=menu1 */}
ul#menu li#menu2 {/* propriétés de la balise LI id=menu2 */}
/* etc...*/
<ul id="menu">
	<li id="menu1"><a href="http://ced3e.free.fr/index.php?file=News" title=""></a></li>
	<li id="menu2"><a href="#" title="Classes"></a></li>
	<li id="menu3"><a href="#" title="aller à la section 1"></a></li>
	<li id="menu4"><a href="http://ced3e.free.fr/index.php?file=Gallery" title="aller à la sectison 1"></a></li>
	<li id="menu5"><a href="#" title="aller à la section 1"></a></li>
	<li id="menu6"><a href="http://ced3e.free.fr/index.php?file=Forum" title="Forum"></a></li>
</ul>
0
Réponse 3 / 3
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
3 avril 2012 à 04:34
Salut,

Petit conseil comme ça, je pense que tu devrais doter chacun de tes <li> d'une classe ET d'un ID. Ainsi, tu te sers de la classe pour mettre en place tous les paramètres, et tu utilises l'ID pour définir uniquement le background-image (puisque c'est le seul attribut qui diffère entre chaque <li>).

Ou même, encore plus simple :

HTML : 

<ul id="menu">
	<li id="menu1">...</li>
	<li id="menu2">...</li>
	<li id="menu3">...</li>
	<li id="menu4">...</li>
	<li id="menu5">...</li>
</ul>

CSS : 

#menu li {
	background:#000000 none no-repeat;
	color: #AAAAAA;
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	height: 40px;
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
	width: 220px;
	}
	#menu li#menu1 { background-image:url(lien/vers/image1.png); }
	#menu li#menu2 { background-image:url(lien/vers/image2.png); }
	#menu li#menu3 { background-image:url(lien/vers/image3.png); }
	#menu li#menu4 { background-image:url(lien/vers/image4.png); }
	#menu li#menu5 { background-image:url(lien/vers/image5.png); }


Et après tu définis les hover et tout le reste du tralala, tu vas bien trouver ! ;-)

Sinon, dis-nous si ReDLoG a résolu ton problème initial, de ce que je vois de ton site ç'a l'air pas mal ?

@+ !
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
suppression espace fin de cellule
Qhes -
Mike-31 -

2 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses