float ou margin ?

Bonsoir les codeur,

J'ai rejoins la formation premium pour développeur web junior ravis d'être parmis vous !

Je rencontre un soucis lors du cours html et css ( plus CSS ) sur le float et les margin ... bruuuuhhh !

j'ai fait l'activité sur le "faux cv", j'ai mis un float:right; a un bloc quand je rétrécie la page à droite mon cv rétrécie, mais tout traverse la page à gauche !!!!! j'en suis sur que le problème est simple à régler mais qu'est se que c'est ....

Je débute donc sir ma page de code est moche, hésitez pas à vous tirer les cheveux ! Merci d'avance pour vos futur réponses.

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" /> 
	<link rel="stylesheet" type="text/css" href="Cv.css">
	<title>Dark Maul</title>

</head>


<body>

	<div id="Main">
		<div class="menu"></div>
		<div class="menu"></div>
		<div class="menu"></div>
	</div>

	<header id="base">
		
		<div class="colonne red">

		<a href="Dark Maul Big.jpg" target="_blank"><img src="Dark Maul small.jpg" alt="Dark Maul" title="The King" class="photo"></a><br><br>
		</div>

		<div class="colonne blue">

		<h1>Dark Maul</h1>

		<p>Old dancer, 3D artist, Developpeur Web spécalisé Frontend Débutant <br><br><br><br><br><br><br><br><br> </p>
		</div>

	</header>

	<div id="contenu">
		<div class="experience">
			<h2> Mon expérience </h2><br>

			<ul>
				<li><strong>De 1999 à 2007</strong>: Fondateur et lieutenant de l'armée des sit, entrainer et née de sang pur avec le pouvoir de la force</li><br>
				<li><strong>De 2007 à 2013</strong>: Devenu chef intégrante et mercenaire en temps libre des force impérial des sit pour anéantir les jedi du reste du monde </li><br>
				<li><strong>De 2014 à 2015</strong>: tué par Obiwan kenobi, la honte ...</li>

				<a href="https://www.youtube.com/watch?v=Qp91xlsaKSo" target="_blank" title="tu va kiffer">Liens vers ma disparition</a>

			</ul><br>
		</div>

		<div class="competences">

	 		<h2>Mes compétences</h2><br>

			<ul>

				<li>Notion en logiciel 3D avec Maya/Blender/zbrush</li>
				<li>Notion de logiciel vidéo avec After Effects</li>
				<li>Notion de logiciel de montage avec Photoshop</li>
				<li>Débutant sur HTML 5 et CSS3</li>

			</ul><br>
		</div>

		<div class="formation">
	<h2>Ma formation</h2><br>

			<ul>

			<li>Allez visiter ce site il est génial <a href="https://openclassrooms.com/fr/paths" target="_blank" title="Tu va voir c'est vraiment super !"> liens vers Openclassroom</a></li>
				
			</ul>	
		</div>	
	</div>	


</body>
</html>

@font-face {
    font-family: 'philosopherregular';
    src: url('Philosopher-Regular-webfont.eot');
    src: url('Philosopher-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Philosopher-Regular-webfont.woff2') format('woff2'),
         url('Philosopher-Regular-webfont.woff') format('woff'),
         url('Philosopher-Regular-webfont.ttf') format('truetype'),
         url('Philosopher-Regular-webfont.svg#philosopherregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body
{
	background: url("Fondnoir.jpg") fixed no-repeat;
}


h1
{
	font-family: "philosopherregular";
	font-size: 90px;
	color: white;
	text-decoration: underline;
	text-align: center;
	text-shadow: 3px 3px 3px black;
	
}
p
{
	font-family: "philosopherregular";
	color: white;
	text-decoration: underline;
	text-align: center;
	font-size: 20px;
	
}
h2
{
	text-shadow: 5px 5px 5px black;
	text-align: center;
	color:#FC7307;
}

.photo
{
	float: right;
}

ul
{
	font-family: "philosopherregular";
	border: 3px white solid;
	border-radius:20px / 10px;
	box-shadow: 4px 4px 4px black;
	color: white;
	font-size: 1.3em;

	
}

a
{
	color: 	#87CEFA;

}

img
{
	border: 3px black solid;
	box-shadow: 5px 5px 5px black;
}

/*Menu de gauche*/

#Main
{
	
	width: 300px;
	height: 1200px;
	background:url("ardoise.jpg");
	float: left;
	position: absolute;
	box-shadow: 3px 3px 3px;
	margin-right: auto;

}

/*header*/

#base{
	display: flex;
	width:2000px;
	height: 500px;
	justify-content: space-around; 
	flex-direction:row-reverse;
	float: 
	box-shadow: 4px 4px 4px black;
	background: url("ardoise.jpg") no-repeat ;
	
			
}
.colonne
{	width: 300px;
	height:100px;
}

.blue
{	
	width: 500px;
	height:300px;	
	margin: auto;
		
}

.red
{
	float: right;
	margin: 50px 50px;

}

/*contenu */

#contenu
{
	display: flex;
	width: 2000px;
	height: 700px;
	justify-content: space-around;
	margin:20px 100px 0px 300px;
	float: right;
}

.experience
{
	width: 700px;
	height:100px;
	margin-left: auto;	
}

.competences
{
	width: 700px;
	height:100px;
	margin-left: 10px;
}

.formation
{
	width: 700px;
	height:100px;
	margin-left: 10px;	
}

-
Edité par YounesMazouar 26 mars 2019 à 21:45:50

YounesMazouar

26 mars 2019 à 20:17:06

Zoki_Marciano

26 mars 2019 à 21:22:19

utilises le bouton de mise en forme de code </> pour poster du code ou un codepen au lieu des captures d'écran.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

26 mars 2019 à 21:48:10

Thx @zoki_Marciano je ne savais pas ! UP

noopy360

26 mars 2019 à 22:00:37

Bonsoir je me permet de te montrer ce code pen dit toi que la position absolute c'est rarement une bonne solution... Si tu as besoin d'explication reviens ! Il y a aussi d'autres façon de faire mais moi je ferais comme ça !

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

flex box

Supprimer

Modérer

Signaler le message aux modérateurs