Mise en page CSS, bandeau fixe + contenu ajustable

**bigben99** · 22/02/2010, 14h21

Bonjour,

Alors voici mon problème de mise en page :
L'image jointe correspond à ce que je souhaiterais obtenir.
* une partie supérieure contenant :
- une zone de 150px x 150px en haut à gauche contenant une image (avec un lien permettant de revenir à l'accueil)
- une zone de 850px x 150px à la droite du logo contenant un bandeau (image)
- une zone de 1000px x 25px sous les deux premières qui contiendra un menu déroulant
==> je voudrais que cette partie supérieure reste fixe (cad qu'elle ne bouge pas si la partie contenu en dessous devient scrollable)

* une partie inférieur contenant :
- une zone de 1000px x hauteur variable (en fonction du contenu) contenant le contenu de ma page. J'aimerais que cette zone puisse être scrollable si le contenu prend plus de place que la hauteur restante.

voici mon CSS :

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
body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Tahoma, sans-serif;
}
 
div#container {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  text-align: left;
}
 
div#top {
  position: fixed;
  width: 1000px;
  height: 175px;
}
 
div#bandeau {
  width: 1000px;
  height: 150px;
  background-color:#FFCC00;
}
 
div#menu {
  width: 1000px;
  height: 25px;
  background-color:#FFFF00;
}
 
div#content {
  padding-top: 175px;
  width: 1000px;
  background-color:#FF00FF;
}
 
img {
  border: none;
}
 
img#logo {
  width: 150px;
  height: 150px;
}

et voici mon HTML :

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
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html>
<head>
  <link rel="stylesheet" type="text/css" href="include/css/style.css" />
  <title>Titre</title>
</head>
 
<body>
<div id="container">
  <div id="top">
    <div id="bandeau">
      <a href=""><img id="logo" src="media/picture/image.jpg" alt="Texte alternatif"></a>
    </div>
    <div id="menu">
    </div>
  </div>
  <div id="content">
    Ligne 1<br />
    Ligne 2<br />
    Ligne 3<br />
    Ligne 4<br />
    Ligne 5<br />
    Ligne 6<br />
    Ligne 7<br />
    Ligne 8<br />
    Ligne 9<br />
    Ligne .<br />
    Ligne 1<br />
    Ligne 2<br />
    Ligne 3<br />
    Ligne 4<br />
    Ligne 5<br />
    Ligne 6<br />
    Ligne 7<br />
    Ligne 8<br />
    Ligne 9<br />
    Ligne .<br />
    Ligne 1<br />
    Ligne 2<br />
    Ligne 3<br />
    Ligne 4<br />
    Ligne 5<br />
    Ligne 6<br />
    Ligne 7<br />
    Ligne 8<br />
    Ligne 9<br />
    Ligne .<br />
  </div>
</div>
</body>
</html>

mon problème :
- j'ai du mettre un padding-top pour mon div content pour ne pas que ce dernier ne passe sous la partie supérieure qui est fixe. n'y a-t-il pas une solution plus propre de faire ?
- si je redimensionne ma fenêtre de navigateur, le fait que ma partie supérieure soit fixe entraine qu'elle n'est pas scrollable horizontalement...

**bigben99** · 23/02/2010, 16h49

Alors voila, depuis hier, j'ai trouvé une solution qui fonctionne à la perfection sous Firefox (3.5) mais pas du tout sous IE (6.0).

CSS :

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
body {
  background: #FFFFDD;
  margin: 0;
}
 
div#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
 
div#top {
  position: fixed;
  width: 1000px;
  height: 174px;
}
 
div#logo {
  float: left;
  width: 150px;
  height: 150px;
 
  background: #DDDDDD;
}
 
div#bandeau {
  float: left;
  width: 850px;
  height: 150px;
 
  background: #DDFFDD;
}
 
div#menu {
  clear: both;
  width: 1000px;
  height: 24px;
 
  background: #DDDDFF;
}
 
div#content {
  position: relative;
  top: 174px;
  z-index: -1;
  width: 1000px;
  height: 800px;
 
  background: #FFDDDD;
}

HTML:

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
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Titre</title>
</head>
 
<body>
  <div id="container">
    <div id="top">
      <div id="logo">
      </div>
      <div id="bandeau">
      </div>
      <div id="menu">
      </div>
    </div>
    <div id="content">
    Text
    </div>
  </div>
</body>
</html>

Les captures d'écran présentent le rendu sous Firefox et sous IE.

Sous IE, j'ai un espace (en jaune) entre la partie supérieure (div top) et inférieure (div content) et je ne comprend ni pourquoi ni comment faire pour que la mise en page soit identique sous Firefox et IE.

Si je supprime de mon CSS div#content l'attribut top:174px, cela fonctionne sous IE mais plus sous Firefox
Et dans tous les cas, IE semble ne pas tenir compte de l'attribut position:fixed de mon div#top

merci d'avance pour votre aide

**boboss123** · 03/03/2010, 17h26

salut,

ça te va ?

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
 
<!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>
<style type="text/css">
 
body{
	width:1000px;
	margin:auto;
	padding:0;
}
 
div{
	margin:0;
	padding:0;
}
 
#header{
height:150px;
background-color:green;
}
 
#left_zone{
float:left;
width:150px;
height:150px;
background-color:red;
}
 
#speedbar{
height:15px;
background-color:blue;
font-size:0; /* juste pour le test car sinon sous ie #speedbar ne fera pas 15px*/
}
 
 
 
#content{
height:300px; /* juste pour le test */
background-color:purple;
}
</style>
</head>
<body>
	<div id="header">
		<div id="left_zone"></div>
		aaaaaaa
	</div>
 
	<div id="speedbar"></div>
 
	<div id="content"></div>
</body>
</html>

Mise en page CSS, bandeau fixe + contenu ajustable

CSS

Discussions similaires

Partager

Partager