[Résolu] Problème Sticky par Fox Aera - page 1

Bonjour à tous, j'ai un petit problème avec mon header.

Impossible de metre mon sticky, avez-vous une aider ?

Je sais que c'est une erreur bête mais je n'arrive pas à la trouver :)

Merci à tous !

<!DOCTYPE html>
<html>
<head>
	<title>testo</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div id="whiteheader">
			<div id="header-left">

			</div>
			<div id="header-center">
<!--				<a href="#">ACTUALITIES</a>
				<a href="#">GAMES</a>-->
			</div>

			<div id="header-right">
				<a href="#">Login</a>
				<a href="#">Sign in</a>
			</div>
		</div>
	</header>

	<div id="center">
		<p>Games</p>
	</div>
</body>
</html>

@font-face{
    font-family: 'PhrasticMedium';
    src : url('Fonts/PhrasticMedium_Regular.ttf');
}

*{
    margin: 0;
    padding: 0;
}

body {
    background-color: grey;
}


/*------Header------*/
#whiteheader {
    z-index: 2;
    position: sticky;

    width: 100%;
    height: 50px;
    top: 0;
    padding-top: 0px;
    bottom: 0;

    background-color: white;
    color: black;

    display: flex;
    flex-direction: row;

    justify-content: space-between;

    box-shadow: 20px 5px 20px 2px purple;
}

#header-left{
    width: 20%;

    display: flex;

    flex-direction: row;
    justify-content: left;
    align-items: center;
}

#logo-liste{
    width: 25px;
    height: 25px;

    margin-left: 5px;
    margin-top: 5px;
}

#logo-chama{
    width: 200px;

}

#header-center{
    width: 60%;

    color: purple;

    font-family: Sans-serif,vendana,'PhrasticMedium';
    font-size: 20px;
    font-weight: bold;

    display: flex;

    justify-content: space-around;
    flex-direction: row;
    align-items: center;
}


#header-right{
    width: 20%;

    display: flex;

    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

#header-right a {
    width: 100px;
    height: 48px;

    background-color: purple;

    text-decoration: none;

    color: white;

    font-family: 'PhrasticMedium';
    font-size: 20px;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    border-left: 1px solid white;

}

#header-right a:hover{
    font-size: 24px;
}

#logo-profil{
    width: 50px;
    height: 50px;

    margin-right: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
}


/*-------------Center--------- */
#center{
    width: 95%;
    height: 1500px;

    margin-left: auto;
    margin-right: auto;

    z-index: 1;
    position: relative;

    background-color: white;
}

p{
    color: black;
    text-decoration: underline;
}




/*----------Footer----------*/
footer{


    width: 100%;
    bottom:0px;
    
    opacity: 0.8;

    z-index: 2;
    position: relative;

    background-color: grey;

    color: black;

    display: flex;
    flex-direction: row;

    justify-content: center;

    text-align: center;
    text-decoration: none;
}

Fox Aera

12 mars 2018 à 19:07:53

philiga

12 mars 2018 à 19:28:40

Bonsoir,

Il faut que le conteneur de "ton sticky" ait une hauteur supérieure à lui, sinon cela n'a pas de sens.

J'ai ajouté :

header{
  border:5px solid red;
  height:150px;
}

pour tester ici: http://jsbin.com/giyilot/edit?html,css,output

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

12 mars 2018 à 19:31:57

Je passe par un fixed, le résultat est le même que celui attendu :)

-
Edité par Fox Aera 12 mars 2018 à 19:38:18

Problème Sticky

Problème Sticky

Supprimer

Modérer

Signaler le message aux modérateurs