28172 sujets

CSS et mise en forme, CSS3

Problème espace avant menu déroulant

Bonjour,

j'ai un petit problème d'espace avant une rubrique de mon menu.
Cette rubrique est déroulante, voici les différents codes :

HTML : 

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td ><img src="images/design/accueil.png" width="71" height="16" alt="Accueil" /></td>
    
    
    <td ><img src="images/design/presentation.png" width="106" height="16" alt="Présentation" /></td>
    
    
    <td><div id=monmenu>
  <ul class=niveau1>
<li><img src="images/design/collections.png" width="104" height="16" alt="Collections" />
 <ul class=niveau2 style="left: 0px; top: 22px">
    <li class=plus><a href="collection-cupid-angel.php">Par types</a></li>
    <li><a href="collection-cupid-angel-themes-php">Par thèmes</a></li></ul></li></ul>
</div>
</td>


    <td ><img src="images/design/catalogue.png" width="96" height="16" alt="Catalogue" /></td>
    
    
    <td ><img src="images/design/contact.png" width="80" height="16" alt="Contact" /></td>
  </tr>
</table>


CSS : 

#monmenu {
	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 104px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; color:#FFF; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; background-color:#000000;
}
#monmenu LI:hover {
	BACKGROUND-COLOR: #363636
}
#monmenu LI.sfhover {
	BACKGROUND-COLOR: #333333
}
#monmenu LI A {
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.plus {
	BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}


Et voici ce que ça me donne :
http://k.min.us/ikT29K.jpg

J'ai cet espace qui me dérange beaucoup, comment puis-je faire pour le supprimer svp ?

Merci d'avance pour votre aide :o)
Salut Masure,

Pourquoi mettre tout ça dans un tableau ? Pourquoi pas plus simplement :


<ul>
	<li><img src="images/design/accueil.png" width="71" height="16" alt="Accueil" /></li> 
	<li><img src="images/design/presentation.png" width="106" height="16" alt="Présentation" /></li> 
	<ul class="niveau1"> 
		<li><img src="images/design/collections.png" width="104" height="16" alt="Collections" /> 
			<ul class=niveau2 style="left: 0px; top: 22px"> 
				<li class=plus><a href="collection-cupid-angel.php">Par types</a></li> 
				<li><a href="collection-cupid-angel-themes-php">Par thèmes</a></li></ul></li>
			</ul>
		</li>
	</ul>
    <li><img src="images/design/catalogue.png" width="96" height="16" alt="Catalogue" /></li> 
    <li><img src="images/design/contact.png" width="80" height="16" alt="Contact" /></li>
</ul>


Ensuite tu fixes une largeur fixe à tes li et le tour est joué !
Sujet clos
Aller à