28173 sujets

CSS et mise en forme, CSS3

bonjour,

voilà je realise un site en spip, et jai un problème avec mon menu, sous firefox ca marche niquel mais sous ie jai un espace qui membete un peu..

un petit apercu du 'problème':
upload/3501-menu.JPG

code html du menu:

<ul>
<li class="rubrique"><a href="rubrique.php3?id_rubrique=1" >Accueil</a></li>			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=2" >Mot du principal</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=3" >Visite du collège</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=4" >Acces au collège</a></li>
			
	<li class="rubrique"><a href="rubrique.php3?id_rubrique=8" >Vie du collège</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=46" >Organisation</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=44" >Le Foyer</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=48" >Effectifs</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=23" >Documentation</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=45" >Menu du Restaurant</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=47" >La classe de 6ème</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=24" >Soutien scolaire</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=21" >Règlements</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=49" >Inscription</a></li>
						
<li class="rubrique"><a href="rubrique.php3?id_rubrique=10" >Activités pédagogiques</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=15" >Portes Ouvertes</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=41" >Itinéraires de découverte</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=42" >Ateliers éducatifs</a></li>
			
        <li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=13" >Voyages</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=14" >Sorties</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=34" >Sport</a></li>
			
<li class="rubrique"><a href="rubrique.php3?id_rubrique=5" >Calendriers</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=43" >Examens et devoirs </a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=19" >Réunions</a></li>
			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=7" >Vacances scolaires</a></li>
			
<li class="rubrique"><a href="rubrique.php3?id_rubrique=40" >Liens utiles</a></li>
			
<li class="rubrique"><a href="rubrique.php3?id_rubrique=28" >Informations légales</a></li>
			
			
<li class="rubrique"><a href="rubrique.php3?id_rubrique=25" >Espace élèves</a></li>			
	<li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=50" >Emplois du temps</a></li>
			<hr />
			
	<li class="ssrubrique"><a href="rubrique.php3?id_rubrique=29" >Espace Enseignants</a></li>
			
			<li><p>Les rubriques marquées d'une (*) sont en construction</p></li>
			<li><a href="ecrire/">Accès rédacteurs</a></li>
		</ul>


code css :
/*liens sous rubriques */
.menu li.ssrubrique a:{
text-decoration:none;
color:#CC3300;
padding-left:10px;
margin-top:0px;margin-bottom:0px;
padding-top:0px;padding-bottom:0px;
font-weight:normal;
}
.menu li.ssrubrique a:link
{
/*liens sous rubriques */
text-decoration:none;
color:#CC3300;
padding-left:10px;
margin-top:0px;margin-bottom:0px;
padding-top:0px;padding-bottom:0px;
font-weight:normal;
}
.menu li.ssrubrique a:visited
{
text-decoration:none;
color:#CC3300;
padding-left:10px;
margin-top:0px;margin-bottom:0px;
padding-top:0px;padding-bottom:0px;
font-weight:normal;
}
.menu li.ssrubrique a:hover{
text-decoration:none;
background-color:#fff401;
}

/* liens principaux de la rubrique */
.menu li.rubrique a:
{margin-top:0px;margin-bottom:0px;
padding-top:0px;padding-bottom:0px;

padding-left:0px;
font-size:14px;
border-bottom: 1px solid #FF9101;display:block;
text-decoration:none;color:black;
font-family: Arial, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
}
.menu li.rubrique a:link{
margin-top:0px;margin-bottom:0px;
padding-top:0px;padding-bottom:0px;
font-size:14px;
border-bottom: 1px solid #FF9101;display:block;
text-decoration:none;color:black;
font-family: Arial, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
}
.menu li.rubrique a:hover
{
text-decoration:none;
}
.menu li.rubrique a:visited
{
color:#000000;
}
Salut je pense qu'il faut que tu collles les 2 li
<li class="rubrique"><a href="rubrique.php3?id_rubrique=1" >Accueil</a></li><li class="ssrubrique"><a class="ssrubrique" href="rubrique.php3?id_rubrique=2" >Mot du principal</a></li>
Bonsoir,

C'est effectivement assez étonnant, mais la solution proposée par dmc permet de résoudre le problème.

Je souhaiterais quant à moi intervenir sur la structure et l'aspect sémantique de ce menu. En effet, il serait plus adroit de définir les liens de second niveau dans une seconde liste <ul>. Ainsi, cela éviterait d'avoir de multiples classes sur chacun des items et sur chacun des liens.

Voici un exemple sur le début du menu pour illustrer mes propos :


<ul id="menu">
<li><a href="rubrique.php3?id_rubrique=1">Accueil</a></li>
	<ul class="sousmenu">
	<li><a href="rubrique.php3?id_rubrique=2">Mot du principal</a></li>
	<li><a href="rubrique.php3?id_rubrique=3">Visite du collège</a></li>
	<li><a href="rubrique.php3?id_rubrique=4" >Acces au collège</a></li>
	</ul>
<li><a href="rubrique.php3?id_rubrique=8">Vie du collège</a></li>

...

</ul>


Le menu étant unique dans la page, on lui attribue un id #menu permettant de l'identifier clairement. Quant aux listes de niveau 2, on leur attribue une classe, dans l'exemple .sousmenu. En effet, le menu étant composé de plusieurs sous-menus, leur usage sera multiple. Vous pouvez consulter à ce sujet la différence entre un id et une classe.

Ceci permettrait par exemple de définir les propriétés des liens des rubriques et des sous-rubriques respectivement de la façon suivante :

ul#menu li { /* Propriétés de tous les items confondus */ } 
ul#menu li a { /* Propriétés des liens des rubriques */ }
ul#menu ul.sousmenu li a { /* Propriétés des liens des sous-rubriques */ }
...


Il est évident que cette nouvelle structure du menu, exploitant les notions d'héritage en CSS, permettrait de définir une sémantique plus adaptée mais aussi d'alléger de façon significative le code de la page.

Bonne continuation. Smiley cligne
Modifié par Romain H. (17 Mar 2006 - 22:06)
Bonjour,

C'est un bug classique d'IE, souvent appelé "white space bug".

Outre la solution du lier les <li> dans le code comme l'indique dmc, tu peux donner du layout à l'élément qui pose problème, comme une hauteur.
par exemple :
.menu li.rubrique {_height: 1%; zoom: 1;}

_height:1%; va regler le problème pour IE 6 et inférieurs, et zoom:1 va donner du layout à l'élément pour IE7 (zoom n'est pas supporté par IE5, seulement à partir de 5.5)
Modifié par Alan (18 Mar 2006 - 04:12)