Pour le tp : créez un site pas à pas où il faut créer un site pour Zozor, Pour le titre h2 au début "Carnet de voyage", en utilisant flexbox en colonne le h2 "Carnet de voyage" se place bien en dessous du logo du h1 "Zozor" mais par contre ça saute une ligne plutôt que de se placer juste en dessous, même en utilisant la propriété justify-content: flex-start; je ne comprends pas pourquoi. Est-ce que quelqu'un pourrait m'aider s'il vous plaît ?
Voici mon code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="zozor_style.css" />
<title>Zozor - Carnet de voyage</title>
</head>
<body>
<header>
<div class="intitule">
<div class="logo_titre">
<img src="images/zozor_logo.png" alt="Logo de Zozor" />
<h1 class="titre">Zozor</h1>
</div>
<h2>Carnets de voyage</h2>
</div>
<nav>
<ul class="menu">
<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>
</nav>
</header>
<p>Retour sur mes vacances aux Etats-Unis</p>
<p>Voir l'article</p>
<section>
<article>
<div class="intitule_article">
<p><img src="images/ico_epingle.png" alt="Icône d'épingle" /></p>
<h1>Je suis un grand voyageur</h1>
</div>
<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.</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>
<h1>à propos de l'auteur</h1>
<p><img src="images/zozor_classe.png" alt="Photo de Zozor" class="photo" /></p>
<p><img src="images/bulle.png" alt="Bulle" /></p>
<p class="presentation">Laisse-moi le temps de me présenter: je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
<p class="presentation">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 class="icone_partage"><img src="images/facebook.png" alt="Icône de Facebook" /><img src="images/twitter.png" alt="Icône de Twitter" /><img src="images/vimeo.png" alt="Icône de Vimeo" /><img src="images/flickr.png" alt="Icône de Flickr" /><img src="images/rss.png" alt="Icône de RSS" /></p>
</aside>
</section>
<footer>
<div class="tweet">
<h1>mon dernier tweet</h1>
<p>Hii haaaaaan !</p>
<p>le 12 mai à 23h12</p>
</div>
<div class="photos">
<h1>mes photos</h1>
<p><img src="images/photo1.jpg" alt="Photo n°1" /><img src="images/photo2.jpg" alt="Photo n°2" /><img src="images/photo3.jpg" alt="Photo n°3" /><img src="images/photo4.jpg" alt="Photo n°4" /></p>
</div>
<div class="amis">
<h1>mes amis</h1>
<ul>
<li>Pupi le lapin</li>
<li>Mr Baobab</li>
<li>Kaiwaii</li>
<li>Perceval.eu</li>
<li>Belette</li>
<li>Le concombre masqué</li>
<li>Ptit prince</li>
<li>Mr Fan</li>
</ul>
</div>
</footer>
</body>
</html>
2 solutions: tu enlèves h1, ou tu laisses h1 en mettant padding:0 et margin:0. Le coup du baseline, je n'y avais pas pensé. j'avais fait un float avec deux div. La div supérieure vide, je l'avais réglé pour peu à peu baisser la div pleine comportant zozor pour la baisser en bas. Me suis compliqué pour rien.
Tu remarqueras que tu as plusieurs body dans ton css et qu'il te manque la ligne de séparation entre le header et le corps de ta page.
Bonjour, Merci de modifier le titre de votre sujet.
Mauvais titre
Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.
Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).
De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.
Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.
Pour modifier votre titre, éditez le premier message de votre sujet.
(titre originel : Demande d'aide pour le cours HTML/CSS)
Comme préciser au dessus les navigateurs ajoutent des mages par défaut sur certains éléments comme les Hn, les paragraphes, le body etc....
Je ne saurais que trop te recommander d'utiliser un reset CSS c'est une série de règles qui va "reset" tout tes éléments html pour partir sur de bonnes bases, pas de marges par défaut, pas de tailles de polices par défaut.
Le fait de les spécifier toi par la suite te permettra d'avoir un rendu plus cohérent en fonction du navigateur, car chaque navigateur n'applique pas les mêmes règles par défaut.
Point 2, utiliser un <h1> pour Zozor ne me semble pas très judicieux, cela ressemble plus au titre de ton site/marque qu'au titre de ta page, rien de grave mais pas une très bonne habitude selon moi si un jour tu as des aspirations à optimiser ton site pour être visibile sur les moteurs de recherche.
non, utiliser un reset est plutôt une mauvaise pratique maintenant, surtout celui d'Eric Meyer. (pour l'historique : c'est un reset qui lui a bien servi, mais c'était parce qu'à l'époque les navigateurs avaient des différences plus marquées, et il était un développeur avancé, qui a construit un reset parce qu'il savait exactement comment faire derrière)
Si vraiment il y a besoin d'aplanir, préférez normalize.css - mais le plus adapté reste encore de modifier précisément et uniquement les parties qui coincent.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Lamecarlate merci pour l'info Nonobstant Bootstrap utilise toujours un reset css custom, le site du new york times ou le site LDLC utilisent un reset css. Ils ne doivent pas être au courant, quelqu'un pour leur passer le mot ?
Si quelqu'un a le contact de codepen aussi, il faudrait les prévenir et leur demander d'enlever l'option qui permet d'en ajouter un car c'est une mauvaise pratique, des gens comme moi pourraient s'y méprendre.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
Développeur react freelance à Toulouse
Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Développeur react freelance à Toulouse
Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !