Positionnement Css

Sujet résolu

5 décembre 2017 à 5:07:37

Bonjour,

J'aimerais placer des blocks dans un div mais impossible de faire ce que veux.

Le Html :

<!DOCTYPE html>
<html>
    <head>
   		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>Cv</title>
	</head>

   <body>
		<!--Conteneur-->
		<div id="block_page">
			<!--Image et titre-->
			<div class="presentation">
				<p><img src="img_tete.jpg" alt="Noël Flantier" title="Visage de Noël Flantier" /></p>
				<h1>Noël Flantier</h1>
				<p>Jeune débutant codeur</p>
			</div>
			
		<div class="boxe">
			<!--Case-->
			<section>
				<h2>Mon Experience</h2>
				<ul>
					<li><b>De 2005 à 2006 :</b> Infiltration en Egypte</li>
					<li><b>De 2008 à 2009 :</b> Infiltration au Brésil</li>
					<li><b>De 2010 à 2011 :</b> Infiltration dans un film muet</li>
				</ul>
			</section>
			
			<section>
				<h2>Mes Compétences</h2>
				<ul>
					<li>Base en Html</li>
					<li>Base en Css</li>
					<li>Base de Php</li>
				</ul>
			</section>
			
			<section>
				<h2>Ma Formation</h2>
				<p>Formation via <a href="https://openclassrooms.com">Openclassroom</a></p>
			</section>
		</div>
		</div>
   </body>
</html>

Le Css:

body
{
	background-color: gray;
}

#block_page
{
	
}
.boxe
{
	display: flex;
	justify-content: center;
}

.presentation
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 2px solid black;
	text-align: center;
	width: 30%;
	padding: 1%;
	margin: auto;
}

.presentation img
{
	margin-left: 90%
}

.presentation h1
{
	margin-bottom: 1%; 
}

.presentation p
{
	margin-top: 60%;
}

section
{
	border: 2px solid black;
	width: 20%;
	padding: 1%;
	margin: auto;
}

Voilà si vous pouvez m'aider je vous en remercie par avance.

Bonne soirée

GuillaumeBo1

5 décembre 2017 à 11:09:24

Premièrement tu demandes que l'on corrige pour toi un TP de cours qui doit être fais seul...

Deuxièmement c'est inutile de mettre une balise d'image entre balise de paragraphe.

Troisièmement pour faire ce que tu souhaites et que tu as tenté de faire retourne voir la page du cours sur flexbox mais lis le attentivement et tu vas de suite comprendre normalement d’où viens ton problème.

Je ne peux t'aider plus que ça. te donner la réponse à un exo ne t'aidera pas à comprendre.

Un homme azerty en vaut deux.

Btintin

5 décembre 2017 à 11:19:00

Merci de votre réponse, je ne demandais pas la réponse mais une aide pour placer mon image à gauche de mon div presentation.

AntoineDupre

5 décembre 2017 à 11:26:01

utilise bootstrap c'est plus simple que de mettre des pourcentage ect

va voir du coté des "col-" une fois que tu la

-
Edité par AntoineDupre 5 décembre 2017 à 11:26:52

GuillaumeBo1

5 décembre 2017 à 11:36:35

AntoineDupre c'est un cours on s'en moque de bootstrap il est la pour apprendre.

S'il ne connait pas les bases, bootstrap ne l'aidera pas et puis on peut très bien s'en passer.

Sinon avec uniquement flex: initial; et display:flex; ça se met automatiquement de gauche à droite. Je te laisse chercher ou les placer grace à ton moteur de recherche préféré

-
Edité par GuillaumeBo1 5 décembre 2017 à 12:06:09

Un homme azerty en vaut deux.

Mewen_bzh

5 décembre 2017 à 11:36:44

La question ne concerne pas du tout Bootstrap, ni même un autre framework.

Tu dois effectivement utiliser flexbox. Par contre je te conseille de relire cette partie du cours et de prendre le temps de bien l’assimiler car tu fais des erreurs au moment de l'appliquer.

Je ne réponds pas aux messages privés.

AntoineDupre

5 décembre 2017 à 11:45:12

GuillaumeBo1 a écrit:

AntoineDupre c'est un cours on s'en moque de bootstrap il est la pour apprendre.

S'il ne connait pas les bases, bootstrap ne l'aidera pas et puis on peut très bien s'en passer

j'ai dit c'est plus simple j'ai pas dit que ont pouvais pas s'en passer

et meme en utilisant bootstrap je ne vois pas en quoi il n'apprend pas

Mewen_bzh

5 décembre 2017 à 12:09:32

C'est une question concernant l'une des activités notées du cours HTML et CSS, cours qui explique les bases mais (et c'est une bonne chose) sans Bootstrap.

Utiliser Bootstrap pour un exercice de ce cours c'est donc prendre le risque de recevoir une note de 0 pour cause de hors-sujet.

Je ne réponds pas aux messages privés.

EmmanuelBeziat

5 décembre 2017 à 12:56:58

Désolé, je viens ajouter mon grain de sel :

Bootstrap n'est PAS plus simple. Bootstrap est lourd, complexe à appréhender, et compliqué à surcharger pour faire du design. Bootstrap est bien pour de l’interface applicative (web app, espace admin, etc.). Surtout qu’en plus, il se repose sur jQuery, qu’il faut charger en sus.

Utiliser Bootstrap juste pour profiter de la grid, c'est pire qu’overkill. Autant prendre des grids simples, comme il en existe des centaines. Et même, une grid en flexbox : grillade, gridlex, flexgrid…

Bref, Bootstrap pour "faire son design", c'est clairement PAS "plus facile".

-
Edité par EmmanuelBeziat 5 décembre 2017 à 12:59:03

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

GuillaumeBo1

5 décembre 2017 à 13:00:13

AntoineDupre a écrit:

GuillaumeBo1 a écrit:

AntoineDupre c'est un cours on s'en moque de bootstrap il est la pour apprendre.

S'il ne connait pas les bases, bootstrap ne l'aidera pas et puis on peut très bien s'en passer

j'ai dit c'est plus simple j'ai pas dit que ont pouvais pas s'en passer

et meme en utilisant bootstrap je ne vois pas en quoi il n'apprend pas

Alors autant prendre WordPress non ? c'est plus simple au moins... Il est la pour faire un exo et l'exo ne lui dit pas prend bootstrap.

Mewen_bzh a écrit:

La question ne concerne pas du tout Bootstrap, ni même un autre framework.

Tu dois effectivement utiliser flexbox. Par contre je te conseille de relire cette partie du cours et de prendre le temps de bien l’assimiler car tu fais des erreurs au moment de l'appliquer.

Je n'utilise jamais Flexbox mais inline-block pour ce genre de chose

rhooManu Tu n'as plus ton logo IE ? :lol:

-
Edité par GuillaumeBo1 5 décembre 2017 à 13:03:28

Un homme azerty en vaut deux.

EmmanuelBeziat

5 décembre 2017 à 13:36:30

GuillaumeBo1 a écrit:

rhooManu Tu n'as plus ton logo IE ?

Hé non, je suis passé à Edge quand Windows 10 est sorti. Et puis j'ai eu envie de changer d’identité visuelle aussi

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

GuillaumeBo1

5 décembre 2017 à 13:41:07

rhooManu a écrit:

GuillaumeBo1 a écrit:

rhooManu Tu n'as plus ton logo IE ?

Hé non, je suis passé à Edge quand Windows 10 est sorti. Et puis j'ai eu envie de changer d’identité visuelle aussi

Edge... Edge... Ha oui le nouveau navigateur enfin UN nouveau + IE bien compacté ça m'a fait rire en voyant les processus quand tu le lances :lol:

Un homme azerty en vaut deux.

EmmanuelBeziat

5 décembre 2017 à 13:43:51

Oui, le moteur de rendu et JS ont changé (et c'est le principal), mais le coeur reste le même ; et c'est normal, réinventer la roue quand on l’a déjà, ce serait dommage.

Mais les versions d'Edge ont commencé à 12, car c'est bien la suite du logiciel qu’était IE et dont la dernière version était la 11.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Btintin

5 décembre 2017 à 17:58:57

Merci à tous je vais revoir la partie flexbox en espérant enfin réussir cette exercice.

Bonne soirée.