Bonjour,

Je suis débutant et j'ai suivi le cours HTML et CSS en totalité. Je m'exerce à la réalisation d'un site web.

Malgré mes diverses tentatives et recherches sur ce site et d'autres,  je n'ai pas réussi à résoudre mon problème :

Supprimer la marge inférieure entre <p> et <nav>.

Il subsiste un espace blanc entre ma bannière et le bloc contenant mes liens de navigations. J'aurais voulu qu'il se touche comme dans l'exemple de Zozor.

Peut-être que cet espace correspond à la marge basse entre <p> et <img> contenu dans <p>.

J'ai essayé toutes les combinaisons possibles de margin et padding, mais sans résultat ; c'est la raison pour laquelle je fais appel à la communauté, même si ce problème peut paraître sans intérêt.

Voici mes codes :

Un grand merci à toutes les personnes qui prendront de leur temps pour m'aider et me permettre d'apprendre.

-
Edité par Bertrand H 17 mars 2018 à 16:30:41

Salut,

Ajoute un vertical-align: top; sur ton image.

Au passage :

• Tu n'as pas à mettre ton image dans un paragraphe. Les balises de paragraphes servent à scinder un bloc de texte en paragraphes, rien d'autre. Tu n'es pas obligé d'en mettre dès que tu dois mettre du texte ou une image.
• Donne des classes à tes éléments, plutôt que de les cibler par leur "nom". Ton CSS sera beaucoup plus lisible, et ça t'évitera de faire des imbrications à rallonge, en plus d'éviter un héritage non souhaité (tu pourrais avoir plusieurs balises footer dans ta page)
  
  

  <footer class="footer">
      <img class="footer-image" src="img/sanfrancisco.jpg" alt="Le Golden Gate">
      <nav class="menu-footer">
          <a class="menu-footer-item" href="#">Lien</a>
          <a class="menu-footer-item" href="#">Lien</a>
          <a class="menu-footer-item" href="#">Lien</a>
      </nav>
  </footer>

  .footer {
      border; 2px solid black;
      border-radius: 5px;
      box-shadow: 6px 6px 10px black;
      margin-top: 10px;
  }
  
  .footer-image {
      vertical-align: top;
      width: 100%;
      border-radius: 5px 5px 0 0;
  }
  
  .menu-footer {
      text-align: center;
      background: rgba(22,; 23, 16, .9);
  }
  
  .menu-footer-item {
      margin-left: 15px;
      color: white;
  }

• Et come tu peux aussi le voir au-dessus, préfère utiliser un background en rgba() plutôt qu'utiliser opacity. opacity va rendre tout le contenu de la balise transparent, pas juste l'élément en question.

rhooManu a écrit:

Tu n'as pas à mettre ton image dans un paragraphe

C'est un conseil donné dans le cours, même pire, c'est une obligation selon Mateo ... carrément ... pas de honte

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-images-18#/id/r-1609800

Merci d'utiliser les balises de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.

Oh. Connaissant la dreamteam du forum html/CSS (même si elle est vachement éparse maintenant), je suppose que ça a dû être signalé plein de fois et jamais corrigé…

Tiens, je vais relancer.

-
Edité par EmmanuelBeziat 17 mars 2018 à 17:14:27

rhooManu,

Un grand merci à toi pour m'avoir permis de régler ce problème de marge.

Quant au fait d'inclure une image dans un paragraphe, c'est effectivement une obligation dans ce cas, d'après le cours...

J'ai bien pris note de tes conseils au sujet de l'utilisation de class, et je tâcherai de m'en souvenir.

Benzouye

Désolé de ne pas avoir respecté le protocole, il s'agit de ma première intervention...

Je vais essayer de comprendre ce que vous m'avez dit afin de ne pas commettre la même erreur la prochaine fois.

Merci de votre compréhension.

Bonsoir,

J'ai un souci sur du css (et je suis un peu rouillé). Je voudrai supprimer l'espace entre 2 paragraphes.

J'ai utilisé le code suivant :

.p-standard {
   text-align: justify;
   font-size: 20px;
   margin: 0px;
}

Comme vous le voyez, j'ai mis un margin de 0px.

Pour autant, ça ne fonctionne pas. J'ai toujours la même marge. Auriez-vous une idée svp ?

Merci d'avance.

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.