Design par cadre de div ou TD

[Harparine]

Salut, il faut effectivement plusieurs images (pour les coins aussi).
Tu peux le faire à l'ancienne, avec des div imbriquées transparentes contenant chacune des images répétées en background. Ca passe partout mais c'est lourd et ça n'a aucun sens dans ton code HTML. Exemple :

Code :

<div class="generalDocument">
        <div class="generalDocument_head">
            <div class="generalDocument_head_left">
                <div class="generalDocument_head_right">
                </div>
            </div>
        </div>
        <div class="generalDocument_body">
            <div class="generalDocument_body_right">
                <div class="generalDocument_content">
                </div>
            </div>
            <div class="generalDocument_foot">
                <div  class="generalDocument_foot_left">
                    <div class="generalDocument_foot_right">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>

Et le CSS qui va avec (c'est vieux, c'est crade mais l'idée y est) :

.generalDocument {

    padding: 0px;

    margin-top: 15px;

    margin-right: 230px;

    margin-left: 0px;

}



.generalDocument_content {

    margin-top: -50px;

}



.generalDocument_body {

    background: #f5f6f6 url("../img/design/infos_general_body_left.png") repeat-y;

    padding: 0px;

}



.generalDocument_body_right {

    background: transparent url("../img/design/infos_general_body_right.png") repeat-y  top right;

    padding: 1px 30px;

    padding-left: 50px;

}



.generalDocument_head {

    background: url("../img/design/infos_general_head_back.png") repeat-x;

    padding: 0px;

}



.generalDocument_head_left{

    background: url("../img/design/infos_general_head_left.png") no-repeat;

    padding: 0px;

}



.generalDocument_head_right{

    height: 70px;

    background: transparent url("../img/design/infos_general_head_right.png") no-repeat top right;

    padding: 0px 50px;

    padding-top: 10px;

}



.generalDocument_foot {

    background-image: url("../img/design/infos_general_foot_back.png");

    background-repeat: repeat-x;

    padding: 0px;

}



.generalDocument_foot_left {

    background-image: url("../img/design/infos_general_foot_left.png");

    background-repeat: no-repeat;

    padding: 0px;

}



.generalDocument_foot_right {

    height: 70px;

    background-image: url("../img/design/infos_general_foot_right.png");

    background-repeat: no-repeat;

    background-position: right bottom;

    padding: 0px 30px;

}

Sinon, il y a (beaucoup) plus élégant en CSS3 :

Code :

<div class="general-document">
Contenu
</div>

.general-document {

	background-color: #f5f6f6;

	background: 

		url("../img/design/infos_general_head_right.png") no-repeat top right,

		url("../img/design/infos_general_head_left.png") no-repeat top left,

		url("../img/design/infos_general_foot_right.png") no-repeat bottom right,	

		url("../img/design/infos_general_foot_left.png") no-repeat bottom left,

		url("../img/design/infos_general_body_right.png") repeat-y top right,

		url("../img/design/infos_general_body_left.png") repeat-y top left,

		url("../img/design/infos_general_head_back.png") repeat-x top left,

		url("../img/design/infos_general_foot_back.png") repeat-x bottom left,

		#f5f6f6;

	border: none;

	padding: 40px;

	margin: 0px;

	webkit-box-shadow: none;

		-moz-box-shadow: none;

			box-shadow: none;

	-webkit-border-radius: 0px;

		-moz-border-radius: 0px;

			border-radius: 0px; 

}