balassagyarmat Posté 7 Octobre 2004 Posté 7 Octobre 2004 (modifié) hello les gens, j'essaie de réaliser la structure suivante en utilisant des blocs div : 1 header pui trois colonnes mais la subtilité c'est que la colonne du milieu en fait composée de 2 blocs sur sa hauteur Malheureusement j'ai beau essayer toutes les combinaisons de float ou autres artifices j'arrive pas à afficher correctement la structure (particulièrement les 2 blocs du centre... D'avance merci pour votre aide! Modifié 7 Octobre 2004 par Monique
LaurentDenis Posté 7 Octobre 2004 Posté 7 Octobre 2004 Aurais-tu un exemple de code ? Une url de test ? Que veux-tu_dire exactement par "la colonne du milieu en fait composée de 2 blocs sur sa hauteur" ? - deux colonnes ? - deux blocs successifs, un en haut, un en-dessous ? Sinon, le schéma classique pour 3 colonnes sans pieds de page : - header en flux avec hauteur fixe en pixel - colonne centrale en flux avec marges - colonnes latérales en position:absolute, la valeur de top étant fonction de la hauteur du header. Avec un pied de page, il suffit de le mettre en flux et de lui donner les mêmes marges que la colonne centrale. Si le header a une hauteur variable, on préfèrera les flottants : - header en flux - colonne gauche en float - colonne centrale en float - colonne droite en flux (ou float) Avec cette solution, le code HTML est du type header > gauche > centre > droite. Si on préfère avoir header > centre > gauche > droite, il suffit d'utiliser position:relative pour intervertir le float gauche et le float central. Enfin, si tes deux "blocs de la colonne du milieu" se suivent verticalement et que tu veuillent contrôler leur hauteur... ce ne sera possible que dans les navigateurs supportant display:table-cell, ce qui exclut IE.
balassagyarmat Posté 8 Octobre 2004 Auteur Posté 8 Octobre 2004 Merci pour ton aide! j'ai utilisé ta première solution ce qui donne un truc curieux: http://membres.lycos.fr/piliiip/testcss2.html comme tu peux le voir les barres de défilement buguent méchamment et un espace apparait entre la colonne du centre et de droite. Bref je comprend pas trop ce que je dois changer... voici le code correspondant, si peux tu pouvais me donner ton avis: Merci! <html> <head> <STYLE type="text/css"> <!-- div.haut { width= 100%; height: 200px; text-align: center; background-color: #FFFF99;} div.centre { margin-left: 200px; margin-right: 200px; height: 300px; border:2px solid blue; background-color: #000099;} div.gauche { position: absolute; top: 200px; width: 200px; height: 300px; border:2px solid black; background-color: #BBBBBB} div.droite { position: absolute; top: 200px; right: 0px; width: 200px; height: 300px; border:2px solid black ; background-color: #FFCCCC;} --> </STYLE> </head> <body> <div class="haut"> TITRE DE LA PAGE </div> <div class="centre"> VOICI LE CENTRE </div> <div class="gauche"> VOICI LA GAUCHE </div> <div class="droite"> VOICI LA DROITE </div> </body> </html>
Gribouille26 Posté 8 Octobre 2004 Posté 8 Octobre 2004 Bonjour, Tu devrai aller voir ce site, et partir d'un de ces creations de mise en page.
balassagyarmat Posté 8 Octobre 2004 Auteur Posté 8 Octobre 2004 Merci pour le lien! ça m'a bien aidé par contre ça m'intéresserait kan même de savoir pkoi ça déconnait ce ke j'ai mis dans le post précédent si qqun sait pkoi
Gribouille26 Posté 8 Octobre 2004 Posté 8 Octobre 2004 (modifié) En position float, ça marcherai peut-être mieux... Comme ça: <html><head><STYLE type="text/css"><!-- .haut { width: 100%; height: 200px; text-align: center; background-color: #FFFF99;}.gauche { float:left; top: 200px; width: 200px; height: 300px; border:2px solid black; background-color: #BBBBBB}.centre {float:left; margin-left:0; height: 300px; width: 200px;border:2px solid blue; background-color: #000099;}.droite { float:right; top: 200px; right: 0px;width: 200px; height: 300px; border:2px solid black; background-color: #FFCCCC;} --> </STYLE></head><body><div class="haut"> TITRE DE LA PAGE </div><div class="gauche"> VOICI LA GAUCHE </div><div class="centre"> VOICI LE CENTRE </div><div class="droite"> VOICI LA DROITE </div></body></html> Reste à savoir comment tu veux les dimensionner? Modifié 8 Octobre 2004 par Gribouille26
LaurentDenis Posté 8 Octobre 2004 Posté 8 Octobre 2004 (modifié) Merci pour ton aide! j'ai utilisé ta première solution ce qui donne un truc curieux: http://membres.lycos.fr/piliiip/testcss2.html Le truc curieux, c'est l'application du "modèle de boîte" (box model, voir http://openweb.eu.org/articles/dimensions_boites_css/ , quoique l'article ait un peu vieilli) La largeur utile pour le rendu affiché de tes éléments n'est pas la largeur spécifiée : c'est la somme width+padding+border (les marges ne sont pas prises en compte ici). Regarde le calcul de tes largeurs: - colonne gauche: 200px + 2px de bordure gauche + 2px de bordure droite : 204 pixels en tout. - idem pour la colonne droite Ta div centre doit donc avoir des marges latérales de 204px et non de 200px. Second problème : les valeurs par défaut imposées par les navigateurs. L'élément <body> a des marges et/ou un padding par défaut variable selon les navigateurs. Il est toujours plus aisé de les annuler systématiquement, ou de les préciser à sa convenance avec un body {margin: 0; padding: 0;}. A noter: ceci s'appliquera par héritage sur une grande partie des autres éléments, puisque body est l'élément qui génère le conteneur initial en HTML (en XHTML, c'est l'élément <html> qui joue ce rôle). Troisième problème : Internet Explorer 5.x Windows a un mode de calcul différent pour le box-model. Et IE6.0 applique dans certains ce mode de calcul "Microsoft" non standard (voir l'article cité ci-dessus). Sans s'étendre sur les détails, le résultat est que la même boîte CSS aura une largeur affiché plus réduite dans IE, d'où un espace inattendu entre tes colonnes dans ce navigateur. Il y a de multiples contournements possibles, dont l'utilisation d'une syntaxe permettant: - de spécifier une première largeur qui ne sera lue que par IE (margin-left: 200px) - de spécifier ensuite une seconde largeur destinée aux autres navigateurs (html>body margin-left: 204px) Le résultat de tout cela donne dans ton exemple de CSS: body {margin: 0;padding: 0;}...div.centre {margin-left: 200px;margin-right: 200px;height: 300px; border:2px solid blue;background-color: #000099;}html>body div.centre {margin-left: 204px;margin-right: 204px;} Quoique le plus sage soit de prévoir des largeurs laissant "du jeu" entre les <div>, de manière à pouvoir spécifier des valeurs identiques pour tous les navigateurs qui en feront chacun une utilisation à leur portée, sans pour autant casser la mise en page. Bienvenu au monde merveilleux de l'implémentation CSS, des bugs de navigateurs et des tristes hacks parfois nécessaires Heureusement, le salut est dans le Tao Modifié 8 Octobre 2004 par LaurentDenis
balassagyarmat Posté 11 Octobre 2004 Auteur Posté 11 Octobre 2004 Okay merci bien pour cette réponse ma foi fort complête et qui va me permettre de réfléchir un peu plus par la suite!
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant