Probléme de bordure avec une classe CSS

Bonjour à tous, comme pas mal d'entre vous, j'ai recherché dans la FAQ et sur le forum, j'y est passé du temps, mais là je suis dans le vide total.

Actuellement je fait une V2 du site suivant : http://ikki63.fr/test/test.php

Comme vous pouvez vous en apercevoir, j'ai encadré mes menus et le corps principale en utilisant ceci :

.cadre{border: 1px solid #FFFFFF;}

Jusque là cela fonctionne... mais uniquement pour les 4 cadres du corps que vous pouvez observer sur le site.

Mon soucis viens du fait que même en indiquant la classe .cadre aux cadres suivants. Et bien rien ne se produit...

Si vous aviez un indice ou une idée de ce qui ce trame cela m'aiderai grandement car il ne me manque que cela pour continuer tranquillement le reste du développement.

J'ai cherché énormément, j'ai même multiplié les class .cadre1 ,2,3,4 etc etc au cas ou le soucis venait de là, mais là aussi ce fut un échec.

Je vous inclus également le code de la terreur !

<table width="800" height="609" align="center">
  <tr class="cadre">
    <th width="187" height="21" align="left" valign="middle" bordercolor="#FFFFFF" class="cadre" scope="col" ><font face="Verdana" size="2" color="#FFFFFF">:: L'anime et le manga</font></th>
    <th width="10" rowspan="6" align="left" valign="middle" bordercolor="#FFFFFF" scope="col" >&nbsp;</th>
    <th width="591" align="left" valign="top" class="cadre" scope="col"><font face="Verdana" size="2" color="#FFFFFF">A La Une</font></th>
  </tr>
  <tr align="left" valign="top">
    <th height="179" bordercolor="#FFFFFF" class="cadre" scope="row"><?php include "menu1.php"; ?></th>
    <th rowspan="5" bordercolor="#FFFFFF" class="cadre" scope="row"><iframe src="iframe.html" frameborder="0" width="591" height="608" name="content"></iframe></div></th>
  </tr>
  <tr align="left" valign="top" class="cadre">
    <th height="21" valign="middle" bordercolor="#FFFFFF" scope="row"><font face="Verdana" size="2" color="#FFFFFF">:: Les Figurines</font></th>
  </tr>
  <tr align="left" valign="top" class="cadre">
    <th height="213" bordercolor="#FFFFFF" scope="row"><?php include "menu2.php"; ?></th>
  </tr>
  <tr align="left" valign="top" class="cadre">
    <th height="21" valign="middle" bordercolor="#FFFFFF" scope="row"><font face="Verdana" size="2" color="#FFFFFF">:: Les Goodies</font></th>
  </tr>
  <tr align="left" valign="top" class="cadre">
    <th height="137" bordercolor="#FFFFFF" scope="row"><?php include "menu3.php"; ?></th>
  </tr>
</table>

Vraiment là je suis perdus. J'ai beau retourner le soucis dans tout les sens mais je ne voie pas de sortie alors qu'en principe ça devrait rouler. A noter que ce probléme arrive que ce soit sous Firefox ou sous IE.

Je souhaite ne pas avoir déranger ou fait le couillon...

merci d'avance pour vos réponses.

Bonjour,

vincz a écrit :
Je vous inclus également le code de la terreur !

Ton code est effectivement terrifiant. Il ne respecte aucune des bonnes pratiques de conception de sites web en HTML. Notamment:
- pas de Doctype (donc rendu en mode Quirks);
- des éléments STYLE placés en dehors du HEAD (et en dehors du BODY aussi, d'ailleurs), et autres invalidités flagrantes du code HTML;
- mise en page à base de tableaux (par ailleurs mal employés, même pour de la mise en page en tableaux!);
- éléments FONT pour la mise en forme du texte;
- menu en images, sans valeurs renseignées pour les attributs alt... donc menu pas accessible, en plus d'être une catastrophe ergonomique.

Mon conseil serait de suivre les trois étapes suivantes:
1. mettre cet essai à la corbeille;
2. apprendre XHTML et CSS;
3. reprendre l'intégration de ce design à zéro.

bizarre, j'ai pourtant fait cela avec Dreamweaver....

Cependant je m'y colle

Néanmoins, pour l'intégration du design, cela reste relativement simple ou pas trop ? car à par les classes là je pense revenir souvent sur le fofo
Modifié par vincz (10 Aug 2008 - 19:09)

vincz a écrit :
bizarre, j'ai pourtant fait cela avec Dreamweaver....

Cependant je m'y colle

Néanmoins, pour l'intégration du design, cela reste relativement simple ou pas trop ? car à par les classes là je pense revenir souvent sur le fofo

Edit : il y a un truc qui me chiffonne, au départ je suis juste en PHP et je ne pensais qu'utiliser le CSS uniquement en utilisant des classes. Cela à changé depuis ou pas ?

vincz a écrit :
bizarre, j'ai pourtant fait cela avec Dreamweaver....

Ce n'est pas le logiciel qui fait la qualité du code.
En l'occurrence Dreamweaver intègre un bon module d'édition de code (avec coloration syntaxique, autocomplétion pour plusieurs langages, etc.) et un bon module de gestion de projet avec synchronisation entre le projet local et les fichiers distants. Par contre tu peux oublier le module d'édition visuelle si tu souhaites faire quelque chose de propre.

vincz a écrit :
au départ je suis juste en PHP et je ne pensais qu'utiliser le CSS uniquement en utilisant des classes. Cela à changé depuis ou pas ?

Peux-tu préciser ta question? Je ne la comprends pas vraiment.
Si tu t'interroges sur le rôle de chaque langage, ça s'organise comme ça:

1. Le contenu des pages est décrit en (X)HTML. Je te conseille d'apprendre à travailler avec du code HTML valide, et d'utiliser la syntaxe XHTML (pas obligatoire, mais formateur).
2. Toute la mise en forme se fait en CSS, dans une ou plusieurs feuilles de styles externes appelées depuis toutes les pages du site.
3. La gestion des comportements, des animations type déplacement, drag&drop ou afficher/masquer des contenus, et autres effets se fait en JavaScript.
4. Pour un site dit «dynamique», on travaille généralement avec un langage de script côté serveur, les principaux étant PHP, Perl, Python et Ruby. Les scripts écrits avec ces langages géreront la génération du code HTML des pages à partir de données récupérées dans une base de données, le traitement des données saisies dans des formulaires HTML, etc.

Pour faire un site on a généralement besoin de (1) et (2). On n'aura pas forcément besoin de (3) mais ça peut être utile pour pas mal de petites améliorations ergonomiques voire pour des éléments importants du site (notamment pour les applications web), et on aura besoin de (4) dès que l'on dépasse le simple site-plaquette au contenu maintenu par une seule personne. À noter que le (4) peut aussi, dans certains cas, se gérer avec un CMS.

Florent V. a écrit :

Par contre tu peux oublier le module d'édition visuelle si tu souhaites faire quelque chose de propre.

Ho de temps en temps il est utile mais j'ai remarquer qu'il est impossible de travailler css avec ce qui m'engouasse réellement car je ne voie vraiment pas ce que je fais. Je trouve cela dommage à moins qu'un logiciel émule les effets de CSS?? ...

En revenant à ce que j'ai proposé, je n'ai pas trop saisie ou était les erreurs car c'est un kit que l'on m'a donner et que je souhaitait juste améliorer en utilisant CSS de façon plus poussé. Mais comme je le pensais, nous ne sommes pas resté copain tout les deux. J'ai toujours eu du mal avec je n'ai jamais su pourquoi...

a écrit :
Peux-tu préciser ta question? Je ne la comprends pas vraiment.

je vais essayer, en fait, ce que je voulais dire c'est que d'habitude je fait mon style avec PHP, j'utilise les include etc etc, sans trop me soucier de CSS à part pour les barres de défilement ou les fonts.
Pour ce projet, je voulais utiliser les classes mais le soucis que j'ai actuellement (nonobstant tes précieuses informations) me faisait m'interroger sur le fait qu'utiliser les classes avec PHP était une bonne idée.

Je sais pas si c'est plus clair ou pas...

a écrit :
Si tu t'interroges sur le rôle de chaque langage, ça s'organise comme ça:

1. Le contenu des pages est décrit en (X)HTML. Je te conseille d'apprendre à travailler avec du code HTML valide, et d'utiliser la syntaxe XHTML (pas obligatoire, mais formateur).
2. Toute la mise en forme se fait en CSS, dans une ou plusieurs feuilles de styles externes appelées depuis toutes les pages du site.
3. La gestion des comportements, des animations type déplacement, drag&drop ou afficher/masquer des contenus, et autres effets se fait en JavaScript.
4. Pour un site dit «dynamique», on travaille généralement avec un langage de script côté serveur, les principaux étant PHP, Perl, Python et Ruby. Les scripts écrits avec ces langages géreront la génération du code HTML des pages à partir de données récupérées dans une base de données, le traitement des données saisies dans des formulaires HTML, etc.

Ze savais déjà à mais si quelques tombe sur ce topic ça fait toujours un rappel utile !
Modifié par vincz (10 Aug 2008 - 22:36)

vincz a écrit :
Ho de temps en temps il est utile

Si tu cherches à faire du code de qualité, en respectant les bonnes pratiques du développement web, et en maitrisant le code produit... alors non, il n'est pas utile, même de temps en temps.

vincz a écrit :
En revenant à ce que j'ai proposé, je n'ai pas trop saisie ou était les erreurs

Alors tu as vraiment de grosses lacunes en HTML. Mais il n'est jamais trop tard pour rattraper son retard.

vincz a écrit :
car c'est un kit que l'on m'a donner et que je souhaitait juste améliorer en utilisant CSS de façon plus poussé

Alors pour dire les choses clairement:
1. ce code est mauvais;
2. l'améliorer en rajoutant un peu de CSS est possible dans une certaine mesure, mais ça ne sera pas forcément évident, il y aura des limites indépassable en conservant ce code HTML, et au final ça aura un côté cautère sur une jambe de bois.

vincz a écrit :
sans trop me soucier de CSS à part pour les barres de défilement ou les fonts

Oui, c'est l'utilisation que l'on faisait de CSS autour de 2000-2001.

vincz a écrit :
Pour ce projet, je voulais utiliser les classes mais le soucis que j'ai actuellement (nonobstant tes précieuses informations) me faisait m'interroger sur le fait qu'utiliser les classes avec PHP était une bonne idée.

Aucun problème avec PHP. Il s'agit uniquement d'un problème de rendu, qui concerne donc HTML et CSS et pas le moins du monde PHP. (Bien sûr, ton code HTML est généré en PHP... mais on retombe donc sur du HTML/CSS.)

Pour ton problème lui-même, il vient du fait que tu ne peux pas appliquer un border sur un élément TR (ligne de tableau). Donc quand tu appliques ta classe sur un TD, un TH ou un DIV, ça marche, mais sur un TR ça ne marchera pas.

Mon conseil de tout à l'heure était un peu radical. Mais je t'incite vraiment, peut-être en parallèle de ce projet ou d'autres sur lesquels tu travailles, de te former de manière rigoureuse à HTML et CSS, en reprenant les bases (version modernisée):
- syntaxe XHTML;
- validité du code, Doctype, etc.;
- éléments HTML de mise en forme dépréciés ou déconseillés;
- principaux éléments HTML et balisage sémantique (Titres de section, paragraphes, citations, listes; éléments de type en-ligne tels que EM, STRONG, ABBR; formulaires accessibles...);
- syntaxe CSS;
- mise en forme du texte (et ça ne se limite pas à color et font-family... une bonne utilisation de font-size et line-height peut vraiment changer la donne);
- margin, border, padding...;
- background, background-repeat, background-position;
- float, clear, position.

Voilà pour l'essentiel. Tu peux laisser la suite aux experts si ça n'est pas ton domaine de prédilection, par exemple si tu te concentres sur du développement PHP.

Je te conseille de prendre ça progressivement, en parallèle de tes projets en cours, en suivant les cours en ligne et tutoriels recensés sur la page suivante, et ceux publiés sur Alsacréations, Openweb ou Pompage.net.

Florent V. a écrit :

Oui, c'est l'utilisation que l'on faisait de CSS autour de 2000-2001.

Là ou j'ai arrêté le développement web environs. Désolé de passer pour un vieux con, mais CSS c'est vraiment pas fluide à mon sens, je sais pas quoi penser de ça, il y a tellement de référence que je m'y perd trop rapidement et après je me retrouve ici

a écrit :
Aucun problème avec PHP. Il s'agit uniquement d'un problème de rendu, qui concerne donc HTML et CSS et pas le moins du monde PHP. (Bien sûr, ton code HTML est généré en PHP... mais on retombe donc sur du HTML/CSS.)

ouf ça fait toujours ça de gagner ! J'ai cru un instant que c'était à cause de php qu'il y avais un probléme !

a écrit :
Pour ton problème lui-même, il vient du fait que tu ne peux pas appliquer un border sur un élément TR (ligne de tableau). Donc quand tu appliques ta classe sur un TD, un TH ou un DIV, ça marche, mais sur un TR ça ne marchera pas.

lol même avec TH ça n'a pas fonctionné ! le code que j'ai inséré est un code que j'avais refait mais je n'avais pas penser qu'il eu fallu mettre celui du début... de plus ce n'est pas le code entier, c'est la partie du code qui pose probléme (au cas ou il y est eu mauvaise compréhension )

Cependant, j'ai lut un peu tout ce qui se dit, mais pourquoi tant de haine envers un cadre ?

a écrit :
Mon conseil de tout à l'heure était un peu radical. Mais je t'incite vraiment, peut-être en parallèle de ce projet ou d'autres sur lesquels tu travailles, de te former de manière rigoureuse à HTML et CSS, en reprenant les bases (version modernisée):
- syntaxe XHTML;
- validité du code, Doctype, etc.;
- éléments HTML de mise en forme dépréciés ou déconseillés;
- principaux éléments HTML et balisage sémantique (Titres de section, paragraphes, citations, listes; éléments de type en-ligne tels que EM, STRONG, ABBR; formulaires accessibles...);
- syntaxe CSS;
- mise en forme du texte (et ça ne se limite pas à color et font-family... une bonne utilisation de font-size et line-height peut vraiment changer la donne);
- margin, border, padding...;
- background, background-repeat, background-position;
- float, clear, position.

J'ai noté les adresses Cependant je connais plus radical. Mais d'habitude on commence toujours ainsi en html (puis php) non ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>
</body>
</html>

Car à part la première ligne que je ne connaissait pas (doctype) et certains truc en plus j'ai toujours fait mes pages ainsi ?

Si là aussi ça à changer, faut que je me tue car sinon j'y arriverai pas... en plus j'ai qu'une main pour prog ça aide pas lol !

Mais je vais voir, je promet rien mais je vais tenter d'améliorer ce code là car le design est celui que je veux utiliser, mais j'ai l'impression qu'avec CSS et tous ce qui gravite autour je ne vais jamais finir. Quand je vois les exemple full CSS que propose le site, je suis vraiment perdus

Allez fini de blaguer c'est l'heure du dodo, demain j'ai de la lecture !