css IE, FF et mise en page

css IE, FF et mise en page - HTML/CSS - Programmation

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
http://home.tele2.fr/aniamaniac/vueFF.png
 
page sous IE où le texte au lieu d'être en jaune est en noir (et noir sur noir c'est pas beau :D)
http://home.tele2.fr/aniamaniac/vueIE.png
 
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">

Citation :

.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 :jap:
 
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
Reply

Marsh Posté le 22-07-2004 à 21:15:28   

Reply

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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 22-07-2004 à 22:41:35    

forcer, tu veux donc dire dans le fichier html? c'est ça?

Reply

Marsh Posté le 22-07-2004 à 22:43:04    

Reply

Marsh Posté le 22-07-2004 à 22:44:42    

ah :??:

Reply

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">


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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>


Message édité par minipouss le 22-07-2004 à 22:56:47
Reply

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...


Message édité par gm_superstar le 22-07-2004 à 22:59:24

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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 :jap: .......et ta patience :D


Message édité par minipouss le 22-07-2004 à 23:03:13
Reply

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 :


Sans tableau? pourquoi pas mais comment faire un style différent dans ce cas là? j'aurai le même problème non?


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.


Message édité par gm_superstar le 22-07-2004 à 23:06:10

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 22-07-2004 à 23:05:45   

Reply

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.


 
 :ouch:  
 
rigolo ça . je tente demain et je te dis. :jap:
 
Merci beaucoup et bonne nuit :hello:

Reply

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  {
 
    * font-family : Arial, Helvetica;
    * font-size : 36px;
    * line-height : 44px;
    * text-align : center;
    * color : #ffff00;
    * width : 600px;
    * height : 172px;
    * background-image : url(../Vignettes/titracc.jpg);

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.
 
http://home.tele2.fr/aniamaniac/vueFF2.png
http://home.tele2.fr/aniamaniac/vueIE2.png
 
Merci pour le conseil :jap:
 
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?


Message édité par minipouss le 23-07-2004 à 15:20:37
Reply

Marsh Posté le 23-07-2004 à 15:37:16    

en vérifiant mon css il me dit ok mais
 

Citation :

Warnings
URI : http://home.tele2.fr/aniamaniac/files/aniastyle.css
 
    * Line : 0 font-family: You are encouraged to offer a generic family as a last alternative


 
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?


Message édité par minipouss le 23-07-2004 à 15:37:32
Reply

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


Message édité par Mjules le 23-07-2004 à 16:36:40

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

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


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 23-07-2004 à 17:14:12    

ok Merci Mjules :jap: (c'est cool de te retrouver ici, toujours de bon conseil là où tu réponds :))

Reply

Marsh Posté le 23-07-2004 à 17:25:33    

en fait j'ai beau mettre  

Citation :

img {
display: block;
}


 
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

Reply

Marsh Posté le 23-07-2004 à 20:28:39    

minipouss a écrit :

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>



Tu peux te passer de <b>

minipouss a écrit :


y a encore un écart entre IE et FF mais c'est juste une ligne noire en bas c'est tout.


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 :


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?


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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 23-07-2004 à 20:29:52    

minipouss a écrit :

en vérifiant mon css il me dit ok mais
 

Citation :

Warnings
URI : http://home.tele2.fr/aniamaniac/files/aniastyle.css
 
    * Line : 0 font-family: You are encouraged to offer a generic family as a last alternative


 
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?


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)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 23-07-2004 à 20:30:57    

minipouss a écrit :


rien n'y fait, j'ai toujours cette ligne. Peut-être parce que c'est une image de fond et pas une img.


Oui tout à fait. Ca ne s'applique pas ici.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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 :D 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 :jap:


Message édité par minipouss le 23-07-2004 à 21:44:30
Reply

Marsh Posté le 23-07-2004 à 21:48:34    

essayes verdana pour le sans serif et tahoma pour le serif


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

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.


Message édité par gm_superstar le 23-07-2004 à 21:53:46

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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 :)


Message édité par minipouss le 23-07-2004 à 21:56:33
Reply

Marsh Posté le 23-07-2004 à 21:56:22    

gm_superstar a écrit :

Bah oui mais ça peut se faire avec les CSS.


 
ok ça roule je vais faire ça ;)

Reply

Marsh 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 :jap:
 
comment je définis à la fois du serif et du sans serif :??: et le serif c'ets pas plutôt pour l'impression?

Reply

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


Message édité par Mjules le 23-07-2004 à 22:03:53

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

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...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 23-07-2004 à 22:07:13    

ok :jap: 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 :??:


Message édité par minipouss le 23-07-2004 à 22:07:49
Reply

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/


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

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 :jap:
 
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


Message édité par minipouss le 23-07-2004 à 22:45:37
Reply

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 :


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.


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


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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?

Reply

Marsh Posté le 23-07-2004 à 23:04:24    

Reply

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 :jap:
 
bonne nuit et merci encore

Reply

Marsh Posté le 24-07-2004 à 15:01:05    

coucou me revoilou :D
 
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? :D


Message édité par minipouss le 24-07-2004 à 15:04:15
Reply

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...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

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 :D) 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)


Message édité par minipouss le 24-07-2004 à 15:34:48
Reply

Marsh Posté le 25-07-2004 à 20:50:54    

minipouss le retour [:ddr555]
 
tout d'abord merci pour vos conseil, j'ai bien avancé mon job :jap:
 
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 :D)


Message édité par minipouss le 25-07-2004 à 22:19:08
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed