Design extensible avec bordures

**rems033** · 03/11/2009, 12h42

Bonjour à vous,
Je me tourne vers votre science face à un problème de mise en page CSS.
Je désire faire un design extensible.
J'ai donc un container général dans lequel j'affiche mes données.
Sauf qu'à l'intérieur, je souhaite subdiviser en 3 parties en float:left, une marge de gauche avec une image de fond de 50px de largeur, un contenu et une marge de droite avec une autre image de fond de 50px.
Sauf que mon image ne s'affiche pâs !!!
Voici le code 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
 
<!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> </title>
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
 
 
</head>
<body>
<div id="container">
    <div id="design_left"></div>
    <div id="design_content">
 
 
    </div>
    <div id="design_right"></div>
</div>
<div id="footer">
    <img src="/img/logo_gea.JPG" border="0"><br />&copy; 2009
</div>
</body>
</html>

et le 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
51
 
html {
    margin: 0;
    margin-top: -10px;
    padding: 0;
    font-family: Verdana;
    font-size: small;
}
 
body {
    width: 100%;
    background-color: #9eacba;
    background-image: url('../img/top_back.png') ;
    background-position: top;
    background-repeat: repeat-x;
}
 
#container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
 
#design_left {
    float:left;
    width: 50px;
    background-image: url('../img/design_left.png') ;
    background-repeat: repeat-y;
}
 
#design_content {
    float: left;
    background-color: #ffffff;
}
 
#design_right {
    float: left;
    width: 50px;
    background-image: url('../img/design_left.png') ;
    background-repeat: repeat-y;
}
 
#footer {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
    width: 80% ;
    text-align: center;
    background-color: #ffffff;
}

Merci pour votre aide !

**Candygirl** · 03/11/2009, 18h55

Hello,

Ton #design_left et #design_right n'ont ni contenu ni hauteur spécifiés; ils ont donc une hauteur nulle; logique que tu ne voies pas d'image.

Pour faire ce que tu souhaites tu as meilleur temps de passer par un div imbriqué dans #design_content et positionner une des images de fond sur la droite à l'aide de background-position.

Design extensible avec bordures

CSS

Vue hybride

Discussions similaires

Partager

Partager