28220 sujets

CSS et mise en forme, CSS3

Fixed qui bouge sous FF

Pages :
Slt et bonne année Smiley cligne

j'ai a peu pret fini mon site 


#menu_contact{
	display: block ;
	position:fixed;
	margin-left: 723px;
	width: 13px ;
	height: 107px;
	_margin: 0 14px 0 0   ;
	float: right;
	background: #f1f1f1;

}


Reste une bizzarerie que je n'explique pas, le bouton contact est fixe sous IE et bouge sous FF... J'aimerais que tout soit fixe tant qu'a faire.

une idée ?
Modifié par joxp (22 Feb 2006 - 17:51)
Non c'est le contraire, "contact" est bien fixe avec firefox et scrollant avec IE. Le référent c'est la fenêtre du navigateur (ou l'écran si tu préfères) et non le reste du site.

P.S.
Tu devrais enlever l'underscore avant margin parce qu'on se demande si c'est une coquille ou une erreur.
Modifié par clb56 (01 Jan 2006 - 15:36)
Je voulais dire sous FF il n'est pas fixe par raport au bandeau du haut.
c'est le comportement IE que je voudrai avoir sous FF

Et nan le underscore N'est PAS une faute de frappe, il permet de callé le bouton contact. Il n'est interprété que par IE.
Modifié par joxp (01 Jan 2006 - 17:25)
Bonsoir,

Le code suivant est suffisant aussi bien pour IE que pour les navigateurs standards :


#menu_contact{
	margin-left: 723px;
	width: 13px ;
	height: 107px;
	background: #f1f1f1;
}


Cela dit, ne pas utiliser, svp, ces pseudos-liens dépourvus de contenu et bricolés avec des images d'arrière-plan CSS : ils n'ont aucune existence pour de nombreux utilisateurs. Les images concernées doivent être des éléments HTML img.
Modifié par Laurent Denis (01 Jan 2006 - 21:00)
Laurent Denis a écrit :
Bonsoir,

Cela dit, ne pas utiliser, svp, ces pseudos-liens dépourvus de contenu et bricolés avec des images d'arrière-plan CSS : ils n'ont aucune existence pour de nombreux utilisateurs. Les images concernées doivent être des éléments HTML img.


Comment ??

Sinon le probleme de flotement est résolu, MERCI, mais sous Ie il y a 3 pixel de moins sur la gauche :S comment je peux régler ça proprement ?
Modifié par joxp (22 Feb 2006 - 17:51)
a écrit :
Cela dit, ne pas utiliser, svp, ces pseudos-liens dépourvus de contenu et bricolés avec des images d'arrière-plan CSS : ils n'ont aucune existence pour de nombreux utilisateurs


Si je ne me trompe pas, ils n'ont aucune existence non plus pour les robots d'exploration ou sont ignorés, du moins en ce qui concerne Googlebot . J'avais fait le test depuis l'accueil de mon site, la page mis en lien n'a jamais été explorée, en tout cas pas référencée. (enfin je n'avais mis qu'un mot fabriqué sur cette page, peut être y a t'il un contenu minimum obligatoire pour le référencement ? Je ne crois pas car j'avais vu des tests similaires sur webrankinfo avec un seul mot fabriqué)
Modifié par Alan (01 Jan 2006 - 23:42)
Alan a écrit :
ces pseudos-liens dépourvus de contenu et bricolés avec des images d'arrière-plan CSS


Mais de quoi il parle ?
Smiley sweatdrop
Bonjour,

Apparemment, le message n'est pas passé Smiley cligne

Certes, en raison de la syntaxe nécessaire pour les ancres, rien n'interdit formellement (du point de vue validité HTML) de faire des liens vides, du type :
<a href="http://example.org" title="blabla" id="foo"[b]></a>[/b]

#foo {
background: url(foo.png)...
}


Mais ces liens dénués d'intitulés n'apparaîtront pas à de nombreux utilisateurs :
- navigateurs sans support CSS
- CSS désactivée
- option d'accessibilité "ignorer les couleur" dans IE Win
- certains navigateurs mobiles (supprimant l'image d'arrière-plan)
- la plupart des navigateurs textes (certains vont proposer à l'utilisateur de visualiser les titles des liens vides)
- différentes configurations de lecteurs d'écran

Ils n'auront pas non plus d'existence pour différents scripts (traducteurs, robots d'indexation ignorant l'attribut title, etc)

L'effet de roll-over est-il à ce point vital qu'il faille en passer par ce recul d'interopérabilité et d'accessibilité ? Smiley cligne
Salut,
si tu veux garder l'effet le roll-over, je pense que tu peux facilement le faire avec un "lien réel" et sans utiliser l'image en background, grâce aux marges négatives

Les spécialistes me tireront les oreilles si je dis des bêtises, mais voilà comment je m'y prendrais :

1) Je vire toutes tes classes qui gèrent l'effet roll-ver avec background (c'est plus léger, non ?).
2) j'insère les images du menu dans les liens vides
3) dans le "id" englobant ton menu, je mets un "overflow: hidden" pour qu'on ne voit que la première partie des images, je supprime le "border" des images, et je mets en marge négative de -13px en a:hover pour qu'on voit la seconde partie de l'image en passant le curseur au dessus
4) j'encercle chacun de ces liens d'une "div id" qui permettront de gérer au cas pas cas (j'ai vu que tu voulais que l'image "actu" soit sortie), et éventuellement de supprimer les espaces indésirables et les définissant par rapport à la hauteur des images, et en "over-flow hidden" (ça c'est juste pour IE... )

ce qui donnerait donc en style

<style  type="text/css">
#menu_v {
	position: relative;
	width: 13px;
	float: left;
	left: 35px;
	overflow: hidden;
}
#menu_v img {
	border-width: 0;
}
#menu_v a:hover {
	margin-left: -13px;
	}
#real {
	height:102px;
	overflow:hidden;
}
#act {
	height: 89px;
	overflow:hidden;
	margin-left: -13px; /* pour que l'image apparaisse sortie*/
}
#act a:hover {
	margin-left: 0px;
}
#cv {
	height: 90px;
	overflow:hidden;
}

</style>

et dans le <body>
<div id="menu_v">
	<div id="real"><a href="http://joffreyhabai.free.fr/realisation.php" title="réalisation multimedia de joffrey habai"><img  src="V_realisation.gif" alt="réalisation" width="26" height="102"  /></a></div>
	<div id="actu"><a href="http://joffreyhabai.free.fr/index.php" title="les derniers projets multimedia de joffrey habai"><img src="V_actu.gif" alt="actualité" width="26" height="89" /></a></div>
	<div id="cv"><a href="http://joffreyhabai.free.fr/cv.html" class="menuH_cv" title="CV de Joffrey HABAI"><img src="V_cv.gif" alt="cv" width="26" height="90" /></a></div>
</div>



Ce qui donnerait CECI

ps: pour le lien vers l'accueil de ton site, je mettrais éventuellement href="/" au lieu de href="index.php"
Modifié par Alan (02 Jan 2006 - 14:38)
mi avec le reste du site ça fonctionne tres mal, jignore pourquoi

mais merci pour ta réponse complete des que jai le temps jessai de voir pourquoi ça ne fonctionne pas avec le reste de mon site
Je peux pas faire des essais maintenant, mais je vois que tu avais déjà un id #actu dans ta page, donc change les noms dans l'exemple que je t'ai donné
a+
J'ai fait un test en modifant une capture de ta page d'accueil. Ca marche très bien à condition de changer le nom #actu que tu utilises ailleurs dans ta page (je vais modifier l'exemple ci dessus)

Bonne journée
en faite c'est trop le boxon, car sous IE ça decalle de 5px sur la gauche.

par contre faudrait corriger le tutoriel (rollover avec une seule image), car si j'ai mi les img en background, c'est que dans le tut on me disait de faire comme ça...
Salut,
Le tuto est très bien comme ça, puisque ça conerne justement les images de fond avec un lien sur un texte.
Tu peux par ailleurs garder ta technique, mais peut être alors serait il mieux d'ajouter un menu réel ailleurs.

Comme je te l'ai dit, j'avais essayé en modifiant une capture de ta page d'accueil. Je regarde, mais je ne vois pas de décalage ou de problème avec IE ??
tu peux jeter un oeil ici : -http://alain.gerard3.free.fr/test/
seul le menu de gauche a été modifié.
(j'ai mis un tiret pour que la page ne soit pas référencée, quand tu auras jeté un coup d'oeil, je l'effacerai)
+a
Modifié par Alan (03 Jan 2006 - 11:22)
Bonjour,

joxp a écrit :
par contre faudrait corriger le tutoriel (rollover avec une seule image), car si j'ai mi les img en background, c'est que dans le tut on me disait de faire comme ça...


Le problème, c'est que de nombreux utilisateurs de ces tutoriels se mettent à produire des structures HTML aberrantes, parce qu'ils ignorent ce qu'est le HTML (ce n'est pas un reproche : ils apprennent CSS à la place, Raphaël ayant écrit un livre populaire sur CSS et non un livre populaire sur ce qu'est une page Web) et qu'ils veulent de zolis effets graphiques au pixel près.

Orienter ces utilisateurs vers un format du type Flash serait AMHA un moindre mal. CSS commet pas mal de dégât quand cet outil est mal employé. Autant que le DHTML et les tableaux de papa et au moins autant, sinon plus, que Flash, qui déclare au moins à peu près clairement aux utilisateurs concernés qu'il est inutilisable dans leur configuration.

Bref, oui, il faut corriger le tutoriel, c'est à dire sans doute le supprimer purement et simplement.

Mais non, ce n'est pas de la faute du tutoriel. Et il sera beaucoup pardonné à son auteur, qui est d'ailleurs parti cueillir des pommes plus loin, semble-t-il.
Modifié par Laurent Denis (03 Jan 2006 - 12:22)
Alan a écrit :
Salut,
Je regarde, mais je ne vois pas de décalage ou de problème avec IE ??


http://joffreyhabai.free.fr/index_test.php regarde sous IE stp

Dans ton code tu as mis : class="menuH_cv" sur le bouton CV, menuH_cv defini la zone de bouton CV mais du menu horizontale chez moi.

je lai virer ds la page index_test.php


même en copiant collant ton CSS jai tjs ce décallage :'(
Modifié par joxp (03 Jan 2006 - 14:46)
joxp a écrit :


même en copiant collant ton CSS jai tjs ce décallage :'(

Tu es sûr que tu as bien copié collé ?? Smiley cligne
J'ai regardé les deux feuilles de style pour voir pourquoi ça marchait sur ma page et pas sur la tienne, et c'est quand même difficile de ne pas voir la différence :

Sur celle de "ma" page : 
#menu_v{
	position:relative;

	width: 13px ;
	height: 445px;
	float: left;
	[#red]margin: 0 0px; /*pour FF*/
	_margin:0 3px;/*pour IE*/[/#]
	left: 35px;
	overflow: hidden;
}

et sur celle de ta page de test :
#menu_v{

	position:relative;
	width: 13px ;
	height: 445px;
	float: left;
	overflow: hidden;
	[#red]/*margin: 0 0px; pour FF*/
	/*_margin:0 3px;pour IE*/[/#]
	left: 35px;
}



Ton erreur vien sûrement du fait que je ne l'avais pas repris dans dans le premier exemple, mais c'est juste parce que j'en avais pas alors besoin, ça ne voulait pas dire qu'il fallait l'ôter. J'ai juste ajouter l'overflow:hidden ici, sinon je n'ai rien touché

Mais je crois que ce genre de truc ("_margin") pour IE est déconseillé car ça ne devrait plus marcher avec IE 7. IL faudrait mieux utiliser le commentaire conditionnel. Et puis j'ai l'impression que tu pouvais t'y prendre autrement, sans avoir besoin de ça, enfin faut voir
Modifié par Alan (03 Jan 2006 - 16:03)
Alan a écrit :
IL faudrait mieux utiliser le commentaire conditionnel.


C'est comment le commentaire conditionnel ?


sinon ça marche ! Smiley lol merci bcp
Pages :
Sujet clos
Aller à