Background repeat - Espacement sous IE6 [resolu]

Bonjour a tous,

Voila je suis actuellement en train de faire un menu vertical et j'ai une interrogation ! J'ai deja fait le tour de la galerie des menus d'Alsacreations mais je n'ai pas trouvé mon bonheur ! Une tite recherche sur le sujet mais ne connaissant pas vraiment la fonction qui permet ce que je veux faire je n'ai vraiment trouvé !
Dernier recours mon forum preferé

Alors exposons le sujet :

voici une image du rendu actuel :



resultat voulu :



css actuel :

ul#menu {
font-family:"Arial", Times, serif;
font-size:14px;
list-style:none;
text-decoration:none;
text-align:right;
line-height:30px;
margin-right:10px;
}

#menu li {
font-family:"Arial", Times, serif; font-size:14px; margin-left:60px; text-align:right;
}

#menu a {
color:#f54a53;
text-decoration:none; font-family:"Arial", Times, serif; font-size:14px; font-weight:bold; text-align:right;
}

#menu a:hover {
color:#0080AA;
text-decoration:none; font-family:"Arial", Times, serif; font-size:14px; font-weight:bold; text-align:right; background:#A1AD5C repeat ;
}

J'ai comme vous le voyez tenté un repeat sur mon backgroud mais ca marche logiquement avec un image alors que la ce n'est qu'une couleur...
voila j'aimerais que le hover en vert sur mon menu s'etende (tand a gauche qu'a droite) et peut on delimiter cette zone et cela pour chaque lien ?

Merci d'avance

PS : j'oublier desolé pour cette minable retouche sous paint
Modifié par Ankart (25 Oct 2007 - 15:00)

Utilise le padding gauche et droite plutot que margin.
Le padding étend la zone de contenu de l'élément et donc le background.

Bonjour,

Le repeat est inutile pour une couleur de fond, car cette couleur s'affichera sur toute la surface de l'élément.

Pour étendre la dite surface, il faudra à priori passer les liens en affichage de type bloc (display: block), et soit leur laisser prendre toute la largeur disponible dans leur conteneur, soit leur donner une largeur.

J'ai remplacé les margin par des padding, passé les liens en type block et effectivement je peux soit definir une taille soit laisser prendre toute la largeur du block.

résolu de ce coté là, Merci a vous messieurs !

Une question en amenant souvent une autre, mon image de fond est en background, c'est un gif et transparent(afin d'eviter le png et le code non valide) evidement pour qu'on puisse voir le menu
Mon menu s'affiche bien au bon endroit mais le background vert de mes liens sont par dessus l'image.
J'ai bien essayer avec z-index mais soit mon menu disparait, soit le background du menu et par dessus.
Apres verification, mon gif est belle est bien transparent pourtant...

J'ai essayé de passer mon block contenant mon image d'arriere plan en type block aussi afin de garder les meme propriété mais cela n'a rien changé.
Ayant fait des recherche sur le forum, j'ai vu que les element devait etre positionné pour beneficier de l'element z-index. J'ai repositionné l'ensemble en absolute mais toujours pas ...
Modifié par Ankart (24 Oct 2007 - 16:36)

J'ai continuer de chercher mais toujours pas reussi a le faire passer dessous. Cette information fait a l'occasion office de up pour le post

On pourrait voir la page? Difficile de se prononcer sans tous les éléments.

Un avertissement tout de même: tu pourras sans problème placer l'image (ou un bloc vide avec l'image en background) par dessus les items du menu. Par contre, toute la surface des liens recouverte par l'image ou le bloc de l'image sera non cliquable. Même si l'image est transparente.

Si ton image est d'un seul bloc, il faudra peut-être faire un découpage étroit du liseré de gauche.

je te fais ca de suite tand que tu es là

je cherche encore lol j'edite mon post dans les 3 minutes

voila : http://dev.ankart.fr/

et oui mon image et bien une seule image...mais si elle etait en 2 ce serait il me semble pareil...j'ai besoin de cette utilisation de la transparence. Enfin j'ai deja vu ce genre de menu, une solution doit bien exister
Modifié par Florent V. (25 Oct 2007 - 00:48)

Re,

Heu... en fait tu essaie d'afficher par dessus un élément... son conteneur.
Forcément, ça ne va pas marcher. Pour prendre une image, tu essaies de retourner une chaussette tout en gardant les motifs de la chaussette à l'endroit...

Si tu veux pouvoirs superposer un élément à une partie de ton menu, il faut que cet élément ne soit pas un parent ou un ancêtre du menu. Ça peut être un enfant ou descendant, mais le plus simple est sans doute de travailler avec un frère.

Tu pourrais faire ceci:

<div id="menubg">
	<ul id="menu">
		<li><a href="index.php?page=acc" >Accueil</a></li>
	</ul><!-- #menu -->
	<span id="menudeco"></span>      
</div><!-- #menubg -->

Côté CSS, tu gardes ton image de fond sur div#menubg, par contre tu passes ul#menu en positionnement statique (normal, par défaut...), div#menubg en positionnement relatif (sans z-index particulier), et tu places juste span#menudeco en positionnement absolu, par dessus la partie gauche du menu. Dans span#menudeco, tu peux reprendre l'image de fond de div#menubg, mais uniquement sur une hauteur et une largeur précise, et en calant l'image comme il faut avec background-position.

En gros, le but est de conserver une image de fond, de mettre par dessus le menu, et de mettre encore par dessus une image sur une zone limitée, qui reprendrait l'image de fond ou une partie de celle-ci.

Mais gaffe à cette histoire de lien non cliquable (pas de clic, pas de :hover...) s'il est survolé par une image ou par tout élément, même transparent. À vrai dire, pour le premier item du menu ça me semble très très mal barré, vu l'importance de la zone de recouvrement.

Les sites que tu as vus qui utilisaient ce genre d'effet avaient peut-être un menu en images (donc à la hauteur maitrisable), utilisaient peut-être des images directement pour les fonds des liens?

ok j'ai compris le principe...mais meme si je recollais une image apres par dessus, toute la zone sous le bras serait encore et toujous transparente et mon menu donc, non cliquable...

je vais ruser et recoller l'image par dessus mais que la partie du corps, sans le bras

Je tiens au courant ici Merci pour l'aide ca va m'occuper un petit moment

Je viens d'avoir une autre idée...valable ou pas ! a la place d'une simple couleur sur mon hover, si je met une image repeté ? surement idiot mais on sait jamais xD

J'essaierais les 2
Modifié par Ankart (25 Oct 2007 - 01:17)

Me revoila Mr Florent

Alors j'ai finalement opté pour la decoupe d'un morceau d'image, puis superposition j'ai donc :

mon background
mon menu
et mon morceau d'image qui cache le hover qui depasse en faisant attention biensur que ca ne gene pas le lien cliquable.

bon la c'est pas super ajusté l'image est mal coupé c'etait pour essai, et l'image est crade mais c'est pour voir. Deja ca marche et ca c'est bien Par contre j'ai un gros soucis sous IE6, mon menu fait bien la bonne hauteur, mais le line-height n'a pas l'air d'etre pris sous IE6 comme si IE6 avait deja un line-height minimum de pré-configuré...du coup quand je le reduit pour que ca colle sous IE6 , logique mes ligne se superpose sous FF2 et IE7...

La il est 5H07 du matin et j'ai le cerveau en compote...peut etre une enormité que je ne vois pas ? mais la ca fait bien 4 heures que je bidouille sans trouver, a naviguer sur different forum pour trouver une solution mais sans succes...

Re voici le lien : http://dev.ankart.fr/

Maintenant vais faire dormir mes yeux lol

Merci d'avance pour l'aide apporté!

Bonjour,

En passant rapidement: la technique des ragged float d'Eric Meyer peut être facilement adaptée pour produire l'effet recherché.

Sinon, la mise en image des éléments du menu est une solution beaucoup plus simple.
Modifié par Laurent Denis (25 Oct 2007 - 07:18)

Laurent Denis a écrit :
Sinon, la mise en image des éléments du menu est une solution beaucoup plus simple.

Pas faux.

Pour la hauteur de ligne trop importante sous IE... en fait ça n'est pas la hauteur de ligne qui pose problème, c'est une histoire un peu différente. Lire notamment:
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html
(Voir le dernier point de l'article.)

Florent V. a écrit :

Pas faux.

N'est-ce pas ?

Bon, disons clairement les choses: au départ, on a ici une maquette graphique inadaptée au web, dont la mise en oeuvre technique sera nécessairement un compromis de moindre qualité.

En effet, c'est un bon exemple de mise en page figée, conçue pour un contenu donné (il faudra tout refaire pour un libellé de lien un poil trop long), et des conditions de rendu données (gérer l'agrandissement des tailles de caractères est difficile, sauf dans la solution des ragged float, qui a elle-même d'autres inconvénients).

Une remarque : c'est un bon exemple, mais pas des meilleurs, puisque les contraintes ne jouent qu'en largeur. Dans d'autres cas, le gros lot est décroché avec une double contrainte de design figé en hauteur comme en largeur.

Bref, c'est un choix privilégiant une certaine approche du graphisme au détriment d'autres aspects de la page Web. Il est tout à fait respectable. Mais, comme tout choix, il induit ses propres contraintes techniques. Ici, ce choix conduit logiquement à prvilégier la technique qui restitue ce graphisme le plus directement, tout en étant à la portée d'un développeur par ailleurs non expert. C'est à dire un grand vieux menu en images, figé, mais aisément maîtrisable.

Et qu'on pourra même valider comme étant accessible, les contraintes graphiques étant suffisantes pour justifier la mise en image des textes

Finalement, ce n'est jamais qu'une variante de la question des tableaux de présentation.
Modifié par Laurent Denis (25 Oct 2007 - 11:42)

Aller je marque le sujet resolu

J'ai resolu le probleme d'espacement grace au billet que Florent m'a transmis en mettant toutes mes balises <li> a la suite et sans espace !
Voila que le menu reagit correctement aussi sous IE6 .

Je tiens a remercier, Yorick pour sa contribution,

et tout particulierement, Florent V. et Laurent Denis pour leur aide significative et leur investissement.

Et un super special a Florent V. qui en plus d'aider a suggeré, expliqué, et a eu une super patience

Merci a tout le monde

Maintenant pour infos, je sais et suis conscient et c'est en toute liberté que j'ai opté pour un menu qui par la suite sera figé, il n'evoluera pas du moins dans les grandes ligne seul les sous menu evolueront eventuellement (tu le sens là que t'as touché mon amour propre en disant que c'est pas du travail d'expert lol ) donc voila c'est bel et bien reflechit

Je tiens aussi a preciser que je veux respecter le plus possible et l'accessibilité et la validation d'ou mon soucis du detail pour le depassé IE6 et l'envie d'avoir la meme mise en page partout. Alsacreations etant le seul Forum correspondant avec mon etat d'esprit, je sais bien que vous comprendrez !

Encore merci a vous et hop billet resolu et intitulé du sujet completé !
Modifié par Ankart (25 Oct 2007 - 15:00)