Boîtes et images découpées pour illustrer un cadre

[jimmyneutron]

Bonjour,

j'essaie mais franchement j'ai du mal avec le CSS

J'avais comme beaucoup un fond de site en TABLE 3x3 avec un découpage d'une image en 9 parties.

Je souhaite transformer ça avec des boîtes pour plus de clarté dans mon code, et je pense qu'elles sont plus adaptées pour la mise en forme qu'un TABLE.

En gros :

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
 
 
.header
{
    background-image:url(images/header.png);
    margin:0px;    
    width:1000px;
}
 
.left_column
{
    background-image:url(images/left_column.png);
    background-repeat:repeat-y;
    width:250px;
}
 
.content
{
    background-image:url(images/content.png);
    background-repeat:repeat-y;
    width:500px;
}
 
.right_column
{
    background-image:url(images/right_column.png);
    background-repeat:repeat-y;
    width:250px;
}
 
.footer
{
    background-image:url(images/footer.png);
    margin:0px;
    width:1000px;
 
}
 
<div class="header"></div>
<div class="left_column"></div>
<div class="content"></div>
<div class="right_column"></div>
<div class="footer"></div>

Évidemment il manque float, clear, ... et autres div englobantes, mais sincèrement tout ce que j'ai essayé jusque là me rend dingue. Toujours un résultat inattendu. Alors j'espère vos conseils voir un tutorial pour ce genre d'application...

Merci par avance.

Neutron

[ornitho13]

Salut,

est ce que tu veux une hauteur et une largeur fixe?

[ornitho13]

Voici une début de réponse.

Pour centrer tes blocs, englobe les dans une div avec une taille fixe (100px) et fixe un margin:510px auto; afin de la center

Enfin il suffit de rajouter les float:left sur les 3 blocs centraux:

Code html :

1
2
3
4
5
6
7
8
 
<div class="centre">
	<div class="header"></div>
	<div class="left_column"></div>
	<div class="content"></div>
	<div class="right_column"></div>
	<div class="footer"></div>
</div>

Code css :

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
 
.centre{
	margin:50px auto;
	width:1000px;
}
.header
{
    background-image:url(images/header.png);
    margin:0px;    
    width:1000px;
}
 
.left_column
{
    background-image:url(images/left_column.png);
    background-repeat:repeat-y;
    width:250px;
    float:left;
}
 
.content
{
    background-image:url(images/content.png);
    background-repeat:repeat-y;
    width:500px;
    float:left;
}
 
.right_column
{
    background-image:url(images/right_column.png);
    background-repeat:repeat-y;
    width:250px;
    float:left;
}
 
.footer
{
    background-image:url(images/footer.png);
    margin:0px;
    width:1000px;
 
}

Il faudra rajouter dans la css, la hauteur pour chaque bloc pour pouvoir voir l'image.

[jimmyneutron]

Pour le centrage j'avais pas trop de soucis
... fixer une largeur et des marges ...
mais pour le reste désolé même avec ton exemple,
toujours un truc qui va pas.

Du coup je suis quand même tombé sur quelques tutos.

Ce qui m'a bien aidé mais me montre une fois de plus que dans l'état,
et surtout avec les incompatibilités de navigateurs, les CSS sont loin d'être évidentes puisque pour faire des choses basiques ont doit détourner des méthodes et faire du bricolage. Comme par exemple mettre l'élément flottant avant un autre dans le sens de lecture du code pour qu'il se retrouve finalement à droite à l'affichage...

Enfin ...

Du coup ...

(j'ai rajouté padding-top et -bottom au block du centre car selon ce qu'on insère dedans, en particulier si on ne sait pas dans le cas d'une utilisation CMS, s'il y a une marge à un bloc enfant, ... DÉCALAGE !!! -> il y a peut-être mieux à faire)

.page
{
margin: auto;
width: 1000px;
}

.header_block
{
background-image: url(images/header_block.png);
background-position: right;
background-repeat: no-repeat;
height: 30px;
text-align: center;
}

.footer_block
{
background-image: url(images/footer_block.png);
background-position: right;
background-repeat: no-repeat;
height: 30px;
text-align: center;
}

.body_block
{
background-image: url(images/body_block.png);
background-position: right;
background-repeat: repeat-y;
}

.left_column
{
float: left;
width: 250px;
}

.right_column
{
float: right;
width: 250px;
}

.center_column
{
width: 500px;
margin-left: 250px;
margin-right: 250px;
padding-top: 1px;
padding-bottom: 1px;
}

<div class="page">
<div class="header_block">&nbsp;</div>
<div class="body_block">
<div class="left_column">&nbsp;</div>
<div class="right_column">&nbsp;</div>
<div class="center_column">&nbsp;</div>
</div>
<div class="footer_block">&nbsp;</div>
</div>