Aller au contenu

Centrer trois boîtes...


yuston

Sujets conseillés

Salut,

Forcément en bossant en mode quirks çà va être très très dur => mets un doctype et les balises obligatoires (html, body..) de toutes urgence ;)

Après, englobe tes 3 boites rouge dans un div supplémentaire auquel tu appliqueras un margin:0 auto;

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

J'avoue avoir attrapé des maux de tête a essayer de trouver une solution .... :blink:

j'ai pas réussi, (normal un float par définition ça ne se centre pas ... )

par contre j'ai trouvé ceci : centrer un float en css

Qui est exactement ton cas de figure ;)

Amicalement

Rikaix

Modifié par rikaix
Lien vers le commentaire
Partager sur d’autres sites

Disons qu'en pratique, il n'existe pas de solution "propre" pour centrer une boîte en css. Il existe quelques astuces, mais souvent rien ne vaut un bon vieux <center> si on veut un code lisible. :whistling:

Ne m'en veuillez pas. Je n'ai fait que dire la vérité... :lol:

Jean-Luc

Lien vers le commentaire
Partager sur d’autres sites

Ben non, un margin: 0 auto; a toujours fait l'affaire.

Même si ce style CSS faisait 200 lignes de long, le code resterait lisible puisque comme tout le monde le sait, une bonne CSS est une CSS externe ;)

yuston, tente de rajouter un text-align:center; mais çà me paraît étrange ton truc :huh::

Lien vers le commentaire
Partager sur d’autres sites

salut,

Je ne sais pas trop ou tu veux en venir mais si tes 3 blocs doivent avoir les memes caracteristiques comme c'est le cas actuellement ,donne leur un identifiant .commun {

magin-top:c'est toi qui juge;

margin-left:auto;

margin:right:auto;

margin-bottom:c'est toi qui juge;

display:inline;

}

Lien vers le commentaire
Partager sur d’autres sites

Merci beaucoup rikaix! Ce lien est super utile!

Non dudu, ca ne marche pas, même avec un margin:auto;

Merci pour ta proposition jeanpierre949, mais ca ne marche pas....

En tous les cas, merci beaucoup pour votre aide! Même si cela ne marche pas correctement.... :s

Je cherche et j'attends toujours, sinon la méthode proposée sur THE ASW marche, mais il y a du javascript :s

enfin je l'utiliserai si aucune solution n'existe.....

Merci!

Au revoir.

Lien vers le commentaire
Partager sur d’autres sites

Salut Yuston,

En fait il y a une solution très bien en css pur, elle repose sur le fait que l'on peut toujours combiner la propriété position:relative; avec la propriété float.

voici ta page après beaucoup de ménage fait dans le code html

j'ai de plus enlevé les bordures des 3 blocs à centrer, mélanger pourcentage et pixel ce n'est vraiment pas génial... non ?

j'ai également remplacé les min-height par des height par souci de compatibilité avec IE (qui n'interprète pas les propriétés min et max.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>TEST</title>
 
</head>
<body>
 <div style="border: 1px solid #000000; height:30em;">

   <div style="float: left;  background:#ddd; width:20%; height:10em; margin:10em 0 0 0; position:relative; left:14%;"></div>

   <div style="float: left;  background:red; width:20%; height:10em; margin:10em 0 0 0; position:relative; left:20%;"></div>
   <div style="float: right; background:#ddd; width:20%; height:10em; margin:10em 0 0 0; position:relative; right:14%;"></div>
 
 </div>
</body>
</html>

voilà ça s'adapte à toutes les résolutions et le résultat est identique avec IE6 Firefox et opera.

++

<edit>

ah oui, j'ai gardé ta notation des propriétés de style dans les tags mais il vaudrait mieux externaliser tout ça au moins du body.

</edit>

Modifié par clb56
Lien vers le commentaire
Partager sur d’autres sites

_AT_clb56,

waouh! Merci beaucoup!!!! Je ne connaissais absolument pas cette méthode...

ceci dit, si j'ai mis la css dans l'attribut style, c'est juste pour des tests, autrement, je le fais toujours dans des fichiers css.....

merci beaucoup! Fonctionne très très très bien! (cette page est en marque-page maintenant :) )

_AT_jeanpierre949,

pardon? je n'ai pas compris ton exemple dans le lien que tu as donné...

Merci beaucoup quand même :)

Sinon je suis très intéressé par ta méthode aussi, si tu pouvais me dire un peu plus....

Merci d'avance :D

Merci à tous!

Ciao

Lien vers le commentaire
Partager sur d’autres sites

Pour compléter ton marque page voici le tutoriel absolument génial de Laurent Denis qui m'a permis de prendre conscience de ce genre de possibilité pour le positionnement.

L'exemple est plus complexe mais aussi plus ambitieux et intelligent.

3_colonnes_float

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...