Tableau angles arrondis + CSS
Tableau angles arrondis + CSS - HTML/CSS - Programmation
Marsh Posté le 02-03-2005 à 15:57:10
Salut,
tu trouveras surement ton bonheur ici :
http://www.alsacreations.com/articles/cadre/
Marsh Posté le 02-03-2005 à 15:58:40
Oh mon dieu, pas de tableaux.
Sinon je n'ai jamais aimé les solutions de tableaux arrondis qu'on voit un peu partout : à chaque fois faut des <div> vides ou des images dans le code HTML qui n'ont rien à faire ici. Je vais plancher une fois sur une solution en JavaScript qui rajoute les images dynamiquement, en attendant le CSS3
Marsh Posté le 02-03-2005 à 22:51:29
Moi, c'est le javascript que j'aime pas, faut dire, les débutant ont tendance à en abuser trés fortement.
Marsh Posté le 02-03-2005 à 23:43:38
Ben pour rajouter des trucs comme ça, vaut mieux. Ca évite de parsemer le code de machins genre des <div> vides ou des images décoratives
Sujets relatifs:
- Présentation d'un formulaire grace aux CSS
- ??tableau et arbre??
- CSS : définition des Liens... oui mais..
- Remplacer le JS par les CSS. Oui mais ....
- liens entre les cellules d'un tableau
- Je n'arrive pas a faire ma regex dans ce tableau
- Diaporama en HTML/CSS ?
- Imprimer avec une feuille CSS préconfigurée
- [CSS] avis et aide sur qq incompatibilités IE//MOZ
- [CSS] Forcer l'impression d'un "background-image"
Marsh Posté le 02-03-2005 à 15:06:19
Bon j'abandonne je m'en remet à vous.
ça fait 2 heures que je cherche, que je nettoie, quand c'est pas une guillemet c'est une petite faute de frappe et je perd des heures à chercher le pkoi ça ne s'affiche pas.
bon à présent le problème est différent.
je cherche à afficher mon tableau à angles arrondis.
j'ai bien entendu dessiner le tableau, il découppé.
maintenant je veux faire la mise en page via ma CSS, donc je procède ainsi :
contenu de la CSS
.corp_de_page
{text-align:left;}
.corp_de_page .boite_arrondie
{ background-repeat:no-repeat; background-color: #000000}
.corp_de_page .boite_arrondie .puce_titre
{ background-color:#000000; float:left; background: url("img/puce_titre.gif" ); margin-left:5px}
.corp_de_page .boite_arrondie .titre
{color: #000000; float:left; background-color: #FFFFFF;background-image:none;height:14px;padding:0px;font-size:11px;font-weight:bold;text-transform:uppercase;width:auto;}
.corp_de_page .boite_arrondie_haut
{float:left; background-position:top;background-repeat:no-repeat;background:url("img/hffffff.gif" );}
.corp_de_page .boite_arrondie_bas
{background-position:bottom; background-repeat:no-repeat;background: url("img/bffffff.gif" );}
.corp_de_page .boite_arrondie_droit
{background-position:right; background-repeat:no-repeat;background:url("img/dffffff.gif" )}
.corp_de_page .boite_arrondie_gauche
{background-position:left; background-repeat:no-repeat;background:url("img/gffffff.gif" );}
.corp_de_page .boite_arrondie_haut_droit
{background-position:top right; float:right;background-repeat:no-repeat; background:url("img/hdffffff.gif" );}
.corp_de_page .boite_arrondie_bas_droit
{background-position:bottom right; float:right;background-repeat:no-repeat;background:url("img/bdffffff.gif" );}
.corp_de_page .boite_arrondie_bas_gauche
{background-position:bottom left; float:left;background-repeat:no-repeat;background: url("img/bgffffff.gif" );}
.corp_de_page .boite_arrondie_haut_gauche
{background-position:top left; float:left;background-repeat:no-repeat; background: url("img/hgffffff.gif" );}
et le code sur ma page
<table border="0" cellpadding="0" cellspacing="0" class="boite_arrondie">
<tr>
<td class="boite_arrondie_haut_gauche"> </td>
<td class="boite_arrondie_haut"> </td>
<td class="boite_arrondie_haut_droit_gris"> </td>
</tr>
<tr>
<td rowspan="5" class="boite_arrondie_gauche"> </td>
<td class="titre">
<div class="puce_titre"></div>TITRE
</td>
<td rowspan="5" class="boite_arrondie_droit"> </td>
</tr>
<tr>
<td class="contenu">Infos sur le DOCUMENT</td>
</tr>
<tr>
<td class="contenu">Fichier Attach; </td>
</tr>
<tr>
<td class="contenu"> </td>
</tr>
<tr>
<td class="contenu"> </td>
</tr>
<tr>
<td class="boite_arrondie_bas_gauche"> </td>
<td class="boite_arrondie_bas" > </td>
<td class="boite_arrondie_bas_droit"> </td>
</tr>
</table>
Problème :
mon tableau s'affiche correctement.
les bons fichiers sont appelés.
MAIS !
les lignes du hhaut et du bas du tableau affiche un background qui se répète.
Sur les côtés j'ai bien 1 lignes qui entoure mon tableau, mais les lignes du haut et du bas sont en double.
j'ai tout tenté, avec dimensions, sans etc, ça change rien !
je pige pas pkoi sur les côtés c ok et pas sur le haut et le bas de mon tableau.
ps : j'ai essayé de faire la même chose sans tables mais je n'y arrive pas, je suis preneur si qqun m'offre la solution, parce que je suis gourmand d'apprendre.
merci d'avance de vous précipiter pour me donner la solution
Message édité par Profil supprimé le 02-03-2005 à 15:09:52