css IE, FF et mise en page - HTML/CSS - Programmation
Marsh Posté le 22-07-2004 à 22:31:57
IE n'applique pas les règles d'héritage pour les tableaux. Il faut donc que tu forces la couleur pour les cellules.
Marsh Posté le 22-07-2004 à 22:41:35
forcer, tu veux donc dire dans le fichier html? c'est ça?
Marsh Posté le 22-07-2004 à 22:43:04
non
Marsh Posté le 22-07-2004 à 22:51:16
Ben je sais pas, tu définis un style pour le conteneur de l'image (un TD c'est ça ?)
Je sais pas comment est fait ton code HTML, cette phrase là ne veut pas dire grand chose :
minipouss a écrit : dans la feuille de style la déclaration est la suivante car tout cela va dans des <td> d'une table déclarée en <div class="titraccueil"> |
Marsh Posté le 22-07-2004 à 22:56:05
désolé, voila l'appel qui va avec
Citation : <div class="titraccueil"><table summary="titre accueil"><tbody><tr><td><img src="Vignettes/gauche.jpg" alt=""></img></td><td align="center"><b>Bienvenue sur le site d'ANIA née le 14 Mars 2002</b></td><td><img src="Vignettes/droite.jpg" alt=""></img></td></tr></tbody></table></div> |
Marsh Posté le 22-07-2004 à 22:58:49
Bon c'est bien ce que je pensais. Donc tu définis le style pour TD.
Ceci dit tu pourrais faire sans tableau...
Marsh Posté le 22-07-2004 à 23:02:39
comment définir un style juste pour le td? avec un ".titraccueil td" dans le css, c'est ça?
Sans tableau? pourquoi pas mais comment faire un style différent dans ce cas là? j'aurai le même problème non?
désolé je débute dans la programmation 'propre'. Il y a un moment j'ai repiqué un site et basé tout sur des tableaux donc je suis habitué à ça pour le moment
merci pour tes réponses .......et ta patience
Marsh Posté le 22-07-2004 à 23:05:45
minipouss a écrit : comment définir un style juste pour le td? avec un ".titraccueil td" dans le css, c'est ça? |
Tout à fait !
minipouss a écrit : |
Le problème d'IE c'est que les tableaux n'héritent pas des styles définis en amont. S'il n'y a plus de tableau il n'y a plus de problème
Donc ce qu'il faudrait faire c'est ne faire plus qu'un image, la mettre en fond du DIV et écrire directement dans le DIV.
Marsh Posté le 22-07-2004 à 23:08:52
Citation : Donc ce qu'il faudrait faire c'est ne faire plus qu'un image, la mettre en fond du DIV et écrire directement dans le DIV. |
rigolo ça . je tente demain et je te dis.
Merci beaucoup et bonne nuit
Marsh Posté le 23-07-2004 à 15:18:54
bon en tentant de modifer avec un ".titraccueil td" je pige pas pourquoi c'est Firefox qui merde. Donc je suis passé à la méthode sans tableau.
le css
Citation : .titraccueil { |
et l'html qui va avec
Citation : <div class="titraccueil"><b>Bienvenue sur<br />le site d'ANIA<br />née le<br />14 Mars 2002</b></div> |
y a encore un écart entre IE et FF mais c'est juste une ligne noire en bas c'est tout.
Merci pour le conseil
Autre question? pour mettre côte à côte de 2 à 6 photos je peux me passer aussi des tableaux ou là vaut mieux que je les utilise, sachant qu'il n'y en aura qu'une série par page?
Marsh Posté le 23-07-2004 à 15:37:16
en vérifiant mon css il me dit ok mais
Citation : Warnings |
mais si je mets une font-family style "Arial, Helvetica, sans serif" j'aime pas comment il écrit donc en fait je laisse le navigateur choisir par défaut je pense. C'est pas très propre ça non?
Marsh Posté le 23-07-2004 à 16:32:21
pour la ligne noire ; ça doit venir du fait que ton image est pas défini comme un block :
http://incongru.webdynamit.net/EspaceSousLesImages
pour le style des polices, si tu mets arial, helvetica seulement, le navigateur va chercher si il a ces 2 polices et dans le cas contraire il affichera avec sa police par défaut (avec ou sans serif, monospace ou non ; ça dépend du paramétrage du navigateur donc si je mets wingding en police par défaut, ça va être assez illisible).
si tu mets arial, helvetica, sans-serif ; il va chercher en premier lieu à utiliser ces 2 polices puis il se rabattra sur la police sans-serif par défaut.
le 2° cas est mieux
http://forum.hardware.fr/forum2.ph [...] 618&cat=10
Marsh Posté le 23-07-2004 à 16:34:38
pour les photos l'une à côté de l'autre, regarde du côté des flottants (float: left ou float: right) :
http://openweb.eu.org/articles/initiation_float/
http://incongru.webdynamit.net/PositionnementCss
Marsh Posté le 23-07-2004 à 17:14:12
ok Merci Mjules (c'est cool de te retrouver ici, toujours de bon conseil là où tu réponds )
Marsh Posté le 23-07-2004 à 17:25:33
en fait j'ai beau mettre
Citation : img { |
ou alors la même chose en ".titraccueil img"
ou alors directement "display: block;" à l'intérieur de ".titraccueil"
rien n'y fait, j'ai toujours cette ligne. Peut-être parce que c'est une image de fond et pas une img.
je continue les tests
Marsh Posté le 23-07-2004 à 20:28:39
minipouss a écrit : et l'html qui va avec
|
Tu peux te passer de <b>
minipouss a écrit : |
Mouais, là c'est plus délicat... Essaye de jouer sur la propriété line-height, mais ça m'a l'air d'être un bug de IE
minipouss a écrit : |
Ben vu que les images se comportent comme du texte, tu peux les mettre cote à cote en écrivants les tags <img> les uns à la suite des autres.
Marsh Posté le 23-07-2004 à 20:29:52
minipouss a écrit : en vérifiant mon css il me dit ok mais
|
sans-serif avec le tiret. Sinon il prend juste "serif" qui est le type générique pour les polices à empattement (du style Times New Roman)
Marsh Posté le 23-07-2004 à 20:30:57
minipouss a écrit : |
Oui tout à fait. Ca ne s'applique pas ici.
Marsh Posté le 23-07-2004 à 21:42:43
gm_superstar a écrit a écrit : Tu peux te passer de <b> |
Bah, c'est bien pour mettre en gras non?
gm_superstar a écrit a écrit : Mouais, là c'est plus délicat... Essaye de jouer sur la propriété line-height, mais ça m'a l'air d'être un bug de IE |
Mouais. Justement j'ai défini le line-height au plus juste pour FF donc je laisse comme ça, ça fait pas horrible non plus et ceux qui n'aiment pas ben ils auront qu'à prendre un navigateur w3c compliant
gm_superstar a écrit a écrit : Ben vu que les images se comportent comme du texte, tu peux les mettre cote à cote en écrivants les tags <img> les uns à la suite des autres. |
Ok nickel
gm_superstar a écrit a écrit : sans-serif avec le tiret. Sinon il prend juste "serif" qui est le type générique pour les polices à empattement (du style Times New Roman) |
Oui merci pour le tiret Par contre l'Arial spa beau mais je sais pas quoi mettre car je connais pas les fontes les plus courantes sur les différents systèmes. J'ai cherché sur google avec "fontes plus utilisées" mais ça m'a pas donné grand chose, je vais le refaire en anglais pour voir.
Merci pour toutes tes réponses, je continue ma mise à jour du site
Marsh Posté le 23-07-2004 à 21:48:34
essayes verdana pour le sans serif et tahoma pour le serif
Marsh Posté le 23-07-2004 à 21:53:29
minipouss a écrit : Bah, c'est bien pour mettre en gras non? |
Bah oui mais ça peut se faire avec les CSS.
Marsh Posté le 23-07-2004 à 21:54:01
Mjules a écrit : essayes verdana pour le sans serif et tahoma pour le serif |
Georgia est pas mal aussi en serif
Marsh Posté le 23-07-2004 à 21:55:49
y a un site qui dit ça pour les plus utilisées sur site web : Arial Black, Arial (Helvetica), Comic Sans, Courier New, Impact, Times New Roman, Verdana (Tahoma, Trebuchet)
ils conseillent Verdana
celui-là dit la même chose avec Georgia en plus
je pense donc à Verdana, suivi d'Helvetica, Arial et sans-serif pour le défaut
Marsh Posté le 23-07-2004 à 21:56:22
ReplyMarsh Posté le 23-07-2004 à 21:59:15
Mjules a écrit a écrit : essayes verdana pour le sans serif et tahoma pour le serif |
gm_superstar a écrit a écrit : Georgia est pas mal aussi en serif |
ben ça confirme ce qui est dit sur les deux sites que je viens de voir
comment je définis à la fois du serif et du sans serif et le serif c'ets pas plutôt pour l'impression?
Marsh Posté le 23-07-2004 à 22:03:15
si serif c'est plutôt pour l'impression ; mais c'est dans le cas où tu voudrais une police sérif quelque part pour des raisons de design
Marsh Posté le 23-07-2004 à 22:06:25
minipouss a écrit : comment je définis à la fois du serif et du sans serif et le serif c'ets pas plutôt pour l'impression? |
Comment ça "à la fois" ? Le choix se fait en fonction de tes goûts et du style que tu veux donner à ta page...
Marsh Posté le 23-07-2004 à 22:07:13
ok on est bien d'accord c'est l'un ou l'autre selon les endroits
et une question en ce qui concerne la définition des tailles. J'ai commencé en me basant sur un site qui utilise l'unité "em" mais j'ai vu que FF et IE ne l'interprètent pas de la même façon. Donc je suis revenu à "px" comme ça c'est fixe?
J'ai raison ou pas
Marsh Posté le 23-07-2004 à 22:19:39
tailles des polices ? j'ai bien aimé cet article sur le sujet où ils expliquent que les tailles en pourcentage c'est mieux
http://pompage.net/pompe/designelastique/
Marsh Posté le 23-07-2004 à 22:42:11
Ok mais par exemple pour ne pas être embêté par IE pour ce qui me posait problème plus haut, faut que le titre soit en fixe (px) sinon le texte débordera sur les images ou sera trop petit.
Par contre pour le reste je vais utiliser du "em" comme j'étais parti pour le faire
j'ai profité de ton lien pour choper du code pour des infos bulles. D'après ce que j'ai vu c'est "title" à l'intérieur d'une balise <a> si c'est pour un lien et "abbr" pour un texte quelconque.
edit : ah non connerie, il semble que c'est toujours du title
vous connaissez un super glossaire (avec une explication pour chaque terme)? J'avoue j'ai pas encore cherché vraiment mais même le guide du W3C n'est pas exhaustif il me semble.
edit : http://aliasdmc.free.fr/balise/index.html a l'air costaud
Marsh Posté le 23-07-2004 à 22:50:41
minipouss a écrit : edit : ah non connerie, il semble que c'est toujours du title |
Exact <abbr> c'est un élément HTML pour signaler une abbréviation, mais ça ne dispense pas d'utiliser title dedans pour avoir l'info-bulle.
minipouss a écrit : |
Si si le site du W3C est complet (encore heureux) sinon il y a : http://www.blooberry.com/indexdot/index.html qui est exhaustif pour tout ce qui est HTML et CSS
Marsh Posté le 23-07-2004 à 22:58:21
ok je regarderai ton lien demain :jap
pour le "title" on ne peut pas le mettre sur un mot tout con? faut utiliser par exemple un span d'abord?
Marsh Posté le 23-07-2004 à 23:04:24
Faut le mettre dans un span
Marsh Posté le 23-07-2004 à 23:06:54
ok ça roule.
génial d'avoir des personnes comme toi et Mjules pour booster mon envie de progresser en faisant qque chose de propre
bonne nuit et merci encore
Marsh Posté le 24-07-2004 à 15:01:05
coucou me revoilou
petite question : peut-on mettre un span dans un span dans le code html? En fait par exemple si je crée un span pour définir une couleur pour un texte (nommé color1 dans le css) et un span pour mettre un texte à telle ou telle taille (nommé taille1 dans le css), je peux mettre indifféremment dans le code html :
<span class="color1"><span class="taille1">coucou</span>c'est moi</span>
ou
<span class="taille1"><span class="color1">coucou</span>c'est moi</span>
selon ce que je souhaite faire non? "coucou" ayant le format cumulé des deux <span> et "c'est moi" ayant le format du premier <span> et du texte par défaut dans la zone où je me trouve.
c'est ça? Suis-je clair?
Marsh Posté le 24-07-2004 à 15:18:42
Oui, oui tu peux mettre tous les span que tu veux.
Dans les 2 cas ça ne change rien pour "coucou" mais dans le premier, "c'est moi" aura la classe "color1" alors que dans le second il aura la clase "taille1"
Sinon sache que tu peux mettre plusieurs classes dans un attribut class : class="color1 taille1" ça peut être pratique dans certains cas...
Marsh Posté le 24-07-2004 à 15:22:29
d'après moi
dans le cas 1 "coucou" sera en color1 et taille1 alors que "c'est moi" sera en color1 et le défaut pour la taille
dans le cas 2 "coucou" sera en taille1 et color1 (comme le cas 1 en fait ) alors que "c'est moi" sera en taille1 et le défaut pour la couleur.
non? (edit2 : oui j'ai testé ça fait bien ça, cool)
edit : tu veux dire que même avec deux span définis dans le css (color1 et taille1) je peux aussi mettre dans l'html <span class="color1 taille1">? pratique ça (edit2 : ok ça marche)
Marsh Posté le 25-07-2004 à 20:50:54
minipouss le retour
tout d'abord merci pour vos conseil, j'ai bien avancé mon job
Peut-on bloquer le "text resizing" du navigateur? en fait c'est pour le texte du titre calé sur l'image (en rapport avec la toute première question de ce topic). Pour le reste du texte au contraire, que les gens adaptent si ils ont besoin.
D'ailleurs ce texte est défini en pixel alors que le reste est en "em", en proportionnel donc.
une idée? (ou plusieurs )
Marsh Posté le 22-07-2004 à 21:15:28
bonjour,
Je souhaite refaire mon site perso en respectant les normes du W3C. Pas de problème de ce côté, je vérifie au fur et à mesure de l'avance de mon fichier html que tout va bien (il me prévient juste que l'utf-8 n'est pas toujours lu par les anciens navigateurs), idem du côté du css qui est valide.
J'ai bien lu dans un topic que le hover n'est interprété par IE que dans le a pas dans un autre style. Par contre, je ne savais pas que le color et le font-size avaient des problèmes.
Bon, plutot que des paroles, j'illustre avec les vues suivantes
page sous FF
page sous IE où le texte au lieu d'être en jaune est en noir (et noir sur noir c'est pas beau )
dans la feuille de style la déclaration est la suivante car tout cela va dans des <td> d'une table déclarée en <div class="titraccueil">
.titraccueil {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
background-color : #000000;
width: 18.6em;
line-height: 1.3em;
font-size: 2.2em;
border: none;
margin: 0em;
}
je vais devoir faire deux versions en testant le navigateur de la personne qui vient sur le site? Car pas question de faire un code non compliant.
ou alors faut que je passe les arguments dans le fichier html directement?
Merci pour votre aide
edit : on peut voir ça aussi sur ce site http://bytewarrior.madoka.be/jabbe [...] /pt01.html par exemple
Message édité par minipouss le 24-07-2004 à 16:41:09