[Résolu] Menu dropdown css3 - Décalage padding, border

Question

raiden

5 Jun 2011 à 12:40

Bonjour à tous! D'ailleurs comment appelle t-on un membre d'alsacréations, un alsacien?
J'ai besoin d'un petit coup de pouce si vous avez deux minutes à perdre.

Dernièrement j'ai récupérer un script de menu en css3 pour m'y mettre sérieusement, j'étais rester bloqué en css2 depuis trop longtemps. Je l'ai un peu modifié et je souhaiterais que celui-ci prenne toute la largeur de la page. Cependant il en prend un tout petit peu plus que 100%, les propriétés border et padding une fois enlevés me donne bien un menu à 100% mais j'aimerais si possible les garder (surtout le border en fait).

Je pensais que la balise padding nous procurait des marges intérieures pas extérieures, mon margin est à 0 pourtant, j'avoue que j'ai du mal à saisir. Sinon si je met une taille fixe dans un div avec margin: 0 auto ça va mais je préférerais un 100%.

Autre chose sinon j'ai tenter de jouer avec z-index pour que le menu dropdown soit derrière l'ombre de la barre principale sans succès z-index n'a aucun effet.

Voici le code css:


body { margin: 0; padding: 0; background: #fff url('img/bg.png') repeat-x; }

.nav_left { float: left; }
.nav_right { float: right; }
.dropdown_left { left: 0; }
.dropdown_right { right: 0; }

#menu {
font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;	
width: 100%;
height: 28px;	
padding: 5px 0 0 5px;	
margin: 0;
line-height: 100%;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
border: 1px solid #ddd;
border-radius: 0 0 1em 1em;
-webkit-border-radius: 0 0 1em 1em;
-moz-border-radius: 0 0 1em 1em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444&#8242;, endColorstr=’#222222’);
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
background: -moz-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(#444444,#222222);
display: inline-block;
}

#menu li {
list-style: none;
margin: 0;
padding: 0 5px 8px;
position: relative;
}

#menu a {
text-decoration: none;	
font-weight: bold;
color: #e7e5e5;
padding: 3px 15px;
display: block;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
-webkit-transition: color 0.2s linear; 
-moz-transition: color 0.2s linear; 
-o-transition: color 0.2s linear;
}

#menu li:hover > a {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#8242;);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
background: -moz-linear-gradient(top, #eee, #aaa);
background-image: -o-linear-gradient(#eee,#aaa);
color: #444;
border-top: solid 1px #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);	
}

#menu ul li:hover a, #menu li:hover li a {
background: none;
border: none;
color: #666;
padding: 8px 15px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

#menu ul a:hover {
background: #cf2828 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’);
background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important;
background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
background-image: -o-linear-gradient(#cf2828,#b01e1e);
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
transition: color 0.2s linear;
-webkit-transition: color 0.2s linear; 
-moz-transition: color 0.2s linear; 
-o-transition: color 0.2s linear; 
}

#menu ul {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
background: -moz-linear-gradient(top, #fff, #ccc);
background-image: -o-linear-gradient(#fff,#ccc);
display: none;
margin: 0;
padding: 0;
min-width: 148px;
position: absolute;
top: 28px;
border: solid 1px #aaa;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

#menu li:hover > ul {
display: block;
}

#menu ul li {
margin: 0;
padding: 0;
}

#menu ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}

#menu ul li:last-child > a {
border-radius: 0 0 9px 9px;
-webkit-border-radius: 0 0 9px 9px;
-moz-border-radius: 0 0 9px 9px;
}

Et le HTML:

<!DOCTYPE html>
 

<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="menu.css" type="text/css"/>



<title>Menu</title>



</head>



<body>

<ul id="menu">
	<li class="nav_left"><a href="#">Home</a></li>
	
	<li class="nav_left"><a href="#">Social</a>
		<ul class="dropdown_left">
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
		</ul>		
	</li>
	
	<li class="nav_left"><a href="#">Photos</a>
		<ul class="dropdown_left">
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>			
      </ul>
   </li>
   
   <li class="nav_left"><a href="#">Games</a>
		<ul class="dropdown_left">
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>			
      </ul>
   </li>
   
   <li class="nav_left"><a href="#">Plugins</a>
		<ul class="dropdown_left">
		   <li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>			
      </ul>
   </li>
 
   <li class="nav_right"><a href="#">Settings</a>
		<ul class="dropdown_right">
		   <li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulgas</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>		
      </ul>
   </li>	 
   
   <li class="nav_right"><a href="#">Help</a>
		<ul class="dropdown_left">
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>
			<li><a href="#">boulgiboulga</a></li>			
      </ul>
   </li>      	   	
</ul>



</body>



</html>

Merci d'avance à ceux qui prenne le temps de regarder. Smiley cligne

EDIT: y'a pas moyen de mettre un overflow sur l'affichage du code dans le forum?
Modifié par raiden (05 Jun 2011 - 20:08)

fvsch

5 Jun 2011 à 18:23

Bonsoir,

raiden a écrit :
Dernièrement j'ai récupérer un script de menu en css3

CSS3 ce sont des feuilles de styles, pas des scripts. Un «script» ça désigne généralement un script JavaScript. Attention à ne pas tout confondre. Smiley cligne

raiden a écrit :
j'étais rester bloqué en css2 depuis trop longtemps

Déjà si tu utilises CSS 2.1 à fond, c'est excellent. Tu maitrises les sélecteurs CSS 2.1, et tu utilises régulièrement display:table et display:inline-block?

raiden a écrit :
les propriétés border et padding une fois enlevés me donne bien un menu à 100% mais j'aimerais si possible les garder (surtout le border en fait).

Il faut voir d'une part si tu as vraiment besoin de déclarer un width:100%. En width:auto (valeur par défaut), un élément en display:block tel qu'un DIV ou un UL va prendre toute la largeur disponible dans le conteur, et les éventuels marges, bordures et padding seront retranchées plutôt qu'ajoutées. Est-ce que ça ne suffit pas à régler ton problème?
Si ça ne suffit pas, tu peux soit passer par un conteneur en display:block;width:auto auquel tu appliqueras bordures et padding (et image/couleur de fond si nécessaire), soit utiliser la propriété CSS3 box-sizing (avec pour certains navigateurs un préfixe: -moz-box-sizing, -webkit-box-sizing) pour basculer vers un modèle de boite où les bordures et padding sont retranchés à la largeur déclarée.

raiden a écrit :
la balise padding

La propriété padding?

Pour rappel, on parle d'éléments, de balises et d'attributs en HTML, et de propriétés, déclarations et sélecteurs en CSS.
- Propriété CSS: padding
- Déclaration CSS: padding:20px;
- Élément HTML: <p>Un paragraphe</p>
- Balise HTML: <p>.
- etc.

raiden a écrit :
Autre chose sinon j'ai tenter de jouer avec z-index pour que le menu dropdown soit derrière l'ombre de la barre principale sans succès z-index n'a aucun effet.

Quand je disais que maitriser CSS 2.1 c'est pas mal non plus, en voici un exemple. Smiley cligne

On pourra lire: Comment fonctionne la propriété CSS z-index ?

Bonne continuation.
Modifié par fvsch (05 Jun 2011 - 18:31)

raiden

5 Jun 2011 à 20:06

fvsch a écrit :
Bonsoir,

CSS3 ce sont des feuilles de styles, pas des scripts. Un «script» ça désigne généralement un script JavaScript. Attention à ne pas tout confondre.

J'ai la mauvaise habitude d'appeler tout ce qui n'est pas bas niveau script. Smiley confused

fvsch a écrit :

Il faut voir d'une part si tu as vraiment besoin de déclarer un width:100%. En width:auto (valeur par défaut), un élément en display:block tel qu'un DIV ou un UL va prendre toute la largeur disponible dans le conteur, et les éventuels marges, bordures et padding seront retranchées plutôt qu'ajoutées. Est-ce que ça ne suffit pas à régler ton problème?
Si ça ne suffit pas, tu peux soit passer par un conteneur en display:block;width:auto auquel tu appliqueras bordures et padding (et image/couleur de fond si nécessaire), soit utiliser la propriété CSS3 box-sizing (avec pour certains navigateurs un préfixe: -moz-box-sizing, -webkit-box-sizing) pour basculer vers un modèle de boite où les bordures et padding sont retranchés à la largeur déclarée.

Les width: auto ne donnaient aucun résultat, finalement j'ai utilisé la méthode classique un div + margin-right tout simple contenant le menu. Je sais pas pourquoi je m'écharnais à corriger ça en restant exclusivement sur le #menu, faut pas chercher parfois. Sinon tu m'as fait découvrir la propriété box-sizing!

En tout cas merci pour tes réponses. Smiley cligne

Modifié par raiden (05 Jun 2011 - 20:09)

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Menu dropdown css3 - Décalage padding, border