2 couleurs pour les liens dans la même page?
Résolu/Fermé
Op@line
Messages postés
28
Date d'inscription
mardi 2 septembre 2008
Statut
Membre
Dernière intervention
14 juin 2011
-
9 nov. 2010 à 20:05
Op@line Messages postés 28 Date d'inscription mardi 2 septembre 2008 Statut Membre Dernière intervention 14 juin 2011 - 10 nov. 2010 à 14:57
Op@line Messages postés 28 Date d'inscription mardi 2 septembre 2008 Statut Membre Dernière intervention 14 juin 2011 - 10 nov. 2010 à 14:57
A voir également:
- 2 couleurs pour les liens dans la même page?
- Supprimer une page word - Guide
- Word numéro de page 1/2 - Guide
- Page d'accueil iphone - Guide
- Traduire une page web - Guide
- 2 comptes whatsapp - Guide
3 réponses
Op@line
Messages postés
28
Date d'inscription
mardi 2 septembre 2008
Statut
Membre
Dernière intervention
14 juin 2011
61
9 nov. 2010 à 22:32
9 nov. 2010 à 22:32
J'ai donc réussit à créer mes deux styles de liens grâce à tes conseils très éclairés, c'est parfait! Un très très très grand merci!
J'ai aussi presque réussit aussi à créer ma feuille de style... mais j'ai un petit pépin...
J'ai fait bêtement donc un "couper-coller" du style, y compris les blocs...
Voici mon "bug": alors qu'en laissant le style sur chaque page mon bloc variable s'affiche bien à 100%, en mettant le style sur une feuille de style indépendante, alors que je n'ai rien changé dans les paramètres, mon bloc variable se retrouve tout étriqué!
Je précise que le site n'est pas en ligne, que je me base sur l'aperçu navigateur généré par dreamweaver mais je pense que le système est assez fiable?
Voici ce que j'ai laissé sur ma page de site lambda:
et voici ma feuille de style tel quel:
J'ai aussi presque réussit aussi à créer ma feuille de style... mais j'ai un petit pépin...
J'ai fait bêtement donc un "couper-coller" du style, y compris les blocs...
Voici mon "bug": alors qu'en laissant le style sur chaque page mon bloc variable s'affiche bien à 100%, en mettant le style sur une feuille de style indépendante, alors que je n'ai rien changé dans les paramètres, mon bloc variable se retrouve tout étriqué!
Je précise que le site n'est pas en ligne, que je me base sur l'aperçu navigateur généré par dreamweaver mais je pense que le système est assez fiable?
Voici ce que j'ai laissé sur ma page de site lambda:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="monstyle.css" />
</head>
<body>
<div class="Style7" id="bloc-fixe">
<p align="center" class="Style5"><strong><a href="index.htm">page 1</a></strong></p>
<p align="center" class="Style5"><strong>page 2</strong></p>
<p align="center" class="Style5"><strong>page 3</strong></p>
<p align="center" class="Style5"><strong>page 4</strong></p>
<p align="center" class="Style5"><strong>page 5</strong></p>
<p align="center" class="Style5"><strong>page 6</strong></p>
<div align="center" class="Style9">
<p> </p>
<div align="center">
<p> </p>
</div>
</div>
</div>
<div id="bloc-variable">
<div align="center">
<div align="center" class="Style2">
<p class="Style6"> </p>
<p class="Style6"> blablabla, blablabla... blablabla, blablabla...</p>
<p><span class="Style6"> <a href="historique.htm">blablabla, blablabla...</a></span></p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6">blablabla...</span></p>
<p class="Style6">blablabla, blablabla... blablabla, blablabla...</p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6">blablabla...</span></p>
<p class="Style6">blablabla, blablabla... blablabla, blablabla...</p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6">blablabla...</span></p>
<p class="Style6">blablabla, blablabla... blablabla, blablabla...</p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6">blablabla...</span></p>
<p class="Style6">blablabla, blablabla... blablabla, blablabla...</p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6"> blablabla, blablabla...</span></p>
<p><span class="Style6">blablabla...</span></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("bloc-variable").focus()
</script>
</body>
</html>
et voici ma feuille de style tel quel:
/* CSS Document */
<STYLE type=text/css>
html { overflow:hidden; }
body {
overflow:hidden;
font-family: trebuchet ms,arial,tahoma,verdana,sans-serif;
background-image: url(...images/fond.jpg);
background-color: #000000;
}
code {font-size:1em;}
#bloc-fixe {
position:fixed;
border:solid 0px;
width:120px;
top:10px;
left:10px;
bottom:10px;
overflow:auto;
font-size:90%;
}
#bloc-variable {
position:fixed;
border:solid 1px;
background-color:#EFEFEF;
top:10px;
left:138px;
bottom:10px;
right:0px;
padding:10px;
overflow:auto;
}
body,td,th {
color: #330000;
font-family: Times New Roman, Times, serif;
font-size: 16px;
}
#bloc-fixe
a:link {
color: #FFFFFF;
text-decoration: none;
}
#bloc-fixe
a:visited {
color: #FFFFFF;
text-decoration: none;
}
#bloc-fixe
a:hover {
color: #999999;
text-decoration: underline;
}
#bloc-fixe
a:active {
text-decoration: none;
}
#bloc-variable
a:link {
color: #0000FF;
text-decoration: bold;
}
#bloc-variable
a:visited {
color: #0000FF;
text-decoration: none;
}
#bloc-variable
a:hover {
color: #000000;
text-decoration: underline;
}
#bloc-variable
a:active {
text-decoration: none;
}
</STYLE>
<!--[if lt IE 7]>
<STYLE type=text/css>
#bloc-fixe, #bloc-variable {
position:absolute;
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - (10+10+11) + "px");
}
#bloc-variable {
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - (158+1) + "px");
}
</STYLE>
<noscript>
<STYLE type=text/css>
#bloc-fixe, #bloc-variable {height:100%;top:0px}
#bloc-variable { width:650px}
html { overflow:auto; }
body { overflow:auto; }
</STYLE>
</noscript>
<![endif]-->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
Bonsoir,
Pour arriver au résultat escompté, il faut faire une relation parent > enfant comme ci-dessous :
La même chose pour les liens de l'autre bloc (en changeant les propriétés bien sûr!).
Pour avoir une feuille de style indépendante de la page web, il faut enregistrer les propriétés dans un fichier comportant l'extension .css
Par exemple le fichier style.css qui sera appelé dans chaque page web comme ceci :
Bien entendu, si la feuille de style n'est pas placé au même niveau dans l'arborescence du site, bien indiquer le chemin pour l'atteindre, par exemple si on place la feuille de styles dans un répertoire nommé CSS situé au même niveau que les pages alors le chemin sera :
Tu peux même créer à part une feuille de styles spécifique à IExplorer que tu nommerais par exemple style_ie.css qu'il te suffit d'appeler comme ceci :
Voilà, on peut se (re)mettre au travail maintenant :-)
-------------------------------------------------------------------------------------------------------------------------------------------------
<* Suivez-moi sur FesseS-BouC *>
Pour arriver au résultat escompté, il faut faire une relation parent > enfant comme ci-dessous :
#bloc-fixe a:link {
/* Ici les propriétés du lien non visité */
}
#bloc-fixe a:hover {
/* Ici les propriétés du lien survolé */
}
#bloc-fixe a:visited {
/* Ici les propriétés du lien visité */
}
La même chose pour les liens de l'autre bloc (en changeant les propriétés bien sûr!).
Pour avoir une feuille de style indépendante de la page web, il faut enregistrer les propriétés dans un fichier comportant l'extension .css
Par exemple le fichier style.css qui sera appelé dans chaque page web comme ceci :
<link rel="stylesheet" type="text/css" href="style.css" />
Bien entendu, si la feuille de style n'est pas placé au même niveau dans l'arborescence du site, bien indiquer le chemin pour l'atteindre, par exemple si on place la feuille de styles dans un répertoire nommé CSS situé au même niveau que les pages alors le chemin sera :
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
Tu peux même créer à part une feuille de styles spécifique à IExplorer que tu nommerais par exemple style_ie.css qu'il te suffit d'appeler comme ceci :
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="style_ie.css" /> <![endif]-->
Voilà, on peut se (re)mettre au travail maintenant :-)
-------------------------------------------------------------------------------------------------------------------------------------------------
<* Suivez-moi sur FesseS-BouC *>
Op@line
Messages postés
28
Date d'inscription
mardi 2 septembre 2008
Statut
Membre
Dernière intervention
14 juin 2011
61
10 nov. 2010 à 14:57
10 nov. 2010 à 14:57
ah ben voui ça marche beaucoup mieux comme ça!
un très grand merci pour ton aide très précieuse Twinpics!
bonne journée!
un très grand merci pour ton aide très précieuse Twinpics!
bonne journée!
10 nov. 2010 à 13:20
Ceci n'a rien à faire dans ton fichier monstyle.css
<STYLE type=text/css> </STYLE> <!--[if lt IE 7]> <STYLE type=text/css> </STYLE> <noscript> <STYLE type=text/css> #bloc-fixe, #bloc-variable {height:100%;top:0px} #bloc-variable { width:650px} html { overflow:auto; } body { overflow:auto; } </STYLE> </noscript> <![endif]--> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script>NOTE : dans un fichier CSS, il ne DOIT y avoir que des propriétés CSS !
--------------------------------------------------------------------------------------------------------------------------------
<* Suivez-moi sur FesseS-BouC *>
10 nov. 2010 à 14:51