J'ai un problème, je n'arrive pas à faire des vignette comme sur ce site :
et moi ça donne ceci :
Les bordures c'est pour me faire le repérage, mais comme vous voyez sur la photo, rien est aligné.. et mon but c'est de mettre 3 ou 4 vignette sur la même ligne, et avoir la page entière centré.
code html :
<!DOCTYPE html>
<html>
<head>
<title>Exercice</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bloc_page">
<header>
<div id="navigation">
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Astuce</a></li>
<li><a href="#">Jeux vidéo</a></li>
<li><a href="#">Date de sortie</a></li>
<li><a href="#">Paris Games week</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div id="conteneur1">
<article>
<div id="element1">
<img src="images/gta5.jpg" alt="photo gta 5" />
<h3>Astuce GTA</h3>
<p>Vous trouverez ici toutes les astuces du jeu GTA.<br />
Vous aurez la possibilité de partager cette article !</p>
</div>
</article>
<article>
<div id="element2">
<img src="images/pokemon.jpg" alt="photo pokemon" />
<h3>Astuce Pokemon</h3>
<p><p>Vous trouverez ici toutes les astuces du jeu Pokemon.<br />
Vous aurez la possibilité de partager cette article !</p></p>
</div>
</article>
<article>
<div id="element3">
<img src="images/metroid.jpg" alt="photo metroid">
<h3>Astuce métroid</h3>
<p><p>Vous trouverez ici toutes les astuces du jeu métroid.<br />
Vous aurez la possibilité de partager cette article !</p></p>
</div>
</article>
<article>
<div id="element4">
<img src="images/cod.jpg" alt="photo cod">
<h3>Call Of Duty</h3>
<p><p>Vous trouverez ici toutes les astuces du jeu Call Of Duty.<br />
Vous aurez la possibilité de partager cette article !</p></p>
</div>
</article>
<article>
<div id="element5">
<img src="images/bf.jpg" alt="photo battlefield">
<h3>Astuce Battlefield</h3>
<p>Vous trouverez ici toutes les astuces du jeu Battlefield.<br />
Vous aurez la possibilité de partager cette article !</p></p>
</div>
</article>
<article>
<div id="element6">
<img src="images/assassin.jpg" alt="photo assassin">
<h3>Astuce Assassin Creed</h3>
<p><p>Vous trouverez ici toutes les astuces du jeu Assassin Creed.<br />
Vous aurez la possibilité de partager cette article !</p></p>
</div>
</article>
<aside>
<h3> Qui sommes nous ?</h3>
<p>Pierre 28 ans, passionné de jeu vidéo<br />
J'ai toujours étais passionné par les jeux vidéos, j'ai commençais à jouer à la Game-Boy, pour finir aujourd'hui sur Ps4<br />
Developpeur à temps perdu, je me suis lancais à créer ce site pour partager mes avis</p>
</aside>
</section></div>
</div>
</body>
</html>
code css
#bloc_page
{
width: 900px;
margin: auto;
}
header nav ul
{
list-style-type: none;
}
#conteneur1
{
display: flex;
flex-wrap: wrap;
border: 2px black solid;
}
#element1, #element2, #element3, #element4, #element5, #element6
{
border: 2px black solid;
}
- utilise des class et non des ID; - #element1, #element2, #element3, #element4, #element5, #element6 deviennent : .element. si les 6 éléments sont identiques, une seule classe pour chacun suffit; - supprimer les <p> et </p> en double, on doit avoir : <p> ... </p>, et l'élément 5 contient 1 <p> et 2 </p>, problème... - aside doit être en dehors de la <div class="conteneur1">
Les double <p>, c'est une erreur d’inattention que j'ai du faire au premier élément et ensuite j'ai fais un copier collé pour les suivants
Ce que je comprends pas, tu me dis d"utilisé des CLASS et non des ID mais ensuite tu me dis de ne pas mettre des CLASS car ça fait doublon avec <article> ?
Au final, le code doit être comme ceci ?
<section>
<div id="conteneur">
<article>
<img src="images/gta5.jpg" alt="photo gta 5" />
<h3>Astuce GTA</h3>
<p>Vous trouverez ici toutes les astuces du jeu GTA.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
<article>
<img src="images/pokemon.jpg" alt="photo pokemon" />
<h3>Astuce Pokemon</h3>
<p>Vous trouverez ici toutes les astuces du jeu Pokemon.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
<article>
<img src="images/metroid.jpg" alt="photo metroid">
<h3>Astuce métroid</h3>
<p>Vous trouverez ici toutes les astuces du jeu métroid.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
<article>
<img src="images/cod.jpg" alt="photo cod">
<h3>Call Of Duty</h3>
<p>Vous trouverez ici toutes les astuces du jeu Call Of Duty.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
<article>
<img src="images/bf.jpg" alt="photo battlefield">
<h3>Astuce Battlefield</h3>
<p>Vous trouverez ici toutes les astuces du jeu Battlefield.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
<article>
<img src="images/assassin.jpg" alt="photo assassin">
<h3>Astuce Assassin Creed</h3>
<p>Vous trouverez ici toutes les astuces du jeu Assassin Creed.<br />
Vous aurez la possibilité de partager cette article !</p>
</article>
</div>
<aside>
<h3> Qui sommes nous ?</h3>
<p>Pierre 28 ans, passionné de jeu vidéo<br />
J'ai toujours étais passionné par les jeux vidéos, j'ai commençais à jouer à la Game-Boy, pour finir aujourd'hui sur Ps4<br />
Developpeur à temps perdu, je me suis lancais à créer ce site pour partager mes avis</p>
</aside>
</section>
</div>
</body>
</html>
Au final, c'est quoi la différence entre <div id / <div class et <div span ?
<div id c'est pour former un bloc, <div span c'est pour sélectionner un mot ou une phrase mais le class ?
@tigerblue77
Je pourrais avoir un bon tuto ? Sur open je n'ai pas trouvé.
Lis le bien, il est très bien pour avoir toutes les bases et tu auras les réponses a tes questions
un <div> reste un <div> mais comme toutes les balises tu peux leur ajouter des attirbuts, un ID est un sélecteur unique (chaque id doit avoir une valeur différente) tandis qu'une "class" est un sélecteur qui peut apparaitre sur d'autres balises dans la meme page HTML. Tu n'as aucun attribut obligatoire, chaque balise a une forme propre. Lis le cours tu verras
Bonne journée et n'hésites pas a mettre ton sujet en "résolu" si c'est le cas
Et il faut savoir que les balises importent peu, c'est bien de choisir les bonnes mais tu peux donner n'importe quelle apparence a n'importe quelle balise, là n'est pas le problème
Et il faut savoir que les balises importent peu, c'est bien de choisir les bonnes mais tu peux donner n'importe quelle apparence a n'importe quelle balise, là n'est pas le problème
Et il faut savoir que les balises importent peu, c'est bien de choisir les bonnes mais tu peux donner n'importe quelle apparence a n'importe quelle balise, là n'est pas le problème
<!DOCTYPE html>
<html>
<head>
<title>Mon CV</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="photo">
<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
<h1>Thomas Bourdin</h1>
<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
</div>
</header>
<section>
<div class="conteneur">
<div id="liseret">
</div>
<article>
<h3 class="exp">Experiences professionnelles</h3>
<ul>
<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
<article>
<h3 class="qua">Qualifications et competences</h3>
<ul>
<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
<article>
<h3 class="for">Formation et diplome</h3>
<ul>
<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
</article>
</div>
</section>
</body>
</html>
Et si j'agrandis la largeur de la balise article :
Comme dis plus haut, avec position relative je pourrais faire en sorte de le changer de place ou alors lui mettre <div class> mais j'en suis sur que je merde quelques part
Mais je ne comprends toujours pas pourquoi quand je réduis/augmente la balise article, elle fait cette effet escalier..
Merci
- Edité par TylerTyler 12 novembre 2017 à 21:32:52
par défaut les éléments avec display: inline-block ont vertical-align: baseline. Baseline, c'est la ligne de base du texte, et ça correspond au "bas" (sans compter les dépassements comme les queues des p et des cédilles par exemple).
Pour changer cet état, et ici pour faire une grille, il faut mettre vertical-align: top
(bon, par contre, display: flex c'était très bien comme technique, faut juste bien le mettre sur le parent, je ne sais pas pourquoi on t'a déconseillé ça…)
- Edité par Lamecarlate 12 novembre 2017 à 21:51:55
Pas d'aide concernant le code par MP, le forum est là pour ça :)
par défaut les éléments avec display: inline-block ont vertical-align: baseline. Baseline, c'est la ligne de base du texte, et ça correspond au "bas" (sans compter les dépassements comme les queues des p et des cédilles par exemple).
Pour changer cet état, et ici pour faire une grille, il faut mettre vertical-align: top
(bon, par contre, display: flex c'était très bien comme technique, faut juste bien le mettre sur le parent, je ne sais pas pourquoi on t'a déconseillé ça…)
- Edité par Lamecarlate il y a environ 1 heure
Salut je ne l'ai pas déconseillé, j'ai simplement dis que pour ce qu'il souhaitait faire, ce n'était pas nécessaire mais oui, display flex est très bien pour faire certains rendus
par défaut les éléments avec display: inline-block ont vertical-align: baseline. Baseline, c'est la ligne de base du texte, et ça correspond au "bas" (sans compter les dépassements comme les queues des p et des cédilles par exemple).
Pour changer cet état, et ici pour faire une grille, il faut mettre vertical-align: top
(bon, par contre, display: flex c'était très bien comme technique, faut juste bien le mettre sur le parent, je ne sais pas pourquoi on t'a déconseillé ça…)
- Edité par Lamecarlate il y a environ 18 heures
Que dire, mise à part que c'est parfait
Merci beaucoup
- Edité par TylerTyler 13 novembre 2017 à 15:53:14
Problème vignette
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)