28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ais un petit soucis mon but est de placer une div à une hauteur fixe :
style="padding-top:52px";
et en même temps je voudrais la centrer horizontalement sur la page :
style="margin-left:auto;margin-right:auto;width:100%";

j'ais donc tenté :

<div style="padding-top:52px;position:absolute;margin-left:auto;margin-right:auto;width:100%;">blabla</div>


qui ne marche evidement pas Smiley smile puisque la position est absolute donc forcement ...

apres j'ais eu l'idée de faire 2 div :

<div style="padding-top:52px;position:absolute;"><div style="margin-left:auto;margin-right:auto;width:100%;">blablabla contenus blablabla</div></div>



Alors :

1 : deja je trouve ce code un peu pourris et tiré par les cheveux Smiley ohwell
2 : et en plus ca marche que sous IE , sous firefox la div n'est pas centré .


Si quelqu'un a une idée je suis pas contre car la je lute ... Smiley bawling
Modifié par stel (30 Mar 2007 - 03:30)
Salut,

Si vraiment besoin de l'absolute:
déjà si width: 100% pas besoin de centrer.

<div style="width: 400px; height: ???px; position: absolute; top: 52px; left: 50%; margin-left: -200px;}
 


margin-left= -1/2 du width
Salut,
meuh non ce n'est pas pourri comme idée Smiley smile c'est même ce qu'à peu près tout le monde fait en général, un div principal centré dans la page et les autres qui se positionnent à l'intérieur. Là tu as juste un poil mélangé le truc.

Première chose je ne vois pas trop à quoi sert ton positionnement absolute puisque tu ne lui donnes pas de coordonnées ! Si c'est juste pour le mettre à 52px de distance du haut, le margin-top du body ou padding-top du div lui-même suffit. text-align: center dans le body et margin: auto (au moins pour droite gauche) sur le div feront le reste.

En plus, ton div fait une largeur de 100%, a priori, il est déjà pas mal centré de base Smiley smile

Ensuite, si tu veux positionner des éléments les uns par rapport aux autres, le conteneur doit être en relative et le contenu en absolute or, là, c'est ton conteneur qui est en absolute, c'est donc toujours lui qui se positionne, par rapport à son propre conteneur, ici, sans en savoir plus, la fenêtre du navigateur.

En fait, une petite image de ce que tu veux faire exactement ou une page à voir serait bien utile pour te dire comme écrire tout ça Smiley smile

Have swing

édité, tellement bavard que grillé par ghost Smiley smile
Modifié par virtualgadjo (30 Mar 2007 - 08:02)
Administrateur
stel a écrit :
qui ne marche evidement pas Smiley smile puisque la position est absolute donc forcement ...

Hello,

Je crois qu'il y'a une petite lacune sur le fonctionnement du positionnement absolu.
Une petite révision pour le week-end, peut-être ? Smiley cligne