Fond de contenu avec coin arrondi en CSS

Résolu/Fermé
nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012
- 19 oct. 2010 à 18:40
 ARM.0fees.net - 20 déc. 2010 à 19:20
Bonjour,

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?



4 réponses

nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012

20 oct. 2010 à 23:15
Personne ne peut m'aider? snif j'aurais vraiment besoin d'aide s'il vous plait.
0
Aka13
Messages postés
153
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
8 février 2016
8
Modifié par Aka13 le 20/10/2010 à 23:57
Code HTML
<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; 
}
0
Aka13
Messages postés
153
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
8 février 2016
8
20 oct. 2010 à 23:59
Avec ce code tu a 0 image donc 0 chargement d'image ce qui rend le site plus rapide est plus fiable.
0
nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012

21 oct. 2010 à 17:33
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?
0
nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012

21 oct. 2010 à 21:39
On m'a donné une autre solution sur un autre site:

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.
0
nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012

21 oct. 2010 à 21:40
Si tu connais un autre script CSS ou javascript pour obtenir la même chose mais que ça remplace le fond de contenu dans le CSS, je prends ;)
0
Aka13
Messages postés
153
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
8 février 2016
8
23 oct. 2010 à 20:40
Je n'ai pas trop compris ce que tu veut faire
0
nheavy
Messages postés
42
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
16 mars 2012

23 oct. 2010 à 21:09
et bien faire en sorte que le fond rond remplace le background du contenu comme ça, plus rien à écrire dans le HTML, tout se fait tout seul. Enfin si c'est possible
0
ARM.0fees.net
20 déc. 2010 à 19:20
MERCI AKA13
0