Prb d'affichage des couleurs sous firefox [RESOLU]

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Nurbo, 8 Août 2007.

  1. Nurbo
    Nurbo Nouveau WRInaute
    Inscrit:
    11 Avril 2007
    Messages:
    13
    J'aime reçus:
    0
    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
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 817
    J'aime reçus:
    202
    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>
    
     
  3. Nurbo
    Nurbo Nouveau WRInaute
    Inscrit:
    11 Avril 2007
    Messages:
    13
    J'aime reçus:
    0
    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

    [​IMG]


    .
     
  4. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 817
    J'aime reçus:
    202
    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.
     
  5. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    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
     
  6. Pandore
    Pandore WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 108
    J'aime reçus:
    0
    gné ??? 8O
     
  7. Nurbo
    Nurbo Nouveau WRInaute
    Inscrit:
    11 Avril 2007
    Messages:
    13
    J'aime reçus:
    0
    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
     
  8. Nurbo
    Nurbo Nouveau WRInaute
    Inscrit:
    11 Avril 2007
    Messages:
    13
    J'aime reçus:
    0
    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:
    [​IMG]

    @+


    Nurbo
     
  9. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 817
    J'aime reçus:
    202
    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.
     
  10. Nurbo
    Nurbo Nouveau WRInaute
    Inscrit:
    11 Avril 2007
    Messages:
    13
    J'aime reçus:
    0
    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... :p 8)

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



    Nurbo
     
  11. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 817
    J'aime reçus:
    202
    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
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
Chargement...
Similar Threads - Prb affichage couleurs Forum Date
WordPress permalink produit préfixe url prb Débuter en référencement 10 Mai 2020
Prb avec le fichier robots.txt bloqué alors que tout semble ok Crawl et indexation Google, sitemaps 19 Octobre 2012
prblm google analytics Google Analytics 2 Mars 2011
Racine du site deux index html et php prb référencement ? Problèmes de référencement spécifiques à vos sites 22 Juillet 2009
prbleme ref Débuter en référencement 7 Janvier 2009
prb url rewritting URL Rewriting et .htaccess 25 Novembre 2008
prb avec mon site Problèmes de référencement spécifiques à vos sites 15 Septembre 2008
prb url rewriting côté PHP URL Rewriting et .htaccess 20 Juillet 2008
Prbleme avec les caracteres speciaux URL Rewriting et .htaccess 21 Décembre 2007
Prbl javascript : onchange vers onclick Développement d'un site Web ou d'une appli mobile 30 Juin 2007
Prb htaccess URL Rewriting et .htaccess 28 Juin 2007
Prb de Redirection ou rewriting / espace dans url URL Rewriting et .htaccess 1 Novembre 2006
Prb zonecheck : Impossible de résoudre le 'loopback' Administration d'un site Web 5 Septembre 2006
prb avec le refferer a partir d'une redirection Netlinking, backlinks, liens et redirections 19 Mars 2006
Prb: apache-ssl ne gere pas le php Administration d'un site Web 17 Janvier 2006
prb connexion reseau VPN distant Débuter en référencement 18 Octobre 2005
Prb url rewriting et redirection permanente URL Rewriting et .htaccess 24 Août 2005
Prbl: Importation gros fichiers ds phpmyadmin Administration d'un site Web 16 Février 2004
Prb de référencement et de page d'accueil Problèmes de référencement spécifiques à vos sites 5 Septembre 2003
Prb Apache 2.0.45 et mod_rewrite URL Rewriting et .htaccess 12 Mai 2003