Problème avec la propriété float enn CSS

-
Bonjour,

Je suis étudiant et je dois remettre un travail en HTML et CSS dans 4 jours.
Je dois créer un site sur les motos et j'ai un problème; je n'arrive pas placer mon body en dessous de mes balises nav et header. Copiez le code source suivant dans des fichiers et voyez par vous mêmes... vous comprendrez...


index.html (Fichier HTML)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Nom de l'onglet -->

<head>
<title>Evolution de l'Harley Davidson de 1995 à 2019</title>
</head>

<!-- En-tête -->

<header>
<h1 class="Titre">Test</h1>
</header>
<nav>
<h2>Liens du site</h2>
<details>
<summary>Motos par année</summary>
<ul>
<li><a href="#1995">1995</a></li>
<li><a href="#1996">1996</a></li>
<li><a href="#1997">1997</a></li>
<li><a href="#1998">1998</a></li>
<li><a href="#1999">1999</a></li>
<li><a href="#2000">2000</a></li>
<li><a href="#2001">2001</a></li>
<li><a href="#2002">2002</a></li>
<li><a href="#2003">2003</a></li>
<li><a href="#2004">2004</a></li>
<li><a href="#2005">2005</a></li>
<li><a href="#2006">2006</a></li>
<li><a href="#2007">2007</a></li>
<li><a href="#2008">2008</a></li>
<li><a href="#2009">2009</a></li>
<li><a href="#2010">2010</a></li>
<li><a href="#2011">2011</a></li>
<li><a href="#2012">2012</a></li>
<li><a href="#2013">2013</a></li>
<li><a href="#2014">2014</a></li>
<li><a href="#2015">2015</a></li>
<li><a href="#2016">2016</a></li>
<li><a href="#2017">2017</a></li>
<li><a href="#2018">2018</a></li>
<li><a href="#2019">2019</a></li>
</ul>
</details>
<details>
<summary>Contact</summary>
<ul>
<li><a href="mailto:***@***">Par mail</a></li>
<li><a href="callto:0494089871">Par téléphone (Skype)</a></li>
</ul>
</details>
<details>
<summary>Informations</summary>
<p>Site écrit par Giorgios Doussis<br>
en 2019 en 4TTI pour le cours<br>
de Labo Info de M. Bourdane.<br>
<br>
Le travail était à remettre le 29 mai</p>
</details>
</nav>

<!-- Corps de texte -->

<body>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
<p>Coucou</p>
</body>
</html>


style.css (fichier CSS)


/*Polices personnels*/
@font-face
{
font-family: "versa";
src: url("versa.otf");
}

/*Page en CSS*/
header
{
float: right;
border: 1px solid orange;
margin-right: 5%;
width: 70%;
}

.Titre
{
text-align: center;
}

body
{
background-color: black;
border: 1px solid orange;
}

nav
{
float: left;
border: 1px solid orange;
width: 20%;
}
  • { font-family: versa; color: white;}

Configuration: Linux / Chrome 74.0.3729.131
Afficher la suite 

6 réponses

Messages postés
26487
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 octobre 2019
1825
0
Merci
Bonjour,

Visiblement .. tu ne connais pas la structure type d'un document html....

La balise <head> sert à contenir tous les attributs meta, le title, éventuellement les imports de css et de JS ..

Le BODY sert à contenir le "contenu" du site.
il faut y mettre tes HEADER et tes NAV


<!DOCTYPE html>
<html>
<head>
<!-- Nom de l'onglet -->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Nom de l'onglet -->
<title>Evolution de l'Harley Davidson de 1995 à 2019</title>
</head> 
<body>
  <!-- A partir d'ici.. TOUT ton contenu HTML -->
  <!-- En-tête -->
<header>
<h1 class="Titre">Test</h1>
</header>
  <nav>
   <!-- ... etc ....-->
  </nav>
   <div>  <!-- A la place de ton ancien body -->
    <!-- Corps de texte -->
    <p>Coucou</p>
    <p>Coucou</p>
    <p>Coucou</p>
    <p>Coucou</p>
    <p>Coucou</p>
    <p>Coucou</p>
    <p>Coucou</p>
   </div>
</body>
</html>


Commenter la réponse de jordane45
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5
0
Merci
Comme quoi on apprend toujours, merci pour l'info sur les balises nav et header dans body...
Cependant, mon texte est toujours entre nav et header, les 4 premiers coucou sont entre les 2 balises...

Et pourquoi as tu ajouté <div> ?
Commenter la réponse de gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5
0
Merci
Voici une capture de ce que je vois:
Vous manquez vraiment de connaissances basiques en HTML.
Le principe des balises c'est qu'elles contiennent quelque chose et indique la nature de leur contenu.
Par exemple un paragraphe de texte s'écrit avec la balise 'p', une image avec la balise 'img', un titre en utilisant les balises de titres(ou headings) h1,h2,...h6.
Comme toutes les balises de containers la balise div indique une séparation de la page(de divide = division de en français).
Il serais même mieux d'utiliser une balise avec un sens plus marqué que div qui n'exprime que la division d'un contenu.
Pourquoi indiquer un div? Simplement pour regrouper les éléments qu'elle contient. Ce qui aide aussi bien pour le positionnement/mise en page que pour identifier le contenu comme une entité pour les moteurs de recherches comme pour un humain qui regarde le code. Concrètement c'est ce que vous avez fait avec nav qui indique un bloc de liens navigants dans la page sauf qu'il faut le faire avec tous vos contenus(pas forcément nav donc sauf si ça concernne la navigation du site) et ici il y a div qui est utilisé pour cela.
Un div(ou section / article) indique un contenu , ici plusieurs paragraphes de textes.
Pour float vous indiquez que l'élément doit être en flottant, ça n'a pas vraiment de sens d'ailleurs pour le cas d'un seul élément car indiquer flottant signifie par rapport à quelque chose(la balise précédente). Par sécurité il faut indiquer que les éléments qui suivent et ne doivent pas 'flotter' en utilisant le css clear:both; sur l'élément consécutif.
Mais bon ici je vois pas l'intérêt d'utiliser le comportement flottant: l'élément désigné en flottant étant le premier à afficher dans la page il flotte par rapport à quoi?
Header étant censé être un en-tête(de la page ou d'une section de la page comme indique les balises containers, div, nav, article, section...) c'est assez paradoxal de le mettre de côté, en général c'est mieux de mettre un titre en avant pas de le faire apparaître en dessous ou à droite, en tout cas pour des langages qui se lisent de haut en bas et de droite à gauche...
Un header indiquant un en-tête si vous n'indiquez qu'un heading(h1) à l'intérieur a t'il vraiment lieu d'être?
Gardez le avec nav c'est la seule balise dont vous utilisez à peu près correctement le sens(sémantique).
à peu prés parce que regardez ceci:
https://www.w3schools.com/tags/tag_header.asp

Ou ceci:
https://www.w3schools.com/tags/tag_body.asp

En clair chaque balise est différente car se rapporte à un cas d'utilisation différent. Il faut donc utiliser les bonnes balises avant tout.

Le reste pour la mise en page c'est CSS qui intervient, mais cela n'a aucun rapport avec l'ordre(ou flux) indiqué dans le document et la signification des balises de contenus qui est à la base : HTML
ps: ce que vous voyez est bien ce que vous indiquez: que la balise header soit en position flottant à droite.
Supprimer le float et l'élement sera à la bonne place et dans le flux
Commenter la réponse de gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5
0
Merci
Merci d'avoir pris le temps de m'avoir expliquer, je vais essayer d'appliquer ce que vous m'avez dit :)
Commenter la réponse de gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5
0
Merci
Mais du coup comment je fais pour représenter ceci:
gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5 -
Pour mettre mon menu a gauche et mon texte a droite, si je ne dois pas utiliser float...
jordane45
Messages postés
26487
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 octobre 2019
1825 -
gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5 -
Merci
Commenter la réponse de gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5
0
Merci
Bon, bah mon site est fini, je pense qu'il serait correct de le partager, afin que d'autres s'inspirent de mon travail...
Mon lien dirige sur mon serveur personnel, si le lien ne charge pas, soit mon serveur n'est pas allumé, soit mon nom de domaine sera invalide, mais il y aurait plus de chance que ce soit mon serveur qui soit éteint...

https://doussis-nextcloud.ddns.net/index.php/s/X4qbAcbWgYp3j9a
gigi_dsss
Messages postés
85
Date d'inscription
dimanche 26 mai 2019
Statut
Membre
Dernière intervention
7 septembre 2019
5 -
Petit soucis avec mon serveur, désolé, le lien à été changé:
https://doussis-nextcloud.ddns.net/index.php/s/8GwMDBXx4JcwG3P
Commenter la réponse de gigi_dsss