Sujet Précédent Sujet Suivant

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

Fermé
gigi_dsss - Modifié le 26 mai 2019 à 19:13
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 - 26 mai 2019 à 20:59
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

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 4 647
26 mai 2019 à 18:57
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>

0
Réponse 2 / 5
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 19:13
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> ?
0
Réponse 3 / 5
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 19:15
Voici une capture de ce que je vois:
0
maou
26 mai 2019 à 19:47
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
0
maou
26 mai 2019 à 19:49
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
0
Réponse 4 / 5
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 19:58
Merci d'avoir pris le temps de m'avoir expliquer, je vais essayer d'appliquer ce que vous m'avez dit :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 20:00
Mais du coup comment je fais pour représenter ceci:
0
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 20:00
Pour mettre mon menu a gauche et mon texte a droite, si je ne dois pas utiliser float...
0
jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 4 647
26 mai 2019 à 20:56
https://www.w3schools.com/css/css_float.asp
0
gigi_dsss Messages postés 121 Date d'inscription dimanche 26 mai 2019 Statut Membre Dernière intervention 3 août 2020 12
26 mai 2019 à 20:59
Merci
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse