Créer un menu à onglets avec CSS Introduction Propos Je vais montrer comment utiliser le langage des feuilles de style en cascade (CSS) pour créer un menu à onglets. La technique utilisée n'a rien de nouveau, mais elle sera l'occasion d'aborder plusieurs sujets rarement traités en un même endroit. Les plus pressés peuvent aller directement au fichier HTML complet, ainsi qu'aux feuilles de style « normal.css », « ie.css » et « ie6.css ». Explication du projet Le menu doit ressembler à ce qui suit : Ce menu doit également répondre aux exigences suivantes : Bref, le résultat doit être valide, accessible, multi-navigateur et indépendant de CSS, de JavaScript ou d'un outil de pointage particulier. Matériel et préparation Pour écrire une feuille de style, j'utilise le navigateur Firefox avec la barre d'outils Web Developer Toolbar et l'extension ColorZilla. Pour réaliser ce projet, j'aurai besoin des trois images suivantes : Vous pouvez choisir de faire autrement. Retourner au plan Écrire le fichier HTML Les habitudes de travail <!
Débuter avec HTML + CSS Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS. Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela: Page HTML résultante, couleurs et disposition effectuées avec CSS. Notez que je ne prétends pas que c'est joli :) Voici un exemple de section optionelle. Etape 1: Le langage HTML Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas lire. <! Le <body> est l'emplacement du texte à proprement parler de notre document. <!
Centrer les éléments ou un site web en CSS Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal). Le centrage horizontal des éléments de type en-ligne Vous voulez centrer horizontalement un élément de type "en-ligne" au sein d'un bloc. La propriété CSS text-align est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur. Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un élément <div> : Le centrage horizontal des éléments de type bloc Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales. Donnons à notre bloc l'id global : De cette manière, il équilibrera automatiquement les marges latérales. Donc : N'oubliez pas le Doctype !