Aller au contenu

structure blocs div

balassagyarmat

Par balassagyarmat
dans (X)HTML et CSS

 Partager

Sujets conseillés

balassagyarmat

balassagyarmat

Posté
Posté (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é par Monique
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
balassagyarmat

balassagyarmat

Posté
  • Auteur
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
Gribouille26

Gribouille26

Posté
Posté (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é par Gribouille26
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (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 B)

Modifié par LaurentDenis
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
 Partager
Aller sur la liste des sujets
×
×
  • Créer...