18073 sujets

Questions générales et questions de débutants

(RESOLU) Menu horizontal /// Image

Bonjour,

J'ai quelques problème concernant un menu horizontal.

J'aimerai arriver à ça upload/970-Sans-titre-1.gif


Mon rool over se fait avec deux images, dont voici le code

body {
	background: #FFF;
	color: #000;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
#bloglink {
	margin: 10px 10px 10px 20px;
}
a:link, a:visited {
	color: #FF2A84;
	text-decoration: underline;
}
a:hover, a:active {
	color: #FFF;
	text-decoration: none;
	background: #FF2A84;
}
#navigation {
	background: #DDD;
	border-bottom: 1px solid #A1A1A1;
	margin: 1em 0 0;
	padding: 0.6em 0 0;
	font-weight: bold;
}
#navigation ul, #navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#navigation ul {
	padding: 5px 0 5px;
	text-align: center;
}
#navigation ul li {
	display: inline;
	margin-right: -2px;
}
#navigation ul li a {
	background: url(tableft.gif) no-repeat left top;
	color: #FFF;
	text-decoration: none;
	padding: 5px 0;
}
#navigation ul li span {
	background: url(tabright.gif) no-repeat right top;
	padding: 5px 7px 5px 3px;
	margin: 4px 0 4px 4px;
}
#navigation ul li a:hover span {
	text-decoration: underline;
	background-position: 100% -75px;
}
#navigation ul li a:hover {
	background-position: 0 -75px;
}
#navigation #current a {
	background-position: 0 -150px;
}
#navigation #current a span {
	background-position: 100% -150px;
}


/*- Internet Explorer...It's Hacktastic!--------------------------- */ 
  
/*\*//*/
#navigation ul li a {
	display: inline-block;
	white-space: nowrap;
	width: 1px;
}

#navigation ul {
	padding-bottom: 0;
	margin-bottom: -1px;
}
/**/

/*\*/
* html #navigation ul li a {
	padding: 0;
}
/**/


et


<div id="navigation">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li id="current"><a href="#" title="Link 2 - Active Tab"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link"><span>Longer Link</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
  </ul>
</div>


Le code fonctionne bien, mais le problème c'est l'image se trouve derrière texte et non sous le texte::: comment déplacer mon texte en dessus de l'image ? Smiley biggrin


Merci d'avance
dup's
Modifié par dups (12 May 2006 - 09:29)
J'ai trouvé, mais c'est vraiment de la bidouille Smiley lol néanmoins, ça passe sur IE, FF, Netscape et Opéra, ainsi qu'à la validation html et css.

Je te mets le code, il y a les explications en commentaires :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Sliding Doors Navigation at exploding-boy.com</title>
<style type="text/css">
body {
	background: #FFF;
	color: #000;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
#bloglink {
	margin: 10px 10px 10px 20px;
}
a:link, a:visited {
	color: #FF2A84;
	text-decoration: underline;
}
a:hover, a:active {
	color: #FFF;
	text-decoration: none;
	background: #FF2A84;
}
#navigation {  
	background: #DDD;
	border-bottom: 1px solid #A1A1A1;
	margin: 1em 0 0;
	padding: 0.6em 0 0;
	font-weight: bold;
	min-height: 24px; /* Pour FF, Netscape et Opéra */
}
#navigation ul, #navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 42%; /* pour centrer le menu */
	margin-left: auto; /* pour centrer le menu */
	margin-right: auto; /* pour centrer le menu */
}
#navigation ul {
	padding: 5px 0 0 0; /* margin-bottom à 0 pour marge sous IE */
	text-align: center;
}
#navigation ul li {
	display: inline;
	margin-right: -2px;
}
#navigation ul li a { 
	float: left; /* Pour aligner les liens */
	margin-top: -5px; /* pour régler l'espace entre les liens et les onglets */
	margin-right: 2px; /* pour régler l'espace entre les menus */
	background: url(http://www.exploding-boy.com/images/center/tableft.gif) no-repeat left top;
	color: #FFF;
	text-decoration: none;
	padding: 5px 0;
}
#navigation ul li span {
	background: url(http://www.exploding-boy.com/images/center/tabright.gif) no-repeat right top;
	padding: 5px 7px 5px 3px;
	margin: 4px 0 4px 4px;
}
#navigation ul li a:hover span {
	text-decoration: underline;
	background-position: 100% -75px;
}
#navigation ul li a:hover {
	background-position: 0 -75px;
}
#navigation #current a {
	background-position: 0 -150px;
}
#navigation #current a span {
	background-position: 100% -150px;
}
.liens { /* Placement des liens au dessus des onglets */
	position: absolute;
	top: 143px;
	margin-left: 7px;
}
/* + ne pas oublier d'enlever le hack IE */
</style>
</head>

<body>
	<div id="logo">
<a href="http://www.exploding-boy.com"><img src="http://www.exploding-boy.com/images/ebhead.gif" alt="ExplodingBoy - Home" /></a>
<p id="bloglink">
<a href="http://www.exploding-boy.com/2006/01/31/centered-sliding-doors-menus/">View related weblog post</a><br />
(view source for CSS and XHTML)
</p>
	</div>
<div id="navigation">
  <ul>
        <li><a href="#" title="Link 1"><strong class="liens">Link 1</strong><span>Mettre ici des espaces insécables pour donner la largeur voulue à l'onglet</span></a></li>
    <!-- &nbsp; > pour donner la largeur aux onglets -->
	<!-- <strong class="liens"> car <div class="liens"> ne passait pas à la validation html -->
	<li id="current"><a href="#" title="Link 2 - Active Tab"><strong class="liens">Link 2</strong><span>Mettre ici des espaces insécables pour donner la largeur voulue à l'onglet</span></a></li>
    <li><a href="#" title="Link 3"><strong class="liens">Link 3</strong><span>Mettre ici des espaces insécables pour donner la largeur voulue à l'onglet</span></a></li>
    <li><a href="#" title="Longer Link"><strong class="liens">Longer Link</strong><span>Mettre ici des espaces insécables pour donner la largeur voulue à l'onglet</span></a></li>
    <li><a href="#" title="Link 5"><strong class="liens">Link 5</strong><span>Mettre ici des espaces insécables pour donner la largeur voulue à l'onglet</span></a></li>

  </ul>
</div>

</body>
</html>


A mon avis, il faut mieux enlever le underline sur le hover car ça fait bizarre Smiley biggol
Modifié par blue (10 May 2006 - 23:25)
Sujet clos
Aller à