Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

C’est une jeune fille humaine âgée de 18 ans, elle a de longs cheveux noir bouc

C’est une jeune fille humaine âgée de 18 ans, elle a de longs cheveux noir bouclé attaché en queue de cheval avec une fleur sur son oreille. Elle est très belle et a les yeux bleu clair, une peau blanche et un teint clair. Elle a l'air gaie et avenante. Elle est vêtu d'une belle robe rouge foncée move et évasé avec des gants sur les mains et des jolies ballerines noires. Elle a un père, une mère, un grand frère et ses deux petite sœurs avec qui elle vie. Pied de page <footer> Entete <form><nav> <input type= “search “ name“q“placeholder=“rechercher “><input type =“submit“ value=“lancer“></form></nav> Mettre un contenue a coté <aside> <h2> en relation </h2> <ul> <li><a href= “#“>texte</a></li> </ul> </aside> Elle est née dans le village de Baie et a grandi Inserer une image fond écran width: 320px; height: 160px; border: 1px solid #333; margin: 10px auto; background-color : RGBa(255, 255, 0, 0.2); } body{ background-image: url("https://www.pierre-giraud.com/wp-content/uploads/2019/07/emoji- smile.png"); background-color : RGBa(255, 255, 0, 0.2) #ex1{ background-image: url("https://www.pierre-giraud.com/wp-content/uploads/2019/07/sunset.jpg") } Inserer des onglets <div id="menu"> <ul id="onglets"> <li class="active"><a href="Accueil.html"> Accueil </a></li> <li><a href="Forums.html"> Forums </a></li> <li><a href="Livre_or.html"> Livre d'or </a></li> <li><a href="Equipe.html"> L'équipe </a></li> <li><a href="Inscription.html"> S'inscrire </a></li> <li><a href="Connexion.html"> Se connecter </a></li> </ul> </div> Ensuite #onglets { font : bold 11px Batang, arial, serif; list-style-type : none; padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */ border-bottom : 1px solid #9EA0A1; margin-left : 0; } Puis #onglets li { float : left; height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */ background-color: #F4F9FD; margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que IE */ margin : 1px 2px 0 2px; /* Pour IE */ border : 1px solid #9EA0A1; } Ecrire ensuite #onglets li.active { border-bottom: 1px solid #fff; background-color: #fff; } Puis #onglets a { display : block; color : #666; text-decoration : none; padding : 4px; } Enfin #onglets a:hover { background : #fff; } Menus en onglets Bonjour à tous ! :D Dans ce tutoriel, vous allez apprendre à créer des menus en onglets de façon très simple en xHTML et CSS. En fait, c'est un complément au tutoriel de neoxx78 sur les menus horizontaux. Cependant, il n'est pas nécessaire de l'avoir lu :-° mais celui sur le XHTML/CSS de M@teo21 doit l'être :( . L'exemple qui servira tout au long de ce tutoriel sera le menu du Site du Zér0. Après avoir reçu plusieurs MP concernant le placement du menu dans la page, j'ai décidé de créer une troisième sous-partie au tuto expliquant comment faire. J'ai également rajouté une sous-partie concernant la gestion de l'onglet actif, en php. Le code XHTML Commençons par le commencement :lol: ! La partie XHTML est la plus simple. En effet, nous allons juste créer un menu avec une liste non-ordonnée avec <ul> et <li>. Ensuite, dans un menu, il y forcément des liens, on utilisera donc aussi la balise <a>. L'attribut class nous servira à mettre en valeur l'onglet actif. Le tout sera englobé avec une balise <div>. Au final, on doit avoir cela : <div id="menu"> <ul id="onglets"> <li class="active"><a href="Accueil.html"> Accueil </a></li> <li><a href="Forums.html"> Forums </a></li> <li><a href="Livre_or.html"> Livre d'or </a></li> <li><a href="Equipe.html"> L'équipe </a></li> <li><a href="Inscription.html"> S'inscrire </a></li> <li><a href="Connexion.html"> Se connecter </a></li> </ul> </div> Les trois éléments importants sont : l'activation d'un lien avec class="active", la balise <div id="menu"> qui nous permettra de positionner le menu dans la page, et la balise <ul id="onglets"> qui servira à faire les modifications sur le style. Si on ouvrait maintenant une page avec ce code, on aurait ceci : Comme vous le voyez, c'est un menu très simple. :lol: Voilà qui clôt la partie XHTML. Jusque-là, ce n'est pas très compliqué :) , mais rassurez-vous, la suite sera du même niveau ;) ! Le code CSS Les valeurs que j'utilise dans ce tutoriel sont "uniques". J'entends par là que ces valeurs dépendent de plusieurs choses : la police utilisée, la taille de celle-ci, le rendu final voulu, ... Quand on change une de ces valeurs, il faut faire attention à l'interprétation des différents navigateurs. Maintenant, la question qui se pose est... Comment mettre en place les onglets ? Passons directement au code, les explications suivront. :) #onglets { font : bold 11px Batang, arial, serif; list-style-type : none; padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */ border-bottom : 1px solid #9EA0A1; margin-left : 0; } Je sélectionne le menu avec #onglets et non pas avec #menu, car #menu servira uniquement à placer le menu dans la page ! Ici, je change principalement la police, j'enlève les puces, je mets une bordure qui sera en bas des cellules. Le padding-bottom sert à indiquer à quelle «hauteur» sera la bordure du bas. Pour mieux visualiser, vous pouvez changer cette valeur et vous comprendrez tout de suite ! ;) Je fais également en sorte que le menu soit collé au bord gauche de la page. Il faut faire attention avec cette bordure du bas. En effet, on peut avoir de mauvaises surprises en fonction de la police et de la taille de celle-ci ! Il faut la modifier en fonction de la taille de la police ET d'un attribut que l'on va voir tout de suite. #onglets li { float : left; height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */ background-color: #F4F9FD; margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que IE */ margin : 1px 2px 0 2px; /* Pour IE */ border : 1px solid #9EA0A1; } Ici, je crée mes onglets o_O . Or, mes onglets se trouvent entre des balises <li>, donc il faut mettre #onglets li. Je crée mes onglets en mettant : border:1px solid #9EA0A1 (cadre de 1 pixel en ligne pleine de couleur #9EA0A1 ;) ) . Je rajoute également une petite marge pour que les cellules et le texte ne soient pas collés. Le float : left me sert à mettre mes onglets sur la même ligne. J'aurais aussi pu utiliser display : inline, mais le résultat n'est pas pareil ! Il faut aussi préciser la hauteur de la cellule. La hauteur de la cellule dépend de la marge inférieure décrite précédemment. Si on augmente ou si on diminue une des deux marges, il faudra modifier l'autre en fonction de l'effet voulu. Il faut aussi prendre en compte la taille de la police. Les deux margin servent pour l'affichage : en effet, Internet Explorer n'interprète pas de la même façon que les autres navigateurs ! Bien, on se rapproche du but ! :) Continuons, on y est presque ! :D #onglets li.active { border-bottom: 1px solid #fff; background-color: #fff; } Là, je sélectionne les onglets qui ont pour id menu. Comme chaque onglet se trouve entre des balises <li>, je les sélectionne aussi. Comme je veux que quand celui-ci est activé, qu'il ait une apparence différente, je sélectionne aussi la classe active. Donc, je modifie juste l'apparence de l'onglet quand celui-ci est activé en mettant une couleur de fond, et en ajoutant une bordure en bas de cellule, qui aura pour effet d'effacer celle existante, mais juste sur la largeur de cette cellule. #onglets a { display : block; color : #666; text-decoration : none; padding : 4px; } Là, je me trouve dans les onglets et je travaille sur les liens. On fait ici un affichage bloc, ça permet de pouvoir cliquer partout dans l'onglet pour activer le lien. La couleur du lien se change aussi ici. Le text-decoration : none sert à enlever le trait de soulignement en dessous des liens. Enfin, on met une marge aux quatre bords des cellules, donc padding : 4px. Et la touche finale : quand on passe avec la souris dessus, le fond change de couleur : :D , il faut donc se placer dans l'id onglet avec a:hover pour le lien. #onglets a:hover { background : #fff; } :-° Ouf, on y est arrivé ! Au final, on doit avoir ceci (avec le fond qui devient blanc au passage de la souris) : N'est-ce pas magnifique ? :p Maintenant, libre à vous de faire votre propre menu en onglets ! :D Code source : HYF8J-CVRMY-CM74G-RPHKF-PW487 Ajouté arrière plan   o o o o o o o o o o    Ajouter des images de fond aux éléments HTML avec background- image CSS Télécharger le PDF du cours Cours complet HTML et CSS  INTRODUCTION AU COURS HTML ET CSS 1. Introduction au cours HTML et CSS 2. Définition et usage du HTML et du CSS 3. Evolution de l'informatique et des langages Web 4. Travail en local et en production 5. Choix et installation d'un éditeur de texte  LES BASES DU HTML 6. Eléments, uploads/Litterature/ infos-devoir.pdf