Webmaster Hub > Créer un cadre avec des images

Version complète: sur le forum Webmaster Hub : Créer un cadre avec des images

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Alonnka

dimanche 12 novembre 2006 à 12:03

Bonjour à tous,

Je vais essayer de vous exposer mon problème du mieux que je peux.

Jusqu'ici pour faire mon cadre j'utilisais un tableau de 9 cases (3 lignes, 3 colonnes) les 8 cases de périphérie servaient à afficher les images du cadre et dans la case centrale le contenu de mon cadre. Le code donnait quelque chose comme ça :

CODE

<div class="cadrecentre">
<table class="cadre">
<tr>
<td class="HG"></td><td class="H"></td><td class="HD"></td>
</tr>
<tr>
<td class="G"></td>
<td valign="top">
 Contenu de mon cadre.
</td>
<td class="D"></td>
</tr>
<tr>
<td class="BG"></td><td class="B"></td><td class="BD"></td>
</tr>
</table>
</div>

Et le CSS :

CODE

.cadrecentre {
width:500px;
margin:10px auto 10px auto;
}
.cadre {
width:100%;
padding:0px;
border-collapse:collapse;
background-color:#FAFFFF;
}
.cadre td {
padding:0px;
}
.HG {
width:18px;
height:18px;
background-image:url(images/design/HG.jpg);
}
.H {
height:18px;
background-image:url(images/design/H.jpg);
}
.HD {
width:18px;
height:18px;
background-image:url(images/design/HD.jpg);
}
.G {
width:18px;
height:100%;
background-image:url(images/design/G.jpg);
}
.D {
width:18px;
height:100%;
background-image:url(images/design/D.jpg);
}
.BG {
width:18px;
height:18px;
background-image:url(images/design/BG.jpg);
}
.B {
height:18px;
background-image:url(images/design/B.jpg);
}
.BD {
width:18px;
height:18px;
background-image:url(images/design/BD.jpg);
}

Tout ceci marchais ma fois très bien mais à force de me promener sur les forums et autres tutoriaux et d'y lire "les tableau ne sont pas fait pour faire de la mise en page" j'ai fini par abdiquer et chercher une solution pour afficher mon cadre sans utiliser de "table". C'est là que je sèche, j'ai beau retourner la chose dans tous les sens pas moyen de trouver une solution qui me convienne.

J'ai bien réussi à faire le cadre avec des "div" et y mettre du texte au centre mais pour cela je suis obligé de définir la hauteur de mon cadre or celle-ci n'est pas fixe car le contenue de mon cadre est affiché via une requête dans ma base de données et est donc dynamique. Ca donnait ça :

CODE

<div class="cadrecentre">
 <div class="designHG"></div><div class="designHD"></div><div class="designH"></div>
 <div class="designG"></div><div class="designD"></div>
 <div class="designC">
  Contenu de mon cadre.
 </div>
 <div class="designBG"></div><div class="designBD"></div><div class="designB"></div>
</div>

Et le CSS

CODE

.cadrecentre {
width:500px;
height: 50px;
margin:10px auto 10px auto;
}
.designHG {
float: left;
height: 18px;
width: 18px;
background-image: url(images/design/HG.jpg);
}
.designH {
height: 18px;
margin-left: 18px;
margin-right: 18px;
background-image: url(images/design/H.jpg);
}
.designHD {
float: right;
height: 18px;
width: 18px;
background-image: url(images/design/HD.jpg);
}
.designG {
float: left;
height: 100%;
width: 18px;
background-image: url(images/design/G.jpg);
}
.designC {
height: 100%;
background-color: #FAFFFF;
}
.designD {
float: right;
height: 100%;
width: 18px;
background-image: url(images/design/D.jpg);
}
.designBG {
float: left;
height: 18px;
width: 18px;
background-image: url(images/design/BG.jpg);
}
.designB {
height: 18px;
background-image: url(images/design/B.jpg);
}
.designBD {
float: right;
height: 18px;
width: 18px;
background-image: url(images/design/BD.jpg);
}

Donc voila, si j'écris ici aujourd’hui c'est pour avoir une solution

. Vous noterez que les 2 versions du code sont validées W3C (aussi bien le CSS que le XHTML), c'est donc uniquement pour respecter les "c'est pas bien" que je cherche cette solution.

Merci à tous ceux qui me liront et encore plus à ceux qui repondront

floflo44

dimanche 12 novembre 2006 à 21:40

Salut !

J'étais dans la même impasse que toi, mais je viens de trouver ça :
http://www.ljouanneau.com/standards/css/cadre/

Amuse toi bien

Alonnka

lundi 13 novembre 2006 à 10:12

Parfait... Facile à prendre en main. J'ai remplacé tout mes cadres fait avec des "table" par ce code et ca marche parfaitement.

Merci à toi pour ce lien.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.