probleme de placement

**Tony_ducrocq** · 22/04/2009, 16h27

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**Poulpynette** · 22/04/2009, 16h34

Bonjour,

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

Et aussi :

Merci ^^

**Tony_ducrocq** · 22/04/2009, 16h42

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^

**Macmillenium** · 22/04/2009, 17h05

Bonjour et bienvenue

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

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Tony_ducrocq** · 22/04/2009, 17h13

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

(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

**Macmillenium** · 22/04/2009, 17h17

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

(malgres que j'aime pas trop se systeme

)

Et si tu tentes ce système ?

**Poulpynette** · 22/04/2009, 17h07

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

probleme de placement

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager