Sujet Précédent Sujet Suivant

Un Css pour deux pages unifiées

Fermé
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 - 3 juin 2012 à 17:09
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 - 5 juin 2012 à 12:34
Bonjour,
Ça paraît un peu flou comme titre, mais voilà :

J'ai insérer à l'aide de code php des morceaux de pages html. Lorsque je souhaite modifier l'un de ces morceaux, toutes les pages sont affectées. Pourtant, j'y précise un id ou une class (dans les deux cas, rien n'y fait).
Il me semble que le CSS devrait le comprendre...

Dans ma feuille de style
a:ma_class.link{
color:white;
}
a#mon_id.link{
color:white;
}

Dans le morceau de page html
<style type="text/css">
a:link{
color:white;
}
</style>

Je commence à me demander si je ne ferais pas mieux de faire des <span> à la place, mais je trouverais ça terriblement agaçant lors du changement de couleur... ou autre. Et aussi, peut-être ferais-je mieux d'avoir deux feuilles de style... ceci étant tout aussi déplaisant.

Merci,
J322


9 réponses

Réponse 1 / 9
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
3 juin 2012 à 20:28
C'est incompréhensible ce que tu dis.

D'après ce que j'ai compris, uu fais une feuille de style (.css) avec dedans: 
a, a:link { 
  color:white
}
a:hover, a:active {
  color:blue
}

Et dans ta page web (.html) tu met: 
<a href="/">Lien</a>
0
Réponse 2 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
Modifié par Jessicat322 le 3/06/2012 à 21:16
Dans une feuille de style j'ai appliqué (un a la fois) :
*pardon de l'erreur si haut*

a.ma_class:link{
color:white;
}
a#mon_id:link{
color:white;
}
_____________________________________________
Directement dans mon fichier html
<style type="text/css">
a:link{
color:white;
}
</style>
<a href="#">test</a>

Rien n'y fait.
0
Réponse 3 / 9
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
3 juin 2012 à 21:36
Tu déclares #mon_id alors que je ne le vois pas dans ta partie html

Pourquoi remettre <style type="text/css"> dans le html ?

Il suffit de faire un:
<link rel="stylesheet" href="style.css" media="all" /> dans les balises <head></head>
0
Réponse 4 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
3 juin 2012 à 21:43
J'ai pas insérer mon html, c'était un exemple pour préciser ma penser...

FICHIER PHP 
<!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>Titre de la page</title>
     <meta name="keywords" lang="fr" content="emploi,infographie, webmestre, junior, intermédiaire, Longueuil, technicienne, intégration, multimédia, web, Jessica, Louise, Dugal" />
     <meta name="description" content="Site représentant tous les travaux que Jessica-Louise Dugal a produit depuis 2011.  Présentement en construction." />
	 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
     <meta http-equiv="Content-Language" content="fr" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
     <link href="style.css" rel="stylesheet" type="text/css" />
	 <STYLE type="text/css"></STYLE>
</head>
<body id="p_index">
<div class="header">
<h1>Jessica-L. Dugal</h1>
</div>

<div class="whiteline"></div>
<hr />
<table>
<tr><td width="125px"><div class="menu">
<?php
	include('menu.html')
?>
</div></td>
<td width="600px"><div class="corpus"><h2>Webmestre, Infographiste et technicienne en intégration multimédia*</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies, nibh eget porttitor euismod, libero purus posuere arcu, a sollicitudin libero arcu vel neque. Donec ac molestie dui. Maecenas tempus est nec sem semper convallis. Proin sodales bibendum egestas. In vel hendrerit nisi. Vestibulum consequat sollicitudin mauris, vitae porta magna semper commodo. Donec ac varius nulla. Duis tellus lacus, ultrices eu scelerisque quis, blandit ac nunc. Curabitur molestie commodo condimentum. Morbi fermentum felis id leo placerat dapibus et vel risus. Curabitur id ante neque. In facilisis dignissim ultrices. Vestibulum molestie urna ut massa faucibus malesuada. Aliquam nulla urna, sodales at consequat ac, aliquet eu purus. Maecenas semper commodo auctor. Aliquam egestas rutrum diam, eu condimentum lacus facilisis quis.</p>

<p>Cras nec rhoncus dolor. Nulla vulputate tellus sit amet risus fermentum in rhoncus urna viverra. Praesent vehicula, orci vel malesuada commodo, enim leo lacinia mi, in facilisis neque nisi vel leo. Mauris sagittis placerat libero nec rhoncus. Donec sodales, velit id imperdiet dignissim, nisi augue tincidunt leo, eget lobortis sapien elit sed sapien. Nunc rhoncus elementum elit, quis auctor nulla dapibus nec. Vivamus imperdiet leo sit amet ipsum commodo at bibendum risus vulputate.</p>

<p>Nam porttitor, velit et varius condimentum, dolor justo placerat arcu, quis pharetra massa purus ut massa. Vestibulum quam velit, scelerisque eu eleifend eget, auctor eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin tincidunt porttitor eros, a tempor nisl molestie vel. Curabitur est nisl, tempor sed bibendum sit amet, volutpat id libero. Etiam fermentum nisl lorem. Pellentesque egestas, ligula vitae egestas convallis, diam tortor eleifend lectus, in feugiat ligula magna at quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel metus eu est mollis congue. Aliquam sed sapien ante, vel adipiscing mauris.</p>

<p>Praesent vel laoreet odio. Ut consequat volutpat eleifend. Donec vel nibh neque. Sed pretium congue magna, ut mollis orci vehicula sed. Nunc sed laoreet lectus. Mauris egestas accumsan ligula id lobortis. Nullam ullamcorper placerat turpis nec sagittis. Fusce sapien diam, luctus quis rhoncus in, ullamcorper a magna. Curabitur pretium orci nec erat auctor quis blandit odio porttitor. In lobortis, risus non ullamcorper aliquet, mauris nisi egestas nisi, id molestie diam mauris nec erat. Praesent sit amet lacus velit. In nec felis eget turpis molestie venenatis. Suspendisse arcu urna, lacinia non auctor et, adipiscing lacinia lorem. Duis sem lectus, accumsan at elementum in, molestie et lacus.</p>

<p>Ut nisi lorem, porttitor vitae varius vitae, convallis ac justo. In hac habitasse platea dictumst. Mauris bibendum cursus leo vitae vehicula. Phasellus ac mi risus. In ut velit eget nibh pretium porttitor a id magna. Duis ut risus lacus, vitae malesuada dolor. Sed vehicula varius scelerisque. Fusce ut porta enim. Integer quis justo nunc. Cras nec lacus metus, vitae posuere massa. Ut tincidunt dictum turpis nec pharetra. Nulla euismod, erat in cursus imperdiet, arcu purus mollis nunc, vitae commodo nisi augue a velit. Vivamus fringilla turpis nec sem faucibus vehicula blandit lacus volutpat. Aenean eu arcu dui, ac viverra turpis. </p>
<p>N'hésitez pas à <a href="mailto:j.-l.dugal@hotmail.com">me contacter</a>!</p>
</td></tr></table>
<div class="footer">© Jessica-Louise Dugal, <em>tous droits réservés</em> 2012-2013</div>
</div>
</body>
</html>


FICHIER HTML 
<!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>Titre de la page</title>
     <meta name="keywords" lang="fr" content="emploi,infographie, webmestre, junior, intermédiaire, Longueuil, technicienne, intégration, multimédia, web, Jessica, Louise, Dugal" />
     <meta name="description" content="Site représentant tous les travaux que Jessica-Louise Dugal a produit depuis 2011.  Présentement en construction." />
	 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
     <meta http-equiv="Content-Language" content="fr" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body id="p_menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Contactez-moi!</a></li>
<li><a href="#">Porte-Folio</a></li>
<li><a href="#">Informations</a></li>
<li><a href="#">Projets personnels</a></li>
</ul>
</body>
</html>


FICHIER CSS 
/* GENERAL */
a:link {color:black;
	text-decoration:none;
}
a:active {
	color:red;
}
a:hover{color:white;
	text-decoration:underline;
}
a:visited {color:brown;
}
a:link IMG {
	border:0px;
}
a.uneclasse:link {
	color:;
}
h1 {	color:;
	size:;
}
h2 {	color:white;
	size:18px;
	margin:20px;
	text-align:center;
}
h3 {	color:;
	size:;
}
h4 {	color:;
	size:;
}
h5 {	color:;
	size:;
}
h6 {	color:;
	size:;
}
hr{	background-color:#810000;
	height:10px;
}
li{	list-style-type:none;
	color:white;
}
p{	font-weight:;
	font-style:;
	font-family:arial, sans-serif;
	color:black;
	margin:20px;
	padding:;
	text-indent:15px;
}
p:first-letter {
  font-size:;
  float:;
}
p:first-line {
  font-variant:;
}

/* CLASS */
.corpus{
	height:auto;
	border:1px black solid;
	border-radius:80px 0px 40px 0px;
	background-color:silver;
}
.header{
	width:auto;
	height:90px;
	background-color:#810000;
	color:white;
	font-size:30px;
	vertical-align:middle;
	text-indent:30px;
}
.footer {
	text-align:center;
	background-color:#810000;
	color:white;
	margin-top:10px;
}
.link_menu {
	text-align:left;
	background-color:#810000;
	width:120px;
	height:25px;
	border:1px solid black;
	border-radius:10px;
	padding:10px;
}
a#p_menu:link {color:white;}
.menu {
	height:auto;
	border:0px;
	padding:20px;
}
.whiteline{
	height:10px;
	width:auto;
	background-color:white;
}

/* BODY PAGE DEFINITION */
body#p_index {width:900px;
	margin-left:auto;
	margin-right:auto;
}
body#p_menu{color:white;}
body#p_editorial{}


Je veux que "contactez-moi" soit d'une autre couleur que les liens du menu.
0

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

Posez votre question
Réponse 5 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
Modifié par Jessicat322 le 3/06/2012 à 21:50
J'ai enlevé le link en testant un peu les propriété mais autrement c'était le même que dans le index.php
les fichiers sont dans le même dossier.
0
Réponse 6 / 9
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
3 juin 2012 à 22:00
Il te manque un point virgule à la ligne include('menu.html')
Remplacer: 
include('menu.html')

Par: 
include('menu.html');


Mais je vois pas l'intérêt de passer par du PHP si c'est juste pour mettre une include d'un menu..
0
Réponse 7 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
4 juin 2012 à 15:59
Je compte ajouter du Ajax pour changer le texte dans la boite grise. D'où l'intérêt.
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
4 juin 2012 à 16:08
Quand tu include ton menu.html, c'est pas la peine de mettre les balises de <html> à <body>.
0
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
4 juin 2012 à 23:58
Merci pour l'info ;) Je débute la dedans ^^
0
Réponse 8 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
5 juin 2012 à 00:17
Bon, alors mon code est devenu ceci... Toujours pas de distinction entre un <a href="#">normal</a> et un <a class="link_menu" href="">Menu</a>... ou je bug..? é_è

CSS 
/* font-weight : bold; font-style : italic; font-family : Arial;  */

/* GENERAL */
a:link {color:white;
	text-decoration:none;
}
a:active {
	color:red;
}
a:hover{color:silver;
	text-decoration:underline;
}
a:visited {color:brown;
}
a:link IMG {
	border:0px;
}
a.uneclasse:link {
	color:;
}
h1 {	color:;
	size:;
}
h2 {	color:white;
	size:18px;
	margin:20px;
	text-align:center;
}
h3 {	color:;
	size:;
}
h4 {	color:;
	size:;
}
h5 {	color:;
	size:;
}
h6 {	color:;
	size:;
}
hr{	background-color:#810000;
	height:10px;
}
li{	list-style-type:none;
	color:white;
}
p{	font-weight:;
	font-style:;
	font-family:arial, sans-serif;
	color:black;
	margin:20px;
	padding:;
	text-indent:15px;
}
p:first-letter {
  font-size:;
  float:;
}
p:first-line {
  font-variant:;
}

/* CLASS */
.corpus{
	height:auto;
	border:1px black solid;
	border-radius:80px 0px 40px 0px;
	background-color:silver;
}
.header{
	width:auto;
	height:90px;
	background-color:#810000;
	color:white;
	font-size:30px;
	vertical-align:middle;
	text-indent:30px;
}
.footer {
	text-align:center;
	background-color:#810000;
	color:white;
	margin-top:10px;
}
.link_menu {
	text-align:left;
	background-color:#810000;
	width:120px;
	height:25px;
	border:1px solid black;
	border-radius:10px;
	padding:10px;
}
a#p_menu:link {color:white;}
.menu {
	height:auto;
	border:0px;
	padding:20px;
}
.whiteline{
	height:10px;
	width:auto;
	background-color:white;
}

/* BODY PAGE DEFINITION */
body#p_index {width:900px;
	margin-left:auto;
	margin-right:auto;
}

/*MENU*/
a.link_menu:link {
	color:green;
}

/*EDITORIAL*/
body#p_editorial{}


PHP 
<!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>Titre de la page</title>
     <meta name="keywords" lang="fr" content="emploi,infographie, webmestre, junior, intermédiaire, Longueuil, technicienne, intégration, multimédia, web, Jessica, Louise, Dugal" />
     <meta name="description" content="Site représentant tous les travaux que Jessica-Louise Dugal a produit depuis 2011.  Présentement en construction." />
	 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
     <meta http-equiv="Content-Language" content="fr" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
     <link href="style.css" rel="stylesheet" type="text/css" />
	 <STYLE type="text/css"></STYLE>
</head>
<body id="p_index">
<div class="header">
<h1>Jessica-L. Dugal</h1>
</div>

<div class="whiteline"></div>
<hr />
<table>
<tr><td width="125px"><div class="menu">
<?php
	include('menu.html');
?>
</div></td>
<td width="600px"><div class="corpus"><h2>Webmestre, Infographiste et technicienne en intégration multimédia*</h2>
<p>lorem ipsum...</p>
<p>N'hésitez pas à <a title="me contacter" href="mailto:#">me contacter</a>!</p>
</td></tr></table>
<div class="footer">© <a href="mailto:j.-l.dugal@hotmail.com">Jessica-L. Dugal</a>, <em>tous droits réservés</em> 2012-2013</div>
</div>
</body>
</html>


INCLUDE 
<ul>
<li class="link_menu"><a title="Accueil" href="index.php">Accueil</a></li>
<li class="link_menu"><a title="Contactez-moi!" href="#">Contactez-moi!</a></li>
<li class="link_menu"><a title="Porte-Folio" href="#">Porte-Folio</a></li>
<li class="link_menu"><a title="Informations" href="#">Informations</a></li>
<li class="link_menu"><a title="Projets personnels" href="#">Projets personnels</a></li>
</ul>
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
5 juin 2012 à 01:03
L'erreur vient de là : 
a.uneclasse:link

Qui devrait s'écrire : 
.uneclasse


Après tu fais juste <a href="#" class="uneclasse">Lien</a>
0
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
5 juin 2012 à 01:26
li a {color:ma_couleur;}

merci Navid ! :D
0
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
Modifié par Jessicat322 le 5/06/2012 à 01:43
souci : ça fait apparaître des points pas enlevable...
li a{ list-style-type:none;
color:white;
}

le point devrait être enlever, ce qui n'est pas le cas.. D'autant que la couleur continue de tout affecter. ici, seul les points sont colorer... je crois que je vais devoir réviser le CSS.
0
Réponse 9 / 9
Jessicat322 Messages postés 60 Date d'inscription vendredi 19 février 2010 Statut Membre Dernière intervention 18 juin 2013 6
5 juin 2012 à 01:55
Bon ! Cette fois j'ai bien trouver ! :D

li.link_menu {color:green;} /*colore la puce*/
li a {color:purple;} /*colore les liens du menu*/
li {list-style-type:none;} /*élimine la puce*/
a {color:red;} /*tous les autres liens*/
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
5 juin 2012 à 12:34
ok :)
0

Discussions similaires

Comment supprimer une conversation Messenger pour les 2 personnes ?
mercidemaider -
sd -

7 réponses
Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
Insérer 2 pages en 1 seule sous word
ahmed_akka -
H@j@r -

8 réponses
Effacer les conversations sur messenger
Marie-Ange1948 -
c_myriam06 -

4 réponses
Convertir un fichier PAGES en word
ForzaItalia -
Blablack -

5 réponses