Sunday, 9. July 2006, 14:56:55
Les frames sont révolues et j'en suis heureux. Malheureusement on voit encore trop souvent l'utilisation incorrecte il va de sois de ce système de navigation.
Pourtant il existe des moyens tout à fait simple de construire une barre de navigation sans utiliser les frames et qui serait disponible sur tout le site et ce par un moyen tout à fait simple : l'utilisation de modèle ou l'inclusion du fichier contenant la barre de navigation
[1].
De fait, passons en revue ce moyen extrémement simple de créer une barre de navigation. Pour ce faire nous utiliserons simplement le positionnement relatif ou absolu (selon le cas) dans les CSS ainsi que les attributions de marge. Cela semble aisé non ? Cela l'est tout autant.
Parfais.
Créons d'emblée une page simple avec quelques mise en forme :
- faire un conteneur ;
- dans ce conteneur, créer une liste non numérotée contenue dans un Div en sois et ayant l'alignement Inline ;
- créer un entête,
- créer un corps,
- créer un pied,
Dans la continuité, passons aux particularité. Nous allons faire défiler la barre de navigation avec le site en cas de défilement. Pour ce faire, nous n'avons nullement besoin de l'extraire du flux (avec le type de positionnement
Absolute).
Disposons maintenant de séparateur dans la barre de navigation avec les classes Before et After. Attention, comme d'habitude ce n'est pas compris par I.E. (il faut encore trouver une astuce...).
Maintenant il nous faut agir sur l'entete car si ce dernier se situe tout à fait au dessus, il peut évidement être confondu et la barre ne ressortira pas. Placons-y une marge de quelques dizaine de pixels.
Nous obtenons approximativement ceci :
<!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>Barre de navigation</title>
<style type="text/css" title="css1" media="screen">
<!--
* {
margin: 0;
padding: 0;
border: 0;
}
#conteneur {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
background-color: #FFFFFF;
width: 760px;
}
#entete h1 {
font-size: large;
font-weight: bold;
background-color: #CCCCCC;
letter-spacing: 0.2em;
word-spacing: 0.3em;
width: 100%;
text-indent: 0.3em;
}
#entete {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
margin-top: 50px;
}
#entete p {
font-family: "Times New Roman", Times, serif;
font-size: large;
font-style: italic;
text-indent: 1em;
letter-spacing: 0.2em;
word-spacing: 0.3em;
}
#corps {
padding: 10px;
width: 90%;
}
#pied {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #999999;
height: 70px;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
text-align: center;
}
#corps p {
margin-top: 5px;
margin-bottom: 10px;
}
#barre {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
color: #CCCCCC;
height: 35px;
width: 100%;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: double;
border-bottom-color: #333333;
position: relative;
top: 0px;
}
#barre li {
display: inline;
}
#barre li:after {
content: " | ";
}
#barre ul li a {
text-decoration: none;
color: #333333;
}
#barre ul li a:hover {
text-decoration: underline;
color: #990000;
}
#barre ul li .avant:before {
content: " | ";
}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="barre">
<ul>
<li><span class="avant"><a href="#">Accueil</a></span></li>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</div>
<div id="entete">
<h1>Titre du site</h1>
<p>Sous-titre du site</p>
</div>
<div id="corps">
<p>Ici vient le reste du corps du site... </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div id="pied">
<p>Les informations dans le pied de la page</p>
</div>
</div>
</body>
</html>
Comme vous pouvez le constater, ceci n'est pas difficile. Il vous appartient aussi de jouer maintenant sur le positionnement de cette barre. Si je la change de place et que la dispose sur le coté. Pour ce faire, supprimons simplement la marge de l'entete, placons un
Float de valeur
Right et disposons d'une hauteur précise en pourcent, ainsi qu'une largeur précise en pixels (nous inversions donc les valeurs d'expression).
N'oublions pas non plus de changer la valeur
Top, d'y ajouter un margin total et le padding adéquat. Si vous avez suivis les instructions jusqu'ici vous devriez obtenir un résultat probant mais avec le texte du corps collé a la barre (sur laquelle j'ai rajouté par facilité une couleur de fond).
Comme vous pouvez le constater, c'est facile. Maintenant vous désirez faire rester en place la barre ? Ou encore le pied de page ?
Le principe est le même. Restons simple. Etablissons une page similaire et utilisons donc notre position
Absolue :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pied fixe</title>
<style type="text/css" media="all">
<!--
* {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
color: #999999;
text-decoration: none;
letter-spacing: 0.2em;
word-spacing: 0.1em;
font-style: italic;
font-weight: bold;
text-align: right;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-style: normal;
color: #660033;
text-align: right;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 50px;
}
img {
text-decoration: none;
border: none;
margin: 20px;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: large;
color: #990000;
text-decoration: none;
text-align: left;
margin-left: 50px;
margin-bottom: 5px;
margin-left: 50px;
}
#conteneur {
width: 760px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
#carte_visite {
float: left;
}
#entete {
width: 760px;
height: 80px;
background-color: #993333;
top: 0px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#corps {
width: 760px;
}
#pied {
width: 760px;
height: 50px;
background-color: #993333;
margin-right: auto;
margin-left: auto;
bottom: 0px;
overflow: hidden;
position: absolute;
}
.align_dr {
text-align: right;
}
#pied p {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #CCCCCC;
text-align: right;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="entete">
<h1>Mon site</h1>
</div>
<div id="corps">
<h2>Information importante </h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="align_dr">Un changement d'alignement</p>
</div>
<div id="pied">
<p>Le pied de page vient ici... Pourquoi pas :-)</p>
</div>
</div>
</body>
</html>Voila qui termine une introductions sur une barre de navigation mobile ou fixe, ainsi qu'un pied de page mobile ou fixe.
A retenir : le positionnement Absolu, le positionnement Relatif, le Float.
D'excellent tutoriaux sont consultable sur
AlsaCreations.com[1] : attention toutefois, il vous faut que votre serveur accepte le language dynamique, si ce n'est pas le cas, vous avez la possibilité d'utiliser la balise OBJECT (quoique peut paramétrable sur les navigateurs tel I.E.) ou encore le Javascript mais n'oubliez pas que ce dernier peut ne pas être interprété.
