28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Z index et positionnement

Bonjour
Je voudrais savoir commentpositionne un div en position absolute et avec un z-index sur une autre div sans pour autant que ce div bouge selon la taille de la fenetre

#menu-home {
	padding:0;
	margin:0;
	width:364px;
	height:20px;
	position:absolute;
	top:258px;
	right:0px;
	left: 205px;

}
#container{
  width : 100%;
  text-align:center;
}


et la page

<div id="container">
    <div id="menu-home">
            <ul>
            <li>1 </li>
            <li>2</li>
            <li>3</li>
            <li>3</li>
            </ul>
    </div>
</div>

Modifié par Nad21 (22 Jun 2009 - 11:14)
Salut,

Si je comprends bien ce que tu entends par "bouger selon la taille de la fenêtre", c'est plutôt là une caractéristique des éléments en positionnement fixe, et non de ceux en absolu qui, à ce niveau, se comportent comme les éléments statiques (positionnement par défaut).

Le bout de code que tu donnes ne montre rien de bien étrange. Je te conseille de donner l'intégralité de ton code, voire (idéalement) de mettre en ligne une page exposant le problème pour qu'on puisse aller y jeter un oeil.
Bonjour
Merci de ta reponse
voilà toute la page.
le probleme vient donc du positionnement du menu par rapport au redimensionnement de la fenetre

<style type="text/css">
<!--

#container{
  width : 100%;
  text-align:center;
}

#menu {
	padding:0;
	margin:0;
	width:364px;
	height:20px;
	position:absolute;
	top:258px;
	right:0px;
	left: 205px;

}

#menu ul { padding:0; margin:0; list-style:none;}

#menu ul li { display:inline; }

#image_fond{
	background:url(poubelle.jpg) no-repeat center;
	height: 300px;
}


</style>
</head>

<body bgcolor="#FFFFFF">
<div id="container">
    <div id="image_fond"></div>
		
    <div id="menu">
            <ul>
            <li><a href="#" >1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a> </li>
            <li><a href="#">4</a> </li>
            </ul>
    </div>
</div>
</body>


encore merci
je dois avouer que je ne comprends pas le probleme
Modifié par Nad21 (21 Jun 2009 - 08:38)
a écrit :
je dois avouer que je ne comprends pas le probleme
On est deux Smiley smile . Chez moi tout est fixe.
Hello,

Nad21 a écrit :
je dois avouer que je ne comprends pas le probleme
C'est exactement ce que j'allais dire ! Smiley langue

Tout d'abord c'est assez surprenant de voir un élément positionné absolu et qui a une largeur fixe avec en même temps right et left renseignés : il faudrait choisir.

Ensuite et si j'ai bien compris il suffit que l'élément positionné en absolu fasse référence à #container et pas au viewport (zone de visualisation du navigateur). Pour cela il faut positionner ce bloc conteneur en lui affectant par exemple : position: relative; (ne pas hésiter à lire le Guide du positionnement CSS Smiley cligne ).

Lire également l'astuce traitant du z-index même si je ne suis pas sûr que ce soit très utile ici.

Au passage :
* il est inutile de préciser width : 100%; pour un élément de type bloc puisque c'est la valeur par défaut.
* pourquoi utiliser un élément DIV #image_fond au lieu de te servir de #container ?
Modifié par Heyoan (21 Jun 2009 - 10:42)
merci
ca y est je comprends
il me faut un position relative pour mettre mon position absolute dedans

j'enleve les 100% du bloc

a écrit :
Tout d'abord c'est assez surprenant de voir en même temps un positionnement absolu avec right et left renseignés : il faudrait choisir.

peut tu m'expliquer en quoi ca ne se fait pas?

a écrit :
pourquoi utiliser un élément DIV #image_fond au lieu de te servir de #container ?

parce que l'image de fond a un nom trompeur et ne recouvre qu'une partie du container pas toute

merci de ta réponse ca m'aide bien
j'ai dejà lu les liens que tu m'a envoyé, mais c vrai que seule et sans explication c'est un peu hard a comprendre
Nad21 a écrit :
peut tu m'expliquer en quoi ca ne se fait pas?
Eh bien j'ai envie de dire : parce que ça n'a aucun sens ! Smiley lol

Blague à part et pour préciser :
* tu as donné une largeur précise à #menu (364px).
* tu ne connais pas à l'avance la largeur de son ancêtre positionné (qui est maintenant #container) puisqu'elle va dépendre de la dimension de la fenêtre du navigateur.
* tu ne peux donc pas savoir à quelle distance il se trouvera du bord gauche ET du bord droit.
* d'ailleurs même si tu avais défini une largeur fixe pour #container il serait toujours inutile de préciser right et left puisqu'une seule de ces valeurs suffirait.
* c'est la même chose pour haut et bas (top et bottom) : un seul suffit.

Nad21 a écrit :
parce que l'image de fond a un nom trompeur et ne recouvre qu'une partie du container pas toute
Ça ne change rien : il suffit de la positionner (background-position) en haut (top) de #container et de préciser un padding-top si tu ne veux pas qu'elle soit recouverte par du texte.

Nad21 a écrit :
j'ai dejà lu les liens que tu m'a envoyé, mais c vrai que seule et sans explication c'est un peu hard a comprendre
Ouip ! Smiley smile
merci merci merci
ok j'ai tt compris
je rentre tt doucement ds la logique CSS
merci pour toutes ces precisions
ca fait pres de 3 semaines que j'essayais de comprendre

je vais pouvoir passer une bonne fete de la musique Smiley biggrin
Nad21 a écrit :
je vais pouvoir passer une bonne fete de la musique
Cool ! Smiley smile

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à