28199 sujets

CSS et mise en forme, CSS3

Probleme barre css

Bonjour, je suis entrain de finaliser mon design de page, mais j'ai un soucis depuis que j'ai incorpore mon footer j'ai une barre qui apparrait sur ma nav barre quand je descend dans la page, la nav bar est fixe.
https://ibb.co/hK6dhYd

<body>
      <?php
        require('include/php/navbar.php');
      ?>

    <div class="presentation">
    <ul class="gauche">
        <img src="image/test-site.jpg" alt="">
      </ul> 
      <ul class="droit">
        <h1 class="texte">Présentation</h1>
        <p>Bonjour et bienvenue sur mon site.....................................
          ............................
          .............................
          ...............
          .........................
          .......................
        </p>

      </ul>  

    </div>

    <?php
      require('include/php/footer.php');
    ?>

    <script src="script.js"></script>
  </body>


/*-----Accueil-----*/
.presentation{
  background-color: white;
  width: 1500px;
  height: 700px;
  border: 15px solid white;
  border-radius: 50px;
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
  padding: 150px;
  margin: auto;
  margin-top: 200px;
  margin-bottom: 150px;
}
.gauche{
  background-color: #333;
  border-radius: 30px;
  width: 600px;
  height: 400px;
  margin-top: -15px;
  margin-left: -20px;
}
.droit{
  background-color: white;
  border-radius: 30px;
  width: 500px;
  height: 400px;
  margin-top: -400px;
  margin-left: 700px;
}
.texte{
  text-align: center;
}
nav {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 30px 25px;
  background: #660033;
  box-shadow: inset 0px -1px 0px #c5c5c6;
  top: 0;
}
Bonjour, avant d'écrire la moindre ligne de CSS vous devez avoir un code HTML valide.
Passez votre code au validateur pour voir et corriger les erreurs => https://validator.w3.org/
La balise <ul> (comme <ol>) demande uniquement la balise <li> comme enfant directe, aucun autre élément.
A mon sens vous ne souhaitez pas avoir de liste à ce niveau, donc remplacer les balises <ul> par une autre balise plus adaptée.
Pour voir quel élément créer la ligne qui apparait sur l'image, click droit sur celle-ci puis inspecter. Les outils de développement s'ouvre alors (même chose si vous appuyer sur F12).
Modérateur
Bonjour,

Je rejoins @casper, on peut voir de nombreuses erreurs de débutant Smiley smile .

1. Balisage des contenus : HTML5 propose de nombreuses balises et sémantiques, tel que header,nav,footer,main, section, article, etc ... Il faut en faire usage ,pour structurer et donner du sens aux contenus, relire facilement le code source et le cibler en CSS et JavaScript par la suite.
2. Positionnement des éléments: Le visuel d'une page web, le layout, ne se construit pas comme une présentation papier en replaçant tel ou tel élément à des coordonnées spécifiques de la page ou de l’élément qui le précède. CSS propose aujourd'hui plusieurs systèmes de grilles (grid, flex, ...).Il faudrait en faire usage aussi .

Je te propose de t'essayer à partir de la structure suivante de reproduire ton layout principale en utilisant un système de grille CSS (régles float, position ou margin pour repositionner, sont interdites Smiley smile !!!):

<!-- <header>Hé, y a t-il un header à positionner?</header>-->
<nav> ici ma navigation principale</nav>
<main>
  <article> ici la présentation</article>
  <aside> ici contenus complétant le contenu principal</aside>
</main>
<footer> le pied de la page</footer>


et comme sélecteurs de bases pour construire visuellement ta grille de 3 lignes et en deux colonnes pour le contenu de la seconde ligne:

body {
}
/*body>header {
}*/
body>nav {
}
main {
}
main article {
}
main aside {
}
body> footer {
}

tu peut jouer en ligne avec : https://codepen.io/gc-nomade/pen/EaxNEEv

ressources que tu trouvera ici:
* https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html
* https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
* https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html

On pourra t'aider dés ce niveau, ensuite tu pourras dispatché ton contenu dans ces zones principales en continuant autant que possible à utiliser les balises qui correspondent aux contenus, puis appliqué les styles, via des class, id ou nom de balise et des sélecteurs aux besoins .

voir aussi : https://www.alsacreations.com/article/lire/1867-reset-css-une-histoire-heritage-et-reinitialisation.html

Cdt
Modifié par gcyrillus (27 Feb 2025 - 13:52)
Prévenir un modérateur
Répondre au sujet
Aller à