Prb d'affichage des couleurs sous firefox [RESOLU]

Nurbo · 8 Août 2007

Salut tout le monde,

Après une recherche infructueuse, je me tourne vers vous pour solutionner mon problème.

J'ai bessoin de faire un bête tableau en html mais en respectant des couleurs.
Le fond en #CCFFFF et la bordure du tableau en #FF33CC

Lorsque je vérifie sous IE ça marche impeccable, par contre, avec firefox, il me sort mon tableau avec toutes les bordures visible (la cellule du millieu prend la couleur du fond) et pas en couleurs ?

Voici le tableau en question: http://perso.orange.fr/gatstory/essai.html

Quelqu'un a-t-il déjà eu ça ? Chez vous ça marche sous firefox ? Car peut être un foil de pion dans mon instal ? (sous win2000 au cas où)

Merci d'avance.

Nurbo

Marie-Aude · 9 Août 2007

Pas de déclaration de doctype -> mode quirks ->Le bordercolor n'est pas compris.
Tu mets le bordercolor de la table identique au background. Il serait plus simple de faire la bordure de la table en violet et seulement la bordure de la cellule que tu veux masquer autrement.
En fait il serait encore plus simple de faire ça en CSS, où tu peux mettre des bordures différentes en top, right, etc... et de ne pas utiliser de tableau pour faire de la mise en page

Mais ton code devrait avoir l'air de ça :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	background-color: #CCFFFF;
}
-->
</style></head>

<body>

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCFFFF">
  <tr>
    <td width="29%" bordercolor="#FF33CC">&nbsp;</td>
    <td width="20%" bordercolor="#FF33CC">&nbsp;</td>
    <td width="2%">&nbsp;</td>
    <td width="20%" bordercolor="#FF33CC">&nbsp;</td>
    <td width="29%" bordercolor="#FF33CC">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Nurbo · 9 Août 2007

Salut Marie-Aude et merci pour la réponse.

Ceci dit, ça ne fait pas avancer mon schmilblik, ton code marche sous IE mais toujours pas sous firefox, même s'il me donne quelque chose de différent.

En cherchant pour mon problème, j'ai vu sur des forum des problèmes principalement d'alignement et de couleur de fond, et à chaque fois les réponses orientaient vers du css.

Je vais donc de ce pas m'y plonger, mais petite question, pourquoi ne pas faire de mise en page via des tableau ?

Nurbo

EDIT: voici la différence des deux navigateurs

.

Marie-Aude · 9 Août 2007

Parce que le tableau est DANS ton code html, donc tu dois changer ton code et ton tableau si tu veux changer ta présentation.
Parce que le faire avec des CSS est beaucoup plus simple, en fait, une fois qu'on a appris à s'en servir, et permet aussi plus de possibilités.
Parce que cela permet de séparer le contenu (ton code HTML) de sa forme (le CSS).
Parce que cela permet de supprimer du code inutile pour les gens qui par exemple utilisent un logiciel de lecture de page (aveugles) et qui sont complètement paumés avec les structures en table.
Parce que des attributs couramment utilisés dans les tableaux sont de plus en plus dépréciés dans les nouvelles versions, et qu'il faudra s'y mettre un jour ou l'autre, alors autant commencer tout de suite.

narayana · 9 Août 2007

En gros et pour résumé
un tableau est utile si on présente des données
sinon on passe par du css et des div

Pandore · 9 Août 2007

Marie-Aude a dit:
Parce que des attributs couramment utilisés dans les tableaux sont de plus en plus dépréciés dans les nouvelles versions

gné ??? 8O

Nurbo · 9 Août 2007

Bon, j'ai pas mal parcouru de tuto et autres sites sur les CSS, et j'en viens à la conclusion que pour ce que j'ai bessoin, et bien je perdrais plus de temps à créer ma feuille que de faire mes tableau. Je combine notepad et frontpage selon les tâches que j'ai à faire.

C'est sûr, le jour où je veux modifier l'aspect graphique du site, je suis obliger de passer par le travail à la chaine, mais c'est une chose assez peu courante (pour ma part bien sûr)

En tout cas merci de m'avoir aiguillé vers les CSS, mais ceci ne résoud toujours pas mon problème de différence de couleurs entre IE et firefox... soit dit en passant 8)

@+

Nurbo

Nurbo · 11 Août 2007

Bon, j'ai avancé, et comme on dit, y'a que les imbéciles qui ne changent pas d'avis.

Donc, outre le fait que j'avais un problème de couleurs de tableaux, le fait de lire ici et là, voir partout que le CSS était utile et fort pratique, je me suis penché dessus.
J'avoue franchement que ça a été plus galère que prévu (cf message d'hier), car malgrès la lecture de plusieurs tutos je trouvais ça lourd pour ce que j'avais bessoin de faire.

Il faut bien reconnaitre que pour faire un listing tout bête, rien ne vaut un editeur WYSIWYG (style FrontPage) qui reste le plus rapide (attention, je dit bien un bête listing).

Bref,

Mon problème persistait, firefox ne m'affichait pas les couleurs des bordures. Comme je voulais avancé, j'ai mis ce problème de coté et repris mon codage. J'avais bessoin de faire une mini galerie photo, donc je cherche un petit script et je tombe sur celui d'alsacréation, et Ôhh surprise, le cadre est fait en CSS !!!

Alors je me dit, c'est le moment ou jamais de réessayé de comprendre quelques chose à la bête. Et finalement, une fois un exemple bien concret avec quelques lignes de CSS à modifier, j'ai commencer à comprendre, et j'ai resorti les tutos qui au début ne m'avait pas fait plus avancé que ça.

Pour finir, ben j'ai réussi à faire ce que je voulais (ou presque) et surtout avec les bonnes couleurs sous IE et Firefox.

Voici où j'en suis, je suis preneur de toutes critiques (bonnes ou mauvaises)
le CSS

Code:

BODY { height: 8.5in } 

.ligne1 {
	text-align: center;	
	width: 29%;
	height: 350px;
	top: 720px;
	left: 1px;
	float: left;
	border: 1px solid deeppink;
	}
	
.ligne2 {
	text-align: center;	
	width: 20%;
	height: 350px;
	top: 720px;
	float: left;
	border: 1px solid deeppink;
	}

.ligne3 {
	text-align: center;	
	width: 2%;
	height: 350px;
	top: 720px;
	float: left;
	border: 1px solid #CCFFFF;
	}
	
.ligne4 {
	text-align: center;	
	width: 28%;
	height: 350px;
	top: 720px;
	float: left;
	border: 1px solid deeppink;
	}
	
.ligne5 {
	text-align: center;	
	width: 20%;
	height: 350px;
	top: 720px;
	float: left;
	border: 1px solid deeppink;
	}

le HTML

Code:

<DIV class="ligne1">Case 1</DIV>
<DIV class="ligne2">Case 2</DIV>
<DIV class="ligne3"></DIV>
<DIV class="ligne4">Case 3</DIV>
<DIV class="ligne5">Case 4</DIV>

En tout cas, merci à vous pour ces réponses qui m'on orienté vers la solution.

Voilà le résultat:

@+

Nurbo

Marie-Aude · 11 Août 2007

Tu vois

Alors plutôt que des id, mettre des class, car tu ne peux avoir qu'une seule fois l'id dans ta page, mais autant de fois la class.

Ensuite, tu pourrais bien avoir un div conteneur de tes différentes colonnes, dont tu fixes la hauteur, l'alignement du texte, et même la position. Il ne te reste plus qu'à mettre dans tes diverses classes ce qui correspond à chacune d'entre elles : la largeur et la couleur de bordure.

Nurbo · 11 Août 2007

Marie-Aude a dit:
Tu vois

Alors plutôt que des id, mettre des class, car tu ne peux avoir qu'une seule fois l'id dans ta page, mais autant de fois la class.

Ensuite, tu pourrais bien avoir un div conteneur de tes différentes colonnes, dont tu fixes la hauteur, l'alignement du texte, et même la position. Il ne te reste plus qu'à mettre dans tes diverses classes ce qui correspond à chacune d'entre elles : la largeur et la couleur de bordure.

Les class c'est fait, par contre, je t'avoue que c'est vraiement galère quand on commence, et pour l'instant, même si j'ai réussi à mettre les couleurs souhaitées, c'est vraiment pas évident pour faire la mise en page.

Pareil pour les termes que j'ai pas encore bien assimilé conteneur, contenu, class, id, margin, padding et tout le tralala... c'est encore du Serbo-Croate pour moi...

8)

Allez, je t'embête vite fait, comment j'aligne mon texte gauche/droit et bas/haut dans la case 2 par exemple...

Nurbo

Marie-Aude · 11 Août 2007

Tu veux dire quoi par aligner ?
Pour "gauche-droite" c'est soit centrer soit justify
Pour l'alignement en hauteur, ça bugue beaucoup, certains navigateurs ne le comprennent pas, il faut donc jouer avec le padding (pas les marges) en haut et en bas, jusqu'à ce que tu soit satisfait

zeb · 11 Août 2007

@Nurbo si tu as du mal a te convaincre du plus apporté par le HTML / CSS va voir ici : http://www.csszengarden.com/