probleme de placement

Version imprimable

bonjour, voila je me retrouve avec un problème de placement de mes div
voici ce que je voudrai obtenir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 ___________________________ | | 1 | 2 | | ------------------------------- | | | | | | | | | | | | 3 | 4 | | | | | | | | | | | | | | |- ---------------- | | | | | 5 | | --------------------------------
-ma baniere en haut au centre (1), un bouton connexion sur la droit (2)
-mon menu (3) sur la gauche et sur la meme hauteur que le (contenu(4) + pied de page(5) )
-mon contenu a droite du menu
-mon pied de page a droit du menu

desolé de vous montre sa avec avec du texte, mais pas moyen d'uploader une image de mon taf ^^'
( si pas répondu avant j'éditerai chez moi )

mon probleme est tous bete, quand ça fonction sur firefox ça fait n'importe quoi sur ie, et vice vers ça.
il doit donc y avoir un truc que je fais de travers vue que 99% des sites n'ont presque pas de difference sur ie et firefox ^^

voici l'architecture de mes div (si il faut les changer je le ferai )
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="conteneur"> <div id="banniere"> <div id="connexion"> </div> </div> <div id="menu"> </div> <div id="contenu"> </div> <div id="pied"> </div> </div>
je voudrai éviter les truc du style height:100%;
quitte a faire plusieurs css pour les résolutions les plus utiliser

ma demande est donc:
-mes div sont elles bien placé?
-cela viens de mon css?
-pourriez vous me filer un css de placement (je demande pas non plus tous le boulot juste un truc vite fait, mais qui fonctionne aussi bien sous ie que firefox)

22/04/2009, 16h34
Poulpynette

Bonjour,

Pourrais-tu fournir le CSS correspondant à ton HTML pour voir ce qui cloche ?

Et aussi : :tagcode:

Merci ^^

voila, j'ai edité
pour mon css, le voici

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
/*******************************************************/
/* CSS pour un ecran de resolution 1280 * 1024         */
/*******************************************************/
 
html {
    font-size: 100%;
	height: 100%;
}
body {
    margin: 0;
    padding: 1em;
    font-size: .8em; 
    line-height: 1.4;
    height: 100%;
}
 
a img{
	border:  none ;
}
 
div#conteneur{
	background-color: white;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
}
 
div#banniere{
	background-color: white;
	float:left;
	width:1000px;
	height: 90px;
	background-repeat:no-repeat;
	border: 1px solid #000;
}
div#connexion{
	margin-left:0px;
	text-align:right;
	width: 100px;
	float:right;
}
 
div#corps 
{
	background-color: white;
 
}
 
div#menu
{
	float:left;
	min-height:750px;
	/*pour firefox*/
	height:100%;
	/*pour ie*/
	height:750px;
	background-color: #3fac46;
 
}
 
div#contenu
{
	padding:40px;	
}
 
div#pied
{
	height:50px;
	background-color: red;*/
 
}

vue que j'ai qu'un probleme de placement,
j'ai enlever tous le reste ^^

Bonjour et bienvenue ;)

Après un petit coup d'œil, je te propose ceci :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document sans titre</title>
		<style type="text/css">
                        html {
                                font-size: 100%;
                                height: 100%;
                        }
 
                        body {
                                margin: 0;
                                padding: 1em;
                                font-size: .8em; 
                                line-height: 1.4;
                                height: 100%;
                        }
                         
                        a img{
                                border:  none ;
                        }
                         
                        div#conteneur{
                                background-color: white;
                                margin-left:auto;
                                margin-right:auto;
                                width:1000px;
                        }
                         
                        div#banniere{
                                background-color: white;
                                /* width:1000px; */
                                height: 90px;
                                overflow:hidden;
                                background-repeat:no-repeat;
                                border: 1px solid #000;
                        }
 
                        div#connexion{
                                /* margin-left:0px; */
                                background:red;
                                text-align:right;
                                width: 100px;
                                float:right;
                        }
                         
                        div#container {
                                overflow:hidden;
                        } 
                         
                        div#contenu
                        {
                                padding:40px;   
                                background:gray
                        }
                         
                        div#pied
                        {
                                height:50px;
                                background-color: red;
                                
                        }
                         
                        div#menu
                        {
                                float:left;
                                width:150px;
                                min-height:750px;
                                background-color: #3fac46;
                                
                        }
                </style>
 
		<!--[if lte IE 6]>
			<style type="text/css">
				div#menu
				{
					height:750px;			
				}
			</style>
		<![endif]-->
 
	</head>
<body>
 
 
<div id="conteneur">    
 
    <div id="banniere">
        <div id="connexion">
			btn connexion
        </div>        
     </div>
 
    <div id="menu">
		menu
    </div>
 
	<div id="container">
		<div id="contenu">
			contenu
		</div>
		<div id="pied">
			pied de page
		</div>  
	</div>
</div>
 
</body>
</html>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style>
      html {
        font-size: 100%;
      	height: 100%;
      }
      body {
          margin: 0;
          padding: 0;
          font-size: 0.8em; 
          line-height: 1.4;
          height: 100%;
      }
 
      div#conteneur {
      	background-color: #eee;
      	width: 1000px;
      	position: absolute;
      }
 
      div#banniere {
      	background-color: #aaa;
      	height: 90px;
      	background-repeat: no-repeat;
      	border: 1px solid #000;
      }
 
      div#connexion {
        background-color: #bbb;
      	margin-left: 0;
      	text-align: right;
      	width: 100px;
      	float: right;
      }
 
      div#menu {
      	float: left;
      	height: 750px;
      	background-color: #3fac46;
      }
 
      div#contenu {
        background-color: #ddd;
      	padding:40px;	
      }
 
      div#pied {
      	height:50px;
      	background-color: red;
      }
    </style>
  </head>
 
  <body>
    <div id="conteneur">
      <div id="banniere">
        banniere
        <div id="connexion">connexion</div>
      </div>
      <div id="menu">menu</div>
      <div id="contenu">contenu</div>
      <div style="clear: both;"></div>
      <div id="pied">pied</div>        
    </div>
  </body>
</html>

J'ai modifié un peu ton code pour tester, cela semble fonctionner (chez moi FFX3 et IE6).

Attention, je pense que la définition de la hauteur pour ton menu est mauvaise. En effet, FFX et IE prennent tous les deux 750px comme hauteur fixe.
Si c'est bien la hauteur que tu désires, il te suffit de mettre la même pour le contenu.

22/04/2009, 17h13
Tony_ducrocq

je te remercie de ton aide

pour le placement rien a dire, c'est nickel

par contre, je voudrai que le menu fasse toute la page
la ou ça se complique, c'est que je voudrais que si le contenu nécessiter d'utiliser la scrollbare le menu suive donc un height:100%; sur menu je pense :lol: (malgres que j'aime pas trop se systeme :? )
de plus, le pied de page n'est pas en bas.

EDIT, c'est mieux, mais le menu va t'il suivre le contenu?
EDIT 2 en faite, je veux que le menu descende jusqu'en bas

je vous remercie de votre aide en tous cas
22/04/2009, 17h17
Macmillenium

Citation:

Envoyé par Tony_ducrocq

par contre, je voudrai que le menu fasse toute la page
la ou ça se complique, c'est que je voudrais que si le contenu nécessiter d'utiliser la scrollbare le menu suive donc un height:100%; sur menu je pense :lol: (malgres que j'aime pas trop se systeme :? )

Et si tu tentes ce système ?
22/04/2009, 17h21
Tony_ducrocq

je teste ça
je pense que je vais opté pour un menu de la meme couleur que les marges de gauche et droite de maniere a ne pas etre embété par le menu (le vert c'etait juste pour les test de toute façon :roll: )