Texte passe sous navbar quand position fixed

Sujet résolu

16 octobre 2020 à 11:23:30

Bonjour,

Je souhaiterais que ma barre de navigation reste tout le temps en haut de la page. J'ai donc défini ceci comme css:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

Ma barre de navigation se colle donc en haut, comme prévu, sauf que le titre qui est sur ma page semble passer dessous ma barre de navigation. Comment régler ce problème? Ma page home ressemble à ça:

{% block body %}
    <h3>Bienvenue sur mon site web</h3>

    <section class="container" id="projects_container">
        <article class="projects">
            <h4>Pendu</h4>
            <p>Ce projet a été développé en PHP, HTML, CSS et Javascript. Il est disponible <a>ici</a>!</p>
        </article>
        <article class="projects">
            <h4>Sudoku</h4>
            <p>Ce projet a été développé en PHP, HTML, CSS et Javascript. Il est disponible <a>ici</a>!</p>
        </article>
    </section>
{% endblock %}

Donc c'est le titre h3 "Bienvenue" qui est caché sous la barre de navigation. Et le code css pour ma page home:

body
{
    margin: 10px 0 ;
    padding: 0 ;
    text-align: center ;
    font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
    background: #ddefd4;
}


pre
{
    overflow: auto ;
}

.container
{
    display: flex;
    flex-direction: column;
    width: 770px ;
    margin: 0 auto ;
    text-align: left ;
    border: 2px solid #ab4 ;
    background: #fff ;
    justify-content: space-between;
}

.container h4
{
    margin-left: 15px ;
    padding-left: 5px ;
    color: #728036;
}

.container p
{
    text-align: justify ;
    text-indent: 2em ;
    line-height: 1.7em ;
}

.container a
{
    color: #728036;
}

.container a:hover
{
    color: #9b2;
}

Le problème se règle en enlevant le position: fixed pour la barre de navigation mais j'aimerais qu'elle reste en visible haut tout le temps. Merci

Kovsky

16 octobre 2020 à 11:36:21

Salutations,

Je t'ai fais un Codepen, j'espère que c'est assez clair.

https://codepen.io/barbgegrasse/pen/bGepeeB

Je regarderai également du côté de position "sticky" qui est peut-être plus adapté dans ton cas.

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

Akame14

16 octobre 2020 à 11:52:57

Bonjour, merci pour ton exemple. J'ai essayé d'adapter ton code. Mais mon titre est toujours sous la barre de navigation :/ J'ai fait un codePen pour te montrer plus facilement, c'est la première fois que j'utilise donc j'espère que ça va marcher: https://codepen.io/Akame14/pen/NWrNrXg.

-RR-

16 octobre 2020 à 12:34:00

Bonjour,

voici les éléments à corriger dans ton code:

body {
  margin: 0;
}

ul {
  position: sticky;
}

Akame14

16 octobre 2020 à 13:23:50

Bonjour,

Merci. Mais du coup la barre de navigation n'est pas collée au haut, il y a un espace entre. Comment enlever cet espace?

xakula

16 octobre 2020 à 13:36:31

Titre: ça se règle avec sticky et background (sinon tu vois les mots passer sous ton titre).

Barre collée en haut: tu as oublié tes balises body. Dans css: tu mets margin et padding 0.

Un truc dans ce genre que tu cherches ? Ou je n'ai rien compris ? (la méga hauteur du body, c'était pour le test).

<!DOCTYPE html>
<html>
   
  <style>
  body
{
    margin:0 ;
    padding: 0 ;
    text-align: center ;
    font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
    background: #ddefd4;
}
 
 
pre
{
    overflow: auto ;
}
 
.container
{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 770px ;
  height:1500px;
    text-align: left ;
    border: 2px solid #ab4 ;
    background: #fff ;
    justify-content: space-between;
}
 
.container h4
{
    margin-left: 15px ;
    padding-left: 5px ;
    color: #728036;
}
 
h3{
    text-transform: uppercase;
    font-size: 2vw;
  position:sticky;
  top:70px;
  background-color: #ddefd4;
}
 
.container p
{
    text-align: justify ;
    text-indent: 2em ;
    line-height: 1.7em ;
}
 
.container a
{
    color: #728036;
}
 
.container a:hover
{
    color: #9b2;
}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: sticky;
    top: 0;
    height: 70px;
    text-transform: uppercase;
}
 
li {
    float: left;
    border-right:1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover:not(.active) {
    background-color: #111;
}
 
.active {
    background-color: #4CAF50;
}
 
/* Footer */
.footer
{
    margin: 0 ;
    padding-right: 10px ;
    line-height: 30px ;
    text-align: right ;
    color: #8a0 ;
}
 
pre
{
    overflow: auto ;
    background: #dea ;
    border: 2px solid #9b2 ;
    padding: 5px 0 0 5px ;
    font-size: 1.2em ;
}
 
pre span
{
    color: #560 ;
}
 
  </style>
<body>
  <ul>
    <li><a class="active" href="#">Accueil</a></li>
    <li><a href="#projects_container">Projets</a></li>
    <li><a href="#contact">CV</a></li>
    <li style="float:right"><a href="#about">Contact</a></li>
</ul>
 
 
<h3>Bienvenue sur mon site web</h3>
 
    <section class="container" id="projects_container">
        <article class="projects">
            <h4>Pendu</h4>
            <p>Ce projet a été développé en PHP, HTML, CSS et Javascript. Il est disponible <a>ici</a>!</p>
        </article>
        <article class="projects">
            <h4>Sudoku</h4>
            <p>Ce projet a été développé en PHP, HTML, CSS et Javascript. Il est disponible <a>ici</a>!</p>
        </article>
    </section>
  </body>
</html>

-
Edité par xakula 16 octobre 2020 à 13:55:29

Lamecarlate

16 octobre 2020 à 13:55:46

Bonjour,

je conseille *très vivement* de donner une classe à ce menu et de ne surtout pas cibler ul dans le CSS, surtout avec des propriétés aussi drastiques.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Akame14

16 octobre 2020 à 14:14:12

Lamecarlate a écrit:

Bonjour,

je conseille *très vivement* de donner une classe à ce menu et de ne surtout pas cibler ul dans le CSS, surtout avec des propriétés aussi drastiques.

Oui je compte bien mettre des classes c'était juste pour l'exemple.

xakula a écrit:

Titre: ça se règle avec sticky et background (sinon tu vois les mots passer sous ton titre).

D'accord, j'ai donc mis sticky, mais qu'est-ce que tu veux dire par régler ça avec background?

xakula a écrit:

Barre collée en haut: tu as oublié tes balises body. Dans css: tu mets margin et padding 0.

Ah d'accord! J'avais oublié ce détail merci beaucoup.

Oui voilà c'est exactement ça que je voulais! Ma barre de navigation reste bien en haut au scroll et elle prends toute l'espace, et le texte n'est plus sous la barre de navigation. Et j'ai rajouté une classe à ma barre de navigation. Merci à tous!

xakula

16 octobre 2020 à 14:51:30

Après, il existe un monde ou tu peux faire en sorte que le titre monte jusqu'en haut, au-dessus de ta barre supérieure fixe donc, tandis que le texte lui passe au-dessous, avec transition de couleur pour qu'au moment où les lettres foncées elles-aussi commencent à être sur la barre noire, elels deviennent blanches.