Créer un site web XHTLM et CSS

Les liens pour la navigation

Pour réaliser notre barre de navigation nous allons déterminer les différents liens

Ici comme nous avons 4 pages, nous auront 4 liens dont 1 inactif qui est celui de la page visitée.

Comme nous avons décidé de faire une barre de navigation avec des onglets nous avons besoin dans cette barre d'insérer 2 images. :

• La partie droite de l'onglet
• La partie gauche de l'onglet

La réalisation de ces deux parties nous permet de réaliser des onglets de largeurs différentes en fonction de la longueur de la dénomination du lien.

Comme nous ne pouvons mettre qu'une image de fond par lien, nous avons utilisé la technique de superposition des images en insérant une balise ‹span› dans la balise ‹a›.

Ainsi la balise ‹a› recevra l'image gauche de l'onglet avec un positionnent haut et gauche.

La balise ‹span› l'image droite de l'onglet et sera positionnée en haut à droite.

Les images sont les suivantes :

Les codes XHTLM seront dans la boîte "haut" et qui a pour image de fond l'image "bghaut.png" :

‹div id="haut"›
     ‹a href="index.htm"›‹span›Page‹/span›‹/a›
     ‹a class="active"›‹span›Navigation‹/span›‹/a›
     ‹a href="contenu.htm"›‹span›Contenu‹/span›‹/a›
     ‹a href="diffusion.htm"›‹span›Diffusion‹/span›‹/a›		
‹/div›

#haut {
clear:both;
width:920px;
height:35px;
padding-left:25px;
background-image:url(images/bghaut.png);
background-repeat:no-repeat;
}

* html #haut a { /* hack pour IE6 */
  float: left;
  text-decoration: none;
  }

* html #haut a span { /* hack pour IE6 */
  float: left;
  text-decoration: none;
  }
  
#haut a {
	padding-left:11px;
	height:35px;
   background-image:none;
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	float:left;
	font-size:14px;
	font-weight:bold;
	margin-right:3px;
	margin-left:3px;
  }

#haut a span {
	padding-left:8px;
	padding-right:20px;
	padding-top:9px;
	height:26px;
	display:block;
   background-image:none;
	text-decoration:none;
	cursor:pointer;
  }
  
  
#haut a:hover, #haut a.active {
	background-image:url(images/onglet-gauche.png);
	background-position:top left;
	text-decoration:none;
	color:#555555;
}

#haut a:hover span, #haut a.active span {
   background: url(images/onglet_droit.png) right top no-repeat;
	text-decoration:none;
	color:#555555;
}

Ainsi la visualisation de l'onglet se fait lorsque nous avons précisé au lien "class active" et lors du passage de la souris sur le lien (a : hover et a.active).

Maintenant que nous avons défini le design de notre page et sa barre de navigation, nous allons voir pouvoir créer du contenu. C'est notre prochaine étape

© 2008 André Willemijns