windu.2b Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 Bonsoir, J'ai un petit pb (ou plutot j'ai un gros blanc dans mes connaissances en CSS ): J'ai une div, assez petite de par son contenu, qui se trouve à gauche d'une autre div, bien plus rempli (mais dont le contenu peut changer donc la hauteur aussi). Mon but est que la div de gauche ait la même hauteur que celle de droite, de façon à ce que je puisse centrer verticalement le contenu de la div de gauche, pour qu'il apparaisse à mi-hauteur de la div de droite. Et donc, je sais plus trop ce que je dois mettre en CSS pour faire cela (le premier qui me parle de <table> et 'align', je le pends avec ses propres viscères ) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Quarky Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 Hello, Comme je vois concrètement de quoi il s'agit () et comme j'ai déjà, moi même, réfléchi à la chose, voilà où j'en suis rendu : Pour moi il n'est pas possible de le faire en CSS puisqu'il faut récupérer la taille qui est d'ailleurs dynamique. Le seul moyen que je vois serait de passer par du javascript qui viserait la div de droite et récupèrerait sa hauteur. On pourrait donc utiliser un "document.getElementById(toto)" mais vu l'application dont il est question, tu te doutes qu'on ne peut utiliser d'id (cf. génération des blocs). Donc voilà j'ai séché et j'ai repris la structure pourrie du modèle. PS : Cela dit il ne me restait plus que ça comme problème pour l'affichage. Lien vers le commentaire Partager sur d’autres sites More sharing options...
windu.2b Posté(e) le 13 janvier 2007 Auteur Partager Posté(e) le 13 janvier 2007 Arfff, cay la m**** alors? Et sinon, je pensais ) un truc tout à l'heure (mais je n'ai pas encore testé, je reviendrai pour dire si c'est bon ou pas): Si on met les 2 div dans une autre div englobante, et qu'on dit à la div de gauche de faire 100% de la hauteur ca devrait être bon, non? Lien vers le commentaire Partager sur d’autres sites More sharing options...
jer666 Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 j'ai pas trop compris ce que tu voulais faire... tu peux faire un schemat? une piste? ajoute une div conteneur, et un margin auto? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Quarky Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 Si on met les 2 div dans une autre div englobante, et qu'on dit à la div de gauche de faire 100% de la hauteur ca devrait être bon, non? Il me semble que j'ai essayé hélas sans succès. j'ai pas trop compris ce que tu voulais faire... tu peux faire un schemat? une piste? ajoute une div conteneur, et un margin auto? En gros il y a deux div en float, celle de gauche comporte uniquement un caractère (un numéro), et l'autre contient plusieurs lignes de texte. Le but serait de centrer verticalement le chiffre par rapport à la div de droite. Petit schéma : +++++++++++++++++++++++++++ + + -------------- + + + ----------------- + + 1 + ----------------- + + + ----------------- + + + ----------------- + +++++++++++++++++++++++++++ Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yangzebul Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 Comme ça, cela marche sous Firefox, Opera et Safari, mais sur aucun IE : <!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"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css" media="screen"/> <title>test</title> </head> <body> <div id="global"> <div id="gauche">colonne de gauche</div> <div id="droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</div> </div> </body> </html> #global{ display: table-row; } #gauche{ background: #999; display: table-cell; width: 300px; vertical-align: middle; } #droite{ background: #777; display: table-cell; width: 300px; } Sinon il pourrait peut être y avoir quelque chose à faire en changeant le mode d'affichage vers inline-block, mais dans ce cas là ça ne marcherait pas sous Firefox. Et puis ce serait assez compliqué, je n'ai pas testé. Si tu peux au passage donner plus d'infos sur par exemple : - le type de contenu des deux collones (bloc ou inline) - les largeurs (fixes ou variables) - la hauteur du contenu de la colonne de gauche (fixe ou variable) - si le reste de ton balisage oblige à utiliser un positionnement particulier Mais bon, comme l'a dit Quarky, la meilleure solution (tout du moins niveau compaptibilité et simplicité) ce serait de régler ça avec quelques lignes de javascript (ça devrait tenir en trois lignes à tout casser). Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yangzebul Posté(e) le 13 janvier 2007 Partager Posté(e) le 13 janvier 2007 En gros il y a deux div en float, celle de gauche comporte uniquement un caractère (un numéro), et l'autre contient plusieurs lignes de texte. Le but serait de centrer verticalement le chiffre par rapport à la div de droite. Petit schéma : +++++++++++++++++++++++++++ + + -------------- + + + ----------------- + + 1 + ----------------- + + + ----------------- + + + ----------------- + +++++++++++++++++++++++++++ Ha vous voulez juste faire un numérotage ! Bah dans ce cas là une simple liste ordonnée suffit ! Le comportement par défaut est exactement celui que tu décris. C'est la balise <ol>. Lien vers le commentaire Partager sur d’autres sites More sharing options...
windu.2b Posté(e) le 13 janvier 2007 Auteur Partager Posté(e) le 13 janvier 2007 oki, je vais tenter la balise <ol> on verra ce que ca donne... Je vous tiens au courant Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.