Allez plus loin dans le numérique

Hors série

Forums

Contacts

01net.

91 utilisateurs connectés

Forum de L'Ordinateur Individuel / Programmation / CSS pour IE7 ou mozilla3

CSS pour IE7 ou mozilla3

marvelous02 le 20 décembre 2008 à 15h45

salut, je bidouille un peu pour faire quelque chose de propre et voilà que mozilla et ie7 n'affiche pas les mêmes couleurs et design !! Comme les images parlent mieux que les gens, voyez ici. Ouvrez dans les 2 navigateurs et comparez.

voici le code css utilisé, vos remarques sont les bienvenus. merci d'avance, amicalement

[code css] a écrit :

#bouton a{position:relative; float:left; width:150px; height:30px; top:5px; border-color:#FF00CC; border-style:outset; border-left:5px outset #FF00CC; border-right:5px outset #FF00CC; border-top:5px outset #FF00CC; border-bottom:5px outset #FF00CC; text-decoration:none; text-align:center; background:#FFFFCC; margin-left:3px}

#bouton a:hover{background-color:#0000FF; background-image:url(cyril.jpg); color:#FFFF33}

#bouton p{text-align:center; padding:5px;}

edit : j'aimerai unifier l'affichage, et si possible donne à mozilla le rendu ie7.

-->Message édité par marvelous02 le 20/12/2008 15:48:09<--

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre

prog++ le 22 décembre 2008 à 20h30

Oh mon dieu... Quelle horreur ce code !

Bon déjà sur le web, on s'abstient de mettre autre chose que des lettres non accentuées, des - et des _ dans les noms de fichiers pour éviter toute erreur.

Ensuite, je vois que tous les liens ont pour id "bouton". Aïe Aïe Aïe... interdit ca. Un id ne sert qu'une fois.

Fusionner les css serait pas mal. Allez hop, tout dans la feuille externe !

Je vais même pas essayer de modifier ce code, on va en réecrire un en se basant sur le rendu de IE6 :

barre_tuto.html a écrit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css_externe.css" />
<title>Barre fixe</title>
</head>
<body>
<ul id="topbar">
<li><a href="index.html">Accueil</a></li>
<li><a href="musique_pps.html">Récuperer la musique des PPS</a></li>
<li><a href="mail_cci.html">Envoyer un mail en Cci</a></li>
<li><a href="securite.html">Sécurité</a></li>
<li><a href="telephone_adsl.html">Téléphone adsl partout</a></li>
<li><a href="partition_raw.html">Partition en Raw</a></li>
</ul>
<div style="clear: both;"></div>
</body>
</html>

css_externe.css a écrit :

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

li {
display: block;
margin: 1px;
float: left;
text-align: center;
font-size: 10pt;
background-color: #FFFFCC;
border: 3px solid #800080;
}

a {
display: block;
border: 2px outset #800080;
padding: 1px;
width: 148px;
height: 28px;
text-decoration: none;
}

a:hover {
color: #FFFF00;
background: #0000FF url(cyril.jpg) center center no-repeat;
}

Le rendu est peut-être pas excellent (couleurs à retravailler), mais le résultat est conforme aux normes, et s'affiche à peu près pareil sous Internet Explorer et Firefox (mais le mieux est de se conformer au style de firefox, qui est plus proche des recommendations du w3c), et en plus il est simplifié !

[edit] a écrit :

J'ai retiré le code relatif à l'icône. Renomme ton fichier ico en favion.ico et met le à la racine du serveur, ca évite du code inutile et c'est compatible avec plus de navigateurs. Si tu ne vois pas l'icône, vide le cache du navigateur et redémarre le.

-->Message édité par prog++ le 22/12/2008 20:32:36<--

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

marvelous02 le 22 décembre 2008 à 23h02

re, impeccable, comme je cherche les info sur le net, je croise les données, ce qui donne parfois des codes "Oh mon dieu... Quelle horreur ce code ! ". Je vois que j'ai encore des progrès à faire et je vais de ce pas étudier ton code. Encore merci pour le coup de main, amicalement

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre

prog++ le 29 décembre 2008 à 14h17

Bien sûr si tu comprends pas trop le code je peux t'expliquer !

Bon et puis je reprends ce que j'ai dit plus haut : le résultat le plus conforme aux règles du w3c sera obtenu avec les navigateurs programmés sur le moteur WebKit (et mis à jour), càd Apple Safari et Google Chrome. Un code valide à plus de chances d'être bien vu partout.

-->Message édité par prog++ le 29/12/2008 14:19:57<--

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

marvelous02 le 29 décembre 2008 à 18h37

re, pour l'instant ça baigne, je mets en place. J'ai même modifié le code. Un petit coup d'oeil ici, et ton code là. J'espère que ça baigne, et que je ne me suis pas trop mis le doigt dans l'oeil. merci, amicalement

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre

prog++ le 31 décembre 2008 à 12h34

re

Y'a une faute à ton lien "Musique/Imades des PPS

Sinon ca à l'air plutôt pas mal, la gestion des frames est légèrement à revoir (eciter les barres de défilement). Perso, j'evite les frames, mais bon...

Amicalement

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

marvelous02 le 01 janvier 2009 à 22h16

re, je trouve pratique sur les frames le fait que tu changes les liens sur une seule page et pas sur toutes, mais si tu as mieux en équivalent, je suis preneur. De plus pourquoi eviter les frames ?? amicalement

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre

med365 le 02 janvier 2009 à 16h11

Salut

Je me permet de répondre au moins en partie à ton message

Les frames sont assez déconseillées car ils peuvent rendre la navigation assez troublante pour quelqu'un habitué à une page unique, de plus ils réduisent la partie affichable en "bloquant" une partie de la fenêtre ce qui a pour risque de multiplier les barres de défilement pour peu que la page contiennent une assez grande quantité d'informations.
Il fut un temps ou les navigateurs géraient mal les frames, actuellement la gestion des cadres est normalement assez bonne par la plupart des navigateurs mais peut-être subsiste-il des incompatibilités. Un navigateur en ligne de commande comme lynx ne gère pas les frames par exemple, et je ne sais pas ce qu'il en est pour les lecteurs d'écran des aveugles.

Afin d'établir un menu affiché en permanence Javascript peut t'aider, sinon générer dynamiquement la page en PHP avec une page "de base" avec ton menu ou tu le veux et du code PHP qui va chercher le contenu à mettre dans une base de donnée.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>

</head>
<body>


</body>
</html>

Ou quelque chose du genre, je précise que je ne code pas en PHP et que j'ai pu oublier certaines choses

Voilà en espérant t'avoir apporté des informations utiles.
A+

-------
/!\ A lire avant de poster un log Hijackthis!! /!\
--------------------------------
Mon techno blog - Mes tutos - Projet Antimalware - La charte du forum de l'OI
Fedora Powered http://fedoraproject.org/ - Gymnaste biévrois

[:Ordinateur-Individuel:1]

répondre

marvelous02 le 02 janvier 2009 à 16h41

re, merci med365 . Pour l'instant je ne connaîs pas encore le php, ni le javascript. J'ai déjà trouver quelques petits trucs sur le web, (un code javascript qui faisait apparaitre 1 fenêtre avec les liens) mais j'évite tant que possible le "tout fait" sans comprendre comment le modifier. C'est pourquoi pour l'instant je bricole avec les <table>, les <div> et le css. Mais je garde vos précieux conseils et je tacherai de m'y intéresser ultèrieurement. Dès que j'y touche, je ne manquerai pas de vous tenir au courant. amicalement

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre

prog++ le 02 janvier 2009 à 19h49

Re

Pour le système de gestion de contenu en php, je suis actuellement en train de bosser dessus. Si j'arrive à le terminer (ce qui n'est pas gagné :neutre:

), je le mettrais à disposition du grand public.

med365, je croyais que le xhtml nécessitait que la balise <html> comprenne un argument xmlns ? C'est uniquement le xhtml 1.1 ? Ou c'est pas obligatoire ?

-------
http://der-drachen.blogspot.com
http://derdrachen.deviantart.com

répondre

med365 le 03 janvier 2009 à 14h33

Tu as tout à fait raison pour le xmlns je le met toujours en XHTML 1.0 mais la j'ai copié par flemme l'entête de cette page du forum

Un code valide w3 serait :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Plop</title>
</head>
<body>
<p>
Plop
</p>
</body>
</html>

Ici c'est du strict mais le xmlns est aussi nécessaire avec du transitional

A+

répondre

marvelous02 le 04 février 2009 à 10h00

re, et beh ça avance un peu, je suis arrivé un peu à ce que je voulais, mais comment faire pour que l'image s'affiche par dessus le bouton. Une image vaut mieux que des grands mots, alors un petit tour ici et passez la souris sur les bouton de gauche, vous comprendrez mieux. encore merci, amicalement

EDIT : j'ai trouvé, il suffit de changé le chiffre du code z-index qui détermine la priorité des calques.

-->Message édité par marvelous02 le 04/02/2009 19:02:46<--

-------
mon site à moi (maj : 09/04/09)

commençons par le plus simple et n'oublions pas d'informer ceux qui nous répondent !!

répondre