[Standard Web] Problème pour faire un cadre arrondi.

[Foularou]

Tiens fais faire un post serieux ca fait longtemps :)

Mon objectif est de créer un cadre de contenu, aux bords arrondis et qui s'adapte automatiquement selon le contenu, en largeur et en hauteur. Afin de respecter au mieux les standards du web et leur sémantique, je ne veut utiliser ni tableaux, ni cellules pour construire ce cadre.


<style type="text/css">
body {
background-color : #C6D0D8;
}
.cadre {
width: 20%;
}
.hautg {
height: 28px;
width: 29px;
background-image:url(./images/haut_gauche.gif);
float: left;
}
.hautc {
background-image:url(./images/haut_centre.gif);
background-repeat: repeat-x;
}
.hautd {
height: 28px;
width: 29px;
background-image:url(./images/haut_droit.gif);
float: right;
}

.centre {
background-image:url(./images/milieu_gauche.gif);
background-repeat: repeat-y;
}
.basg {
height: 28px;
width: 29px;
background-image:url(./images/bas_gauche.gif);
float: left;
}
.basc {
background-image:url(./images/bas_centre.gif);
background-repeat: repeat-x;
}
.basd {
height: 28px;
width: 29px;
background-image:url(./images/bas_droit.gif);
float: right;
}
.contenu {
background-image:url(./images/milieu_droit.gif);
background-repeat: repeat-y;
background-position: right;
padding: 20px 10px 0px 10px;
}

p {
margin: 0;
padding: 0;
}
</style>
<div class="cadre">

<div class="hautg"></div><div class="hautd"></div>
<div class="centre"><div class="contenu">
<p>
bla blabla blabla blabla blabla blabla blablabla blabla blabla
</p>
</div></div>
<div class="basg"></div><div class="basd"></div>

</div>





Voici mon code. je ne vois pas ou rajouter ou que modifier pour que sur le haut et le bas, mon cadre se joigne.
J'avoue c'est pas trop kler donc je joint l'apercu. ainsi qu'un zip avec les images.

Si quelqu'un a une solution :p

[Gizmo]

J'y jette un coup d'oeil dès que j'ai le temps :)

[Foularou]

thx Gizmo ;)
j'en perd mon PHP a force

[Dadou]

J'ai une soluce mais ne marche que sur les navigateurs basés sur Geko (Netscape, mozillan FireFox)

Tu créé un conteneur, et un seul (par ex contenu). Mais dans sa déclaration de style tu rajoutes :


.contenu {
padding: 20px 10px 0px 10px;
-moz-border-radius:10px;
}

La derniere ligne fait un arrondit de 10px de rayon. Sur IE l'arrondit ne sera pas present (sorry)

[Foularou]

J'avais vu cela deja sur un site mais le pb c que dans l'immediat peut de navigateur le prend en compte. Je crois que seul mozilla le comprend.

[SIBELIUS]

J'ai essayé de voir ce qui clochait, mais j'avoue que c'est assez difficile sans les images en local, ni une url pour voir les différences entre les navigateurs.

Si je peux me permettre, je peux te proposer une autre forme de construction ici : http://www.alsacreations.com/articles/tutocss2/

Et une dernière, récente, dont la structure peut t'intéresser aussi : http://www.alsacreations.com/articles/cadre2/

[Foularou]

J'avais resolu mon probleme en utilisant ton premier lien. Merci de ton aide. Je me pencherai sur le second tuto plus tard, en ce moment g pas trop le temps :)

[SIBELIUS]

Oups désolé, je viens de remarquer la date du sujet :-/
Je le pensais plus récent.

[Foularou]

t'inkiet c juste que la section programmation n'est pas tres frequenter. A part moi qui la squatte pas mal rare sont les posts :p