Probléme position fixe CSS

[Anonyme]

Voilà le topo :

Je fait une petite partie "administration" pour un site et j'ai quelques soucis pour l'interface :

Je souhaite que le div du haut ou il y à le menu et le titre reste fixe et que le reste (le bas en blanc) soit mobile. Pour ça, j'utilise position: fixe; pour le div du haut, il ne bouge pas, mais la partie blanche passe en dessous, et le div du haut en cache une partie (il y a 4 fois le mot 'test', on le voit que 3 fois). Si c'est pas trés clair, voici les liens :

la page
la feuille de style

Suis je assez clair :mouais: :rolleyes:

merci

 

[sylver]

Dans ta CSS, tu as une classe .corps qui contient le code suivant :

.corp {
    padding: 30px 30px;
    ...
}

Modifie-la comme ceci :

.corp {
    padding: 150px 30px 30px 30px;
}

Le problème était simple en fait : avec une position fixe, ta div .fixe n'influence plus le positionnement du contenu qui vient après lui. Donc du coup ta div .corps qui contient les quatre mots "test" est "remontée", et ton premier mot "test" était donc masqué par la div .fixe. Il suffisait donc de faire redescendre la div .corps au moyen d'un padding élevé (150px en l'occurence).

Pour plus d'information sur le positionnement en CSS, je te conseille plus que vivement la lecture de cette série de trois articles sur OpenWeb :
- Initiation au positionnement CSS : 1. flux et position relative
- Initiation au positionnement CSS : 2. position float
- Initiation au positionnement CSS : 3. position absolue et fixe


En lisant le reste de la CSS, j'ai noté quelques petites imperfections que je me permets de corriger ici.

Par exemple, dans le code que j'ai corrigé plus haut, tu utilises la règle CSS suivante :

padding: 30px 30px;

Quand on spécifie une propriété border, margin ou padding avec deux valeurs, cela signifie "appliquer la première valeur en haut et en bas, et la deuxième valeurs sur les côtés".
Du coup ton code est redondant, vu que tu mets la même valeur dans les deux cas.
Tu peux simplifier en ne mettant qu'une seule valeur

padding: 30px;

ce qui signifie "appliquer la valeur aux quatre côtés".
Tu obtiendras plus de précisions sur ces particularités dans l'article de Pompage Écrire des feuilles de style efficaces.

Enfin, quand tu spécifies une valeur avec "0px", ne t'embêtes pas à mettre une unité. Que ce soit 0em, 0pt ou 0px, ce sera toujours 0. Le code

padding: 0;

indique "mettre le padding à 0 sur les quatre côtés".

Bon courage pour la suite

 

[Anonyme]

merci beaucoup pour toutes ces explications :zen:
a+