Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Découvrez notre sélection d'idées cadeaux pour Noël !

Statut : Résolu

Syntaxe commentaire conditionnel firefox /IE

didier6526, le mercredi 3 décembre 2008 à 16:11:16

Bonjour,
sur la page index de mon site
http://mycomenius.free.fr quand la souris survole les liens jaunes un texte apparait sur une petite ardoise.

survolez le 3è lien en haut à gauche avec l'alphabet et voyez la différence entre IE et firefox.
je n'ai pas les mêmes marges avec firefox et IE
Je souhaite utiliser les commentaires conditionnels pour changer le padding entre IE et firefox


blablabla


Le début de mon style est le suivant:

<style type="text/css" media="screen">

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

Je l'appelle avec le code suivant en spécifiant la class "lien gauche haut":

<td class="cellule25"ALIGN="center" VALIGN="center">
<a class="lien_gauche_haut" href="">BienvenueBienvenue sur Mycomenius</a> 
<a class="lien_gauche_haut" href="">Plein écran F11Pour voir le site en plein écran appuyez sur la touche F11 de 
votre clavier. Pour revenir appuyez encore sur la touche F11.</a> 
<a class="lien_gauche_haut" href="">LienA B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z it's a try of comment</a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
</td>

Je souhaite créer une class "liengauche hautIE"spécifique à IE.
comment faire pour que firefox lise la class "lien gauche haut"
et que IE lise la class "lien gauche hautIE"

Quelle syntaxe?

merci d'avance de votre aide
salut à tous
didier

Configuration: Windows XP
Firefox 3.0.4

Répondre à didier6526 Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

arthezius, le mercredi 3 décembre 2008 à 17:14:09

Met déjà tes feuilles de style en externe plutôt que directement dans la page.

Dans la condition, pour IE attribue lui un deuxième fichier CSS qui sera adapté. Webmaster indépendant.

Répondre à arthezius

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

didier6526, le mercredi 3 décembre 2008 à 21:16:51

Bonjour,
j'ai tout mis dans le code html parceque ça ne sert que pour la page de garde
et aussi parceque je ne sais pas faire

qui peut me traduire le contenu de mon style dans une page indexs.css je n'arrive pas à trouver la bonne syntaxe?

<style type="text/css" media="screen">

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

si vous voulez bien ensuite je vous demanderai comment modifier mes instructions pour appeler les feuilles de style index.css quand on n'est pas sous IE et indexIE.css quand on travaille sous IE

merci de vos aides

didier

Répondre à didier6526

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

arthezius, le jeudi 4 décembre 2008 à 05:12:53

tu met ça entre les <head>

<link href="style.css" rel="stylesheet" type="text/css" />

dans le fichier .css tu met:

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise <span> inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise <span> au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

Webmaster indépendant.

Répondre à arthezius

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

didier6526, le samedi 6 décembre 2008 à 18:28:14

salut

ça y est j'y suis arrivé en spécifiant IF !IE

j'ai une différence entre IE et firefox

merci beaucoup pour ton aide

didier

Répondre à didier6526

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

didier6526, le jeudi 4 décembre 2008 à 21:18:28

Salut

peux tu me corriger si je me suis fait des noeuds?
j'ai maintenant ceci au début de ma page index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>My comenius</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</script>
</head>

Voilà ci-dessous le contenu complet de mon fichier index.css

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

a.lien_gauche_bas:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:-6cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

a.lien_droit_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:-1cm;margin-left: -350px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif'); background-repeat: no-repeat ;
}
a.lien_droit_bas:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:-6cm; left:-1cm;margin-left: -350px;width: 300px;height:201px;text-align: left;
padding-left:22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif'); background-repeat: no-repeat ;
}

/* dimensions fond derrière noir =000000*/
.fond { position: absolute; top: 0px; left: 0px; background-color: #000000;
width: 100%; height: 100% ; background-repeat: no-repeat ;
font: 15px Verdana; font-weight: bold;color: #00FF00;}

/* dimensions du tableau devant */
.table_au_dessus { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; }
/* dimensions des cases couleur transparente avec ""*/
.cellule7 { height: 7% ;
font:18px Verdana; font-weight: bold;color: #FF0000; }
.cellule8 { height: 8% ;
font: 15px Verdana; font-weight: bold;color: #FF0000; }
.cellule10 { height: 10% ;
font: 15px Verdana; font-weight: bold;color: #00FF00;}
.cellule25 { width:12.5%; height: 25%;color:yellow;
font:15px Verdana; font-weight: bold;color: #00FF00;}

merci

didier

Répondre à didier6526

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

didier6526, le jeudi 4 décembre 2008 à 21:23:38

resalut

suite de ma requête

voilà le code qui faisait appel à la classe "lien gauche haut"

<td class="cellule25"ALIGN="center" VALIGN="center">
<a class="lien_gauche_haut" href="">BienvenueBienvenue sur Mycomenius</a> 
<a class="lien_gauche_haut" href="">Plein écran F11Pour voir le site en plein écran appuyez sur la touche F11 de 
votre clavier. Pour revenir appuyez encore sur la touche F11.</a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment</a> 

<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
</td>

Comment puis je modifier ce code pour faire appel à mon fichier index.css ?

merci et à bientôt

Didier

Répondre à didier6526

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

arthezius, le lundi 8 décembre 2008 à 10:58:59

Si tu met <link href="style.css" rel="stylesheet" type="text/css" /> et que ton fichier s'appel index.css, ça vas pas le faire. Webmaster indépendant.

Répondre à arthezius

Posez votre question Répondre

Résultats pour syntaxe commentaire conditionnel firefox /IE

Souci avec Java et Firefox (Résolu) Bonjour à tous... En fait mon souci vient du fait que quand je vais dans panneau de config et que je double clic sur java et que dans le selectionneur des navigateurs il ma propose IE et Firefox, IE est bien selectionné par contre quand je selectionne... www.commentcamarche.net/forum/affich-1677084-souci-avec-java-et-firefox

Je n'arrive pas à lire les vidéos d'internet (Résolu) Bonjour à tous, J'ai un petit problème pour lire les vidéos sur internet, quand elles se lisent avec windows média player... Par exemple, je n'arrive à lire aucune vidéos du site TF1.fr. J'ai essayé avec mes 3 navigateurs, Firefox, IE... www.commentcamarche.net/forum/affich-8946540-je-n-arrive-pas-a-lire-les-videos-d-internet

Jcheff!! glossaire!!!! (Résolu) bonjour, le glossaire ne fonctionne plus depuis samedi , est ce normal ( travaux!!) je vous fait part de mes tests ( pensant que cela venait de mon navigateur opéra): opéra firefox ie7 je n'ais pas besoin de vous faire voir avec seamonkey!!!... www.commentcamarche.net/forum/affich-3840203-jcheff-glossaire

Réponses suivantes

Résultats pour syntaxe commentaire conditionnel firefox /IE

Thèmes pour mozilla firefoxComme vous le savez sûrement, Mozilla Firefox est un navigateur qui propose des add-ons qui permettent de "personnaliser" son navigateur, entre autres grâce a des thèmes. Les thèmes sont disponibles sur :... www.commentcamarche.net/faq/sujet-8481-themes-pour-mozilla-firefox

Réinitialiser Firefox (reset)Après avoir fait des changements dans les préférences de Firefox, celui-ci s'est mis à recharger toutes les images présentes dans les pages des sites sur lesquels je naviguais, à chaque changement de page, ce qui avait pour conséquence un... www.commentcamarche.net/faq/sujet-9525-reinitialiser-firefox-reset

Réponses suivantes

Résultats pour syntaxe commentaire conditionnel firefox /IE

Probleme d'affichage (Résolu)Bonjour, depuis que j'ai formaté et installé XP Ultimate de Mad Dog il y a certaines pages qui s'ouvrent pas!!! J'ai verifié le Firewall, Win Defender et tout mais sans resultat.... C pareil même en utilisant Firefox, IE7 ou encore... www.commentcamarche.net/forum/affich-7068903-probleme-d-affichage

Problème css firefox - IE différent (Résolu)Bonjour, J'ai une page qui apparait différement sous IE 6.0 et firefox , cf "photo" : http://archeus01.free.fr/vue/vue.jpg (c'est un formualire) Mon css /*formulaire*/ form.formulaire fieldset { padding: 1em; } form.formulaire label { float:... www.commentcamarche.net/forum/affich-4434202-probleme-css-firefox-ie-different

Probléme map, firefox >> IE (Résolu)Bonjour, alors voila mon probléme, Donc jai un code html avec javascript pour faire un :hover et une #map sur 4 images, sa marche trés bien sous firefox(comme d'habitude généralement) et sous IE, tadaaa sa marche pas >_ www.commentcamarche.net/forum/affich-2764186-probleme-map-firefox-ie

Réponses suivantes

Résultats pour syntaxe commentaire conditionnel firefox /IE

Télécharger IETabIE Tab est une extension pour Mozilla Firefox, et uniquement pour les systèmes d'exploitation Windows. Elle permet à une page Web ou à un lien d'être ouvert dans un onglet de Firefox avec le moteur d'Internet Explorer. Cette extension est... www.commentcamarche.net/telecharger/telecharger-34055226-ietab

Télécharger Portable FirefoxMozilla firefox est en tout point de vue meilleur qu'IE. Il a aussi l'avantage d'être gratuit et libre. L'interface possède des onglets pour une gestion des fenêtres plus efficace. Il possède également un gestionnaire de téléchargement. Portable... www.commentcamarche.net/telecharger/telecharger-34055786-portable-firefox

Télécharger IE7 open last closed tabQuoi de plus énervant lorsqu'on utilise un navigateur que de fermer accidentellement un onglet ! Mozilla Firefox et Opera permettent de récupérer les onglets fermés, mais ce n'est pas le cas d'Internet Explorer 7. IE Open Last Closed Tab permet de... www.commentcamarche.net/telecharger/telecharger-34055461-ie7-open-last-closed-tab

Réponses suivantes

Résultats pour syntaxe commentaire conditionnel firefox /IE

D-Link DCS-3420 Internet CameraEthernet/Sans-fil, 704x576 Pixels, 30 fps, Compatibilité:Microsoft Windows XP/2000, Couleur: , Divers: , Images par seconde:30 Fps, Interface:Ethernet/Sans-fil, Logicels inclus: , Microphone: , Mise au point: , Mode photographie: , Résolution vidéo... www.commentcamarche.net/guide-achat/d-link-dcs-3420-internet-camera-759000-fiche-technique

Réponses suivantes

Résultats pour syntaxe commentaire conditionnel firefox /IE

PHP - Les cookies et les en-têtes HTTPLes en-têtes HTTP Lors de chaque échange par le protocole HTTP entre votre navigateur et le serveur, des données dîtes d'en-têtes contenant des informations sur les données à envoyer (dans le cas d'une requête) ou envoyées (dans le cas d'une... www.commentcamarche.net/contents/php/phpcookie.php3

Structure d'un document XMLQu'est-ce que le XML? La norme XML en tant que telle doit être vue comme un outil permettant de définir un langage (on dit alors qu'il s'agit d'un métalangage), permettant de créer des documents structurés à l'aide de balises. Une balise est une... www.commentcamarche.net/contents/xml/xmlstruc.php3

Réponses suivantes