par
medianeweb » 13 juil. 2011, 15:23
re-Hello devlop78 et hello hakazizi !
En fait je n'avais pas mis tout le code histoire de ne pas vous enquiquiner et résultat, il est resté un </li> en trop.
Pour info, je me suis inspiré de ce code là
http://css.mammouthland.net/menu_horizo ... ulant.html
Pour être sur de mon coup, je viens de refaire le test en prenant exactement ce code là et je l'ai mis en ligne.
Parce que c'est vrai qu'en modifiant un code, on peut faire des petites erreurs fatales par-ci par-là. Surtout moi
J'ai créé 3 fichiers (en faisant des "copier-collé" strict du code sur la page html précédemment citées, histoire de m'assurer de ne pas faire de fausse manip):
1 / test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<!-- Date de création: 15/10/2008 -->
<head>
<title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css">
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<body>
<? include ('contenuTest.php') ?>
<h1>CSS : Menu horizontal déroulant</h1>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel nunc. Duis luctus facilisis dolor. Pellentesque malesuada, velit ac tempor imperdiet, nisi nisl convallis leo, eget tincidunt neque lacus vel erat. Fusce eget tortor a ante tincidunt condimentum. Pellentesque risus. Quisque auctor. Donec sagittis porta lacus. Donec varius, erat in accumsan dapibus, ligula tortor fermentum lectus, laoreet porttitor urna dui ut neque. Fusce lectus. Phasellus laoreet placerat ipsum. Aliquam pharetra, nisi et rhoncus iaculis, massa tellus consectetuer lectus, quis tincidunt est diam commodo ipsum. Aliquam erat volutpat.</p>
<div style="text-align:center; clear:both; margin-top:10px;">
<hr />
<p>Retour au tutoriel « <a href="
http://css.mammouthland.net/menu-horizo ... .php">Menu horizontal déroulant en CSS</a> »</p>
<p><a href="
http://css.mammouthland.net/">CSS Débutant</a> - <a href="
http://www.mammouthland.net/">Mammouthland</a></p>
</div>
</body>
</html>
2 / test.css
#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
3 / et enfin contenuTest.php qui est appelé par un include dans la page test.php
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
Conclusion :
Ca marche sur FF et par sur IE
vous pouvez voir ça ici :
http://www.pagescomediens.com/menu/test.php
A moins que je n'ai encore fait un truc qui fallait pas... mais bon, là, si c'est le cas, je revends mon ordi.
re-Hello devlop78 et hello hakazizi !
En fait je n'avais pas mis tout le code histoire de ne pas vous enquiquiner et résultat, il est resté un </li> en trop.
Pour info, je me suis inspiré de ce code là
http://css.mammouthland.net/menu_horizontal_deroulant.html
Pour être sur de mon coup, je viens de refaire le test en prenant exactement ce code là et je l'ai mis en ligne.
Parce que c'est vrai qu'en modifiant un code, on peut faire des petites erreurs fatales par-ci par-là. Surtout moi :mrgreen:
J'ai créé 3 fichiers (en faisant des "copier-collé" strict du code sur la page html précédemment citées, histoire de m'assurer de ne pas faire de fausse manip):
[u][b]1 / test.php[/b][/u]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<!-- Date de création: 15/10/2008 -->
<head>
<title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css">
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<body>
<? include ('contenuTest.php') ?>
<h1>CSS : Menu horizontal déroulant</h1>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel nunc. Duis luctus facilisis dolor. Pellentesque malesuada, velit ac tempor imperdiet, nisi nisl convallis leo, eget tincidunt neque lacus vel erat. Fusce eget tortor a ante tincidunt condimentum. Pellentesque risus. Quisque auctor. Donec sagittis porta lacus. Donec varius, erat in accumsan dapibus, ligula tortor fermentum lectus, laoreet porttitor urna dui ut neque. Fusce lectus. Phasellus laoreet placerat ipsum. Aliquam pharetra, nisi et rhoncus iaculis, massa tellus consectetuer lectus, quis tincidunt est diam commodo ipsum. Aliquam erat volutpat.</p>
<div style="text-align:center; clear:both; margin-top:10px;">
<hr />
<p>Retour au tutoriel « <a href="http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php">Menu horizontal déroulant en CSS</a> »</p>
<p><a href="http://css.mammouthland.net/">CSS Débutant</a> - <a href="http://www.mammouthland.net/">Mammouthland</a></p>
</div>
</body>
</html>
[u][b]2 / test.css[/b][/u]
#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
[u][b]3 / et enfin contenuTest.php qui est appelé par un include dans la page test.php[/b][/u]
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
[u][b]Conclusion :[/b][/u]
Ca marche sur FF et par sur IE :(
vous pouvez voir ça ici : http://www.pagescomediens.com/menu/test.php
A moins que je n'ai encore fait un truc qui fallait pas... mais bon, là, si c'est le cas, je revends mon ordi. #-o
