18008 sujets
Questions générales et questions de débutants
Première partie
D'abord il te faut quelque connaissance de base, je te propose ce tutoriel pour débutant. Après tu pourras passer à la suite.
L'important dans une page html c'est le contenu celui-ci doit être accessible javascript désactivé et css désactivé. Voici donc une page simple (sans scripts) avec à gauche les rubriques que nous allons transformer en menu déroulants. Regarde la source pour voir comment c'est construit : le code html est très simple, le code css aussi.
La deuxième partie dans 1 heure ou 2.
Modifié par Patidou (23 Apr 2009 - 13:27)
D'abord il te faut quelque connaissance de base, je te propose ce tutoriel pour débutant. Après tu pourras passer à la suite.
L'important dans une page html c'est le contenu celui-ci doit être accessible javascript désactivé et css désactivé. Voici donc une page simple (sans scripts) avec à gauche les rubriques que nous allons transformer en menu déroulants. Regarde la source pour voir comment c'est construit : le code html est très simple, le code css aussi.
La deuxième partie dans 1 heure ou 2.
Modifié par Patidou (23 Apr 2009 - 13:27)
Deuxième partie
On prépare l'activation des menus en les empêchant de se déployer au chargement de la page. Pour cela on ajoute cette ligne dans le head :
Elle va ajouter une classe appelée "hasJS" sur l'élement html avant le chargement complet de la page. On complètera le fichier css par ces quelques lignes :
Les sous-menus sont fermés, le h2 envoyé en dehors de la page.
Voir le résultat ici
Modifié par Patidou (23 Apr 2009 - 16:06)
On prépare l'activation des menus en les empêchant de se déployer au chargement de la page. Pour cela on ajoute cette ligne dans le head :
<script type="text/javascript" >
document.documentElement.className+=" hasJS";
</script>
Elle va ajouter une classe appelée "hasJS" sur l'élement html avant le chargement complet de la page. On complètera le fichier css par ces quelques lignes :
/*avec javascript*/
.hasJS #menu {
float: none;
width: auto;
}
.hasJS #menu ul, .hasJS #menu li {
border: none;
margin: 0;
}
.hasJS #menu ul ul {
display: none;
visibility: hidden;
}
.hasJS #menu h2 {
position: absolute;
left: -5000px;
top: -5000px;
}
.hasJS #content {
margin-left: .5em;
padding-top: 3em;
width: auto;
clear: both;
}
Les sous-menus sont fermés, le h2 envoyé en dehors de la page.
Voir le résultat ici
Modifié par Patidou (23 Apr 2009 - 16:06)
Troisième étape
On ajoute les script et fichiers nécessaire qui sont disponibles au téléchargement ici dans des dossiers au niveau de la page (js et css).
On ajoute deux classes (sf-menu et sf-navbar) sur l'élément <ul> dans le code html. On pourra mettre aussi une classe "current" sur le <li> de la page en cours. On ajoute les liens vers les css additionelles dans le <head> et vers les fichiers javascript avant la fin de <body>.
Et voilà le résultat final.
On ajoute les script et fichiers nécessaire qui sont disponibles au téléchargement ici dans des dossiers au niveau de la page (js et css).
On ajoute deux classes (sf-menu et sf-navbar) sur l'élément <ul> dans le code html. On pourra mettre aussi une classe "current" sur le <li> de la page en cours. On ajoute les liens vers les css additionelles dans le <head> et vers les fichiers javascript avant la fin de <body>.
Et voilà le résultat final.
voila ou j'en suis :'(
ca donne le meme résultat qu'au 2, meme si j'ai essayé de comprendre et placer le code. voici le code html :
voici le code du css:
et voila comment est organisé le dossier :
<modération par Heyoan>
Merci d'éviter les images trop grandes qui déforment le forum. Préférer "générer un aperçu" ou mieux encore dans ce cas :
/css
/js
/theme
index.html
style.css
</modération>
Modifié par Heyoan (24 Apr 2009 - 14:51)
ca donne le meme résultat qu'au 2, meme si j'ai essayé de comprendre et placer le code. voici le code html :
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Play-musculation</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(css/screen.css);
@import url(css/superfish.css);
@import url(css/superfish-navbar.css);
</style>
<style type="text/css" media="print">
@import url(css/print.css);
</style>
<script type="text/javascript" >
document.documentElement.className+=" hasJS";
</script>
</head>
<body>
<div id="header"><!-- DIV du Header --></div>
<div id="conteneur"><!-- DIV du Conteneur -->
<div id="menu">
<h2>Rubriques</h2>
<ul>
<li><a href="">Débutants</a></li>
<li><a href="">Materiel</a>
<ul>
<li><a href="">Materiel.1</a></li>
<li><a href="">Materiel.2</a></li>
<li><a href="">Materiel.3</a></li>
</ul>
</li>
<li><a href="">Blessures</a>
<ul>
<li><a href="">Blessures musculaires </a>
<ul>
<li><a href="">Manque de souplesse</a></li>
<li><a href="">Manque d'échauffement</a></li>
</ul>
</li>
<li><a href="">Blessures osseuses</a></li>
</ul>
</li>
<li><a href="">Programmes</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#menu>ul").addClass("sf-menu");
$("#menu>ul").addClass("sf-navbar");
$("ul.sf-menu").superfish({
pathClass: 'current'
});
});
</script>
</body>
</html>
voici le code du css:
body {
background:url(theme/interface/bg.png) repeat-x;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
}
#header {
height:233px;
background:url(theme/interface/header.png) no-repeat top center;
}
#conteneur{
width:990px;
margin:0 auto;
}
/*avec javascript*/
.hasJS #menu {
float: none;
width: auto;
}
.hasJS #menu ul, .hasJS #menu li {
border: none;
margin: 0;
}
.hasJS #menu ul ul {
display: none;
visibility: hidden;
}
.hasJS #menu h2 {
position: absolute;
left: -5000px;
top: -5000px;
}
.hasJS #content {
margin-left: .5em;
padding-top: 3em;
width: auto;
clear: both;
}
et voila comment est organisé le dossier :
<modération par Heyoan>
Merci d'éviter les images trop grandes qui déforment le forum. Préférer "générer un aperçu" ou mieux encore dans ce cas :
/css
/js
/theme
index.html
style.css
</modération>
Modifié par Heyoan (24 Apr 2009 - 14:51)
Bon !!!
j'ai avancé, enfait c'était une erreur de frappe, mais c amarche, c'est moche petit et pas aligné mais ca marche, voila ce que ca donne :
http://playmusculation.olympe-network.com/play-m/index.htm
je souhaiterais maintenant modifier l'apparence, comment faire avec le css, sur quelles div agir ?
voici el code xhtml+ css (en dessous)
j'ai avancé, enfait c'était une erreur de frappe, mais c amarche, c'est moche petit et pas aligné mais ca marche, voila ce que ca donne :
http://playmusculation.olympe-network.com/play-m/index.htm
je souhaiterais maintenant modifier l'apparence, comment faire avec le css, sur quelles div agir ?
voici el code xhtml+ css (en dessous)
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Play-musculation</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(css/screen.css);
@import url(css/superfish.css);
@import url(css/superfish-navbar.css);
</style>
<style type="text/css" media="print">
@import url(css/print.css);
</style>
<script type="text/javascript" >
document.documentElement.className+=" hasJS";
</script>
</head>
<body>
<div id="header"><!-- DIV du Header --></div>
<div id="conteneur"><!-- DIV du Conteneur -->
<div id="menu">
<h2>Rubriques</h2>
<ul>
<li><a href="">Débutants</a></li>
<li><a href="">Materiel</a>
<ul>
<li><a href="">Materiel.1</a></li>
<li><a href="">Materiel.2</a></li>
<li><a href="">Materiel.3</a></li>
</ul>
</li>
<li><a href="">Blessures</a>
<ul>
<li><a href="">Blessures musculaires </a>
<ul>
<li><a href="">Manque de souplesse</a></li>
<li><a href="">Manque d'échauffement</a></li>
</ul>
</li>
<li><a href="">Blessures osseuses</a></li>
</ul>
</li>
<li><a href="">Programmes</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#menu>ul").addClass("sf-menu");
$("#menu>ul").addClass("sf-navbar");
$("ul.sf-menu").superfish({
pathClass: 'current'
});
});
</script>
</body>
</html>
______________________________________________________________________________
css
______________________________________________________________________________
body {
background:url(theme/interface/bg.png) repeat-x;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
}
#header {
height:233px;
background:url(theme/interface/header.png) no-repeat top center;
}
#conteneur{
width:990px;
margin:0 auto;
}
/*avec javascript*/
.hasJS #menu {
float: none;
width: auto;
}
.hasJS #menu ul, .hasJS #menu li {
border: none;
margin: 0;
}
.hasJS #menu ul ul {
display: none;
visibility: hidden;
}
.hasJS #menu h2 {
position: absolute;
left: -5000px;
top: -5000px;
}
.hasJS #content {
margin-left: .5em;
padding-top: 3em;
width: auto;
clear: both;
}
Bonjour, je voudrais bien que Florent V. m'explique en quoi le menu CSS de... ce site http://www.scoradis.com, par exemple est "un ratage complet en termes d'ergonomie et d'accessibilité" (où le javascript ne sert que pour IE6 qui ne connait pas le sélecteur "parent > enfantImmediat", et ne serait pas utile s'il n'y avait pas de sous-sous-menu).
Histoire que je ne me couche pas idiot.
Merci.
Histoire que je ne me couche pas idiot.
Merci.
laruiss a écrit :En attendant que Florent passe par ici (ou au cas où il ne passerait pas) son plus gros problème vient du fait qu'on ne peut pas naviguer au clavier (tabulations) or tout le monde ne dispose pas d'une souris, que ce soit pour des raisons de handicap ou de matériel.
Bonjour, je voudrais bien que Florent V. m'explique en quoi le menu CSS de... ce site http://www.scoradis.com, par exemple est "un ratage complet en termes d'ergonomie et d'accessibilité"
Et d'ailleurs même avec une souris il n'est pas facile de naviguer dans les rubriques qui sont minuscules...
Oui, en réfléchissant et en me renseignant un peu (notamment sur les lecteur d'écran), il y a d'autres problèmes...
Pour le clavier, c'est pas faux.
Les items du menus sont effectivement petits, et il n'y a pas de délai avant que les menus se "rétractent".
En fait, je suis plutôt d'accord avec lui, c'est juste que je trouve qu'il le dit avec mmmh... un tantinet d'exagération ("ratage complet" et "c'est de la merde"), au lieu de dire "les menus CSS, c'est bien, mais une couche javascript par dessus permet de gagner beaucoup en accessibilité et en ergonomie".
</mon_avis>
@+
Pour le clavier, c'est pas faux.
Les items du menus sont effectivement petits, et il n'y a pas de délai avant que les menus se "rétractent".
En fait, je suis plutôt d'accord avec lui, c'est juste que je trouve qu'il le dit avec mmmh... un tantinet d'exagération ("ratage complet" et "c'est de la merde"), au lieu de dire "les menus CSS, c'est bien, mais une couche javascript par dessus permet de gagner beaucoup en accessibilité et en ergonomie".
</mon_avis>
@+