Placements de DIV

Version imprimable

Placements de DIV

Bonjour,

je cherche à positionner mes div comme ceci :

un bandeau vertical à gauche puis à coté, trois div : une pour le bandeau du haut, une pour un menu horizontal et une dernière pour tout afficher. Enfin, une dernière div verticale à droite.(équivalente à la première).

Schématiquement, ca devrait donner ça : (désolé pour le schéma...)

______________________________________________________________
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''div bandeau'''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|-----------------------------------------|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|''''''''''''''''''''''''''''''''div menu''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
| div Gauche |-----------------------------------------| div droite
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''div affichage''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
------------------------------------------------------------------------

Mon problème réside dans le placement des divs et des images en background de ces div:

- Sous internet explorer, l'image contenu dans les div droite et gauche se repète bien en fonction de la taille de la div d'affichage. Si cette dernière est grande, les div droite et gauche se mette à la même taille.
Par contre, ma div qui englobe toute ces div n'est pas centrée à l'écran.

- Sous firefox, ma div est bien centrée. Par contre, les div de droite et de gauche reste de taille fixe : la taille de l'écran. Si la div d'affichage est super grande (avec une scrollbar sur l'écran), les div gauche et droite reste à la même taille. Elle ne s'adapte pas à la div centrale. Donc mes images s'arrête.

Voilà. Y aurait-il un moyen de centrer ma div sous internet explorer et de faire en sorte que sous firefox, mes div gauche et droite s'adapte à la grandeur de la div d'affichage.

Merci.

Voici mon code (très simple pourtant...) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html> <head> <title>tableaux</title> </head> <body bgcolor="#000000"> <div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:0px auto;"> <div id="gauche_deco" style="background-image: url('bord_gauche.jpg'); float:left; clear:both; width:150px; height : 100%; background-color:#000000;"> </div> <div id="conteneur" style="float:left; width:700px; "> <div id="bandeau" style="background-image: url('bandeau2.jpg'); width:700px; height:173px; background-color:#00CCFF;"> </div> <div id="menu" style="width:700px; height:50px; background-color:#000000;"> </div> <div id="contenu" style="width:700px; height:2000px; background-color:#f8d05e;"> </div> </div> <div id="droite_deco" style="background-image: url('bord_droit.jpg'); float:left; width:150px; height : 100%; background-color:#33FF99;"> </div> </div> </body> </html>

11/09/2008, 12h13
Helfima

il y a une erreur ici

Code:

<div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:0px auto;"

corrige pas ca déjà

Code:

<div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:auto;"

pour un design de ce type essaye plutôt ça :

HMTL :

Code:

1
2
3
4
5
6
7
8
 
<div id="left"></div>
<div id="right"></div>
<div id="main">
    <div id="ban"></div>
    <div id="menu"></div>
    <div id="affichage"></div>
</div>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
body {
    text-align: center;
}
 
#left {
    float: left;
    width: 200px;
}
 
#right {
    float: right;
    width: 200px;
}
 
#main {
    float: middle;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

attention height: 100% ne fonctionne pas sous ie6 je crois

11/09/2008, 14h14
bruman

Le 0px ne change rien.

Concernant les float left, middle et right, cela ne fonctionne pas la div de droite se retrouve à droite de l'écran mais en dessous des deux autre div.

Merci. D'autres idées?

Bonjour,

La proposition de kohsaka est bonne, mais les largeurs ne correspondent peut-être pas avec les tiennes.

kohsaka proposent 3 blocs qui font une largeur totale de 1100px (200 + 700 + 200). Tu sembles avoir une largeur totale de 1000px. Le décallage du bloc droit vient peut-être de là.

Par contre kohsaka, je n'avais jamais vu float: middle; avant.
Je ne sais pas si ça existe vraiment, mais de toute façon on peut s'en passer ici et ne pas préciser de float pour ce bloc (ni de largeur).

Pour complèter la proposition de kohsaka, je pense que ceci conviendrait à la structure que tu souhaites obtenir :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #main { width: 1000px; margin: 0 auto; } #gauche_deco { float: left; width: 150px; background: #000 url(bord_gauche.jpg); height: 100%; } #droite_deco { float: right; width: 150px; background: #33FF99 url(bord_droit.jpg); height: 100%; }
Code:

1 2 3 4 5 6 7 8 9 <div id="main"> <div id="gauche_deco"></div> <div id="droite_deco"></div> <div id="conteneur"> <div id="bandeau"></div> <div id="menu"></div> <div id="contenu"></div> </div> </div>
Au passage, si tu veux que tes colonnes de droites et de gauche prennent toute la hauteur de l'écran, il faut penser à définir une hauteur de 100% pour html et body dans le CSS.

:)

11/09/2008, 14h50
Erwan31

Citation:

Envoyé par c_s_s

Par contre kohsaka, je n'avais jamais vu float: middle; avant.

Non existe pas. Les specs CSS ça peut servir ;)
11/09/2008, 15h29
bruman

Merci pour vos réponse.

Le placement est bon avec votre code, mais mon image dans les div gauche et droite se répète comme avant : elle s'arrete à la taille de l'écran. quand la div central est plus grande que l'écran et que je descend la scrolbar l'image n'est pas répétée plus bas (sous firefox en tout cas.)

En ce n'est toujours pas centré à l'écran sous internet explorer (mais les images se répètent jusqu'au bas de la div centrale).
11/09/2008, 15h57
c_s_s

Tu as bien mis une hauteur de 100% sur HTML et BODY dans ton CSS ?

Pour l'alignement non centré sous IE, ça peut venir du Doctype. Lequel utilises tu ?

PS : tu as une page en ligne ?
11/09/2008, 16h13
bruman

J'ai bien ajouté le height 100% au body et au html.

Désolé mais rien est en ligne pour l'instant. Ça devrait l'être d'ici ce week-end. Je ne vais pas avoir le temps de m'en occuper avant.

Pour IE, je n'ai pour l'instant pas mis de doctype donc, ça doit venir de ça...

Merci en tout cas. Je reviens poster ce week-end pour donner le lien. Avec la page sous les yeux, ce sera plus facile pour vous.
11/09/2008, 16h55
kohsaka

Citation:

Envoyé par Erwan31

Non existe pas. Les specs CSS ça peut servir ;)

oups, autant pour moi. en fait il ne faut rien mettre, ça s'ajuste automatiquement.