28172 sujets

CSS et mise en forme, CSS3

[Résolu] Onglet actif et padding

Bonjour,
Je me lance dans un menu horizontal avec des onglets "bords arrondis" et "ombrage".
Je souhaiterais qu'au survol d'un onglet, un padding-top décale cet onglet (et le texte inclus) vers le bas…

Le code css utilisé: 
* { margin: 0; padding: 0; border:none; }
#menu {
	float: right;
	font-size: 1em;
}
#menu li {
	display: inline;
	padding: 0 .5em;
}
#menu li a {
	padding: 5px 15px; 
	margin: 0;
	background: #1dbbea;
	color: #fff; 
	border: 1px solid #89a;
	text-decoration: none;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	-webkit-border-bottom-left-radius: 10px; /* pour Chrome */
	-webkit-border-bottom-right-radius: 10px; /* pour Chrome */
	-moz-box-shadow: 0px 1px 8px #555;
    -webkit-box-shadow: 0px 1px 8px #555;
    box-shadow: 1px 0px 8px #555;
}
#menu li a:hover { margin-top: 2em; color:#009; }


Ensuite, le code de la page

<body>
<div id="menu">
<ul>
<li><a href="#" title="Voir les travaux de la rubrique Cdrom">Cdrom</a></li>
<li><a href="?#" title="Voir les travaux de la rubrique Print">Print</a></li>
</ul>
</div>
</body>


Même, une page en ligne: http://www.fabricecaboche.net/test.php

Quelqu'un aurait une idée de la démarche à suivre? Le margin-top: 2em sur #menu li a:hover ne fonctionne pas…
Modifié par speedlab (20 Dec 2009 - 19:29)
Modérateur
Hello,

J'ai vite corrigé ton bug et je n'ai pas vraiment lu le reste de ton code :

/* sous entendu que 
body{
	margin:0;
	padding:0;
}
ou 
#block_conteneur{
	margin:0;
	padding:0;
}
*/
#menu ul{
	margin:0;
	padding:0;
}
#menu li {
	font-size: 1em; 
	list-style-type:none;
	float: right;  
	padding: 0 .5em; 
} 
#menu li a {
	display:block;
	padding: 5px 15px;  
	margin: 0; 
	background-color: #1dbbea; 
	color: #fff;  
	border: 1px solid #89a; 
	text-decoration: none; 
	-moz-border-radius: 0 0 10px 10px; 
	-webkit-border-radius: 0 0 10px 10px; 
	border-radius: 0 0 10px 10px; 
	-webkit-border-bottom-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-bottom-right-radius: 10px; /* pour Chrome */ 
	-moz-box-shadow: 0px 1px 8px #555; 
	-webkit-box-shadow: 0px 1px 8px #555; 
	box-shadow: 1px 0px 8px #555; 
} 
#menu li a:hover {
	padding-top: 2em;
	color:#009;
}


Bonne soirée Smiley smile
Modifié par Nolem (19 Dec 2009 - 20:34)
Bonsoir Nolem,
Tu m'ôtes une poutre du pied Smiley cligne
Je crois que j'ai trop cherché et que je n'arrivais plus à voir le code correctement…

Encore un grand merci! Les vacances commencent bien Smiley ravi
Sujet clos
Aller à