28172 sujets

CSS et mise en forme, CSS3

Bonjour

Je vous expliques mon soucis par exemple très simple ( comme toujours )
voici la structure de mon html :


<div id="header"></div>
<div id="contenu"></div>

le conteneur "contenu" va bien s'afficher à la suite/après du conteneur "header"
par contre si je met la propriété :


#header
{
position : fixed
}

le conteneur "contenu" va s'afficher derrière/sous le conteneur "header"
comme ci celui ci ("header") n'existait pu, qu'il était sorti de son flux
ou qu'il ne se retrouve pu au même niveau de z-index.

Alors évidement il y a la solution de faire un margin-top sur le conteneur "contenu"
pour le remettre à sa place, c'est à dire en dessous, mais cette solution me parait crade.

Y'a t'il autre chose a faire ?

Voici mon site : http://merteneric.olympe-network.com/galerie-infinity
cela vous donne le cas de figure précis avec la bande noir qui reste fixe
et le contenu qui défile.

( cela fonctionne car j'ai fait la solution du margin-top mais qui me semble pas top ... )
Modifié par Vipear (16 Jun 2011 - 18:28)
bonjour,

comme absolute , fixed extrait les éléments du flux. -> Résultat normal.

Utilisé un margin-top ou padding-top pour degagé l'espace utilisé par cette élément "invisible" aux autres est logique.

Il y a sur ce site (et ailleurs) des tutos sur le positionnement et d'autres choses.
Peut-être gagnerais tu un peu de temps à les lires avant de te lancer dans des expériences de style Smiley smile .

Cordialement,
GC
Vipear a écrit :

Alors évidement il y a la solution de faire un margin-top sur le conteneur &quot;contenu&quot;
pour le remettre à sa place, c'est à dire en dessous, mais cette solution me parait crade.


Non c'est la bonne solution. C'est simple, ça fonctionne et c'est fait pour.
a écrit :

La position fixe

Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants:

Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur
L'élément est fixé à un endroit et ne pourra se mouvoir, même lors de la présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page, le fait qu'une éventuelle scrollbar puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.


Sa me parle & aide énormément ... Smiley biggrin
donc heureusement qu'il y a se lien : http://openweb.eu.org/articles/initiation_absolue/
qui est très bien car cela fonctionne pour IE6 et IE7 !

Par contre je vais rester a ma solution car le "contenu" ne peut être centrer avec des margin:0 auto