Suis le coach...pour construire une barre d'icônes dans une page web ASP.NET 2.0 à l'aide d'une feuille de style (CSS)
L’objectif est de construire une barre d’icônes dans une page web ASP.NET 2.0 à partir d’une liste non ordonnée de type <ul><li></li></ul> en utilisant les propriétés des feuilles de style (CSS). La barre d’icônes finalisée correspond à l'étape 5 de la figure 1.
Marche à suivre :
- Sur une page ASP.NET vierge, créer une liste d’images à l'aide d'une liste non ordonnée :
<ul>
<li>
<asp:LinkButton ID="liActualiser" runat="server"><img src="Images/actualiser.gif" title="Actualiser" border="0" /></asp:LinkButton></li>
<li>
<asp:LinkButton ID="liCreerDossier" runat="server"><img src="Images/creer dossier.gif" title="Ajouter un dossier" border="0" /></asp:LinkButton></li>
<li>
<asp:LinkButton ID="liCreerFichier" runat="server"><img src="Images/creer fichier.gif" title="Ajouter un fichier" border="0" /></asp:LinkButton></li>
<li>
<asp:LinkButton ID="liSupprimerDossier" runat="server"><img src="Images/supprimer dossier.gif" title="Supprimer un dossier" border="0" /></asp:LinkButton></li>
<li>
<asp:LinkButton ID="liSupprimerFichier" runat="server"><img src="Images/supprimer fichier.gif" title="Supprimer un fichier" border="0" /></asp:LinkButton></li>
</ul>
Remarques :
Le contrôle serveur web ASP.NET 2.0 de type LinkButton est un moyen simple pour associer une action sur le clic de chaque image de la barre d’icônes.
Dans cet exemple, les images associées aux icônes sont placées dans un dossier Images.
- Par défaut, les éléments <li> d’une liste s’affichent par lignes donc verticalement, avec une puce de type rond noir. Exécutez la page. Le résultat est donné dans l'étape 1 de la figure 1.
- Créer une feuille de style en ajoutant un nouvel élément au projet web du type Feuille de style. Nommez-la par exemple Default.css.
- Pour créer une référence à la feuille de style dans votre page web ASP. NET 2.0, il suffit de faire un glisser déplacer du fichier .css depuis l’Explorateur de solutions de Visual Studio sur le code source de la page dans la partie en-tête :
<head runat="server">
<title>Page sans titre</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
</head>
- Ajouter l'attribut Class avec la valeur Liste à la balise <ul> pour référencer une règle d'affichage dans la feuille de style.
- Définissez la règle d'affichage suivante dans la feuille de style :
ul.Liste
{
list-style-type : none;
display : block;
height : 24px;
border-bottom : solid 1px #D1D1D1;
border-top : solid 1px #D1D1D1;
margin : 10px 0px 0px 0px;
padding : 0px 10px 0px 10px;
}
Remarques :
La propriété list-style-type définit le style de la puce. Dans notre cas, la puce est inutile donc le style utilisé est none.
La bordure définie par les propriétés border- permet d'isoler la barre d'icônes avec les autres éléments autour dans la page.
- Enregistrez tout puis exécutez la page. La liste est toujours identique à ceci près que les puces noires ne sont plus visibles (Etape 2 de la figure 1).
- Tournez maintenant la liste pour qu'elle soit horizontale plutôt que verticale. Pour cela, rajoutez la règle d'affichage suivante dans la feuille de style :
ul.Liste li
{
display : block;
height : 24px;
float : left;
}
- Enregistrez tout puis exécutez la page. La liste est maintenant horizontale (Etape 3 de la figure 1).
L’astuce consiste à programmer un mode d’affichage flottant via la propriété float. Qu’est-ce que cela veut dire ?
Il faut savoir que lorsque vous positionnez un élément de manière absolue dans le flux html d’un document, il n’est pas possible de déterminer où se trouve précisément la fin de l’élément. C’est pour cette raison qu’il est particulièrement difficile de positionner des éléments à la suite les uns des autres…
La solution consiste à utiliser le mode d’affichage flottant. Il indique que les éléments sont placés à la suite les uns des autres dans le flux html. Les valeurs left ou right précisent si les éléments sont calés par la gauche ou par la droite du containeur.
- Retravaillez l'affichage des images pour qu'elles soient plus espacées. En visualisant le source de la page dans le navigateur, vous constaterez que le contrôle ASP.NET de type LinkButton a pour rendu un simple lien hypertexte <a> standard :
<li>
<a id="liActualiser" href="javascript:__doPostBack('liActualiser','')"><img src="Images/actualiser.gif" title="Actualiser" border="0" /></a></li>
- Donc en ajoutant les règles d'affichage suivantes dans la feuille de style, vous contrôlez l'espacement entre les icônes dans la barre :
ul.Liste li a,
ul.Liste li a:link,
ul.Liste li a:visited,
ul.Liste li a:active
{
display : block;
margin : 2px 2px 2px 2px; /* gère l’espacement extérieur au lien */
padding : 3px 3px 3px 3px; /* gère l’espacement intérieur au lien */
}
- Enregistrez tout puis exécutez la page. Vous obtenez une barre d'icône qui commence à ressembler à quelque chose (Etape 4 de la figure 1).
- Pour mettre en évidence le déplacement de l'utilisateur avec sa souris, vous pouvez dessiner un rectangle coloré autour de l'image survolée par la souris en ajoutant à la feuille de style la règle d'affichage suivante :
ul.Liste li a:hover
{
background-color : #C1D2EE;
border : solid 1px #316AC5;
margin : 2px 2px 2px 2px;
padding : 2px 2px 2px 2px;
}
- Enregistrez tout puis exécutez la page. Le tour est joué (Etape 5 de la figure 1) !
-> Retrouvez cet exemple de page en pièce attachée de ce post.
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
