J'ai un problème sur le premier exercice du 3eme chapitre "apprenez à créer votre site avec html et css", j'ai cherché partout et relu le cours plusieurs fois sans comprendre ce que je faisais mal, voilà donc mon soucis :
j'ai un premier élément que je souhaiterai mettre sur la gauche et un autre élément au centre. (il s'agit d'un menu de liens et du titre principale du site.) je dois utiliser flexbox mais je n'arrive pas à réaliser ce que je veux, j'ai besoin d'aide
Voici ce que j'ai écris pour l'instant en html et css ainsi que le résultat, sur la capture, le menu de lien est bien placé, mais le texte devrait etre au milieu... si quelqu'un comprends l'erreur je suis toute ouïe ! :
<div id="topsection">
<header>
<h1 class="titrep">Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</header>
<nav>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
Il y a une solution beaucoup plus simple pour avoir deux éléments dans un header.
Si tu veux un menu à gauche et au centre des éléments ton header va être découpé en deux parties :
Une NAV
Une div qui représentera le reste du header
Sur ton NAV, il faut lui appliquer la propriété FLOAT : left qui lui permettra de rester à gauche.
Concernant ta DIV, il faut lui attribuer une taille et ensuite lui mettre un MARGIn : auto et tu peux centrer du texte par exemple.
Je te mets la solution ci-dessous, si c'est ce que tu voulais faire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
<style type="text/css">
header > nav {
float: left;
}
.wrapper {
width: 982px;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="wrapper">
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</section>
</header>
<h1>La Chine</h1>
<p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
<h1>L'Espagne</h1>
<p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
<footer>
<p>Copyright Le Blog Trotter<br />
</footer>
</body>
</html>
Tout d'abord merci beaucoup pour ta réponse, tu as très bien expliqué et c'est exactement le résultat que je veux obtenir.
Par contre j'aimerais comprendre comment l'obtenir avec flexbox.
Comment as-tu choisi la largeur de "wrapper", comme c'est une largeur fixe en px, ça ne peut pas être responsive... si ? Désolée je débute en web, je suis loin d'avoir toutes les notions
Je n'utilise absolument pas Flexbox je ne pourrai pas te faire le même exemple, il faudrait d'ailleurs que je prenne le temps d'y regarder. Néanmoins avant de vouloir utiliser des propriétés CSS avancée, je te suggère d'apprendre les bases des propriétés CSS.
Concernant la largeur fixe qui a été mise, c'est un standard de taille dans le monde du WEB. Si l'on veut un site entièrement responsive, il y a alors plusieurs façon d'y parvenir :
Soit tu utilises un framework comme Bootstrap qui te le fait en utilisant les classes correspondantes .
Soit tu le fais à la main (te faut déjà un haut niveau en CSS)
Dans tous les cas, les deux solutions utilisent la même logique CSS, c'est à dire l'utilisation de la propriété média. Pour chaque propriété média tu peux lui dire, tout ce qui est au-dessus d'une certaine taille d'écran, je veux appliquer tel ou tel style. Libre à toi ensuite de sortir des standards et de gérer des cas, comment dirais-je, un peu lourd à la longue.
Voici les standards de base et la notation à effectuer pour l'utiliser convenablement :
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
@blooster Tu te compliques beaucoup la vie avec tout ça. D’autant que tu tomberas toujours sur des cas que tu n’auras pas pris en compte. Il est largement plus safe et simple de faire son responsive en fonction du design du site lui-même, plutôt qu’en fonction de tailles plus ou moins "standardisées".
Concernant la largeur fixe qui a été mise, c'est un standard de taille dans le monde du WEB
Mmh, non… ? À la rigueur, 960px, pour la facilité de diviser en colonnes de 12, 16 ou 24 ; mais c'est largement dépassé aujourd’hui. Il n’y a pas de réel standard en la matière, puisqu’on part du principe que tout doit être responsive.
@AlexaneMingot C’est une demande du cours d’obtenir ce résultat en particulier ? C’est un cas particulier avec flexbox (mais faisable).
- Edité par EmmanuelBeziat 20 avril 2017 à 13:31:41
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Bonjour @rhooManu, c'est ce que j'ai compris... mais étant débutante je ne suis pas sûre... du coup j'ai utilisé flex en mettant une marge importante à la droite de mon menu pour décaler le titre au milieu, mais je sais que ce n'est pas une bonne solution. En responsive, mieux vaut utiliser les pourcentages d'écran pour gérer les éléments non ?
Non, les pourcentages sont imprécis et capricieux. Rien ne t'oblige à en utiliser, tu peux tout à fait avoir un contenu parfaitement fluide et responsive sans le moindre pourcentage. Je ne dis pas que les utiliser est mauvais, juste qu'il faut le faire avec parcimonie.
Sinon oui, utiliser des marges trop importantes peut être une mauvaise pratique, mais encore une fois ce résultat est un peu "technique", donc personne ne t'en voudra
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
alignement éléments header
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !