28221 sujets

CSS et mise en forme, CSS3

Puces et scrollbars

Voilà mon premier, et j'inaugure le forum CSS :) !

Avant de vous énoncer mon problème, je vous invite à regarder ma page : http://archivesda.free.fr/autoblographie/

En passant votre curseur sur les premiers liens, vous avez du remarquer un décalage sur l'écran.
En effet lors du chargement de la page la 'scrollbar y' apparait (alors qu'elle en devrait pas vu que toute la page entre sans besoin de déplacement), mais lorsque l'utilisateur passe son curseur sur un lien, celle-ci disparaît !
C'est le premier comportement que je n'arrive pas à expliquer.

Le second problème est que j'aimerais que lorsque l'utilisateur passe son curseur sur un lien appartenant au menu 'Blog', que l'anneau (qui est gérer comme une puce) s'illumine (parle biais d'une autre image.
Mais comment faire pour que lorsqu'on passe son lien sur <a> la puce de <h2> change ?

Voilà les deux mystères qui me freinent...

Merci d'avance !
Pour ton problème de scrollbar, je ne l'ai pas chez moi, Firefox 1.0, IE6.0 WinXP 1280*1024

Pour ce qui est de changer l'image de l'anneau au passage de la souris sur un lien, tu n'as pas d'autre solution que de gérer ça avec JavaScript en agissant sur le DOM.
Je vais essayé de te faire un petit essai aujourd'hui, mais je ne te garanti rien ;) (tu peux faire un nouveau topic dans le forum DOM, JavaScript, Ecmascript)

Donc pour ton premier problème, donnes nous ta config pour voir si ça ne viendrait pas de là...

Par contre, je viens de me rendre compte d'un truc, c'est qu'au chargement de la page ton menu n'a pas les anneaux et est peu aéré, et au passage de la souris SOUS ton image de header, le menu s'aere et laisse aparaitre les anneaux... sous firefox uniquement...
Modifié le 17 Oct 2004 - 16:23
Je viens de remarquer un truc en regardant rapidement la source de ta page, tu inclu des titre h2 dans ta balise UL, or ce n'est pas possible, la balise ul ne peut contenir comme balise de premier enfant que des <li>.

Tu peux aussi commencer par valider ta page au fur et à mesure (si tu as un problème par rapport aux erreurs rencontrées n'hesite pas à demander ici :) ) souvent la simple correction d'anomalie de code améliore les bugs les plus étrange ;)
Citation de ElMoustiko : "Pour ton problème de scrollbar, je ne l'ai pas chez moi, Firefox 1.0, IE6.0 WinXP 1280*1024 "

J'ai remarquer ce problème sous firefox, mais pas sous MSIE. Le passage sur un lien avec firefox enlève la scrollbar.

Alors voici mon code en ce qui concerne le <a>, <li> et <ul> (j'ai tenu compte de ce que tu m'as sur le dernier post, j'ai changé le <h2> dans le <ul>.
.cadre02 ul,li {
list-style-type: none;
padding:0px;
margin-left:1px;
}
.cadre02 a {
width:100%;
margin-left:10px;
color:#33361B;
text-decoration:none;
border-bottom:1px dotted #2D6035;
}
.cadre02 a:hover {
color:#9CC085;
border-bottom:0px;
}


Le résultat change sensiblement ! le problème de la scrollbar est réglé, elle n'apparaît pas au début, mais un nouveau problème arrive, lorsque ej passe mon curseur sur un lien, tout le menu se déplace !

Je pense que c'est du au <ul> ou <li>, mais je vois pas quel est le problème...
Modifié le 17 Oct 2004 - 16:45
Pour ce qui est du changement de l'image de l'anneau au passage de la souris sur un lien, je te laisse faire un topic sur le forum JavaScript pour que ca soit plus propre et la technique pourra toujours interesse quelqu'un. (j'ai réussi à faire un truc).

Pour le reste, je vais essayé de reprendre un peu ton code CSS pour voir, comme ça à vue de nez, je ne vois pas trop le problème.
ElMoustiko a écrit :
Pour ton problème de scrollbar, je ne l'ai pas chez moi, Firefox 1.0, IE6.0 WinXP 1280*1024

Idem avec FF 0.9.3 Win98
Sous IE 5.5, on ne voit pas du tout l'anneau ! et ton menu bouge a chaque rollover (mais pas de scroll à l'horizon !)

Test balise span de commentaire de tes liens apparaisse tout en haut de ton menu et font tout bouger ! Essaye de les palcer de manière absolue Smiley cligne

ElMoustiko a écrit :
Pour ce qui est de changer l'image de l'anneau au passage de la souris sur un lien, tu n'as pas d'autre solution que de gérer ça avec JavaScript en agissant sur le DOM.

Euh... tout depend de l'effet recherché. Si ton image est mis en background d'une balise placé dans un lien, tu peut gérér le changement d'image avec la pseudo class :hover appliqué au lien !
Par contre, si tu veux changer l'attribut source (src) d'un balise Image (img) effectivement, dans ce cas, il faut passer par du JS.

Au passage Aerandir, evite d'utiliser des balise BR pour espacer tes éléments ! Il vaut mieux jouer sur les propriété Padding et Margin en CSS pour ça.
Jep a écrit :

Euh... tout depend de l'effet recherché. Si ton image est mis en background d'une balise placé dans un lien, tu peut gérér le changement d'image avec la pseudo class :hover appliqué au lien !
Par contre, si tu veux changer l'attribut source (src) d'un balise Image (img) effectivement, dans ce cas, il faut passer par du JS.


Euhhh bah pour changer l'image du titre au passage de la souris sur un lien, il n'y a pas d'autre choix que le JS, le titre n'etant pas contenu dans le lien ;)

Sinon j'ai repéré le problème, mais je ne comprend pas pourquoi il est présent...

En fait le premier <a> de chaque lien se décale vers le bas de la hauteur du texte du span, et c'est pas normal vu que le span est déjà en position absolue... C'est vraiment strange comme truc... surtout que quand on passe la souris sur le lien de test dans la page tout retrouve sa place.
Bien, alors je vais essayer de gérer les images avec un background !

Merci pour vos conseils !

EDIT : Je fais un cadre, mais j'imagien qu'il ne faut pas que je fasse un autre <div> ? Que me conseillez vous comme balise pour faire un petit cadre simplement destiné à avoir une image en fond ?
Modifié le 17 Oct 2004 - 17:32
Une image de fond où ça ? pour ton h2 ?
Tu peux la mettre directement dans le <h2>

h2
{
  background: url(...) no-repeat ;
}
Sujet clos
Aller à