[CSS] problème avec les id

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] problème avec les id

sanpellegrino

Bonjour !

J'ai un problème avec ces id... Je ne m'y retrouve pas vraiment

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 à

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

Publicité

KrisCool

Verbeux

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

Xav_

The only one...

Citation :

Code :

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

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

Code :

#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

sanpellegrino

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

sanpellegrino

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

Bidem

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...

sanpellegrino

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 :

a.menuhaut1{
display:block;
float:right;
width:100px;
height:100px;
background-image:url(site_V1/menu_haut/menu12.jpg);
background-repeat:no-repeat;
background-position:0px 0px;
}
a.menuhaut1:hover{background-position:0px -100px;}

Ensuite j'ai

Code :

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

Dans ma seconde CSS:

Code :

a.menu1{
display:block;
width:180px;
height:50px;
background-image:url(site_V1/menugauche/menu1.jpg);
background-repeat:no-repeat;
background-position:0px 0px;
}
a.menu1:hover{background-position:0px -50px;}

et de même

Code :

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

Et donc quand j'ai deux

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

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

Bidem

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.

sanpellegrino

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

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

Bidem

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'

Publicité

sanpellegrino

bidem a écrit :

Citation :

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

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

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

masklinn

í dag viðrar vel til loftárása

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

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

Xav_

The only one...

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

gm_superstar

Appelez-moi Super

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

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] problème avec les id

Sujets relatifs
[HTML/CSS] Problème entre Mozilla et IE	mise en page css-->probleme son flash
Probleme CSS/XHTML.	Problème de tableau CSS
[HTML/CSS/PHP]Problème sous FireFox	[css] Problème de positionnement
[CSS] Problème d'alignement d'un menu dans un div	[HTML/CSS] Simple probleme d agrandissement...
[CSS] Problème d'alignement d'un H6 dans un LI	Problème map area et css
Plus de sujets relatifs à : [CSS] problème avec les id

Page générée en 0.063 secondes