28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'ai essayé de concevoir un menu dans le style de celui d'Alsacréations.fr, c'est à dire avec une seule image (sans preload) et en s'occupant bien des background on devrait pouvoir afficher la partie du bas de l'image en hover, non ?
Bah apparement ça ne marche pas, j'ai essayé de modifier les positions dans la mesure où mon image est une 600*100 donc que la deuxième partie commence à 100 px, je me permet donc de vous mettre la page : ici. Pour ce qui concerne le css, le voila :
/* CSS Document */
#menu {
	position: relative;
	width: 600px;
	height: 100px;
	margin: 0 auto;
	text-align: left;
}

#menu ul {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 600px;
	height: 100px;
	padding: 0;
	margin:0;
	background: yellow;
	list-style: none;
	background: transparent url(design/menu.png) top left no-repeat;
}
#menu li {
	float: left;
	padding: 0;
	margin:0;
	text-indent: 50px;
}

#menu li a {
	display: block;
	height: 50px;
	width: 600px;
	text-decoration: none;
	font-size: 1px;
	line-height: 0x;
	color: #C6C1A3;
}

#menu li a span {
	position: absolute;
	left: -5000px;
}
#menu li a:hover {
	background: transparent url(design/menu.png) top left no-repeat;
}
#menu a#actu:hover {
	background-position: 10px -0px;
	color: #6882c3;
}
#menu a#rubriques:hover {
	background-position: -130px -0px;
	color: #8fab10;
}
#menu a#blog:hover {
	background-position: -250px -0px;
	color: #ffc326;
}
#menu a#forum:hover {
	background-position: -370px -0px;
	color: #ffc326;
}
#menu a#topsecret:hover {
	background-position: -490px -0px;
	color: #ffc326;
}




Modifié par Makushimucool (08 Apr 2006 - 11:07)
Bonjour Makushimucool,

Je pense qu'il y a un problème avec la définition de la propriété line-height dans #menu li a :


#menu li a {
	display: block;
	height: 50px;
	width: 600px;
	text-decoration: none;
	font-size: 1px;
	[b]line-height: 50px;[/b] et non [b]line-height: 0x;[/b]
	color: #C6C1A3;
}

Modifié par Vero (08 Apr 2006 - 12:41)
Toujours pas ça... Je cherche encore mais si quelqu'un à des idées... Je suis preneur parce que là je pense que je vais faire avec un preload sinon parce que ça me paraît le meilleur moyen...