Sujet Précédent Sujet Suivant

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

Réponse 1 / 4
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
Réponse 2 / 4
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
Réponse 3 / 4
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
Réponse 4 / 4
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

Discussions similaires

Arrondir sur excel au 0,5 supérieur
mouchadawa -
toto -

14 réponses
créer un 2è compte sur le bon coin
tal13 -
BERNARDO -

8 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
don de voiture sur le bon coin .fr
alexarme -
christelle -

96 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses