28220 sujets

CSS et mise en forme, CSS3

Problème de couleurs des liens en CSS

Bonjour à tous et à toutes,

voilà, j'ai un pitit problème avec la couleur de mes liens. pour commencer, je vous met ma page de code :

<!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>**Nahaur Portfolio - Galerie**</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

html, body {
	width: 100%;
	height: 100%;
	}
	
body {
	margin: 0;
	padding: 0;
	font-family:Arial;
	font-size:12px;
	background-color: #3985AD; 
	}
	
.conteneur { 
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #3985AD;
	}

.header {
	background-image:url(images/header2.gif);
	background-repeat:no-repeat;
	margin-top:5px;
	margin-left:25px;
	height: 100px;
	background-color: #3985AD;
	}
	
.menu {
	position: absolute;
	left:0;
	width: 200px;
	height: 400px;
	background-color:#3985ad;
	border-right-color:#76bfed;
	border-right-style:dotted;
	border-right-width:2px;
	}
	
.frame {
	background-color:#3985AD;
	background-position:center;
	background-repeat:no-repeat;
	margin-left: 200px;
	width: auto;
	height: 400px;
	background-color:#3985AD;
	overflow: auto;
	}
	
p {
	margin: 0 0 10px 0;
	}

.menugauche {
	list-style-type: none;
	text-align:left;
	margin-left: 60px;
	padding:0;
	}

.menugauche li {
	margin-bottom: 5px;
	}

.menugauche a {
	margin: 0 2px;
	color: #fff;
	font-weight:bold;
	font-size:14px;
	text-decoration: none;
	}

.menugauche a:hover {
	text-decoration: none;
	color:#79BFED;
	}
	
.footer {
	margin:0;
	padding:0;
	width:100%;
	}

.Style1 {
	font-size: 14px;
	font-weight: bold;
	color: #76BFED;
	}
	
.Style2 {
	font-size:14px;
	color: #FFFFFF;
	font-weight:bold;
	margin-left:30px;
	}
	
a:link {
	text-decoration: none;
	color: #FFFFFF;
	}
	
a:visited {
	text-decoration: none;
	}

a:hover {
	text-decoration: none;
	color: #76BFED;
	}

a:active {
	text-decoration: none;
	color:#00CC99;
	}

.Style3 {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	}
	
.Style8 {
	font-size: 12px;
	font-weight: normal;
	color:#FFFFFF;
	}
	
.Style22 {
	color: #76BFED;
	}
	
</style>

</head>
<body>
<div class="conteneur">
	<div class="header">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p align="center" class="Style3">.2d - .3d - .programmation</p>
	</div>
	<div class="menu Style1">
	  <div align="center">
	    <p>GALERIE</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <blockquote>
	      <p align="left" class="Style2"><a href="accueil.htm">.accueil</a></p>
	      <p align="left" class="Style2"><a href="galerie.htm">.galerie</a></p>
	      <p align="left" class="Style2"><a href="cv.htm">.c.v.</a></p>
	      <p align="left" class="Style2"><a href="liens.htm">.liens</a></p>
	      <p align="left" class="Style2"><a href="">.contact</a></p>
	      <p align="left" class="Style2"><a href="plan.htm">.plan du site</a></p>
	    </blockquote>
	  </div>
	</div>
	<div class="frame">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<blockquote>
		  <p align="center">&nbsp;</p>
		  <blockquote>
		    <blockquote>
		      <blockquote>
		        <blockquote>
		          <blockquote class="Style1">
		            <p align="left"><a href="wall.htm" class="Style22">.<span class="Style22">wallpapers</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">prints</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">webdesign</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">illustration - vecto</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">digital</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">3d</span></a></p>
		            <p align="left"><a href="wall.htm">.<span class="Style22">divers</span></a></p>
	              </blockquote>
		        </blockquote>
		      </blockquote>
		    </blockquote>
		  </blockquote>
	  </blockquote>
	  <div align="center"></div>
	</div>
	<div class="footer">
		<p align="center">&nbsp;</p>
		<p align="center">&nbsp;</p>
		<p align="center"><span class="Style8">Nahaur Portfolio - Tous Droits Réserv&eacute;s &copy; 2005</span> </p>
	</div>
</div>
</body>
</html>


sur le menu de gauche aucun problème. Les liens sont blancs à l'origine, bleus en passant dessus et verts en cliquant. Cependant, j'ai un pitit problème avec les liens du milieu. Je les souhaiterais bleus (le même bleu que le mot "GALERIE" de gauche, par exemple), blanc en passant dessus, et vert en cliquant. Je pense que les attributs 
a:link {
	text-decoration: none;
	color: #FFFFFF;
	}
	
a:visited {
	text-decoration: none;
	}

a:hover {
	text-decoration: none;
	color: #76BFED;
	}

a:active {
	text-decoration: none;
	color:#00CC99;
	}
s'appliquent à tous les liens. Me trompe-je?
j'espère avoir été clair^^
Merci d'avance à qui pourront m'aider. Bonne après midi Smiley smile

ps : vous trouverez un aperçu ici http://nahaur.host-dream.com/galerie.htm (pour le violet de certains liens de gauche, c'est pas grave)
Modifié par Majbryce (25 Mar 2005 - 14:04)
je suppose que les "liens du milieu" sont ceux placé dans <div class="frame"> ? Auquel cas, ça se règle avec :


.frame a {
color: #76BFED;
}

etc.


Sinon, je serais très très curieux de connaître le pourquoi du comment de :

<blockquote>
  <p align="center">&nbsp;</p>
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote class="Style1">


Tout à fait innocemment, cela dit.

(<edit> Hypothèse : c'est l'histoire de l'homme qui a vu l'homme qui a vu l'homme qui etc. qui a cité l'ours ? )
Modifié par Laurent Denis (25 Mar 2005 - 14:09)
les <blockquote> sont là parce que j'ai décalé le texte. Pourquoi, ce n'est pas bien?
pour les 
.frame a {
color: #76BFED;
}

ça ne marche pas. Je sais que je suis pas une lumière Smiley smile mais j'ai peut-être loupé quelquechose.
Mais merci quand même de m'avoir répondu Smiley cligne
bonjour,
Je ne voudrais pas dire de bétises mais, comment des attribut peuvent ils s'appliquer à tous les liens vu que tu demande a ton deuxieme menu d'avoir des couleurs differentes que celles spécifié dans les attributs du premier menu.
Y a un truc que je pige pas bien

d'un cote c'est blanc et se met bleu en hover

de l'autre c'est bleu et tu veux que ça passe au blanc en hover

donc, il te faut d'autre attribut, puis qu'en utilisant les meme, le menu du milieu qui est bleu au départ, passe au "bleu" en hover. logique non ??
J'ai pas tout regardé, mais globalement ça se passe comme ça :

tu définis des propriétés génériques pour tous tes liens en faisant

a { ..}
a:xx{...)

puis le cas échéant tu redéfinis quelques propriétés pour certains liens . par exemple si tu veux que le hover de tes liens de menu soit d'une couleur en particulier :

#menu a:hover{color: xxxx}

Par contre, ton code html est loin d'être correct:

<p>&nbsp;</p>

Si c'est juste pour passer de la placer, tu dois définir une margin-top à l'élélement que tu veux descendre.

<p align="center"

tu dois utiliser
p{text-align: center;}

Concernant les blockquote, soit tu veux signifier des légendes urbaines Smiley langue soit il y a un problème

Et un petit conseil: nomme tes styles en fonction de ce qu'ils font donner et pas style1, style2, ...

Smiley smile
ganou66>Non non tu dis pas de bêtises (enfin j'pense pas)

Je sais que je doit mettre des attributs différents pour le milieu et la gauche.
Le problème est que j'ai essayé tout ce que je pense être...correct disons, CSSement parlant, mais j'ai toujours une faille.
Modifié par Majbryce (25 Mar 2005 - 14:56)
C'est moi qui avait lu ton code un peu vite. Supprime déjà les <span class="style22"> de tes liens dans .frame, ainsi que le code CSS correspondant :

/*.Style22 {
color: #76BFED;
}*/


Ensuite, ajoute à ta CSS:

.frame a {
color: #76bfed; /*liens bleus*/
}
.frame a:hover {
color: #fff; /*blanc au survol */
}


Ces règles sont spécifiques aux liens (a) contenus dans <div class="frame"> : le sélecteur .frame a signifie "les liens qui sont contenu dans l'élément de classe frame".

Pour le vert des liens actif, la règle générale déjà indiquée dans ta feuille de style s'appliquera.

Et pour les blockquote... Pour être honnête, c'est ce que je supposais Smiley cligne . C'est à corriger.

En effet, <blockquote> ne signifie pas "ceci est indenté", mais "ceci est une citation extraite d'une source X". Confondre les deux est un classique, mais peut être gênant : imagine un moteur de recherche qui se fierait à la présence de <blockquote> pour déterminer que ta page contient des citations qu'il peut présenter en réponse à des réquêtes ?

Pour indenter le contenu de .frame, tu peux utiliser plus simplement les marges CSS. Au lieu de mettre un <p> dans un <blockquote>, tu donne à ton <p> une marge gauche à ta convenance. Par exemple :

.frame p {
margin-left: 50px;
}


(C'est un peu brute, mais c'est un début).
merci à tous

j'ai pas tout compris, l'histoire des blockquote ainsi que l'histoire du &nbsp;
mais bon c'est pas très grave, je vais tenter de résoudre ça

now, pour les liens, les .frame a {...}, ça marche, mais pas en .frame a:hover{...}

mais bon, je vais me servir de vos interventions pour m'en sortir.

Je mettrai un [RESOLU] quand j'aurai fini
j'ai beau tenter de suivre ce que je vous m'avez dit, ça marche pas.

Pour ce qui est des blockquote et autres, j'ai mis des margin-left, mais tout se décale.
Pour le .text-align, c'est tout les textes qui se décalent.

Enfin pour les couleurs, maintenant c'est blanc en a:hover (c'est ce que je voulais), mais bmanc aussi en normal (ça c'est pas top top)

Désolé de vous embêter avec ça, mais la je nage^^
Sujet clos
Aller à