| | Aller à la page : 1, 2, 3, 4, 5 | Re: Formation HTML/CSS posté le : Mer 27 Jan - 18:59 | Coucou ! Alors, après avoir mis en page le fond et le contour de notre balise, voyons maintenant comment modifier sa hauteur et sa largeur ! Comme on s'en doute, on peut attribuer deux tailles à une balise : -La largeur -La hauteurAfin de définir la largeur d'une balise, on utilisera width : - Code:
-
.name{ width: Npx; /** N désignant un nombre non nul de pixels **/ } Et pour la hauteur avec height, c'est la même chose : - Code:
-
.name{ height: Npx; /** N désignant un nombre non nul de pixels **/ } Imaginons maintenant qu'on veuille que notre balise fasse 50% de la largeur totale de la page (ou de la balise dans laquelle elle est comprise). On aura juste à remplacer Npx par 50%, comme ça : - Code:
-
.name{ width: 50%; } C'est pareil avec height Ca va, tout compris ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mer 27 Jan - 19:26 | Tout compris |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Sam 30 Jan - 12:29 | Coucou On doit avancer, désolé Popy Continuons avec une petite résolution de problème.. Si on veut attribuer une taille minimale à notre balise, c'est à dire une taille par défaut, qui peut changer si la balise doit s’agrandir, comment faire ? Déjà, qu'entends-je par là ? Prenons un paragraphe (<p>) par exemple, dans lequel nous mettrons du texte. On veut que ce paragraphe fasse minimum 50px de hauteur, mais, si notre texte a besoin de plus de 50px, le paragraphe se règle pour s'agrandir afin que le texte soit tout compris dans celui-ci. Pour cela, on utilisera la propriété height, avec un petit préfixe : min qui signifie : minimum Pour notre paragraphe, on a alors : - Code:
-
.name{ min-height: 50px; } C'est bien beau tout ça, mais si notre texte est un gros pavé, il est hors de question que notre paragraphe prenne toute la page ! Pour ce faire, on va utiliser height avec un autre préfixe : max - Code:
-
.name{ max-height: Npx; /** N désigne un nombre non nul de pixels **/ } Ca fonctionne pareil avec width, on a min-width et max-width |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Sam 30 Jan - 19:49 | Ok, tout compris Et tout révisé, aussi. |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Sam 30 Jan - 19:56 | |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Dim 31 Jan - 11:43 | Bon, huer on a résolu un prolème grâce à min et max, mais maintenant... Quand y'en a plus, y'en a eencooore ! Ici, on en a un autre. Si le texte qu'on met dans notre paragraphe doit prendre plus de place que la valeur maximale autorisée, qu'est-ce qui se passera ? Ben... Il se passera ça : Heureusement, il y a une solution à cela ! Les scrollbars ! J'en ai déjà parlé quelque fois précédemment dans le cours. C'est la barre de défilement, qui permet de descendre ou monter dans la page. On peut en attribuer à des balises (de type block uniquement) ! Voici le code css permettant de faire ça : - Code:
-
.name{ overflow: scroll; } Là, une scrollbar verticale et une scrollbar horizontale se mettront si besoin Néanmoins, encore et toujours, un problème survient ! Si on veut que la scrollbar n'apparaisse que verticalement, ou horizontalement, comment faire ? Et bien, on utilisera overflow suivi du suffixe de la largeur ou de la hauteur. La largeur se définit par la lettre x et la hauteur par la lettre y (et la profondeur par la lettre z, mais là, on en n'a pas besoin) Du coup, on aura, pour une scrollbar verticale, donc pour la hauteur, overflow-y : - Code:
-
.name{ overflow-y: scroll; } Et pour une scrollbar horizontale, soit pour la largeur, overflow-x : - Code:
-
.name{ overflow-x: scroll; } D'accodac ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Dim 31 Jan - 12:44 | Tout compris |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Mar 2 Fév - 3:55 | |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Mer 3 Fév - 14:12 | Parfait Bon, je m'excuse, cette partie ne contient pas trop de pratique en ce moment. Dans 2 cours, vous aurez un petit exo . Quoi qu'il en soit, on en a fini avec la mise en page des balises ! On va passer à tout ce qui est marges maintenant A l'intérieur d'une balise de type block (div, h1, p, etc.), il est possible de laisser un espace entre la bordure et le contenu de la balise. Il y aura donc une sorte de marge intérieure. Cette marge intérieure s'applique en utilisant la propriété padding - Code:
-
.name{ padding: 15px; /** De chaque côté de la balise (droite, gauche, haut, bas), il y aura une marge de 15 pixels **/ } Maintenant, si on veut laisser une marge, mais différente à chaque côté, c'est possible aussi ! - Code:
-
.name{ padding-left: 2px; /** Marge de 2 pixels à gauche **/ padding-right: 10px; /** Marge de 10 pixels à droite**/ padding-top: 5px; /** Marge de 5 pixels en haut **/ padding-bottom: 7px; /** Marge de 7 pixels en bas **/
C'est tout bon ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mer 3 Fév - 18:15 | |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Ven 5 Fév - 16:34 | |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Mer 10 Fév - 19:46 | Coucou Désolé pour le retard j'ai des examens en ce moment . Vivement les vacances ! Après les marges intérieures, les marges "extérieures". C'est à dire la distance qu'il y a entre deux balises . Si nous appliquons une marge extérieure à un bloc seul dans la page, la marge se placera en fonction de la page entièreEt pour ces marges, c'est la propriété margin que nous utiliserons ! - Code:
-
.name{ margin: 15px; /** Les balises ayant pour class name seront décalées à droite, gauche, haut et bas de 15 pixels à partir des bords de la page ou des autres balises **/ } Ce qui donne, sur une page simple : - Spoiler:
Maintenant, c'est comme avec padding, on peut personnaliser tout ça de chaque côté ! - Code:
-
.name{ margin-top: 15px; margin-bottom: 12px; margin-left: 8px; margin-right: 32px; } Afin de voir si vous avez compris, j'aimerais que vous réalisiez cela : - exo:
margin en rougepadding en bleuCourage |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Dim 14 Fév - 19:34 | Nous allons donc continuer avec le placement des balises, autrement qu'avec les marges. Il existe 4 petites propriétés bien pratiques : top, bottom, left, right. Comment fonctionnent-elles ? En gros, si on veut que notre balise se place à 20pixels du haut de notre page, on lui attribuera un top: 20px; Maintenant, imaginons que nous voulions une balise à 50px du bord gauche et à 30px du bord droit. Notre code ressemblera à : - Code:
-
.name{ left: 50px; top: 30px; } Seulement, si on essaie, on verra que... ça ne fonctionne pas.Pourquoi ? Tout simplement car l'élément a une position non appropriée ! En fait, il faut dire au navigateur d'où les distances sont prises. Par rapport aux bords du navigateurs ? Par rapport à d'autres balises de la page ? Avant de continuer avec nos left, top, bottom et right, attardons nous alors sur les positions css. Il existe 4 positions css : statique : c'est la position initiale quand nous n'en définissons pas pour un élément. Un élément positionné de manière statique est toujours positionné en fonction du flux normal de la page. Les éléments positionnés de manière statique ne sont pas affectés par les propriétés left, top, bottom et right. fixe : Un élément de position fixe est positionné par rapport à la fenêtre du navigateur. Il ne bougera pas, même si la fenêtre défile. relative : Un élément de position relative, se positionne par rapport à l'élément qui le précède. Un élément de position relative peut chevaucher d'autres éléments. absolue : Un élément de position absolue est positionné par rapport au premier élément parent qui a une position autre que statique. Si aucun élément n'est trouvé, le bloc conteneur est <html> petite précision pour la position absolute. En fait, l'élément en position absolute se placera en fonction des bords du navigateur s'il n'a pas d'élément parent référent, c'est à dire, un élément en position relative dans lequel il est contenu ! Ces propriétés se mettent en code de la sorte : - Code:
-
.name{ position: position_voulue; /** Donc fixed, relative ou absolute **/ } /** Par exemple **/ .foo{ position: absolute; } Si on a bien tout compris, cela explique pourquoi ça ne fonctionnait pas notre code ! Notre élément était de position statique, et donc, ne prenait pas en compte notre code. Pour que notre code soit pris en charge, il faut lui attribuer une autre position. Dans notre cas, on veut que notre élément se place par rapport aux bords de la page du navigateur. Donc on peut prendre soit une position fixe, soit une position absolue. Le résultat sera le même, la seule chose qui changera sera si la page défile : avec l'élément fixe, il ne bougera pas, alors qu'avec l'élément absolu, si . On va donc prendre ici, fixe, sans trop d'importance . Ce qui nous donne alors : - Code:
-
.name{ position: fixed; left: 50px; top: 30px; } Le résultat est : - Spoiler:
Avant de vous laisser tranquille, posons un problème :p On a la div A contenant une image en fond et du texte par dessus, et la div B, qu'on veut placer par dessus la div A, car elle contient une autre image avec faible opacité qu'on met par dessus le texte. Dans ce cas, on mettra notre div B en position relative et on la placera par dessus la div A grâce à top bottom left & top. Afin d'être certain qu'elle se place bien par dessus, on pourra utiliser la propriété z-index. En gros, z-index permet de dire quel élément va par dessus un autre. L'élément qui a le plus grand z-index se place par dessus Donc pour notre div B, on aura : - Code:
-
div.divb{ /**Position et placement de la div**/ z-index: 999; } 999 étant la plus grande valeur de z-index possible On aurait très bien pu faire aussi : - Code:
-
div.diva{ z-index: 1; } div.divb{ z-index: 2; } Voilà Tout simple C'est bon, tout compris ? Avez-vous besoin d'un exemple pour une position en particulier ? Ou pour toutes ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Lun 15 Fév - 19:38 | De mon côté, j'ai tout compris |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Mar 16 Fév - 19:35 | Voici quelques trucs et astuces avant de passer à autre chose Si on veut centrer un élément de position statique dans notre page, on peut faire : - Code:
-
.name{ margin: auto; } Néanmoins, il ne faut pas oublier d'indiquer la hauteur et la largeur de notre élément si on utilise margin: auto ! Car elle est calculée en fonction de la taille de notre élément Si on veut s'assurer qu'il n'y aura aucune marge extérieure ni intérieure, on peut : - Code:
-
.name{ margin: 0; padding: 0; } Si on attribue une position relative à un élément, et qu'on veut qu'il soit plus à gauche que sa position initiale par exemple, on utilisera left avec une valeur négative soit : - Code:
-
.name{ position: relative; left: -10px; } Il est possible de définir la valeur avec des %. C'est grâce à ça qu'on va centrer un élément qui n'est pas de position statique. Pour centrer un élément non statique dans une page, on mettra : - Code:
-
.name{ position: absolute; /** Position non statique **/ left: 50%; top: 50%; } /** OU **/ .foo{ position: absolute; right: 50%; bottom: 50%; } Mais attention ! Cela ne centre que l'élément s'il fait 1pixel ! Puisque que en fait, cela fait ça : - image:
L'élément se place à l'intersection des deux valeurs. Du coup si on l'agrandit, cela donnera ça : - image suite:
Il faudra donc jouer sur les valeurs : mettre left à 45% par exemple au lieu de 50 etc. Voili voilou, c'est fini pour les trucs et astuces ! J'aimerais donc maintenant que tu me donnes le code qui permettrait de fixer un élément en bas de la page. Donc un footer. Tu sais, quelque chose comme ça : - footer:
Bonne chance Si tu as des questions, je suis là ! |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mer 17 Fév - 9:41 | Bon, et bien on touche à la fin de la partie CSS ! Alors, on va donc finir notre partie, avec une dernière propriété : floatImaginons que nous avons une image et une div. Nous voulons mettre la div à côté de l'image. Impossible ! Oui, puisque div est une balise de type block, elle se mettra forcément en dessous. La propriété float est donc là pour pallier ce problème. Si nous voulons placer notre div à droite de l'image, on mettra : - Code:
-
<style>#name{ float: right; }</style> <body> <img src="image.png" alt="" /><div id="name">Lorem ipsum...</div> </body> - Exemple 1:
- Code:
-
<img src="http://zupimages.net/up/14/50/w9nu.png" alt="" /><div style="float: right; width: 500px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat nisi mi, in vestibulum est posuere venenatis. Mauris tincidunt, augue non molestie dapibus, arcu felis consectetur velit, sed dictum nulla nisi eu urna. Fusce ullamcorper quis est id accumsan. Sed eu lorem hendrerit, eleifend tellus vitae, vulputate lectus. Ut commodo lacinia orci, non sagittis erat rhoncus et. Aenean pulvinar metus rhoncus, maximus justo at, sollicitudin nunc. Integer sagittis nisi orci, quis pulvinar velit congue quis. Nulla sit amet odio in eros euismod commodo at id neque.</div> Résultat :
Et si on veut la placer à gauche : - Code:
-
<style>#name{ float: left; }</style> <body> <div id="name">Lorem ipsum...</div><img src="image.png" alt="" /> </body> - Exemple 2:
- Code:
-
<div style="float: left; width: 500px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat nisi mi, in vestibulum est posuere venenatis. Mauris tincidunt, augue non molestie dapibus, arcu felis consectetur velit, sed dictum nulla nisi eu urna. Fusce ullamcorper quis est id accumsan. Sed eu lorem hendrerit, eleifend tellus vitae, vulputate lectus. Ut commodo lacinia orci, non sagittis erat rhoncus et. Aenean pulvinar metus rhoncus, maximus justo at, sollicitudin nunc. Integer sagittis nisi orci, quis pulvinar velit congue quis. Nulla sit amet odio in eros euismod commodo at id neque.</div><img src="http://zupimages.net/up/14/50/w9nu.png" alt="" /> Résultat :
C'est tout bon ? Vu que c'est la dernière "leçon" sur le CSS, j'aimerais que tu me dises si tu as un quelconque remarque/question/doute sur tout ce qu'on a vu, pour qu'on le revoit là, avant l'exercice . |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mer 17 Fév - 11:00 | Pas de problème avec le float, on en avait déjà discuté sur Skype ! Comme ça, je vois rien. On verra avec l'exercice, je pense |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Jeu 18 Fév - 10:46 | Coucou Alors l'exo final ! On va me faire pas à pas ! Voici la création à réaliser : https://i.servimg.com/u/f84/19/33/14/37/captur10.jpgCette création est la page d'accueil d'un site. Assez complexe, je l'accorde :p. C'est pour ça qu'on va y aller pas à pas ! On va imaginer que c'est une commande d'un membre. Ça, c'est la maquette que le membre fourni. Comment procéder ? Déjà, il faut imaginer les ressources nécessaires. Qu'est-ce qu'il y a ? Quelles balises vais-je utiliser ? En CSS, quelles propriétés je vais utiliser ? Le site est-il responsive webdesign (s'adapte-t-il aux tablettes, aux téléphones...) ? Y'a-t-il des images que je dois demander au membre ? Des dimensions ? Des typographies particulières ? Des codes couleurs ? A chaque fois que tu dois répondre à une commande, c'est ainsi qu'il faut procéder. Du coup, je te laisse analyser la "maquette" du site et me dire ce que tu en penses. N'hésite pas à me poser les questions que tu souhaites, je suis aussi bien le formateur que le commandeur . |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Jeu 18 Fév - 22:13 | D'accord ! Alors, je vais commencer par te demander l'image que tu utilises pour le fond de ton site ! Et j'aurais besoin du nom des polices que tu utilises aussi. Pour le reste, on verra plus tard |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Sam 20 Fév - 11:53 | With pleasure ! L'image de fond est la suivante : https://i.servimg.com/u/f84/19/33/14/37/backgr10.jpgLa police utilisée est "Exo". Elle est disponible ici -> http://fonts.googleapis.com/css?family=ExoPour l'utiliser dans tes scripts, tu dois ajouter : Entre les balises head : - Code:
-
<link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css"> Et puis, si tu veux l'utiliser dans ton CSS : - Code:
-
#name{ font-family: 'Exo', sans-serif; } Vu qu'Exo est une police personnalisée, on doit la mettre entre guillemets (simples ou doubles), puis on doit indiquer une police de "secours" qui n'est pas personnalisée au cas où la police ne soit pas fonctionnelle. Ici, j'ai choisi la police sans-serif (qui elle, n'est aps à mettre entre guillemets). Voilà ! |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Sam 20 Fév - 12:03 | Danke schön ! |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Sam 12 Mar - 11:07 | Coucou On va donc essayer d'améliorer tout ça ! Pour rappel voici ton code : - Code:
-
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Exercice final CSS</title> <style type="text/css"> #barre_navigation { border:1px solid #0E0E0E; background-color:#0E0E0E; text-align : center; color: white; } .police{ font-family: 'Exo', sans-serif; } .bouton_page { border:1px solid #452727; background-color:#452727; } #fond_page { background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg'); background-size:100%; background-repeat: no-repeat; } .titre_principal { border: 0px solid black; max-width:350px; height: 40px; background-color: rgba(16, 16, 16, 0.5); color: white; text-align: center; right:50%; font-size:12px; margin-left: 37%; margin-top: 10px; } #cadre1 { border: 2px solid white; height: 200px; width: 300px; margin-left: 80px; margin-top : 130px; background-color: rgba(16, 16, 16, 0.5); } #cadre2 { float: right; border: 2px solid white; height: 200px; width: 300px; margin-right: 80px; margin-top : 200px; background-color: rgba(16, 16, 16, 0.5); display:inline ; } .titre2 { border: 1px solid #A6071B; background-color: #A6071B; color: white; text-align: center; font-variant: small-caps; width: 250px; margin-left:25px; } .paragraphe { color:white; font-size:12px; text-align: justify; border-left: 1px dashed white; border-right: 1px dashed white; margin-left: 15px; margin-right: 15px; } #cadre 3 { border: 0px solid black; background-color: rgba(255, 255, 255, 0.5); height: 150px; width: 90%; } #titre2b { border: 1px solid #A6071B; background-color: #A6071B; color: white; text-align: center; font-variant: small-caps; width: 250px; margin-left:40%; } #footer { color: white; font-size: 10px; } </style> <link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css"> </head> <body id="fond_page"> <nav id="barre_navigation" class="police"> <a href="page1.html" class="bouton_page">Page 1</a> <a href="page2.html" class="bouton_page">Page 2</a> <a href="page3.html" class="bouton_page">Page 3</a> </nav> <section class="police"> <h1 class="titre_principal">Bienvenue sur mon <strong>super site</strong> super trop génial</h1> <h1 class="titre_principal">Il parle de plein de choses intéressantes comme le chocolat</h1> <article id="cadre1"> <h2 class="titre2">mes connaissances</h2> <p class="paragraphe"> Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit. </p> </article> <article id="cadre2"> <h2 class="titre2">life is beautiful</h2> <p class="paragraphe"> Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit. </p> <p>Je ne suis qu'un test</p> </article> <article id="cadre3"> <h2 id="titre2b">mon pseudo</h2> <p>I'm the best</p> <p>My website is the best</p> </article> </section> <footer id="footer" class="police">Super création - By Pseudo - </footer> </body> </html> Alors, on va faire comme dans l'autre formation : faire de haut en bas . On va donc commencer par la balise body{}. Déjà, une bonne habitude à prendre est de s'assurer que la balise body et que la balise html ne font pas de marges automatiques. Du coup, dans chacun de nos codes, on va faire : - Code:
-
body, html{ margin: 0; padding: 0; } Tu comprendras très vite ce code dans la suite de la formation ou dans l'autre formation . Ensuite, notre body que tu as "appelé" fond_page a ce CSS d'après toi : - Code:
-
#fond_page { background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg'); background-size:100%; background-repeat: no-repeat; } Alors, ça pourrait marcher . D'ailleurs, ça marche ! Mais pas sur tous les navigateurs ! Et petit élément que j'ai oublié de préciser : l'image s'adapte à la taille de l'écran . Du coup, on va mettre l'image de fond, la centrer, ne pas lui mettre de marge et la "no-repeater" :p (ce que tu as fait). Il nous suffit donc de rajouter : - Code:
-
background-image: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat; Et d'enlever background-repeat: no-repeat; On gagne une ligne comme ça . Enfin, l'image de fond s'adapte à la taille de l'écran du coup on ajoute ça : - Code:
-
-webkit-background-size: cover; /* Old Chrome & Safari*/ background-size: cover; /* Standard version */ Tu ne connaissais pas cette propriété, et maintenant tu al connais :p. Après il nous suffit donc d'enlever ton background)size et voilà ! Enfin, il faut enlever le "-image" de "background-image" car sinon ça bug si on met tout sur une ligne :$ Le code est donc : - Code:
-
#fond_page { background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat; -webkit-background-size: cover; /* Old Chrome & Safari*/ background-size: cover; /* Standard version */ } Tu peux donc modifier ton code et essayer de modifier la taille de ta page web, tu verras que l'image prend la taille . |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Sam 12 Mar - 18:24 | Ohh ! D'accord. Ça donne déjà mieux, et avec ça, je m'y serais pas pris de la même manière pour placer les différents éléments |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Jeu 24 Mar - 13:53 | Coucou Désolé du retard :$. Du coup tu veux bien retoucher ton code avec ce que je t'ai donné et le mettre ici ? (comme ça on pourra avancer plus vite si à chaque fois tu remets ton code ). |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Jeu 24 Mar - 15:57 | Oui, bien sûr ! Voici le code ! - Code:
-
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Exercice final CSS</title> <style type="text/css"> body, html{ margin: 0; padding: 0; } #barre_navigation { border:1px solid #0E0E0E; background-color:#0E0E0E; text-align : center; color: white; } .police{ font-family: 'Exo', sans-serif; } .bouton_page { border:1px solid #452727; background-color:#452727; } #fond_page { background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat; -webkit-background-size: cover; /* Old Chrome & Safari*/ background-size: cover; /* Standard version */ } .titre_principal { border: 0px solid black; max-width:350px; height: 40px; background-color: rgba(16, 16, 16, 0.5); color: white; text-align: center; right:50%; font-size:12px; margin-left: 37%; margin-top: 10px; } #cadre1 { border: 2px solid white; height: 200px; width: 300px; margin-left: 80px; margin-top : 130px; background-color: rgba(16, 16, 16, 0.5); } #cadre2 { float: right; border: 2px solid white; height: 200px; width: 300px; margin-right: 80px; margin-top : 200px; background-color: rgba(16, 16, 16, 0.5); display:inline ; } .titre2 { border: 1px solid #A6071B; background-color: #A6071B; color: white; text-align: center; font-variant: small-caps; width: 250px; margin-left:25px; } .paragraphe { color:white; font-size:12px; text-align: justify; border-left: 1px dashed white; border-right: 1px dashed white; margin-left: 15px; margin-right: 15px; } #cadre 3 { border: 0px solid black; background-color: rgba(255, 255, 255, 0.5); height: 150px; width: 90%; } #titre2b { border: 1px solid #A6071B; background-color: #A6071B; color: white; text-align: center; font-variant: small-caps; width: 250px; margin-left:40%; } #footer { color: white; font-size: 10px; } </style> <link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css"> </head> <body id="fond_page"> <nav id="barre_navigation" class="police"> <a href="page1.html" class="bouton_page">Page 1</a> <a href="page2.html" class="bouton_page">Page 2</a> <a href="page3.html" class="bouton_page">Page 3</a> </nav> <section class="police"> <h1 class="titre_principal">Bienvenue sur mon <strong>super site</strong> super trop génial</h1> <h1 class="titre_principal">Il parle de plein de choses intéressantes comme le chocolat</h1> <article id="cadre1"> <h2 class="titre2">mes connaissances</h2> <p class="paragraphe"> Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit. </p> </article> <article id="cadre2"> <h2 class="titre2">life is beautiful</h2> <p class="paragraphe"> Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit. </p> <p>Je ne suis qu'un test</p> </article> <article id="cadre3"> <h2 id="titre2b">mon pseudo</h2> <p>I'm the best</p> <p>My website is the best</p> </article> </section> <footer id="footer" class="police">Super création - By Pseudo - </footer> </body> </html>
|
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : | |
| | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |