Bogue de position HTML

Salut im essayant de créer un curseur pour une nouvelle page. Que pour la construction d'un petit desgin avec un en-tête fixe, wideloads, et d'autres choses. Maintenant, quand j'ajouté le div avec la classe inhalt mon en-tête fixe n'est pas plus en haut et en div avec le curseur nom ist plus puis 100%Bogue de position HTML

enter image description here

<body> 

    <div id="header"></div> 
    <div id="sliderContainer"> 
     <ul class="slides"> 
      <li> 
       <img src="img/clouds-2517653_1920.jpg"/> 
      </li> 
      <li> 
       <img src="img/drop-of-water-2396748_1920.jpg"/> 
      </li> 
     </ul> 
    </div> 

    <div class="inhalt"> 
     <h5>Lorem impsum</h5> 
     <p> 
     Bacon ipsum dolor amet sirloin kevin boudin ribeye short ribs chicken shank. Turkey ham hock cow prosciutto drumstick. 
     Kevin boudin pork loin beef. Pork tongue bresaola, frankfurter pig meatball porchetta boudin bacon ham landjaeger t-bone 
     short ribs. Short loin turkey rump jowl pork belly strip steak chicken ground round doner tenderloin salami bacon landjaeger pork 
     loin pancetta. Cow turkey doner landjaeger ham hock rump. 
     </p> 
    </div> 

</body> 

CSS : 

    ul { 
    margin: 0; 
    padding: 0; 
} 

#header { 
    position: fixed; 
    width: 100%; 
    height: 150px; 
    background-color: #194696; 

} 

#sliderContainer { 
    position: relative; 
    max-width: 1920px; 
    height: 600px; 
    top: 300px; 
    background-color: darkgray; 
    box-sizing: border-box; 
    float: left; 
    overflow: hidden; 
} 

#slides { 
    float: left; 
} 

.inhalt{ 
    position: relative; 
    margin: 0 auto; 
    height: 600px; 
    max-width: 800px; 
}

Source

2017-07-21 idh1337

Ajouter top: 0; au CSS de votre en-tête – Gerard

Merci! Mais pouvez-vous m'expliquer pourquoi je dois régler cela? Je me demande pourquoi je dois déclarer quoi que ce soit pour un div devenu un autre. – idh1337

Alors vous êtes une autre victime de la position : fixé;

Un élément de position fixe est positionné par rapport à la fenêtre d'affichage ou à la fenêtre du navigateur elle-même. La fenêtre ne change pas lorsque la fenêtre est défilée, donc un élément positionné fixe restera à l'endroit où il se trouve lorsque la page est défilée, créant un effet un peu comme les jours "cadres" old school. Pour plus de détails read this

Une fois que vous avez attribué la propriété position à un élément, il n'a plus d'effet sur les autres éléments de la page. Semblable à la position absolue. Donc quand vous donnez #header {position: fixed; top: 0; height: 150px;} alors vous déclarez garder en tout temps l'en-tête en haut du navigateur et la hauteur de cet en-tête sera de 150px. Mais maintenant les autres éléments de la page ne pourront pas voir le #header. Si vous ajoutez un autre élément, celui-ci commencera au début du navigateur (en haut) et sera derrière votre en-tête. Donc, en tant que correctif logiciel, vous devez donner le nouvel élément (curseur) top: 150px; ou margin-top: 150px;. Cela signifie que le curseur démarrera à 150 pixels du haut du navigateur. Je dis 150px parce que c'est la hauteur de votre en-tête. Ainsi, le curseur commencera sous l'en-tête et vous n'aurez aucun problème.

Refer this website. Ils ont fait la même chose que vous, mais ils utilisent margin-top, ce qui est mieux que top.

SOLUTION:

#header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 150px; 
    background-color: #194696; 
} 

#sliderContainer { 
    position: relative; 
    max-width: 1920px; 
    height: 600px; 
    margin-top: 150px; 
    background-color: darkgray; 
    box-sizing: border-box; 
    float: left; 
    overflow: hidden; 
}

Source

2017-07-21 07:44:17 viCky

Bogue de position HTML

Répondre

Questions connexes