Le problème que j'ai est simplement que je ne réussis pas à mettre en ligne les éléments du Flexbox, comme vu dans la présentation du TP.
Voici mon code :
<!doctype html>
<html lang=“fr”>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Azura DelaRochelle</title>
</head>
<body>
<div id="bloc_page">
<header>
<picture id="logo" alt="La Fable de la Tortue et du Lièvre" srcset="#" />
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Index</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul></nav>
</header>
<section class="corps_du_texte"><article>
<p>Quaestione igitur per multiplices dilatata fortunas cum ambigerentur quaedam, non nulla levius actitata constaret, post multorum clades Apollinares ambo pater et filius in exilium acti cum ad locum Crateras nomine pervenissent, villam scilicet suam quae ab Antiochia vicensimo et quarto disiungitur lapie, ut mandatum est, fractis cruribus occiduntur.</p>
Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.</p>
Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.</p>
</article></section>
<footer>
<nav>
<ul>
<li>Auteur(e)s Principaux</li>
<li>Directrice de Projet : Azura De la Rochelle</li>
<li><a href="#">Projet Animal Beast</a></li>
<ul>
<li><a href="#">Collaborateurs</a></li>
<li><a href="#">?</a></li>
<li><a href="#">?</a></li>
<li><a href="#">?</a></li>
<li><a href="#">?</a></li>
<li><a href="#">?</a></li>
<li><a href="#">?</a></li>
</ul>
</nav>
</nav>
Copyring Réservé à Azura De la Rochelle. Tous droits réservés.
</footer>
</div>
</body>
</html>
/* Définition des polices personnalisées */
@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
font-family: 'cac_champagneregular';
src: url('cac_champagne-webfont.eot');
src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
url('cac_champagne-webfont.woff') format('woff'),
url('cac_champagne-webfont.ttf') format('truetype'),
url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}
/* Éléments principaux de la page */
body {
font-family: 'Trebuchet MS', Arial, sans-serif;
color:black;
background-color: rgb(255,242,86);
}
/* Sert à toute la page web pour que le contenu soit centré à l'intérieur d'un périmètre fixe. */
#bloc_page {
width: 1200px;
margin: auto;
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* En-Tête et Lien de Navigation */
/* Bannière */
Merci du coup de main, car c'est la pratique sur le header est juste un avant-goût de ce que je devrai faire dans le futur avec section et footer.
À bientôt et encore merci de l'aide fournie ! J'aimerais comprendre mes erreurs, car même si j'ai fait des modifications importantes pour clarifier les différentes sections, je suis toujours en train de chercher pourquoi Flexbox ne marche pas avec le header. J'ai beau même la fonctionnalité associée à ce périmètre, cela ne fontionne pas. J'aurais besoin d'indications, car même si j'ai un doute sur ce qui cause le problème, je ne réussis pas à le régler malgré mes essais et mes erreurs. J'ai colligé ce que j'ai fait pour le moment dans ce lien, et j'aimerais pouvoir faire exactement ce qui est indiqué comme titre ou sous-titre.
Merci et à bientôt.
- Edité par Marie-Ange Bussière 19 août 2017 à 19:15:48
Je réponds quelques mois plus tard. J'imagine que la question est déjà dépassée ou oubliée.
Je réponds quand même:
A mon avis, si tu veux mettre sur une seule ligne le menu de navigation, c'est bien sur celui-ci que tu devrais appliquer la Flexbox et non pas (seulement) sur le "header", en l'occurrence sur la balise "nav ul".
Merci! C 'est un bon exercice, pour les débutants comme moi, d'essayer de détecter les erreurs et de les corriger.
Flexbox CSS3 dans le header avec nav
× 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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)