Partage

Problème vignette

Sujet résolu
31 octobre 2017 à 13:47:12

Bonjour,

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;
}


Merci :)

-
Edité par TylerTyler 31 octobre 2017 à 22:50:02

31 octobre 2017 à 13:53:43

Salut,

Tuas mis deux fois ton CSS... ;)

31 octobre 2017 à 22:50:38

Mewen_bzh a écrit:

Salut,

Tuas mis deux fois ton CSS... ;)


Salut,

J'ai modifié ^^

Merci:)
1 novembre 2017 à 15:49:50

Hello,

tout d'abord :

- 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">

bonne structure :

<header>
  ...
</header>
<section>
  <div id="conteneur1">
    <article></article>
    <article></article>
    ...
  </div>
  <aside>
    ...
  </aside>
</section>

<div class="element"> ne sert à rien, et fait doublon avec <article> : à supprimer

Maintenant, mettre une largeur fixe ou en pourcentage à <article>

et enfin passer la section en flex pour avoir en largeur : les vignettes, puis le <aside>

1 novembre 2017 à 19:59:56

Bonsoir, sinon utilises :
display: table;
;)
#V #Tigerblue77
2 novembre 2017 à 12:02:37

Salut,

@ChrisLebure :

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é.

Merci à vous 2 :)
Bonne journée,

-
Edité par TylerTyler 2 novembre 2017 à 12:03:21

2 novembre 2017 à 16:06:13

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

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

#V #Tigerblue77
2 novembre 2017 à 19:45:11

Oui la structure que tu as postée est la bonne,
as-tu le CSS ?
3 novembre 2017 à 10:52:16

@ChrisLebure

#bloc_page
{
	border: 2px black solid;
	width: 900px;
	margin: auto;
}

#conteneur
{
	display: flex;
}

article
{
	border: 2px black solid;
	width: 300px;
	height: 500px;
	padding-left: 20px;
	
}

Ce qui donne :

J'ai essayé plusieurs balise, mais j'ai effacer car en faite je n'arrive pas à faire descendre les 3 dernière vignettes aligné avec les 3 premières.

Le but c'est que ça ne dépasse pas la bordure mais je n'arrive pas à trouver le code qui permet le retour à la ligne..

Il faut que chacune de mes vignettes ont un <div class> pour pouvoir les déplacer ? Avec la balise <position> ?

Merci,

-
Edité par TylerTyler 3 novembre 2017 à 10:56:03

4 novembre 2017 à 16:30:23

Pourquoi display: flex ? C'est
display: inline-block

qu'il te faut ^^'...

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 :)

#V #Tigerblue77
4 novembre 2017 à 22:46:08

tigerblue77 a écrit:

Pourquoi display: flex ? C'est

display: inline-block

qu'il te faut ^^'...

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 :)


Salut,

J'ai trouvé :

display: inline-block;
width: 200px;
height: 250px;
margin: 1em;

Aussi simple que ça.. ^^


-
Edité par TylerTyler 4 novembre 2017 à 23:06:42

5 novembre 2017 à 18:57:41

TylerTyler a écrit:

tigerblue77 a écrit:

Pourquoi display: flex ? C'est

display: inline-block

qu'il te faut ^^'...

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 :)


Salut,

J'ai trouvé :

display: inline-block;
width: 200px;
height: 250px;
margin: 1em;

Aussi simple que ça.. ^^


-
Edité par TylerTyler il y a environ 19 heures


Oui oui je sais bien mais je ne voulais pas avoir l'air trop sûr de moi ^^ ravi d'avoir pu t'aider :)

-
Edité par tigerblue77 5 novembre 2017 à 18:57:54

#V #Tigerblue77
12 novembre 2017 à 17:54:46

Salut ^^

Je reviens vers vous pour un petit soucis concernant  la balise <inline-block>.

J'ai compris comment fonctionner cette balise, part contre, quand on met 3 textes différents, les blocs se comportent bizarrement ;

alors qu'avec le même CSS, mais en mettant le même texte dans les blocs :

Mon CSS :

#blockpage
{
    border: 2px black solid;
    width: 1500px;
    margin: auto;
}

article
{
     border: 2px black solid;
    display: inline-block;
    width: 350px;
    height: 280px;
    margin: 1em;

}



Les bordures c'est vraiment pour montrer l’effet que ça fait.

Je pourrais les bouger avec position relative, mais il y a t'il pas un autre moyens ?

Pourquoi ça fait cette effet escalier ?

Merci :)

-
Edité par TylerTyler 12 novembre 2017 à 17:58:48

12 novembre 2017 à 21:22:22

Bonsoir,

Moi aussi je cherche à savoir la réponse de l'effet escalier ^^

Merci ,

Bonne soirée

12 novembre 2017 à 21:31:36

Hey

Voici Mon HTML

<!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>


mon css :

p, h1
{
	text-align: center;
}

h3
{
	color: maroon;
	border-bottom: 2px black solid;
}

body
{
	background-image: url("images/fondeffet.jpg");
}


.imageflottante
{
	box-shadow: 6px 6px 0px silver;
}

#photo a
{
    width: 190px;
   float: right;
}

article
{	
	border: 2px black solid;
	display: inline-block;
	width: 250px;

}

.conteneur
{
	border: 2px black solid;
}


Et voilà ce que ça donne en image :

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

Staff 12 novembre 2017 à 21:50:37

Bonjour,

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 novembre 2017 à 23:43:45

Lamecarlate a écrit:

Bonjour,

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 :)
#V #Tigerblue77
13 novembre 2017 à 15:52:36

Lamecarlate a écrit:

Bonjour,

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 :D

-
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é.
  • Editeur
  • Markdown