Décalage de menu en hover

Fermé

pinky-mango - 13 mars 2014 à 02:23
pinky-mango - 16 mars 2014 à 02:46

Bonjour,
je suis entrain de créer un menu simple en html/css.
Au survol du menu, je change le font-weight de la police et ca fais décaler de quelques pixels certain texte.

voilà mon code (le css est directement dans la page)


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> 

<!---feuille de style-->
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126 
License: none (public domain) 
*/  
  
html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baselinebaseline;  
}  
/* HTML5 display-role reset for older browsers */  
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section {  
display: block;  
}  
body {  
line-height: 1;  
}  
ol, ul {  
list-style: none;  
}  
blockquote, q {  
quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
content: '';  
content: none;  
}  
table {  
border-collapse: collapse;  
border-spacing: 0;  
}  

body {
	background-color: #09C;
}
nav {
	background-color: #fff;
	height: 60px;
	position: relative;
	-webkit-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2);
	box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2);
}
nav ul {
	position:absolute;
	top:20px;
	left:200px;
}
nav li {
	display:inline;	
}
nav li a  {
	color: #000;
	text-decoration:none;
	padding: 16px 20px;
	font-family: 'Lato', Arial;
	font-weight: 300;
	width:200px;
}
nav li a#home:hover {
	border-top: 3px solid #43c6c8;
}
nav li a#packages:hover {
	border-top: 3px solid #436bc8;
}
nav li a#portfolio:hover {
	border-top: 3px solid #92de27;
}
nav li a#ressources:hover {
	border-top: 3px solid #ffce0c;
}
nav li a#tutoriels:hover {
	border-top: 3px solid #ec583b;
}
nav li a#website:hover {
	border-top: 3px solid #e60c91;
}

nav li a:hover {
font-weight: 400;
weight:200px;
}
nav #logo img {
	width:90px;
	height:auto;
	position:absolute;
	top:5px;
	left:30px;
}
</style>

</head>

<body>

<nav>
<div id="logo"><img src="logo.png" alt="logo"></div>
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="packages">Packages</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="ressources">Ressources</a></li>
<li><a href="#" id="tutoriels">Tutoriels</a></li>
<li><a href="#" id="website">Website</a></li>
</ul>
</nav>
</body>
</html>

A voir également:

Décalage de menu en hover
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide
Menu contextuel windows 11 - Guide

2 réponses

Réponse 1 / 2

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
13 mars 2014 à 13:09

Salut

déjà il y a une erreur

nav li a:hover {
font-weight: 400;
weight:200px;
}

tu n'aurais pas voulu dire width ?

ensuite c'est normal que ca se décale car tu augmente le bold sur le hover

tu peux essayer de réduire la distance entre les caractères avec font-stretch (sur le hover) mais c'est pas sur que ca s'affiche pareil dans tous les navigateurs.

sinon tu as cette solution (ici ce qui est changé)

nav ul {
position:absolute;
top:10px;
left:200px;
}

nav li a {
color: #000;
display:inline-block;
text-decoration:none;
padding: 10px 20px;
font-family: 'Lato', Arial;
font-weight: 300;
width:100px;
border-top: 3px solid #fff;
text-align:center;
}

nav li a:hover {
font-weight: 400;
}

voila ce n'est pas exactement pareil mais ca ne se décale plus

Réponse 2 / 2

pinky-mango
16 mars 2014 à 02:46

Merci beaucoup :)

Discussions similaires

les entrées et les sortées

Décalage son et image sur YouTube ?

mon ordi marque press the esc key for startup menu

Smart IPTV décalage de son

Accéder au menu Advanced Bios PC portable HP

Discussions similaires

Newsletters