28120 sujets

CSS et mise en forme, CSS3

CSS : Liens qui s'alignent après un clic

Bonjour, Veuillez m'excuser mais j'ai un problème sur mes liens du menu de mon layout. Quand on clique dessus, il s'alignent et reprennent une "apparence normale".

Voici une caps avant que j'ai cliqué sur les liens (cliquez pour agrandir):

http://pix.nofrag.com/e/3/e/7542576bab714d8c5d762e905bb73t.jpg

Après avoir cliqué sur chaque liens (cliquez pour agrandir) :

http://pix.nofrag.com/e/a/4/215da77a5f1ef8f1ce20c1e8a9310t.jpg

Sur Front page on voit la véritable mise en forme du lien avant de cliqué dessus alors que sur Firefox, les liens sont déjà alignés Smiley confus

Voici mon CSS au cas où l'erreur viendrai de là :


body {
    font-family : Arial;
	font-size : 10px;
	color : #394258;
	background : #FFFFFF;
	cursor : text;
	scrollbar-face-color: #FFFFFF;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-arrow-color: #394258;
	scrollbar-track-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
}
	
a:link, a:visited, a:active {
text-decoration : none; 
color : #2F384D; 
} 

a:hover {
color : #000000;
cursor : crosshair;
}

b	{
    color : #2F384D
    }
    
u	{
    color : #2F384D;
	border-bottom: 1px dotted #B1B1B1;
	}
	
i	{
    color : #2F384D
    }

.header {
    font-family : Arial;
	background : #FFFFFF;
	color : #394258;
	text-align: center; 
	text-transform: uppercase;
	font-weight: bold;
} 

.contenu {
    font-family : Arial;
	font-size : 10px;
	color : #394258;
	background : #FFFFFF;
} 

.footer {
    font-family : Arial;
	font-size : 9px;
	color :  #2F384D;
	background : #FFFFFF;
} 

.comment {
    font-family : Arial;
	font-size : 10px;
	color : #394258;
	background : #FFFFFF;
} 
	
a.main:link, a.nav:active, a.nav:visited {
	height: 12px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: #2F384D;
	display: block;
	cursor: crosshair;
	text-align: center;
	letter-spacing: 3px;
}

a.main:hover {  
background-color: #2F384D;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
cursor: crosshair;
display: block; 
line-height : 11px;
text-align: center;
letter-spacing : 3px;
}


Merci beaucoup davance Smiley lol
et désolé si le sujet existe déjà Smiley confused
Jenn'
Modifié par jenn75 (22 Nov 2007 - 01:38)
Hello,

Le code CSS sans le code HTML, ça ne sert pas à grand chose. Smiley cligne

La page en ligne serait effectivement la meilleure solution pour qu'on puisse constater ça et repérer le problème rapidement.
Alors je vais être un peu brutal mais: cette page est mal codée, ça n'est pas une intégration HTML/CSS à proprement parler.

D'abord, les points purement technique:
- la page HTML n'a pas de Doctype (rendu en mode Quirks);
- il y a quelques erreurs de validation importantes;
- l'encodage de caractères utilisé n'est pas forcément le plus pertinent (on préfèrera utf-8 ou iso-8859-1 à windows-1252);
- surtout, l'encodage des caractères de la feuille de styles pose problème, il y a soit des valeurs erronées soit des valeurs qui déconcertent certains navigateurs (dont Firefox 2 et Safari 3) et le validateur CSS du W3C qui voit des points d'interrogation partout.

Il faudrait donc, au minimum, corriger ces points.

Maintenant, sur l'intégration HTML/CSS elle-même: c'est bâclé. Et donc le résultat est de mauvaise qualité.
Plus que ça, en fait: certaines choses dans le code démontrent une méconnaissance importante de HTML et CSS.

Je crois qu'il faut conseiller à la personne qui a intégré ce design (toi-même ou quelqu'un d'autre, peut-être un(e) ami(e), comme le suggère le contenu de la page) de se former avec sérieux et rigueur à ces langages. Ça tombe bien, Alsacréations est un très bon endroit pour ça.

Donc, je rappelle mon verdict: niveau intégration, il faut reprendre à zéro, et de préférence avec de meilleures connaissances en tête.


L'autre option, c'est de juste régler le problème d'encodage de la feuille de style, et de se dire que «pour le reste, ça ira bien». C'est une option. Pas terrible pour la qualité du site produit, mais c'est une option.

Mais si la personne qui a fait cette intégration souhaite à l'avenir travailler dans les métiers du Web comme j'ai cru le comprendre en parcourant son site personnel, il serait dommage de passer à côté d'une occasion de se former sérieusement. Smiley cligne
Sujet clos
Aller à