yuston Posté 5 Septembre 2005 Posté 5 Septembre 2005 Salut tout le monde, voilà dont le problème: http://yuston.web-creator.be/test.php Je souhaite centrer horizontalement les trois boîtes rouges dans la bôites noire et ce quelque soit la résolution de l'écran...! Merci de votre aide! ++
Dudu Posté 5 Septembre 2005 Posté 5 Septembre 2005 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;
yuston Posté 6 Septembre 2005 Auteur Posté 6 Septembre 2005 Merci de ta réponse.... Oui c'était une page vite faire lol... ce qui explique la non présence des balises obligatoires et le doctype.... Bref, j'ai suivi le conseil que tu m'as donné, mais toujours rien de concret.... http://yuston.web-creator.be/test.php
Dudu Posté 6 Septembre 2005 Posté 6 Septembre 2005 margin: 0 auto; (ce que j'avais donné initialement d'ailleurs) çà ne marche pas mieux ? Çà devrait
rikaix Posté 7 Septembre 2005 Posté 7 Septembre 2005 (modifié) Bonjour, J'avoue avoir attrapé des maux de tête a essayer de trouver une solution .... 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é 7 Septembre 2005 par rikaix
Jeanluc Posté 7 Septembre 2005 Posté 7 Septembre 2005 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. Ne m'en veuillez pas. Je n'ai fait que dire la vérité... Jean-Luc
Dudu Posté 7 Septembre 2005 Posté 7 Septembre 2005 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 :
jeanpierre949 Posté 8 Septembre 2005 Posté 8 Septembre 2005 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; }
yuston Posté 8 Septembre 2005 Auteur Posté 8 Septembre 2005 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.
Jeanluc Posté 8 Septembre 2005 Posté 8 Septembre 2005 Ce serait triste de devoir employer du JavaScript pour ça... Il y a des infos sur le sujet dans cet article d'Alsacreations : Centrer les éléments ou un site web en CSS. Jean-Luc
clb56 Posté 9 Septembre 2005 Posté 9 Septembre 2005 (modifié) 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é 9 Septembre 2005 par clb56
jeanpierre949 Posté 9 Septembre 2005 Posté 9 Septembre 2005 je t'ai donné une methode qui marche sur FF comme su IE tu peux aller voir l'exemple , le code css est dans la source ici
yuston Posté 9 Septembre 2005 Auteur Posté 9 Septembre 2005 _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 Merci à tous! Ciao
clb56 Posté 9 Septembre 2005 Posté 9 Septembre 2005 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
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant