Je me suis mise à apprendre le HTML et le CSS il y a quelques jours, et j'en suis au TP de création de site web du cours "Apprenez à créer votre site web avec HTML5 et CSS3". Jusqu'ici tout se passait assez bien, mais je suis réellement bloquée sur ce TP: j'ai fait un dessin rapide de l'apparence que je voudrais pour mon site, mais absolument impossible de faire ce que je veux, alors que c'est faisable...
Je vous joins la "maquette" que j'ai faite.
Le résultat est très loin de ce que je veux, comme vous pouvez le constater... Tout se superpose, le fond coloré (les gouttes d'eau) ne prend pas toute la largeur ni sur le footer ni sur le header, je n'arrive pas à mettre la photo et le "à propos" en haut à droite.. Au secours!
Mon code est sûrement bourré d'incohérences, de conflits et de choses obsolètes, n'oubliez pas que je m'y suis mise il y a deux jours...
le html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lifeinmcr.css">
<title>Life in Manchester</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<div id="banniere">
<img src="banniere.png" alt="bannière">
<h1>Living in the Rainy City</h1>
</div>
</div>
<nav>
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section>
<article>
<div style="float: left; width: 33%;">
<ul>
<li><img class="img-circle" src="manchester4mini.png"><p>Food</p></li>
<li><img class="img-circle" src="manchester6mini.jpg"><p>Student tips</p></li>
</ul>
</div>
<div style="float: left; width: 33%;">
<ul>
<li><img class="img-circle" src="manchester3mini.jpg"><p>Nightlife</p></li>
<li><img class="img-circle" src="manchester5mini.png"><p>Shopping</p></li>
</ul>
</div>
<div style="float: right; width:33%;">
<ul>
<li><img class="img-circle" src="manchester1mini.png"><p>Faves</p></li>
<li><img class="img-circle" src="manchester7mini.png"><p>Pictures</p></li>
</ul>
</div>
</article>
<div class="asides">
<aside>
<img class="img-circle" src="vignette.png">
</aside>
<aside>
<h2>A propos de nous</h2>
<p>Bonjour et bienvenue à tous! Nous sommes Benjamin et Léa, un couple de français ayant vécu à Manchester.
Nous n'y avons pas vécu très longtemps, mais cela a suffit pour tomber amoureux de cette ville!
C'est pourquoi nous avons décidé de créer ce blog, afin de partager avec vous nos avis, conseils et photos,
pour vous faire découvrir la Rainy City, ou pour aider de futurs Mancuniens! Bonne visite!
</p>
</aside>
</div>
</section>
<footer>
<h3>Où nous trouver</h3>
<a href="#">Sur Instagram</a>
<a href="#">Sur Twitter</a>
<a href="#">Sur Facebook</a>
</footer>
</div>
</body>
</html>
Afin que nous puissions t'aider, merci d'éditer ton premier message et de mettre ton code en forme grâce au bouton prévu a cet effet (celui la </>), merci.
Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.
Am I dev ? 0x90
Pas d'aide concernant le code par MP, le forum est là pour ça :)