[Résolu] Mes div jouent à cache cache une fois centrées...

Bonjour à tous,
Je vous expose mon problème
J'ai centré (horizontalement et verticalement) une div conteneur par la méthode des marges négatives, donc le CSS de ma div ressemble à ça

#main {
  position:absolute;
  left: 50%; 
  top: 50%;
  width: 900px;
  height: 675px;
  margin-top: -337.5px; 
  margin-left: -450px;
}

Pour résumer, si la hauteur de la div dépasse celle de la fenêtre, le contenu (haut) de la div disparait purement et simplement sans aucun moyen de scroller.

j'ai déjà essayer un overflow:visible ou scroll mais rien à faire...

Je n'ai pas encore d'exemple en ligne mais je pourrai en mettre un ce soir.

En espérant que quelqu'un puisse m'aider, et que je n'ai pas été trop flou.

Merci

a écrit :

PS: Simple précision sur le but recherché, je sais bien que mon site s'affichera mal en 800x600 donc pas terrible niveau accessibilité, mais le design est imposé par un graphiste.

Le but est qu'avec une résolution basique le site soit centré horizontalement et qu'on utilise un scroll vertical, mais qu'avec une résolution plus élevée le site soit centré à la fois verticalement et horizontalement.

Modifié par epheo (28 Jan 2010 - 03:35)

Bonjour,

C'est malheureusement un des effet indésirables de la méthode.

Pour centrer verticalement sans rencontrer ce problème il faut utiliser display:table-cell (ne fonctionnera pas avec IE6 et 7, mais ce n'est pas gênant plus que ça) ou ou tableau.

Bonjour,

Pour centrer ta div horizontalement en css, je te conseille d'utiliser plutot un

margin-left : auto ;
margin-right : auto ;

(et pareil pour le centrer verticalement)

Il te la centrera peut importe la résolution de l'écran, ce qui est mieux, je pense, que d'imposer des valeurs.

Bon courage.

Lu
Modifié par Luleen (26 Jan 2010 - 10:21)

Bonjour,

Centrer les elements ou un site web en CSS
Tu pourras notamment y lire en préambule du paragraphe dédié au centrage vertical via les marges négatives :

Le tutoriel a écrit :
Les marges négatives en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.

Tu devrais pouvoir trouver aisément d'autres méthodes pour le centrage vertical qui reste un exercice périlleux, parfois inutile.

Une page en ligne ou un lien vers ton design pourrait éventuellement aider à te conseiller pour l'intégration/découpage, non ?

Bon courage,
Cdt,
Sylvain

Salut,

Luleen a écrit :
(et pareil pour le centrer verticalement)

Sauf que ça ne marche pas verticalement.

Donc +1 à Laurie-Anne.

Luleen a écrit :
(et pareil pour le centrer verticalement)

Alors là, je veux voir la page de teste qui fonctionne...

ARF, 30 seconde de retard ^^;
Modifié par Laurie-Anne (26 Jan 2010 - 10:27)

Laurie-Anne a écrit :
Alors là, je veux voir la page de teste qui fonctionne...

ARF, 30 seconde de retard ^^;

Je n'en remets donc pas une couche je suis trop en retard là ?

Je peux encore éditer en laissant croire que j'ai rien marqué ?
(Dire que j'ai édité pour le rajouter, bouh ><)

Lu

@Laurie-Anne Merci, je ne connaissais pas cette fonction =) Par contre je suis sous FireFox Mac et ça ne semble pas fonctionner,

@Luleen Merci aussi, mais comme le dit Heyoan ça ne marche pas verticalement, et on ne peu pas combiner les deux méthode.

@6l20 Je vais surement me renseigner pour changer de méthode même si le centrage vertical peut en effet être parfois inutile, ce n'est pas à moi d'en décider.
Mais merci pour le liens et pour ce qui est du design ça serait un rectangle centré horizontalement et verticalement quelque soit la résolution.

Bon je vais chercher... Merci à tous

epheo a écrit :
@Laurie-Anne Merci, je ne connaissais pas cette fonction =) Par contre je suis sous FireFox Mac et ça ne semble pas fonctionner

Il ne s'agit pas d'une fonction mais d'une propriété css ( ) et elle n'est pas implémentée dans tous les navigateurs.
D'où l'utilisation d'un tableau.

epheo a écrit :
On ma toujours répété que l'utilisation de tableau pour le positionnement était à bannir.

Et c'est vrai... sauf qu'il faut tenir compte de l'implémentation des navigateurs et qu'il ne sert à rien d'avoir un code css hyper compliqué alors que l'utilisation d'un élément TABLE est tout simple et fonctionnera partout.

A lire : Maléfiques tableaux !

Et voila, ça à marché vous pouvez avoir un avant gout à cette adresse http://beta.edenor.fr
bon ok, ca ne tourne rond que sous Firefox pour le moment et il me reste pas mal de beug à corriger quand à l'adaptation pour IE etc mais bon... =)

Je met donc un resolu, Merci à tous !