Sujet Précédent Sujet Suivant

Syntaxe commentaire conditionnel firefox /IE

Résolu/Fermé
didier6526 Messages postés 143 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 8 juin 2022 - 3 déc. 2008 à 16:11
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 8 déc. 2008 à 10:58
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

<!--[if !IE]>-->
blablabla
<!--<![endif]-->

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 <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 ;
}


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="">Bienvenue<span>Bienvenue sur Mycomenius</span></a><br>
<a class="lien_gauche_haut" href="">Plein écran F11<span>Pour voir le site en plein écran appuyez sur la touche F11 de<br>
votre clavier.<br>Pour revenir appuyez encore <br>sur la touche F11.</span></a><br>
<a class="lien_gauche_haut" href="">Lien<span>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 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 <br>it's a try of comment</span></a><br>
<a class="lien_gauche_haut" href="">Lien<span>ceci est un essai de commentaire sur un lien it's a try of comment </span></a><br>
<a class="lien_gauche_haut" href="">Lien<span>ceci est un essai de commentaire sur un lien it's a try of comment </span></a><br>
</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
A voir également:

6 réponses

Réponse 1 / 6
didier6526 Messages postés 143 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 8 juin 2022 4
3 déc. 2008 à 21:16
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 <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 ;
}



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
1
Réponse 2 / 6
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
8 déc. 2008 à 10:58
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.
1
Réponse 3 / 6
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
3 déc. 2008 à 17:14
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é.
0
Réponse 4 / 6
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
4 déc. 2008 à 05:12
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 ;
}

0
didier6526 Messages postés 143 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 8 juin 2022 4
6 déc. 2008 à 18:28
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
didier6526 Messages postés 143 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 8 juin 2022 4
4 déc. 2008 à 21:18
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 <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 ;
}

a.lien_gauche_bas: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:-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 <span> 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 <span> 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
0
Réponse 6 / 6
didier6526 Messages postés 143 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 8 juin 2022 4
4 déc. 2008 à 21:23
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="">Bienvenue<span>Bienvenue sur Mycomenius</span></a><br>
<a class="lien_gauche_haut" href="">Plein écran F11<span>Pour voir le site en plein écran appuyez sur la touche F11 de<br>
votre clavier.<br>Pour revenir appuyez encore <br>sur la touche F11.</span></a><br>
<a class="lien_gauche_haut" href="">Lien<span>ceci est un essai de commentaire sur un lien <br>it's a try of comment</span></a><br>

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

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

merci et à bientôt

Didier
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Comment identifier (ou situer) qui écrit des commentaires sur mon blog ?
profa84 -
dugenou -

1 réponse
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses