Problème CSS et navigateurs (+ lycos ?)
NiRaDo
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
car0 Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
car0 Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
Bonsoir,
Je me suis mis depuis quelques temps au CSS et XHTML... Et déjà, les problèmes surviennent !
[1] Problème 01
Déjà, il y a une chose que je ne comprend pas : lorsque dans une feuille CSS nous mettons :
body
{
width: 700px ;
margin: auto ;
}
... Il s'avère que le navigateur Internet Explorer adopte un comportement ressemblant à un width: 100% ! Donc biensûr jusqu'ici, c'est logique que le bloc body ne soit pas centré.
J'en ai donc tiré la conclusion suivante, et j'ignore si elle est fausse : Internet Explorer n'accèpte pas qu'on définisse une taille pour le BODY.
J'ai donc opté la solution basique : créer une balise universelle DIV en lui mettant un nom ridicule (leBody) . J'écris donc :
leBody
{
width: 700px ;
margin: auto ;
}
...et je supprime les propriétés indiquées pour Body simple.
Donc là, impécable ! Le bloc principal du site est bien centré quelque soit la résolution, et quelque soit le navigateur.
Le problème : une fois que je transfère la chose sur l'hébergeur Lycos, le bloc se réaligne à gauche sur IE. Par contre sur Firefox ça marche.
Quelqu'un serait-il pourquoi ? Cela vient-il de Lycos ?
[2] Problème 02
Celui là, toujours en rapport avec le CSS, est un peu bizare. Voici un code source vite fait pour montrer comment est structuré un morceau du fichier XHTML :
<div id="lebody">
<div id="partie_enTete">
<table id="barreInformations">
<tr><td class="barreInfo_titre">Barre d'Information</td></tr>
<tr><td class="barreInfo_contenu">Le contenu</td></tr>
</table>
<div id="barreMenu">
<a id="lienAccueil" href="#">Accueil</a>
<a id="lienInformations" href="#">Informations</a>
<a id="lienLiens" href="#">Liens</a>
<a id="lienInformatique" href="#">Informatique</a>
<a id="lienDivers" href="#">Divers</a>
<a id="lienMiniTChat" href="#">Mini Tchat</a>
<a id="LienContact" href="#">Contact</a>
</div>
</div>
... Là, tout est Ok, mais lorsque je veux appliquer par exemple une largeur de 2,4 cm et une bordure blanche tout autour :
#lebody #partie_enTete #barreMenu a
{
width: 2,4cm ;
border: 1px white solid ;
}
... en local, sur IE et Firefox il n'y a pas les 2,4 cm respectés : la largeur s'adapte au contenu du texte. Sur IE, il n'y a qu'une bordure à droite et à gauche de chaque lien, mais pas en bas et en haut. Et je dois dire que même en essayant les propriétés pour chacune des bordures, ça ne fonctionne pas.
... une fois sur l'hébergeur lycos : IE affiche bien les 2,4 cm pour chaque liens, et les bordures sont de tous les côtés comme il le faut. Par contre sur Firefox, les 2,4 cm ne sont pas respectés (pareil qu'en local donc), mais les bordures sont bien présentes tout autour des liens.
A titre d'information, j'ai aussi essayé de faire pour chaque id des liens pour mettre les propriétés, mais rien n'y fait !
Je me suis mis depuis quelques temps au CSS et XHTML... Et déjà, les problèmes surviennent !
[1] Problème 01
Déjà, il y a une chose que je ne comprend pas : lorsque dans une feuille CSS nous mettons :
body
{
width: 700px ;
margin: auto ;
}
... Il s'avère que le navigateur Internet Explorer adopte un comportement ressemblant à un width: 100% ! Donc biensûr jusqu'ici, c'est logique que le bloc body ne soit pas centré.
J'en ai donc tiré la conclusion suivante, et j'ignore si elle est fausse : Internet Explorer n'accèpte pas qu'on définisse une taille pour le BODY.
J'ai donc opté la solution basique : créer une balise universelle DIV en lui mettant un nom ridicule (leBody) . J'écris donc :
leBody
{
width: 700px ;
margin: auto ;
}
...et je supprime les propriétés indiquées pour Body simple.
Donc là, impécable ! Le bloc principal du site est bien centré quelque soit la résolution, et quelque soit le navigateur.
Le problème : une fois que je transfère la chose sur l'hébergeur Lycos, le bloc se réaligne à gauche sur IE. Par contre sur Firefox ça marche.
Quelqu'un serait-il pourquoi ? Cela vient-il de Lycos ?
[2] Problème 02
Celui là, toujours en rapport avec le CSS, est un peu bizare. Voici un code source vite fait pour montrer comment est structuré un morceau du fichier XHTML :
<div id="lebody">
<div id="partie_enTete">
<table id="barreInformations">
<tr><td class="barreInfo_titre">Barre d'Information</td></tr>
<tr><td class="barreInfo_contenu">Le contenu</td></tr>
</table>
<div id="barreMenu">
<a id="lienAccueil" href="#">Accueil</a>
<a id="lienInformations" href="#">Informations</a>
<a id="lienLiens" href="#">Liens</a>
<a id="lienInformatique" href="#">Informatique</a>
<a id="lienDivers" href="#">Divers</a>
<a id="lienMiniTChat" href="#">Mini Tchat</a>
<a id="LienContact" href="#">Contact</a>
</div>
</div>
... Là, tout est Ok, mais lorsque je veux appliquer par exemple une largeur de 2,4 cm et une bordure blanche tout autour :
#lebody #partie_enTete #barreMenu a
{
width: 2,4cm ;
border: 1px white solid ;
}
... en local, sur IE et Firefox il n'y a pas les 2,4 cm respectés : la largeur s'adapte au contenu du texte. Sur IE, il n'y a qu'une bordure à droite et à gauche de chaque lien, mais pas en bas et en haut. Et je dois dire que même en essayant les propriétés pour chacune des bordures, ça ne fonctionne pas.
... une fois sur l'hébergeur lycos : IE affiche bien les 2,4 cm pour chaque liens, et les bordures sont de tous les côtés comme il le faut. Par contre sur Firefox, les 2,4 cm ne sont pas respectés (pareil qu'en local donc), mais les bordures sont bien présentes tout autour des liens.
A titre d'information, j'ai aussi essayé de faire pour chaque id des liens pour mettre les propriétés, mais rien n'y fait !
A voir également:
- Problème CSS et navigateurs (+ lycos ?)
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
- Peut on avoir plusieurs navigateurs sur son pc ✓ - Forum Windows Vista
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Jonathan visite le site web du bureau international des poids et mesures (bipm.org). quel service d’internet permet à son navigateur de trouver l’adresse ip qui correspond à bipm.org ? - Forum Webmastering
1 réponse
Salut NiRaDo,
Problème 1:
Tu as raison pour le width quoique je crois que margin:auto; ne fonctionne pas non plus. Le problème, c'est surtout IE qui n'est pas conforme aux standards... J'utilise la même technique que toi. Par contre, ce serait mieux d'utiliser une largeur relative plutôt que des px. Tout le monde n'a pas la même résolution d'écran.
Pour Lycos... J'ai aussi déjà eu des problèmes avec. Je dirais que c'est effectivement le coupable. Regarde la source. Lycos met ses cochonneries partout (pour ses pub). IE semble mal le digérer, avec ta mise en page. Malheureusement, je ne peux pas t'aider beaucoup plus sur ce point :-/
Problème 2:
«Les unités de longueurs absolues (comme cm) ne sont utiles que si les propriétés physiques du média de sortie sont connues. ». (http://www.yoyodesign.org/doc/w3c/css2/syndata.html#value-def-length) Bref, tu dois connaître les paramètres physiques de ton écran pour que la longeur corresponde à ce que tu désires. C'est totalement inutile puisque tu ne pourras jamais maîtriser les écrans de usager qui cvont consulter ton site.
Quand aux problèmes de distance : c'est que la manière dont est calculé la largeur n'est pas la même chez IE et firefox (ça s'appelle le modèle de boîte). Va voir là http://openweb.eu.org/articles/dimensions_boites_css/.
Problème 1:
Tu as raison pour le width quoique je crois que margin:auto; ne fonctionne pas non plus. Le problème, c'est surtout IE qui n'est pas conforme aux standards... J'utilise la même technique que toi. Par contre, ce serait mieux d'utiliser une largeur relative plutôt que des px. Tout le monde n'a pas la même résolution d'écran.
Pour Lycos... J'ai aussi déjà eu des problèmes avec. Je dirais que c'est effectivement le coupable. Regarde la source. Lycos met ses cochonneries partout (pour ses pub). IE semble mal le digérer, avec ta mise en page. Malheureusement, je ne peux pas t'aider beaucoup plus sur ce point :-/
Problème 2:
«Les unités de longueurs absolues (comme cm) ne sont utiles que si les propriétés physiques du média de sortie sont connues. ». (http://www.yoyodesign.org/doc/w3c/css2/syndata.html#value-def-length) Bref, tu dois connaître les paramètres physiques de ton écran pour que la longeur corresponde à ce que tu désires. C'est totalement inutile puisque tu ne pourras jamais maîtriser les écrans de usager qui cvont consulter ton site.
Quand aux problèmes de distance : c'est que la manière dont est calculé la largeur n'est pas la même chez IE et firefox (ça s'appelle le modèle de boîte). Va voir là http://openweb.eu.org/articles/dimensions_boites_css/.
