[Résolu] Probleme de changement de couleur de bordure lors d'un hover

Question

fabien5111

5 May 2012 à 23:19

Bonsoir à tous...

Je suis débutant en html et css, et je suis en train de construire mon site tout seul comme un grand... enfin, tout seul, pas vraiment, je lis beaucoup de docs et de conseils sur le forum, mais là, je sèche et j'ai pas trouvé mon bonheur...
Je m'explique, sur ma page d'accueil, j'ai mis 3 dewsliders (chacun dans un div et eux meme dans un div global) qui vont permettre aux visiteurs d’accéder à 3 espaces différents. J'ai ajouté des bordures blanches, pas de soucis, et je voulais changer la couleur de la bordure (orange) quand on passe la souris sur l'une des photos... et le probleme est là, dans firefox, ca me fait une seconde bordure orange à l'interieur de la bordure blanche et dans ie, ca fait un second cadre également, mais décalé... Je suis perdu...

pour que ce soit plus clair, mon site: http://ideephoto.com

le code HTML:

				
<div id="conteneur">
	<div id="diapo">
		<div id="diapo_professionnels">
			<object type="application/x-shockwave-flash" data="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_pros.xml" width="300" height="450">
			<param name="movie" value="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_pros.xml" />
			</object>
		</div>
		<div id="diapo_particuliers">
			<object type="application/x-shockwave-flash" data="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_particuliers.xml" width="300" height="450">
			<param name="movie" value="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_particuliers.xml" />
			</object>
		</div>						
		<div id="diapo_mariage">
			<object type="application/x-shockwave-flash" data="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_mariage.xml" width="300" height="450">
			<param name="movie" value="Diaporama_dewslider/dewslider.swf?xml=Diaporama_dewslider/dewslider_mariage.xml" />
			</object>
		</div>						
	</div>
</div>

et le CSS:


#conteneur
{
	margin:auto;
	width:1024px;
}

#diapo
{
	display:inline-block;
	width:1024px;
}
#diapo_professionnels,#diapo_particuliers
{
	height:450px;
	width:300px;
	border: 5px solid white;
	float:left;
}

#diapo_mariage
{
	height:450px;
	width:300px;
	border: 5px solid white;
	float:right;
}
#diapo_particuliers
{
	margin-left:47px;
}
#diapo_professionnels :hover
{
	border: 5px solid #ff7e00;
}
#diapo_particuliers :hover
{
	border: 5px solid #ff7e00;
}
#diapo_mariage :hover
{
	border: 5px solid #ff7e00;
}

Si quelqu'un a une idée pour me sortir de là, ca serait vraiment sympa ...

Merci à vous !

Fabien

~~supprimé~~

6 May 2012 à 02:03

Bonsoir fabien5111,

un hover s'écrit en mettant un sélecteur suivit des deux points suivit de hover.
Il ne faut pas mettre des espaces avant ou après les deux points !

Sinon essaye de mettre un peu d'ordre dans ton HTML.

Regroupe d'abord tout les meta, puis les script et enfin les styles entre les balises <head> et </head>.

Ne pas mettre de <div> dans cette partie !!!

pas besoin de créer une balise <div id="conteneur">. Il existe une balise en HTML5 qui est <article>. Pourquoi ne pas l'utiliser ?

De même, tu as créé trois subdivisions <div id="diapo_professionnels"> & <div id="diapo_particuliers"> & <div id="diapo_mariage"> !

Pourquoi ne pas en utiliser la balise <section> ?

@+
Modifié par Artemus24 (06 May 2012 - 02:03)

FloydinBremen

6 May 2012 à 07:31

bonjour,

@artemus : malgré un apport d'idées pour améliorer, tu réponds pas clairement à sa question.

@fabien : dans ton hover, indique seulement la couleur, et pas la taille, etc...regroupe pour les 3 div et oui, l'espace avant le :hover c'est pas bien :


border-color:#ff7e00;

Modifié par FloydinBremen (06 May 2012 - 08:26)

fabien5111

6 May 2012 à 10:30

Merci à tous les 2 pour vos réponses, en cumulant les 2, en virant l'espace et en laissant que le changement de couleur, ca fonctionne !

J'ai pris en compte les conseils de Artemus24 pour l'aménagement de mon html, mais j'ai 2 questions:
- tu dis ne qu'il ne faut pas mettre de <div> dans le <head>, mais je n'en ai pas, si ?

- j'ai remplacé les 3 <div> par 3 <section>, mais je suis obligé de conserver les 3 pour pouvoir faire la bordure autour de chacune de mes photos... ou j'ai loupé encore quelque chose ?

Merci encore pour le coup de main !

Fabien
Modifié par fabien5111 (06 May 2012 - 10:31)

FloydinBremen

6 May 2012 à 10:52

humm......c'est l'espace devant ton :hover qui a provoqué la bizarrerie.

non, tu n'as pas de div dans ton <head>.

si tu es débutant en html et css, l'ecriture simplifiée/raccourcie en css n'arrange pas les choses, et puis commencer en html5, encore à l'état de brouillon Smiley murf

. allez, disons que cela se discute. Smiley cligne

.

ce que voulait signaler Artemus, c'est l'emploi du div, je pense. Certains en font une utilisation abusive. Maintenant le souci est que tu as un article qui contient des sections. Smiley eek

. euh....c'est l'inverse Smiley lol

. Une section contient plusieurs articles.

sers-toi d'un outil de validation de tes pages. le w3c validator par exemple. tu as quelques erreurs. Un code peut toujours s'améliorer.

fabien5111

6 May 2012 à 11:13

j'utilise régulièrement le http://validator.w3.org, et il me remonte pas d'erreur là, ca me permet effectivement de faire quelques vérifs...

Mais je te rejoins sur le fait que c'est pas simple quand on débute, je lis pas mal de tutos, de conseils, mais c'est toujours différent que ce qu'on veut faire... et c'est parfois compliqué de voir comment obtenir le résultat graphique que l'on souhaite, alors on peut mettre des div dans tous les sens, mais c'est pas forcement tip top, c'est clair... Smiley cligne

~~supprimé~~

6 May 2012 à 18:05

Bonjour à toutes et à tous,

@ FloydinBremen : j'ai pris le temps de faire les tests !
J'ai répondu à la question, puisque son problème était l'espace entre le sélecteur et les deux points avant le hover. D'ailleurs, tu reprends exactement les mêmes propos que moi, un peu plus tard.

@ fabien5111 : j'ai vu les améliorations que tu as fait, et c'est bien mieux maintenant.

La balise <div> est toujours présent dans l'en-tête ! Je ne sais pas à quoi elle sert ?
Il se trouve entre deux balises <script> juste avant la balise </head>. D'ailleurs tu mets aussi un <iframe> à l'intérieur de ce div. Tu dois mettre cela entre les balises <body> !

Peu importe que l'on mettent <section> ou <article> en premier car un article peut contenir des sections et une section peut contenir des articles.

La <div id="diapo"> ne sert à rien. Autant la supprimer et reporter cela dans <section>. Tu n'es même pas obliger de mettre un id à ta section puisque tu en as une seule.
Même remarque pour <article>. Il n'y a aucune raison de faire trois distinctions. Cela surcharge la compréhension de ton HTML.

Dans ton CSS, tu fais trop de découpages. Essaye de regrouper ce qui est similaire et de distinguer ce qui est particulier. Pour les trois sections, tu peux utiliser "float:left;". Il ne faut pas oublier de mettre dans footer, un "clear : both;" pour annuler l'effet du "float : left;".

Sinon dans l'ensemble c'est pas mal du tout pour un débutant !
Bonne continuation !

@+

fabien5111

6 May 2012 à 18:34

Merci pour ton re-passage... et pour tes encouragements...

Artemus24 a écrit :
La balise <div> est toujours présent dans l'en-tête ! Je ne sais pas à quoi elle sert ?
Il se trouve entre deux balises <script> juste avant la balise </head>. D'ailleurs tu mets aussi un <iframe> à l'intérieur de ce div. Tu dois mettre cela entre les balises <body> !

Ok, je viens de voir... en fait cette balise div vient avec la barre "addthis", donc soit je laisse comme ca, soit je descend la ligne script dans le boby, mais est ce possible ?

Artemus24 a écrit :
La <div id="diapo"> ne sert à rien. Autant la supprimer et reporter cela dans <section>. Tu n'es même pas obliger de mettre un id à ta section puisque tu en as une seule.

Pour moi, elle me permet de centrer mon bloc de 3 photos, si je l'enleve, la premiere photo est centrée, mais pas l'ensemble... Smiley confus

Artemus24 a écrit :
Même remarque pour <article>. Il n'y a aucune raison de faire trois distinctions. Cela surcharge la compréhension de ton HTML.

Pareil qu'au dessus, c'est le seul moyen que j'ai trouvé pour mettre un cadre autour de chacune des photos et qu'elles soient centrées... y a peut etre une autre solution, mais là, je vois pas...

Je suis d'accord pour le regroupement dans le css, faut que je m'y attèle... Smiley cligne

~~supprimé~~

6 May 2012 à 18:56

Bonjour fabien5111,

ne pas oublier de mettre dans la feuille de styles :

margin : 0;
padding : 0;
border : 0 none;

car tu as les valeurs par défaut pour tes blocs et c'est ce qui fait que ta première image est centrée. Procède à plus d'essai sur cette partie.

Réessaye en mettant ces propriétés dans <section> et aussi <article> et supprime <div id="diapo">.

@+
Modifié par Artemus24 (06 May 2012 - 18:58)

Sujet clos

Questions générales et questions de débutants

[Résolu] Probleme de changement de couleur de bordure lors d'un hover