28172 sujets

CSS et mise en forme, CSS3

Problème de texte et barre de navigation

Bonjour,
Je suis débutante et je n'arrive pas à descendre mon texte en dessous de la barre de navigation et je ne trouve pas de solutions
Mon texte est dans mon "body" donc je veux mettre une marge dans "body" mais cela fait descendre mon texte et ma barre de navigation. Je voudrais uniquement faire descendre mon texte upload/1584478052-79171-capture.png
upload/1584478081-79171-capture.png
Merci à ceux qui pourront m'aider.

CSS : 
h2 {
  color: #e8907b;
  margin-right: auto;
  margin-left: auto;
  font-family: eurofurence;
  margin-bottom: 10px;
  font-size: 35px;
  padding: 20px;
}
h3 {
  color: #e8907b;
}
p {
  text-align: justifiy;
  font-family: calibri;
}

img {
  height: 500px;
  width: auto;
  margin-left: 190px;
  margin-right: 190px;
}

h1 {
  text-align: justify;
  font-family: eurofurence;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
  color: black;
  height: 40px;
  width: 1400px;
  background-color: #e8907b;
  border-style: solid;
  border-width: 2px;
  border-color: #e8907b;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -100px;
  margin-bottom: 200px;
  position: fixed;
  top: 170px;
}
body {
  background-color: ivory;
  text-align: justify;
}
td {
  border: solid 1 px black;
}
nav ul {
  padding-left: 100px;
  margin: 0px;
  list-style-type: none;
  text-align: center;
  position: fixed;
  margin-top: -20px;
}
nav li {
  display: inline-block;
  width: 200px;
  height: 20px;
  margin: 0px;
  padding: 20px;
  border-right: 1px solid;
  text-align: center;
  margin-left: 7px;
  margin-top: 0px;
}
nav li:hover {
  background-color: white;
  line-height: 450px;
}
nav li a {
  text-decoration: none;
  color: #e4947b;
}
header img {
  position: fixed;
  margin-left: 0px;
  width: 90px;
  height: 70px;
  margin-top: -30px;
}

edit : remise en forme du code CSS partagé
Modifié par gcyrillus (17 Mar 2020 - 22:01)
Bonjour,
sur son html, <body> n'englobe pas le <nav> et le <head>
Par contre, c'est sur <p> qu'il faut utiliser margin pour le faire descendre, pas sur <body>

Correction : bien sûr que je m'étais trompé de deux caractères !!! C'est le <header> qu'il fallait lire sur la première ligne. Smiley confused
Modifié par Bongota (20 Mar 2020 - 20:28)
Administrateur
Bonjour,

comme dit, body doit contenir tout le contenu de ta page (sauf ce qui est déjà dans head). L'élément html contient donc 2 éléments seulement : head puis body. html est précédé du doctype (déjà OK) et porte un attribut lang pour indiquer la langue du document <html lang="fr">

Ce qui est actuellement l'élément body devrait je suppose être un élément main. Il contient le contenu principal de la page (tout sauf entête / header, menu de navigation / nav et pied de page / footer).
Tu peux regarder les gabarits de https://schnaps.it que Raphaël vient de mettre à jour. Un clic sur une mise en page, voir l'onglet HTML de chaque Codepen embarqué dans la page Smiley smile

edit : ton image avec alt="logo" devrait plutôt avoir comme alternative textuelle alt="(le nom de ton site)". C'est ce que va entendre / percevoir un non-voyant ou mal-voyant ou une personne ayant désactivé les images. Savoir qu'on est sur "alsacreations.com" c'est plus informatif que "logo" (ne précise pas le .com dans ton cas. Nous on doit parce que l'agence web c'est .fr et le site communautaire .com mais c'est une exception !)
Si tu en fais un lien (élément a contenant img) de retour à l'accueil alors ce sera plutôt

<a href="/">
  <img src="..." alt="accueil - (nom du site)">
</a>

parce que l'image aurait alors la fonction de mener à une autre page.

Concernant l'élément title dans head, tu peux ajouter le nom du site sur le canevas
<title>(nom de la page) - (nom du site)</title>
.
Ca aide à bien se repérer
Modifié par Felipe (19 Mar 2020 - 09:57)
Sujet clos
Aller à