je n'arrive pas à déplacer un bloc

15 décembre 2018 à 16:22:31

Bonjour, j'essaye de déplacer un bloc, mais en vin, sais pour : Tp création d'un site, pas à pas

J'ai regardé la vidéo explicative, mais ca ne marche pas.

Il faut regarder au niveau de la navigation(nav).

Je veux le placer en haut à gauche.

Mon code html :

<!DOCTYPE html>

<html>

<head>

<title>Zozor - Carnets de voyage</title>

</head>

<img src="images/zozor_logo.png" alt="Logo1" /> Zozor</h1>

<nav>

<div class="element">ACCUEIL</div>

<div class="element">CONTACT</div>

</div>

</nav>

<h2>carnet de voyage<h2>

</header>

<div>

<p>Retour sur mes vacances aux états-unis.</p>

</div>

<img src="images/ico_epingle.png" alt="Logo1" /> JE SUIS UN GRAND VOYAGEUR</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa.

Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.

Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis.

Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.

</p>

<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus.

Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam.

Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo.

Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor.

Fusce nec massa et risus dapibus aliquam vitae nec diam.

in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.

</p>

<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor.

Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis,

lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.

</p>

</article>

<aside>

<h3>A PROPO DE L'AUTEUR</h3>

<p>Laisse-moi le temps de me présenter: je m'appelle Zozor, je suis né un 23 novembre 2005.</p>

<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.

</p>

</p>

</aside>

</section>

<h4>MON DERNIER TWEET</h4>

<p>Hi haaaaaaaaaaan !

le 12 mai à 23h12

</p>

<h1>Mes photos</h1>

</div>

<ul>

<li><a href="#">Pupi le lapin</a></li>

<li><a href="#">Mr Baobab</a></li>

<li><a href="#">Kaiwaii</a></li>

<li><a href="#">Perceval.eu</a></li>

</ul>

<ul>

<li><a href="#">Belette</a></li>

<li><a href="#">Le concombre masqué</a></li>

<li><a href="#">Ptit prince</a></li>

</ul>

</html>

mon code css:

body

{

background-image: url("images/fond_jaune.png");

}

.nav1

{

list-style-type: none;

}

nav

{

flex: 300px;

float: right;

margin: auto;

}

element

{

position: absolute;

right: 0px;

bottom: 0px;

}

.div1

{

display: flex;

border: 2px solid #444;

margin: auto;

}

.element (1)

{

background-color: yellow;

margin: auto

}

.element (2)

{

background-color: red;

}

.element (3)

{

background-color: green;

}

.element (4)

{

background-color: #444;

}

bonne chance!!

Benevolar

16 décembre 2018 à 19:19:05

RqythwTrhhhhhhhhhhhhh a écrit:

J'ai regardé la vidéo explicative, mais ça ne marche pas.

Essaie de l'écouter en même temps.

RqythwTrhhhhhhhhhhhhh a écrit:

bonne chance!!

Un forum d'entre-aide n'est pas là pour faire le travail à ta place. Il est là pour t'apporter une aide, des pistes de réflexions pour trouver une solution par toi même plus facilement.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="Untitled-1.css" />
	<link rel="stylesheet" href="style.css" />
	<title>Zozor - Carnets de voyage</title>
	<style>
		body
		{
			background-image: url("images/fond_jaune.png");
		}

		.nav1
		{
			list-style-type: none;
		}

		nav
		{
			flex: 300px;
			float: right;
			margin: auto;
		}

		element
		{
			position: absolute;
			right: 0px;
			bottom: 0px;
		}

		.div1
		{
			display: flex;
			border: 2px solid #444;
			margin: auto;
		}

		.nav1 :nth-child(1n)
		{
			background-color: yellow;
			margin: auto;
		}

		.nav1 :nth-child(2n)
		{
			background-color: red;
		}

		.nav1 :nth-child(3n)
		{
			background-color: green;
		}

		.nav1 :nth-child(4n)
		{
			background-color: #444;
		}
		
	</style>
</head>
<body>

	<header>
	
		<h1><br/><img src="images/zozor_logo.png" alt="Logo1" /> Zozor</h1>
		
		<nav>
			<div class="div1">
				<div class="nav1">
					<div class="element">ACCUEIL</div>
					<div class="element">BLOG</div>
					<div class="element">CV</div>
					<div class="element">CONTACT</div>
				</div>
			</div>
		</nav>
		
		<h2>carnet de voyage</h2>
		
	</header>
	
	<section>
	
		<h2> Retour sur mes vacances aux états-unis. </h2>
	
		<article>
		
			<h3><br /><img src="images/ico_epingle.png" alt="Logo1" /> JE SUIS UN GRAND VOYAGEUR</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa.
			Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
			Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.
			Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis.
			Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.
			</p>
			<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus.
			Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam.
			Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo.
			Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor.
			Fusce nec massa et risus dapibus aliquam vitae nec diam.
			in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.
			</p>
			<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor.
			Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
			Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis,
			lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.
			</p>
			
		</article>
	
		<aside>
		
			<h3>A PROPO DE L'AUTEUR</h3>
			<p><br/><img src="images/zozor_classe.png" alt="logo2" /></p>
			<p>Laisse-moi le temps de me présenter: je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
			<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
			<p>
				<img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" />
				<img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" />
				<img src="images/rss.png" alt="RSS" />
			</p>
			
		</aside>
	
	</section>
	
	<footer>
	
		<h4>MON DERNIER TWEET</h4>
		<p>Hi haaaaaaaaaaan ! le 12 mai à 23h12</p>
		<div id="mes_photos">
			<h1>Mes photos</h1>
			<p>
				<img src="images/photo1.jpg" alt="Photographie" />
				<img src="images/photo2.jpg" alt="Photographie" />
				<img src="images/photo3.jpg" alt="Photographie" />
				<img src="images/photo4.jpg" alt="Photographie" />
			</p>
		</div>
		<ul>
			<li><a href="#">Pupi le lapin</a></li>
			<li><a href="#">Mr Baobab</a></li>
			<li><a href="#">Kaiwaii</a></li>
			<li><a href="#">Perceval.eu</a></li>
		</ul>
		<ul>
			<li><a href="#">Belette</a></li>
			<li><a href="#">Le concombre masqué</a></li>
			<li><a href="#">Ptit prince</a></li>
			<li><a href="#">Mr Fan</a></li>
		</ul>
		
	</footer>
</body>
</html>

J'ai rendu le code valide w3c, j'ai fermé les balises qui ne l'étaient pas et j'ai corrigé les éléments (1,2,3) qui n'avaient aucun sens. Pour ce qui est du menu en haut à gauche, comment le veux tu exactement ? Au dessus du Logo1_Zozor ? À sa gauche ? En dessous ?