Page 2 sur 2 • 
1, 2
1, 2
MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055 
![[Cappuccino] On apprend mieux autour d'une tasse - Page 2 Empty](https://2img.net/i/empty.gif)
Re: [Cappuccino] On apprend mieux autour d'une tasse
Dim 3 Jan 2021 - 12:09
Hello !
Ok pour les noms, et tu l'as dit : temps que c'est pour toi, et que tu te comprends c'est nickel. Quand tu travailleras en groupe, ça sera un peu différent mais tu l'as bien comprit !
Alors, je comprends parfaitement ce qui te pose soucis.
Pour t'aider un peu : ici on veut que la ligne de titre est une hauteur définie et que le texte s'y adapte. Ca te parle un peu plus ?
Le reste me semble tout ok !
Ok pour les noms, et tu l'as dit : temps que c'est pour toi, et que tu te comprends c'est nickel. Quand tu travailleras en groupe, ça sera un peu différent mais tu l'as bien comprit !
Alors, je comprends parfaitement ce qui te pose soucis.
Pour t'aider un peu : ici on veut que la ligne de titre est une hauteur définie et que le texte s'y adapte. Ca te parle un peu plus ?
- Si tu ne trouves pas, une aide en plus:
- Regarde du coté de la propriété line-height dans le tuto
Le reste me semble tout ok !
Cappuccino- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Lun 4 Jan 2021 - 11:48
Ligne, donc line-height et non juste height ! Merci !
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
<style type="text/css">
/*corp de la page*/
body{
width: 850px;
margin: auto;
background-image: url('https://www.zupimages.net/up/21/53/kd1u.png');
background-repeat: repeat;
}
/*premier paragraphe*/
#parun{
color: lightgreen;
}
/*premier span*/
#spanin{
font-size: 18px;
font-family: verdana;
}
/*second span*/
#spandeux{
text-decoration: underline;
}
/*titre principal*/
h1{
width: 400px;
line-height: 60px;
margin-left: auto;
margin-right: 0px;
text-align: right;
}
/*liens*/
a{
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
color: white;
}
/*div contenu dans le sous-titre*/
#dsoustitre{
background-color: #E0CDA9;
border: brown 6px double;
padding: 5px;
}
/*trois paragraphe de la div*/
.paragraphes{
text-indent: 15px;
}
/*premier sous-titre*/
#sstitrun{
border: #E0CDA9 3px dotted;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p id="parun">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin quam id bibendum vehicula. Nunc ut nulla gravida, euismod nulla in, pellentesque nulla. Lorem ipsum dolor sit amet, <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Tambouillons,</a> consectetur adipiscing elit. Nullam mollis sit amet sem ac cursus. Aenean varius neque rutrum, iaculis risus eu, hendrerit leo. Phasellus lacinia ac tellus quis rutrum. Nam vitae leo a turpis dignissim elementum.
</p><!-- Saut de ligne
--><p>Sed tincidunt mollis risus sit amet dignissim. Pellentesque id tellus enim. Nunc quis nibh tristique, posuere leo in, rhoncus dui. Nullam eros nisi, consequat at est a, porta congue odio. Vestibulum egestas auctor viverra. Suspendisse interdum accumsan justo, quis molestie est gravida ac. Donec sodales cursus erat, non maximus felis volutpat non. Fusce in justo lectus.
</p>
<h2 id="sstitrun">Sous-titre</h2>
<div id="dsoustitre">
<p class="paragraphes">Maecenas risus risus, cursus varius tristique nec, cursus ac tortor. Etiam consequat leo neque, sed ornare erat tincidunt id. Donec vel rhoncus arcu. In scelerisque, orci at lobortis efficitur, dui felis lobortis nibh, id ullamcorper nulla dolor eget turpis. Aenean eu ligula elit. Praesent sodales a ligula ac interdum. Phasellus fringilla sit amet ligula eget eleifend.
</p>
<p class="paragraphes">enean sit amet nisl non lectus tempor accumsan a vel ante. <span id="spanin">Donec cursus quam libero</span>, id feugiat nulla vehicula vitae. Morbi at eros quis sapien iaculis hendrerit. Proin vel quam suscipit, posuere mi sed, vehicula risus. Suspendisse convallis consectetur porta. Curabitur blandit, magna eget suscipit ultricies, sem dui bibendum dolor, at eleifend arcu lorem eget elit. Cras venenatis imperdiet lorem a posuere. <span id="spandeux">Pellentesque hendrerit</span> pellentesque metus a interdum. Nam suscipit <span id="spantrois">quam eget eros pulvinar</span>, sit amet sagittis magna aliquet. Ut eget felis massa. Sed feugiat, augue vitae fringilla bibendum, lacus lorem dictum velit, a maximus augue arcu et eros. Maecenas sodales pharetra tempor. Donec elit felis, euismod non diam quis, scelerisque rutrum lacus. Morbi pulvinar sollicitudin dui sed dapibus. Donec vulputate est id erat accumsan luctus.
</p>
<p class="paragraphes">Curabitur hendrerit urna et semper tempor. Pellentesque sit amet lacus eget libero efficitur tempus. Phasellus varius enim magna, quis viverra nulla dictum a. Vestibulum ultricies eros lectus, quis commodo ante lobortis in. Vivamus vel justo et ligula aliquam lacinia. In ultrices dolor quis lorem volutpat, gravida dictum turpis ullamcorper. Duis magna turpis, accumsan sed aliquam ut, faucibus sit amet ex. Suspendisse posuere eros at diam luctus, venenatis malesuada justo tincidunt. Sed id quam dolor. In convallis, enim sodales dignissim congue, nisl massa tincidunt nulla, vitae auctor tortor justo id arcu.
</p>
</div>
<h2>Sous-titre</h2>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Donec tristique eu nulla eu lacinia. Cras hendrerit nibh nec rutrum fermentum. Curabitur ipsum ipsum, sodales et volutpat pharetra, elementum eget nulla. Sed eget velit mollis, faucibus nisi sit amet, fringilla tortor. Suspendisse fringilla orci in justo pulvinar, nec cursus diam molestie. Sed finibus velit nec bibendum suscipit. Ut congue mauris id dolor ornare bibendum. Vestibulum ultrices faucibus fringilla. Quisque gravida nisi urna. Cras viverra interdum libero, sed congue felis posuere vel. Aliquam blandit tincidunt diam vel condimentum.
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Lun 4 Jan 2021 - 12:01
Tu peux mettre les deux en fait height + line-height !
C'est mieux comprit ?
Tu peux passer à la suite
height + line-height ! C'est mieux comprit ?
Tu peux passer à la suite
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Lun 4 Jan 2021 - 14:52
Tout compris !
▬ Module 2 - Manipulation 3
▬ Module 2 - Manipulation 3
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
<style type="text/css">
/*corp de la page*/
body{
width: 850px;
margin: auto;
background-image: url('https://www.zupimages.net/up/21/53/kd1u.png');
background-repeat: repeat;
}
/*titre principal*/
h1{
width: 400px;
line-height: 60px;
margin-left: auto;
margin-right: 0px;
text-align: right;
}
/*liens*/
a{
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
color: white;
}
/*liens au survol*/
a:hover{
font-weight: normal;
font-style: italic;
}
/*tous paragraphes*/
p{
text-align: justify;
}
/*1er paragraphe div*/
p:first-child{
background-color: brown;
}
/*1ere lettre des paragraphes*/
p:first-letter{
color: red;
font-size: 30px;
}
/*premier span du descendant direct de la div*/
div p > span:first-child{
font-style: italic;
}
/*paragraphes fils direct d'une div*/
div > p{
text-align: right;
}
/*span qui descendent d'une div*/
div span{
font-weight: bold;
color: red;
}
/*premier paragraphe*/
#parun{
color: lightgreen;
}
/*premier span*/
#spanin{
font-size: 18px;
font-family: verdana;
}
/*second span*/
#spandeux{
text-decoration: underline;
}
/*div contenu dans le sous-titre*/
#dsoustitre{
background-color: #E0CDA9;
border: brown 6px double;
padding: 5px;
}
/*trois paragraphe de la div*/
.paragraphes{
text-indent: 15px;
}
/*premier sous-titre*/
#sstitrun{
border: #E0CDA9 3px dotted;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p id="parun">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin quam id bibendum vehicula. Nunc ut nulla gravida, euismod nulla in, pellentesque nulla. Lorem ipsum dolor sit amet, <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Tambouillons,</a> consectetur adipiscing elit. Nullam mollis sit amet sem ac cursus. Aenean varius neque rutrum, iaculis risus eu, hendrerit leo. Phasellus lacinia ac tellus quis rutrum. Nam vitae leo a turpis dignissim elementum.
</p><!-- Saut de ligne
--><p>Sed tincidunt mollis risus sit amet dignissim. Pellentesque id tellus enim. Nunc quis nibh tristique, posuere leo in, rhoncus dui. Nullam eros nisi, consequat at est a, porta congue odio. Vestibulum egestas auctor viverra. Suspendisse interdum accumsan justo, quis molestie est gravida ac. Donec sodales cursus erat, non maximus felis volutpat non. Fusce in justo lectus.
</p>
<h2 id="sstitrun">Sous-titre</h2>
<div id="dsoustitre">
<p class="paragraphes">Maecenas risus risus, cursus varius tristique nec, cursus ac tortor. Etiam consequat leo neque, sed ornare erat tincidunt id. Donec vel rhoncus arcu. In scelerisque, orci at lobortis efficitur, dui felis lobortis nibh, id ullamcorper nulla dolor eget turpis. Aenean eu ligula elit. Praesent sodales a ligula ac interdum. Phasellus fringilla sit amet ligula eget eleifend.
</p>
<p class="paragraphes">enean sit amet nisl non lectus tempor accumsan a vel ante. <span id="spanin">Donec cursus quam libero</span>, id feugiat nulla vehicula vitae. Morbi at eros quis sapien iaculis hendrerit. Proin vel quam suscipit, posuere mi sed, vehicula risus. Suspendisse convallis consectetur porta. Curabitur blandit, magna eget suscipit ultricies, sem dui bibendum dolor, at eleifend arcu lorem eget elit. Cras venenatis imperdiet lorem a posuere. <span id="spandeux">Pellentesque hendrerit</span> pellentesque metus a interdum. Nam suscipit <span id="spantrois">quam eget eros pulvinar</span>, sit amet sagittis magna aliquet. Ut eget felis massa. Sed feugiat, augue vitae fringilla bibendum, lacus lorem dictum velit, a maximus augue arcu et eros. Maecenas sodales pharetra tempor. Donec elit felis, euismod non diam quis, scelerisque rutrum lacus. Morbi pulvinar sollicitudin dui sed dapibus. Donec vulputate est id erat accumsan luctus.
</p>
<p class="paragraphes">Curabitur hendrerit urna et semper tempor. Pellentesque sit amet lacus eget libero efficitur tempus. Phasellus varius enim magna, quis viverra nulla dictum a. Vestibulum ultricies eros lectus, quis commodo ante lobortis in. Vivamus vel justo et ligula aliquam lacinia. In ultrices dolor quis lorem volutpat, gravida dictum turpis ullamcorper. Duis magna turpis, accumsan sed aliquam ut, faucibus sit amet ex. Suspendisse posuere eros at diam luctus, venenatis malesuada justo tincidunt. Sed id quam dolor. In convallis, enim sodales dignissim congue, nisl massa tincidunt nulla, vitae auctor tortor justo id arcu.
</p>
</div>
<h2>Sous-titre</h2>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Donec tristique eu nulla eu lacinia. Cras hendrerit nibh nec rutrum fermentum. Curabitur ipsum ipsum, sodales et volutpat pharetra, elementum eget nulla. Sed eget velit mollis, faucibus nisi sit amet, fringilla tortor. Suspendisse fringilla orci in justo pulvinar, nec cursus diam molestie. Sed finibus velit nec bibendum suscipit. Ut congue mauris id dolor ornare bibendum. Vestibulum ultrices faucibus fringilla. Quisque gravida nisi urna. Cras viverra interdum libero, sed congue felis posuere vel. Aliquam blandit tincidunt diam vel condimentum.
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Mar 5 Jan 2021 - 14:09
C'est vraiment pas mal du tout tout ça !!
Si tu as tout comprit tu peux passer à la suite =)
Si tu as tout comprit tu peux passer à la suite =)
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 7 Jan 2021 - 17:11
Je crois que j'ai réussi 
▬ Module 2 - Exercice final
▬ Module 2 - Exercice final
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Exo final module 2</title>
<style type="text/css">
/*Ajout des deux polices*/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*page complète*/
body{
background-color: #FDC689;
color: #444;
font-size: 14px;
line-height: 14px;
font-family: 'Poppins', sans-serif;
}
/*ensemble de la fiche - ce qui se trouve dans la 1ere div*/
#ensemble{
background-color: #A7936C;
background-image: url('https://pvereecken.fr/tambouille/design-base/bkg-bann.png');
background-repeat: repeat-x;
border: solid 2px #463017;
border-radius: 10px;
margin: auto;
width: 600px;
padding: 10px;
}
/* barre séparative, seconde div*/
#separation{
background-color: #463017;
height: 1px;
width: 60%;
margin: auto;
}
/*Les titres & sous-titre*/
h1, h2, h3{
color: #463017;
font-family: 'Pacifico', cursive;
}
/*Titres et sous-titres (niveau 2 et 3)*/
h2, h3{
background-color: #FDC689;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px;
}
/*Titre de ma page (niveau 1)*/
h1{
font-size: 34px;
text-align: center;
margin: 0px;
}
/*Titres (niveau 2)*/
h2{
font-size: 20px;
margin: 0px;
}
/*Sous-titres (niveau 3)*/
h3{
font-size: 16px;
margin-left: 10px;
}
/*Paragraphes texte*/
.textes{
text-align: justify;
}
/*première lettre des paragraphes*/
.textes:first-letter{
font-size: 22px;
}
/*Paragraphes des stats*/
.statistiques{
text-align: center;
margin-bottom: 30px;
}
/*textes des stats - span généraux*/
.statistiques > span{
background-color: #FDC689;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px;
padding-right: 0px;
color: #463017;
}
/*données des stats - span des span*/
span span{
background-color: #463017;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px;
padding-right: 0px;
color: #FDC689;
}
/*Les liens*/
a{
text-decoration: none;
color: #FDC689;
}
/*Liens au survol*/
a:hover{
text-decoration: underline;
color: #463017;
}
</style>
</head>
<body>
<h1>Titre de ma page</h1>
<div id="ensemble">
<a href="https://tambouille-raleuses.forumactif.com/" target="_blank" title="rejoindre la Tambouille"><img src="https://i.servimg.com/u/f83/20/22/38/10/bann110.png" alt="bannière Tambouille" />
</a>
<p class="textes">Morbi sollicitudin consectetur ipsum at luctus. Morbi egestas lectus elementum felis luctus sollicitudin. Aliquam erat volutpat. Proin at ipsum sem. Praesent porttitor ultricies malesuada. Integer pulvinar justo ut velit tempus rutrum. Proin vitae turpis et tellus dapibus commodo vitae sed metus. Nam vitae sapien ut sapien iaculis posuere in non dolor. Etiam sit amet turpis non nibh ullamcorper ornare id ac sapien. Pellentesque nec elit quam. Curabitur sagittis lectus et ante vehicula commodo.
</p>
<h2>Titre</h2>
<p class="textes">Nullam at rhoncus est. Cras ultrices libero eget leo pulvinar, sed sagittis ligula tempor. Proin at sem pulvinar, mollis purus eget, mattis metus. Sed rutrum ipsum eu lectus rhoncus efficitur. Suspendisse potenti. Etiam in arcu porttitor, ullamcorper orci et, dignissim augue. Nulla facilisi.
</p><!-- Saut de ligne
--><p class="textes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh nisi, varius vitae libero non, consequat pretium nulla. Cras non facilisis neque, ut condimentum neque. Pellentesque at sapien ut quam mattis luctus nec nec tortor. Nullam bibendum ullamcorper augue, bibendum convallis magna posuere nec. Aenean pretium ante placerat tristique rhoncus. Donec nisi nibh, pharetra non rhoncus id, tempor ut est. Sed non nisl mi. Aliquam condimentum neque eu molestie pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam blandit vehicula elit. Quisque odio sapien, consectetur ut lacus non, consectetur pellentesque leo.
</p>
<h3>Sous-titre</h3>
<p class="textes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas ac lacus auctor commodo. Fusce condimentum lorem vel pulvinar fringilla. Nunc et auctor nunc, nec vulputate lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vehicula pellentesque semper. Sed eu luctus dolor, id luctus tellus. Nullam luctus sagittis mi, vitae bibendum neque ultrices a. Ut egestas, sapien quis tempus eleifend, velit neque fringilla risus, et mattis felis neque vel nunc. Cras rutrum fringilla dui, ut consequat lacus pellentesque et. Nullam accumsan faucibus diam id consequat. Proin sagittis venenatis lacus varius laoreet. Nullam luctus augue sed augue bibendum, sed dignissim lectus placerat. Aliquam lacinia sapien at tincidunt interdum. Morbi vel ex vitae nibh iaculis semper a id turpis. Donec sed elementum lectus. Nulla sed tincidunt ipsum.
</p><!-- Saut de ligne
--><p class="textes">Quisque pharetra sit amet erat at sollicitudin. Donec eu finibus arcu, non condimentum est. Donec fringilla, magna maximus maximus elementum, ipsum lorem venenatis ante, vel varius dolor ante vel felis. Sed fringilla nulla quis sem egestas, non malesuada libero scelerisque. Vestibulum et purus molestie, faucibus lorem viverra, mattis purus. Aenean semper nec felis sed feugiat. Praesent auctor nulla in orci ullamcorper dignissim.
</p>
<h3>Sous-titre</h3>
<p class="textes">Fusce rhoncus augue dictum, ultricies eros condimentum, venenatis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultricies sit amet diam vitae sagittis. Nullam interdum justo fringilla, consequat ante eget, blandit mi. Nam laoreet lobortis risus. Donec imperdiet nunc sed felis pharetra, eget blandit leo sollicitudin. Quisque cursus arcu sit amet ultricies maximus.
</p><!-- Saut de ligne
--><p class="statistiques"><span>Ouverture <span>30 mars 2020</span></span> <span>Tambouilleurs <span>XX</span></span> <span>Messages <span>XX</span></span>
</p><!--
--><p class="statistiques"><span>Tutoriels <span>XX</span></span> <span>Libre-service <span>XX</span></span> <span>Partages d'expériences <span>XX</span></span></p>
<div id="separation">
<!--bloc de séparation-->
</div>
<p class="textes">A bientôt sur <a href="https://tambouille-raleuses.forumactif.com/" target="_blank" title="lien vers la Tambouille">La Tambouille des Râleuses</a></p>
</div>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 7 Jan 2021 - 17:54
Alors voyons ça !
le HTML est ok !
Au niveau de la CSS, je ne vois pas ceci :
Ici je ne vois pas partie en gras
Ici tu as moyen de faire plus simple, tu vois quoi ?
Ensuite ici :
Mais tu peux encore mieux sélectionner en disant : le span qui est directement dans le span qui est directement dans la classe statistiques. Tu essaies ?
Par contre, le padding right est un mauvais copier / coller je pense
le HTML est ok !
Au niveau de la CSS, je ne vois pas ceci :
• Les titres sont écrits en #463017 et en gras.
Ici je ne vois pas partie en gras
• Le bloc principal aura un fond composé d'une couleur (#a7936c), et d'une image (clic ) qui se répête horizontalement et qui est positionnée en haut à gauche. Il a des bordures pleines de 2px en #463017 et ses coins sont arrondis à 10px. Le bloc est centré dans la page, fait 600px de large et il y a un espace de 10px entre ses bords et son contenu.
Ici tu as moyen de faire plus simple, tu vois quoi ?
- Code:
padding: 5px;
padding-right: 0px;
Ensuite ici :
- Code:
span span{
background-color: #463017;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px;
padding-right: 0px;
color: #FDC689;
}
Mais tu peux encore mieux sélectionner en disant : le span qui est directement dans le span qui est directement dans la classe statistiques. Tu essaies ?
Par contre, le padding right est un mauvais copier / coller je pense
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 7 Jan 2021 - 18:22
Petit oubli, désolée ! J'ajoute donc :
Le padding j'ai tenté ceci :
C'est bien pour le dernier que je n'étais pas sûre du tout, mais je n'en étais pas loin !
Comme ceci ?
Pour le positionnement... un indice ? J'ai tenté le background-positionnement, mais ça donne un truc étrange donc j'ai raté une étape dans l'apprentissage je pense. Les positions absolute et relative ne vont pas aider non plus alors je sèche ^^'
Le code entier avec les fameux background-positionnement
- Code:
font-weight: bold;
Le padding j'ai tenté ceci :
- Code:
padding: 5px 0px 5px 5px;
C'est bien pour le dernier que je n'étais pas sûre du tout, mais je n'en étais pas loin !
- Code:
.statistiques span span{
Comme ceci ?
Pour le positionnement... un indice ? J'ai tenté le background-positionnement, mais ça donne un truc étrange donc j'ai raté une étape dans l'apprentissage je pense. Les positions absolute et relative ne vont pas aider non plus alors je sèche ^^'
Le code entier avec les fameux background-positionnement
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Exo final module 2</title>
<style type="text/css">
/*Ajout des deux polices*/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*page complète*/
body{
background-color: #FDC689;
color: #444;
font-size: 14px;
line-height: 14px;
font-family: 'Poppins', sans-serif;
}
/*ensemble de la fiche - ce qui se trouve dans la 1ere div*/
#ensemble{
background-color: #A7936C;
background-image: url('https://pvereecken.fr/tambouille/design-base/bkg-bann.png');
background-repeat: repeat-x;
background-position: top;
background-position: left;
border: solid 2px #463017;
border-radius: 10px;
margin: auto;
width: 600px;
padding: 10px;
}
/* barre séparative, seconde div*/
#separation{
background-color: #463017;
height: 1px;
width: 60%;
margin: auto;
}
/*Les titres & sous-titre*/
h1, h2, h3{
color: #463017;
font-weight: bold;
font-family: 'Pacifico', cursive;
}
/*Titres et sous-titres (niveau 2 et 3)*/
h2, h3{
background-color: #FDC689;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px;
}
/*Titre de ma page (niveau 1)*/
h1{
font-size: 34px;
text-align: center;
margin: 0px;
}
/*Titres (niveau 2)*/
h2{
font-size: 20px;
margin: 0px;
}
/*Sous-titres (niveau 3)*/
h3{
font-size: 16px;
margin-left: 10px;
}
/*Paragraphes texte*/
.textes{
text-align: justify;
}
/*première lettre des paragraphes*/
.textes:first-letter{
font-size: 22px;
}
/*Paragraphes des stats*/
.statistiques{
text-align: center;
margin-bottom: 30px;
}
/*textes des stats - span généraux*/
.statistiques > span{
background-color: #FDC689;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px 0px 5px 5px;
color: #463017;
}
/*données des stats - span des span*/
.statistiques span span{
background-color: #463017;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 5px;
color: #FDC689;
}
/*Les liens*/
a{
text-decoration: none;
color: #FDC689;
}
/*Liens au survol*/
a:hover{
text-decoration: underline;
color: #463017;
}
</style>
</head>
<body>
<h1>Titre de ma page</h1>
<div id="ensemble">
<a href="https://tambouille-raleuses.forumactif.com/" target="_blank" title="rejoindre la Tambouille"><img src="https://i.servimg.com/u/f83/20/22/38/10/bann110.png" alt="bannière Tambouille" />
</a>
<p class="textes">Morbi sollicitudin consectetur ipsum at luctus. Morbi egestas lectus elementum felis luctus sollicitudin. Aliquam erat volutpat. Proin at ipsum sem. Praesent porttitor ultricies malesuada. Integer pulvinar justo ut velit tempus rutrum. Proin vitae turpis et tellus dapibus commodo vitae sed metus. Nam vitae sapien ut sapien iaculis posuere in non dolor. Etiam sit amet turpis non nibh ullamcorper ornare id ac sapien. Pellentesque nec elit quam. Curabitur sagittis lectus et ante vehicula commodo.
</p>
<h2>Titre</h2>
<p class="textes">Nullam at rhoncus est. Cras ultrices libero eget leo pulvinar, sed sagittis ligula tempor. Proin at sem pulvinar, mollis purus eget, mattis metus. Sed rutrum ipsum eu lectus rhoncus efficitur. Suspendisse potenti. Etiam in arcu porttitor, ullamcorper orci et, dignissim augue. Nulla facilisi.
</p><!-- Saut de ligne
--><p class="textes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh nisi, varius vitae libero non, consequat pretium nulla. Cras non facilisis neque, ut condimentum neque. Pellentesque at sapien ut quam mattis luctus nec nec tortor. Nullam bibendum ullamcorper augue, bibendum convallis magna posuere nec. Aenean pretium ante placerat tristique rhoncus. Donec nisi nibh, pharetra non rhoncus id, tempor ut est. Sed non nisl mi. Aliquam condimentum neque eu molestie pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam blandit vehicula elit. Quisque odio sapien, consectetur ut lacus non, consectetur pellentesque leo.
</p>
<h3>Sous-titre</h3>
<p class="textes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas ac lacus auctor commodo. Fusce condimentum lorem vel pulvinar fringilla. Nunc et auctor nunc, nec vulputate lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vehicula pellentesque semper. Sed eu luctus dolor, id luctus tellus. Nullam luctus sagittis mi, vitae bibendum neque ultrices a. Ut egestas, sapien quis tempus eleifend, velit neque fringilla risus, et mattis felis neque vel nunc. Cras rutrum fringilla dui, ut consequat lacus pellentesque et. Nullam accumsan faucibus diam id consequat. Proin sagittis venenatis lacus varius laoreet. Nullam luctus augue sed augue bibendum, sed dignissim lectus placerat. Aliquam lacinia sapien at tincidunt interdum. Morbi vel ex vitae nibh iaculis semper a id turpis. Donec sed elementum lectus. Nulla sed tincidunt ipsum.
</p><!-- Saut de ligne
--><p class="textes">Quisque pharetra sit amet erat at sollicitudin. Donec eu finibus arcu, non condimentum est. Donec fringilla, magna maximus maximus elementum, ipsum lorem venenatis ante, vel varius dolor ante vel felis. Sed fringilla nulla quis sem egestas, non malesuada libero scelerisque. Vestibulum et purus molestie, faucibus lorem viverra, mattis purus. Aenean semper nec felis sed feugiat. Praesent auctor nulla in orci ullamcorper dignissim.
</p>
<h3>Sous-titre</h3>
<p class="textes">Fusce rhoncus augue dictum, ultricies eros condimentum, venenatis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultricies sit amet diam vitae sagittis. Nullam interdum justo fringilla, consequat ante eget, blandit mi. Nam laoreet lobortis risus. Donec imperdiet nunc sed felis pharetra, eget blandit leo sollicitudin. Quisque cursus arcu sit amet ultricies maximus.
</p><!-- Saut de ligne
--><p class="statistiques"><span>Ouverture <span>30 mars 2020</span></span> <span>Tambouilleurs <span>XX</span></span> <span>Messages <span>XX</span></span>
</p><!--
--><p class="statistiques"><span>Tutoriels <span>XX</span></span> <span>Libre-service <span>XX</span></span> <span>Partages d'expériences <span>XX</span></span></p>
<div id="separation">
<!--bloc de séparation-->
</div>
<p class="textes">A bientôt sur <a href="https://tambouille-raleuses.forumactif.com/" target="_blank" title="lien vers la Tambouille">La Tambouille des Râleuses</a></p>
</div>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Sam 9 Jan 2021 - 16:25
Hello !
Désolée pour le temps de réponse !
Pour le padding : oui c'est mieux =)
Hm, oui et non. Là, tu dis "le span dans le span dans la classe statistiques", mais le mieux ici pour cibler vraiment serait : le span directement dans le span qui est directement dans la classe
Pour le background position : ta propriété est bonne, mais tu ne peux pas la mettre deux fois. Soit tu précises X et Y si tu la dédouble, soit tu mets les deux dans la même
Tu vois ?
Désolée pour le temps de réponse !
Pour le padding : oui c'est mieux =)
C'est bien pour le dernier que je n'étais pas sûre du tout, mais je n'en étais pas loin !
Comme ceci ?
- Code:
.statistiques span span{
Hm, oui et non. Là, tu dis "le span dans le span dans la classe statistiques", mais le mieux ici pour cibler vraiment serait : le span directement dans le span qui est directement dans la classe
Pour le background position : ta propriété est bonne, mais tu ne peux pas la mettre deux fois. Soit tu précises X et Y si tu la dédouble, soit tu mets les deux dans la même
Tu vois ?
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Sam 9 Jan 2021 - 21:35
Coucou !
Tu t'excuse de quoi ? Nous sommes samedi, ça va ! Et quand bien même, tu réponds quand tu as le temps et l'envie donc ne t'excuse pas ! C'est déjà sympa de prendre de ton temps pour ce type de service et d'être patiente en expliquant/guidant au lieu de donner du tout cuit
Pour les positionnements j'ai donc ceci :
Et pour le sélecteur je penche pour ça :
Tu t'excuse de quoi ? Nous sommes samedi, ça va ! Et quand bien même, tu réponds quand tu as le temps et l'envie donc ne t'excuse pas ! C'est déjà sympa de prendre de ton temps pour ce type de service et d'être patiente en expliquant/guidant au lieu de donner du tout cuit
Pour les positionnements j'ai donc ceci :
- Code:
background-position-x: top;
background-position-y: left;
Et pour le sélecteur je penche pour ça :
- Code:
.statistiques > span > span
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Dim 10 Jan 2021 - 13:45
C'est presque ça
Pour le position, il ne faut pas confondre le x et le y
je te mets des liens pour que tu puisse vérifier ce que tu as fait dessus :
https://developer.mozilla.org/fr/docs/Web/CSS/background-position-x
https://developer.mozilla.org/fr/docs/Web/CSS/background-position-y
https://developer.mozilla.org/fr/docs/Web/CSS/background-position
Pour le position, il ne faut pas confondre le x et le y
je te mets des liens pour que tu puisse vérifier ce que tu as fait dessus :
https://developer.mozilla.org/fr/docs/Web/CSS/background-position-x
https://developer.mozilla.org/fr/docs/Web/CSS/background-position-y
https://developer.mozilla.org/fr/docs/Web/CSS/background-position
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|