[CSS] problème avec les id

problème avec les id [CSS] - HTML/CSS - Programmation

Marsh Posté le 26-01-2005 à 11:59:06    

Bonjour !
 
J'ai un problème avec ces id... Je ne m'y retrouve pas vraiment :D
 
Deux CSS sont liées à ma page html. Elle contiennent en fait uniquement les définitions pour les effets de rollover (10 au total).
 
Dans chacune j'ai défini un

a#current{background-position:0px -100px;}


donc chaque fois qu'une de ces images est cliquée je passe à

<a class="menu6" href="guestbook.htm" id="current"></a>

 
et visiblement il prend uniquement un des deux (celui de la deuxième CSS). Comme les tailles des images ne sont pas identiques l'affichage est immonde.
 
Comment faire :??:


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 11:59:06   

Reply

Marsh Posté le 26-01-2005 à 12:53:01    

Hum, pourrait-on avoir un peu plus de détail sur le code?  
De tête j'ai pas trop d'idée mais en voyant plus de détails sur la page incriminée peut-être que...
 
Sinon tu as validé tes CSS ? Une erreur de syntaxe peut conduire le navigateur à ignorer tout ce qui suit dans la CSS, ça peut venir de là.


---------------
Loose Change Lies | Bars | Last.fm
Reply

Marsh Posté le 26-01-2005 à 13:53:00    

Citation :

Code :
  1. a#current{background-position:0px -100px;}



 
je suis pas très balaise en CSS, mais c'est pas plutot:

Code :
  1. #current.a{background-position:0px -100px;}

???


Message édité par Xav_ le 26-01-2005 à 13:53:36

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 26-01-2005 à 14:05:12    

Possible. Mais le mien fonctionne aussi, le problème est que la navigateur ne fait pas la différence entre les deux a#current, et donc applique les mêmes propriétés aux deux éléments current.


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 14:06:29    

Kriscool a écrit :


Sinon tu as validé tes CSS ? Une erreur de syntaxe peut conduire le navigateur à ignorer tout ce qui suit dans la CSS, ça peut venir de là.


Tous valides :)


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 14:08:51    

sanpellegrino a écrit :

Possible. Mais le mien fonctionne aussi, le problème est que la navigateur ne fait pas la différence entre les deux a#current, et donc applique les mêmes propriétés aux deux éléments current.


 
Il y a un ordre de priorité bien définit pour savoir quel style sera appliqué.
 
Je recherche où j'ai vu ça et je poste le lien...

Reply

Marsh Posté le 26-01-2005 à 14:12:29    

Kriscool a écrit :

Hum, pourrait-on avoir un peu plus de détail sur le code?  


J'ai plusieurs div comme ceci, dans ma première CSS:

Code :
  1. a.menuhaut1{
  2. display:block;
  3. float:right;
  4. width:100px;
  5. height:100px;
  6. background-image:url(site_V1/menu_haut/menu12.jpg);
  7. background-repeat:no-repeat;
  8. background-position:0px 0px;
  9. }
  11. a.menuhaut1:hover{background-position:0px -100px;}


 
Ensuite j'ai

Code :
  1. a#current{background-position:0px -100px;}


 
Dans ma seconde CSS:

Code :
  1. a.menu1{
  2. display:block;
  3. width:180px;
  4. height:50px;
  5. background-image:url(site_V1/menugauche/menu1.jpg);
  6. background-repeat:no-repeat;
  7. background-position:0px 0px;
  8. }
  10. a.menu1:hover{background-position:0px -50px;}


et de même

Code :
  1. a#current{background-position:0px -50px;}


Et donc quand j'ai deux

<a class="menu1" href="accueil.htm" id="current"></a>


et

<a class="menuhaut4" href="soinsante.htm" id="current"></a>


sur la même page il applique les propriétés du current de la deuxième CSS dans les deux cas ! Donc mon background se déplace trop. C'est la le problème.
 
Enfin j'ai résolu le problème en définissant un style pour chaque menu courant, ça passe.
 
Si quelqu'un a néanmoins une idée :D


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 14:22:45    

Dans le cas des CSS importée (via <link> ), si la même propriété est définie à plusieurs endroits, c'est la dernière définition qui est appliquée.
 
Specs CSS1

Citation :

5. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

Reply

Marsh Posté le 26-01-2005 à 14:38:04    

bidem a écrit :

Dans le cas des CSS importée (via <link> ), si la même propriété est définie à plusieurs endroits, c'est la dernière définition qui est appliquée.


Merci ! C'est bien ce qu'il me semblait... Faut donc juste que je donne un autre nom pour le current no.2, genre current2 ?
 
Ou bien définir un style pour chaque image dans le html. Pas très beau tout ça :o


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 15:04:24    

Citation :

Enfin j'ai résolu le problème en définissant un style pour chaque menu courant, ça passe.


 
Errr tu avais plusieurs éléments avec l'id current ?
 
Par définition un id est unique sur une page (tu ne peux pas avoir 2 element avec le même 'id').
Par contre plusieurs éléments peuvent avoir le même 'name'

Reply

Marsh Posté le 26-01-2005 à 15:04:24   

Reply

Marsh Posté le 26-01-2005 à 15:13:02    

bidem a écrit :

Citation :

Enfin j'ai résolu le problème en définissant un style pour chaque menu courant, ça passe.


Errr tu avais plusieurs éléments avec l'id current ?
 
Par définition un id est unique sur une page (tu ne peux pas avoir 2 element avec le même 'id').
Par contre plusieurs éléments peuvent avoir le même 'name'

Oups oui, je pensais juste qu'il s'agissait d'un div aux propriétés particulières qui héritait d'un div particulier :o
 


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-01-2005 à 15:19:16    

Hum, un ID est un identificateur unique d'un élément du code (x)html particulier, c'est illogique d'avoir deux fois le même id pour deux éléments d'une même page :o
 
Par ailleurs, pour la raison sus-citée, il est beaucoup plus efficace d'accéder à un id par
 
#id
 
que par
balise#id
 
dans la mesure ou l'ID est unique, il sait ou le trouver et la précision de balise non seulement est inutile mais ralentit le traitement
 
Pour analogyser, l'ID est une plaque d'imatriculation alors que les classes sont les modèles/types(3/4/5 portes, break/berline/monospace)/motorisation(V6, 16S, biturbo) etc etc


Message édité par masklinn le 26-01-2005 à 15:23:49

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-01-2005 à 16:16:28    

Citation :

un ID est un identificateur unique d'un élément du code


c'est pour ça que son CSS était peut etre valide, mais sa page HTML ne devait pas l'etre.
Le validateur WC dans ce cas te sort une erreur en te disant que 2 éléments ont le meme ID (je sais paske j'ai déjà fait cette erreur quand je me suis mis au CSS)


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 26-01-2005 à 20:59:39    

Exact, si on a besoin de plusieurs "id" faut utiliser les classes (attribut "class" ; sélecteur "." )


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed