Fond de contenu avec coin arrondi en CSS
Résolu
nheavy
Messages postés
48
Statut
Membre
-
ARM.0fees.net -
ARM.0fees.net -
Bonjour,
Jusqu'à maintenant, j'utilisais un code HTML pour avoir sous mon contenu de site un joli cadre arrondi, voici ce code:
Le contenu se trouve alors à la place de : \*Contenu sur le fond arrondi*/
Ça fonctionne très bien, mais le problème c'est que ça prend énormément de place sur les pages HTML et que je suis obligé de mettre ce code sur chaque page.
Donc j'aimerais que ce tableau soit compris dans mon code CSS afin de ne pas avoir à l'inclure dans mon HTML, par ailleurs, j'aimerais que ça reste compatible avec chaque navigateur comme l'été le mon code.
Quelqu'un aurait-il une solution?
Jusqu'à maintenant, j'utilisais un code HTML pour avoir sous mon contenu de site un joli cadre arrondi, voici ce code:
<table width="956px" cellspacing="0" cellpadding="0">
<tr height="12px">
<td width="11px"background="http://s3.e-monsite.com/2010/08/01/12/HD.gif">
</td>
<td width=934px bgcolor="#404040">
</td>
<td width="11px" background="http://s3.e-monsite.com/2010/08/01/12/HG.gif" >
</td>
</tr>
<tr>
<td bgcolor="#404040">
</td>
<td bgcolor="#404040">
\*Contenu sur le fond arrondi*/
</td>
<td bgcolor="#404040">
</td>
</tr>
<tr height="12px">
<td background="http://s3.e-monsite.com/2010/08/01/12/BG.gif">
</td>
<td width=934px bgcolor="#404040">
</td>
<td width="11px" background="http://s3.e-monsite.com/2010/08/01/12/BD.gif" >
</td>
</tr>
</table>
Le contenu se trouve alors à la place de : \*Contenu sur le fond arrondi*/
Ça fonctionne très bien, mais le problème c'est que ça prend énormément de place sur les pages HTML et que je suis obligé de mettre ce code sur chaque page.
Donc j'aimerais que ce tableau soit compris dans mon code CSS afin de ne pas avoir à l'inclure dans mon HTML, par ailleurs, j'aimerais que ça reste compatible avec chaque navigateur comme l'été le mon code.
Quelqu'un aurait-il une solution?
A voir également:
- Fond de contenu avec coin arrondi en CSS
- Comment mettre une vidéo en fond d'écran - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Fond de page word - Guide
- Créer un compte le bon coin - Guide
- Trame de fond word - Guide
4 réponses
Code HTML
Code CSS
<table id="table" cellspacing="0" cellpadding="0">
<tr>
<td id="table_haut"></td>
</tr>
<tr>
<td id="table_milieu">Contenu sur le fond arrondi</td>
</tr>
<tr>
<td id="table_bas"></td>
</tr>
</table>
Code CSS
#table {
width: 956px;
}
#table_haut {
background-color: #404040;
-moz-border-radius: 7 7 0 0;
height: 12px;
}
#table_milieu {
background-color: #404040;
padding: 0 2 0 2;
}
#table_bas {
background-color: #404040;
-moz-border-radius: 0 0 7 7;
height: 12px;
}
Merci pour ta réponse, ça m'intéresse mais est-ce qu'il n'existerait pas une solution pour que ce tableau prenne la place de l'élément background-color ou bg-image du contenu de mon site?
On m'a donné une autre solution sur un autre site:
Dans le CSS:
Dans la page HTML:
Il faut mettre une <div> avec un numéro différent pour chaque cadre arrondi qu'on veut mettre sur une même page.
Dans le CSS:
<script type="text/javascript">
function fondArrondis() {
var fond1 = '<table width="956px" cellspacing="0" cellpadding="0"><tr height="12px"><td width="11px"background="http://s3.e-monsite.com/2010/08/01/12/HD.gif"></td><td width=934px bgcolor="#404040"></td><td width="11px" background="http://s3.e-monsite.com/2010/08/01/12/HG.gif" ></td></tr><tr><td bgcolor="#404040"></td><td bgcolor="#404040">';
var fond2 = '</td><td bgcolor="#404040"></td></tr><tr height="12px"><td background="http://s3.e-monsite.com/2010/08/01/12/BG.gif"></td><td width=934px bgcolor="#404040"></td><td width="11px" background="http://s3.e-monsite.com/2010/08/01/12/BD.gif" ></td></tr></table>';
for (var i = 0; i < $("#contenu div").length; i++) {
idDiv = "arrondis" + (i+1);
var obj = document.getElementById(idDiv);
if (obj) {
contenuFond = obj.innerHTML;
obj.innerHTML = fond1 + contenuFond + fond2;
}}}
$(document).ready(function(){fondArrondis();});
</script>
Dans la page HTML:
<div id="arrondis1"> \*Contenu sur le fond arrondi 1*/ </div> <div id="arrondis2"> \*Contenu sur le fond arrondi 2*/ </div> <div id="arrondis3"> \*Contenu sur le fond arrondi 3*/ </div> etc.
Il faut mettre une <div> avec un numéro différent pour chaque cadre arrondi qu'on veut mettre sur une même page.
