[résolu] Probléme d'utilisation du postionnement absolu

Tout d'abord bonjour tout le monde ,
Je suis géné que mon premier post soit une question mais je suis à bout =( , je résume le probléme que j'ai dessiné sous paint pour etre plus compréhensible ( étant donné que je ne peux pas mettre d'aperçu online vu que je n'ai pas d'hébergeur ), mon probléme concerne le postionnement de 4 div pourrait on dire, j'utilise un div de centrage global de mon site :

div#global {
position: absolute;
width: 632px;
left: 50%;
margin-top:2%;
margin-bottom:2%;
margin-left: -316px;
background:#fff;
border:1px solid #D3D3D3;
}

En haut de celui-ci je voudrais une banniere un peu spéciale, je souhaiterai intégré un menu en ligne à droite du commencement de l'image voila ce que ça pourrait donner :
http://img293.imageshack.us/img293/8494/exemplekf1.jpg
J'ai essayé pas mal de solutions, quand je mets en positionnement relative les cadres s'alignent les uns en dessous des autres, quand je mets en absolute en définissant une largeur ( exemple 120 a gauche ) et en définissant la position ( left:0 et right:0 pour l'autre ) ça semble marcher cependant les calques ne sont plus à l'interieur de mon conteneur et n'ont donc plus de bordures, est ce que quelqu'un pourrait m'expliquer je débute et être arrêté alors que je commençais à aimer ça c'est décourageant, mais je n'ai pas envie d'utiliser un tableau qui résoudrait le probléme betement. Merci d'avance !
Modifié par sheepy (23 Jul 2006 - 19:52)

bonjour,

Je suis pas sûr d'avoir tout compris, car tout n'est pas clair dans ton explication. Ceci dit, à vue de nez, es-tu sûr d'avoir mis le position:relative au bon endroit ?

Pour moi, de façon emprique, je dirai qu'il faut mettre le position:relative en plus de ton absolute(div#global). Ainsi tu pourras positionner tes 4 divs en fonction de ce nouveau point de référence.

Personnellement je n'utiliserai pas le position absolute, trop contraignant, même si je reconnais que cela est techniquement faisable. Une div centrée avec largeur fixe, basique, suffit.
Modifié par zzzazzz (22 Jul 2006 - 02:05)

Premièrement merci pour ta réponse, elle m'a un peu éclairé, j'ai donc remis mon alignement en relatif, puis j'ai utilisé un autre principe, j'ai englobé les 2 calques de gauche dans un meme div auquel j'ai attribué un float left, puis un calque pour la partie droite sans attributs ( juste la largeur ) , je suis content ca marche sur firefox mais sur internet explorer, meme si le calque de droite est bien a droite il est en dessous de celui de gauche, comme si il n'y avait pas assez de largeur pour qu'il vienne se glisser a droite de celui de gauche ( pfiou difficile à expliquer ) le probléme c'est que si j'agrandis la taille du conteneur, le contour est aussi décalé et ne colle plus à la banière je ne sais plus quoi faire =(

zzzazzz a écrit :
Pour moi, de façon emprique, je dirai qu'il faut mettre le position:relative en plus de ton absolute (div#global). Ainsi tu pourras positionner tes 4 divs en fonction de ce nouveau point de référence.

Ben s'il rajoute position: relative; pour son div#global, celui-ci sera positionné en relatif et pas en absolu. Pour rappel, si on fait ça :

sélecteur {
	propriété1: valeur1;
	propriété1: valeur2;
}

Alors la deuxième valeur écrase la première, tout bêtement.

Le bloc étant déjà positionné (en relatif ou en absolu, ça n'a pas d'importance à vrai dire), il devrait déjà servir de référent pour ses blocs enfants et descendants. Donc normalement ça devrait marcher.

Là, si ça ne marche pas, c'est qu'il y a un problème quelque part dans la mise en application de ce joli principe.
Un code HTML + CSS un peu plus complet ne serait pas de refus, même si j'ai franchement la flemme de me reconstruire une page de test en local… les pages de test en ligne, c'est quand même plus sympa (et ça ne coûte rien, cf les pages perso de free).

sheepy a écrit :
mais sur internet explorer, meme si le calque de droite est bien a droite il est en dessous de celui de gauche, comme si il n'y avait pas assez de largeur pour qu'il vienne se glisser a droite de celui de gauche ( pfiou difficile à expliquer ) le probléme c'est que si j'agrandis la taille du conteneur, le contour est aussi décalé et ne colle plus à la banière je ne sais plus quoi faire =(

Ne donne pas de largeur au bloc de droite : il suffit de lui donner une marge à gauche de la largeur du bloc flottant de gauche.

Sauf le bloc est doté de layout dans Internet Explorer Windows (si besoin, cf une recherche sur le concept de HasLayout), par exemple à cause d'une autre dimmension fixe (au hasard, une hauteur fixe), auquel cas la marge à gauche ne sera pas nécessaire il me semble. Pour avoir le même comportement avec les navigateurs conformes, on créera alors un contexte de formatage bloc via un overflow: auto, par exemple.

Bon, c'est un poil compliqué. Les flottants sont loin d'être faciles à gérer à partir du moment où on les détourne de leur fonction d'origine, qui n'est pas de servir à créer des colonnes ou à imiter certaines mises en page en tableaux.


Sinon, as-tu quatre type de contenus séparés dans tes quatre blocs ? Parce que s'il s'agit surtout d'une histoire de graphisme, il y a peut-être plus simple à faire.

Bonjour,

Si j'ai bien compris essaye :

body
{
   margin: 0;
   padding: 0;
   margin-top: 30px;
   margin-bottom: 10px;

}
#conteneur
{
   width: 632px;
   height: 100%;/* ajuste le conteneur au contenu*/
   margin: 0; padding: 0px;
   margin: auto; 
   background-color: #002fd0;
   border: 3px solid #000;

}
/* si bordure, attention soustraire leurs épaisseurs sinon le div passe dessous : ici bordure=1px donc 2px par div soit 210-2 pour d1 & d3 et 422-2 pour d2 & d4 */
#d1	
{
   width: 208px;
   height: 250px;
   margin: 0; padding: 0;
   float: left;
   background-color: #f61f00;
   border: 1px solid #b3b3b3;
}
#d2
{
   width: 420px;
   height: 250px;
   margin: 0; padding: 0;
   float: left;
   background-color: #05d600;
   border: 1px solid #b3b3b3;
}
#d3
{
   width: 208px;
   height: 50px;
   margin: 0; padding: 0;
   float: left;
   background-color: #fffb7b;
   border: 1px solid #b3b3b3;
}
#d4
{
   width: 420px;
   height: 50px;
   margin: 0; padding: 0;
   float: left;
   background-color: #e76dff;
   border: 1px solid #b3b3b3;
}
#fin_float /* Sais si bien utile ?*/
{
   clear: both;
}

et

<body>
<div id="conteneur">
 <div id="d1">
   bla bla
 </div>

 <div id="d2">
  bla bla
 </div>
 <div id="d3">
  bla bla
 </div>
 <div id="d4">
  bla bla
 </div>
 <div id="fin_float"><div>
  <p>Reste page<br />
     Reste page<br /> 
	 Reste page<br />
	 Reste page<br />
	 Reste page<br />
</p>
</div>
</body>

Il faut juste faire attention aux bordures "l'épaisseur" pour pas que les div passent dessous.Et je ne sais pas si dans ce cas un clear: both est indiqué (ça marche sans sous FF et IE je crois).
Pour éviter les problèmes de padding de ton conteneur ( surtout sous IE), je mettrais le reste de la page dans un dernier div centré ou tu pourras modifier ce paramètre sans torturer le reste.

Bon courage

Merci beaucoup beaucoup, je ne l'ai pas encore adapté à ma situation mais en tout cas l'exemple donne ce que je voudrai avoir, je vous informerai si j'ai su le faire marcher !

L'important c'est d'en avoir compris le principe et de "s'amuser" à modifier les paramétres pour saisir les subtiles différences d'interpretation entre divers navigateurs (IE) qui font la joie de nos soirées d'hiver ...

Bon hélas me revoilà ... après avoir essayer d'adapter la solution je retrouve un peu près le meme probléme ( je pense que c'est du à l'utilisation d'image qui fait foirer le tout ) enfin les calques se réalignent les uns sous les autres ... j'ai essayé une autre solution qui marche parfaitement sous firefox mais pas sous ie ( celui je sens que je vais l'exploser ... ) je vous donne un aperçu online du désastre : http://mgl.shonencenter.net/test/ essayer sous firefox et ie et vous verrez ... et voila la feuille de style ( catastrophique elle aussi je vous l'accorde ... : http://mgl.shonencenter.net/test/css/base.css , en fait j'aimerai avoir le résultat de firefox sur ie, puis dans le reste du site j'intégrerai un menu a gauche et le contenu a droite ... enfin je craque j'essaie tout ce qui est possible desfois j'obtiens une partie du résultat mais c'est un autre truc qui foire enfin bref ... si ça peut aider j'ai remarqué que quand j'agrandissais la taille du conteneur ca finit par passer sous ie mais le probleme c'est que la bordure ne colle plus à la baniere, et il y'a une curieuse marge de 2 ou 3 px je dirai entre l'image de gauche et de droite ...

(edit : ah oui j'oubliais si quelqu'un a une solution plus simple pour arriver au meme résultat que firefox je suis preneur aussi enfin je cherche pas à faire le plus compliquer )
Modifié par sheepy (22 Jul 2006 - 12:08)

Bon c'est pas mal, je pense qu'il ne te reste qu'à mettre a tes 4 blocs padding:0; margin;0; car ie les incrémente par défaut si ce n'est pas défini

Au fait pour quoi tu coupes ton header en 4 parties ?
sinon 1 div avec toute ton image en background
et eventuellement un div en absolute pour ton menu
Modifié par ghost (22 Jul 2006 - 12:30)

ghost a écrit :
Bon c'est pas mal, je pense qu'il ne te reste qu'à mettre a tes 4 blocs padding:0; margin;0; car ie les incrémente par défaut si ce n'est pas défini

Faut pas dire que c'est pas mal, du point de vue de la conception c'est catastrophique !

C'est bien ce que je pensais au début, c'est à dire que l'on essaie de transposer en div+css ce que l'on faisait historiquement avec des tableaux.

Qu'est-ce qu'on a comme éléments ?
– un conteneur global avec une fine bordure grise ;
– une image de fond pour le haut de ce conteneur ;
– un titre (GreatSite.net) en image ;
– un menu horizontal ;
– une zone de contenu (vide) ;
– un pied de page.

La structure HTML correspondante est la suivante :

<div id="page">
	<h1>GreatSite.net</h1>
	
	<ul id="menu">
		<li>News</li>
		<li>Interviews</li>
		<li>Sites</li>
		<li>Proposer un site</li>
		<li>Gallerie</li>
		<li>Forum</li>
	</ul>

	<div id="contenu">
	…
	</div><!-- fin de div#contenu -->

	<p id="piedpage">Mouton 2006-2007</p>
</div><!-- fin de div#page -->

Votre mission, si vous l'acceptez, est de réaliser le design voulu à partir de ce code HTML, sans en changer un seul caractère (sauf faute de frappe).

Allez, c'est parti !


Edit : j'oubliais l'image pour le fond :


PS : tout le monde peut participer, mais merci aux plus avancés de ne pas donner de feuille de style pré-mâchée !
Modifié par mpop (22 Jul 2006 - 12:41)

div page : margin auto; width: 632px;height: 100%;
h1: width: dimension image entière en background
id menu : absolute; positionné sur h1
contenu : idem page

mpop a écrit :

Qu'est-ce qu'on a comme éléments ?
– un conteneur global avec une fine bordure grise ;
– une image de fond pour le haut de ce conteneur ;
– un titre (GreatSite.net) en image ;
– un menu horizontal ;
– une zone de contenu (vide) ;
– un pied de page.

Je dois avouer que j'ai pas tout suivi, le titre greatsite.net est intégré à l'image de fond logiquement pas besoin de les séparer si ? , et si on a plus 4 div comme je le pensais le menu horizontale doit quand meme etre "intégré" à l'espéce de bannière dans ce cas là il faudrait une superposition ? j'ai peut etre une idée mais comme je viens de commencer je ne sais pas tout ce qui est possible, il suffirait simplement de définir un div assez large avec comme image de fond ma bannière et alors on positionne le menu "par dessus" ? possible ou pas je sais pas

sheepy a écrit :
le titre greatsite.net est intégré à l'image de fond logiquement pas besoin de les séparer si ?

Et pour les gens qui ne verront pas ton image de fond ?
L'information n'est utile que pour les utilisateurs de navigateurs graphiques ET qui n'ont pas désactivé la feuille de style ?
Dans la mise en page que tu désires, on voit « GreatSite.net ». Selon moi, il s'agit d'une information importante. Si on peut se payer le luxe de la faire figurer dans le contenu de la page, tout en respectant la maquette, pourquoi s'en priver (ou plutôt pourquoi en priver les utilisateurs du site !) ?

sheepy a écrit :
le menu horizontale doit quand meme etre "intégré" à l'espéce de bannière dans ce cas là il faudrait une superposition ?

Pas besoin de « superposer » un élément par dessus une image de fond.

div#page {
	margin: 0 auto;
	width: 630px;
	border: solid 1px gray;
	background: white url(imagedefond.jpg) no-repeat center top;
}

Voilà déjà de quoi commencer.
S'il y a des parties de ce code que tu ne comprends pas, n'hésite pas à demander.

ghost a écrit :
div page : margin auto; width: 632px; height: 100%;

Oui, sauf pour le height: 100%;, qui ne correspond pas forcément à ce que veut faire sheepy, et qui est à vrai dire assez dangereux. Si on veut que la div#page prenne au moins toute la hauteur de page, il faudra plutôt utiliser un min-height. Une recherche sur le forum donnera quantité de sujets sur la question.

h1: width: dimension image entière en background

C'est aussi une possibilité, effectivement. Pour être plus clair (parce que c'est un peu cryptique vu comme c'est rédigé) : h1 étant un élément de type bloc, on peut lui donner des dimmensions précises, et en particulier une hauteur précise, qui permettra d'afficher l'image comme image de fond de h1. Attention toutefois à prévoir de cacher le texte du h1, tout en le laissant accessible !

Note : il est possible d'avoir plusieurs h1 dans un site. On peut donc vouloir isoler celui-ci avec un identifiant particulier.

HTML :
<h1 id="titrepage">GreatSite.net</h1>
Sélecteur CSS :
h1#titrepage {propriété: valeur;}

Merci beaucoup pour vos réponses, pour l'instant je suis un peu décourager je préfère faire la partie facile ( framework/classes et templates ) puis je jetterai un oeil à nouveau mais j'ai la volonté de faire enfin un truc propre donc vos exemples me seront très utils !

Mr mpop vous étes sûrement un martien, je suis fan

Cordialement

Désolé de remonter le sujet juste pour dire que finalement je m'en suis sorti lol et finalement très simplement j'ai juste positionné manuellement mon menu j'ai au moins compris qu'il n'y a pas de "superposition" sur une image de fond je vous montrerai le résultat final bientot en tout cas merci à vous deux !