- Statut : non résolu
- Ce sujet contient 15 réponses, 5 participants et a été mis à jour pour la dernière fois par Ajira, le il y a 18 années et 6 mois.
-
AuteurMessages
-
22 avril 2006 à 12 h 55 min #447449
Bonjour,
Comme souvent depuis deux jours, j’ai de nouveau un problème … 😋
Je pensais avoir enfin fini les modifications du thème par defaut afin qu’il corresponde au mieux à mes exigences, mais à se moment là je decide de voir ce qu’il en est sous Internet Explorer. Et là c’est le drame ! Ma belle petite barre de navigation n’est pas du tout où elle le devrait !Je vous montre un peu le code de mon header.php (seulement la partie qui vous interesse 😉)
<style type="text/css" media="screen">
body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }
<?php if ((! $withcomments) && (! is_single())) { ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
<?php } else { ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
#footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
#header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 229px; width: 758px; }
#headerimg { margin: 7px 9px 0; height: 229px; width: 740px; }
/* Ici commence le CSS pour la barre de navigation */
#navcontainer ul
{
padding-left: 0px;
margin-left: 10px;
background-color: #016FE8;
color: White;
float: left;
width: 719px;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #016FE8;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #ffffff;
color: #016FE8;
}
</style>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<br />
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Site</a></li>
<li><a href="http://localhost/blog/">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
¤ Sous Firefox
¤ Sous Internet Explorer
J’ai pensé à mettre margin-top et margin-right mais je ne trouvais pas le bon équilibre entre les deux navigateurs …
Si vous avez une idée, merci de bien vouloir m’éclairer22 avril 2006 à 14 h 56 min #572923l’idée ^^
c’est de mettre les bons margin-top et right pour firefox
et ensuite tu rajoutes _margin-top et _margin-right qui ne sera pris en compte que par IE22 avril 2006 à 15 h 26 min #572924Merci bien AmO, je ne connaissais pas cette technique bien pratique ! Tout marche parfaitement désormais !
#navcontainer ul
{
padding-left: 0px;
margin-left: 10px;
_margin-right: 11px;
_margin-top: 17px;
background-color: #016FE8;
color: White;
float: left;
width: 719px;
font-family: arial, helvetica, sans-serif;
}Voilà la partie de code modifié pour ceux que ca interesserait 😉
22 avril 2006 à 17 h 18 min #572925Il fallait la connaître cette astuce !
23 avril 2006 à 0 h 35 min #572926Le hic de cette technique… ce que ton CSS n’est plus validé par le W3C ^^
Perso je m’en fou mais bon 😉
23 avril 2006 à 9 h 24 min #572927pas mal pas mal… merci pour l’astuce, ça servira à d’autres 🙂
24 avril 2006 à 13 h 14 min #572928AmO wrote:Le hic de cette technique… ce que ton CSS n’est plus validé par le W3C ^^Perso je m’en fou mais bon 😉
Arf, donc pas approuvé par les puristes 😋 Enfin moi persos je m’en fou complétement, la plupart de mes visiteurs sont des non-initiés à la programmation … 😆
Sinon pour en revenir à nos moutons, en ce qui concerne header.php tout va bien par contre footer.php a été décalé 😐 (toujours sous IE). Comme quoi il ne fallait pas crier victoire trop tôt :'( Et comme une image parle toujours mieux que des mots :Une autre idée ? 😋
24 avril 2006 à 14 h 42 min #572929Lorsque j’entends IE, je me marre.. Vivement que ce navigateur soit abandonné et remplacé par Firefox, l’essayer c’est l’adopter… même la prochaine version IE ne gèrera pas lez CSS2 c’est dire !
24 avril 2006 à 19 h 22 min #572930codfingers wrote:Lorsque j’entends IE, je me marre.. Vivement que ce navigateur soit abandonné et remplacé par Firefox, l’essayer c’est l’adopter… même la prochaine version IE ne gèrera pas lez CSS2 c’est dire !Tes sources ?
Faut pas croire tout ce qu’on peut lire sur le web ^^IE7 ne gèrera pas l’ensemble des propriété CSS2 ^^ mais tout n’est pas forcément utile, ensuite il auront tjs leur propriété à eux enfin bref…
avec un margin-left à ton footer ca fonctionne pas ?
24 avril 2006 à 22 h 17 min #572931Bon finalement, AmO y était presque, à force de mettre des _margin-left sans voir de résultats arriver, j’ai pensé à mettre un ptit _padding-left: 22px; et hop tout est rentré dans l’ordre 🙂 Merci de m’avoir aidé 😉
Pour le moment j’ai l’impression que tout est rentré dans l’ordre 😋25 avril 2006 à 9 h 27 min #572922A noter quand même que les « astuces » IE en CSS ne fonctionneront plus dans la plupart des cas avec IE7.
Il n’y a qu’une seul bonne solution : créer une feuille de style spécific à IE et l’appeler avec les commentaires conditionnels :
<!--[if IE]>-->
Cette feuille de style permet d' »écraser » les valeurs des propriétés mal gérées uniquement pour IE.
(pour un autre navigateur ce code est un commentaire ignoré)25 avril 2006 à 12 h 23 min #572921Hum, encore quelque chose dont j’igniorais l’existence … Cette méthode est elle validé par W3C ? Avec cette technique est ce qu’il me faut reprendre l’intégralité de la feuille de style conforme ou je peux me contenter du strict minimum (juste ce qui ne va pas sous IE) ?
Si j’ai bien compris je crée une feuille de style « ie-specific-file.css » avec seulement « les valeurs des propriétés mal gérées par IE » que je place dans le dossier de mon thème c’est à dire /wp-content/themes/default/. Ensuite je met dans le header.php de mon theme :<link rel="stylesheet" href=" » type= »text/css » media= »screen » />
<!--[if IE]>-->
Ma démarche est elle bonne ?
25 avril 2006 à 13 h 43 min #572920C’est valide puique ce n’est qu’un commentaire.
Il ne faut reprendre que les propriétés dont tu veux changer la valeur dans IE. (c’est le principe de cascade)
<link rel="stylesheet" href=" » type= »text/css » media= »screen » />
<!--[if IE]>-->
<link rel="stylesheet" href="/ie-specific-file.css » />Comme cela c’est plus propre, le fichier ie-specific-file.css sera palcé dans le dossier de ton thème.
25 avril 2006 à 14 h 53 min #572919Cela ne fonctionne pas, du moins j’ai bien suivis les étapes cependant je n’ai pas l’impression que mon ie-specific-file.css soit prit en compte par IE puisque je me retrouve avec le même problème que lors de mon premier message :rolleyes:
Voici le code de ie-specific-file.css :#sidebar {
margin-left: 527px;
}
#footer {
padding-left: 22px;
}
#navcontainer ul {
margin-right: 11px;
margin-top: 17px;
}J’ai enlevé au préalable tout les _margin et _padding de mon style.css.
Où est l’erreur ? (J’ai la version 6 de IE)26 avril 2006 à 12 h 15 min #572932C’est peut être parce que je me suis trompé dans mon code :
<link rel="stylesheet" href=" » type= »text/css » media= »screen » />
<!--[if IE]>-->
<link rel="stylesheet" href="/ie-specific-file.css » /> -
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.