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

Mise en page CSS, bandeau fixe + contenu ajustable

CSS

Mode arborescent

Discussions similaires

Partager

Partager