Titre: "Inline" + probléme avec firefox
Posté par: AgnesD le le 02-02-2005 a 21:22:39
Bonjour
Voila je voudrais réaliser un menu horizontal avec un effet de changement d'images le tout en css ...
J'ai trouve un truc mais cela ne passe pas sur Fire fox ...et trés bien sur explorer; J'ai mis un exemple là
http://home.tele2.fr/agnesD/Copiedeindex.html
le menu vertical fonctionne bien mais le horizontal :-\ si quelqu'un pouvait me donner un truc j'ai beau chercher j'ai pas trouvé...
|
Titre: Re:"Inline" + probléme avec firefox
Posté par: lupucide le le 03-02-2005 a 00:43:41
| avec un background:center top ? |
Titre: Re:"Inline" + probléme avec firefox
Posté par: jb_gfx le le 03-02-2005 a 01:30:11
"background: center top" ça n'existe pas.
Ton code contient vraiment beaucoup de fautes, tu devrais être plus vigilant :
fermeture plusieurs fois de la balise <head>, plusieurs <style> (qui devraient d'ailleur être dans ta feuille de style). Erreurs de syntaxe dans tes liens (un " .gif" qui se balade).
Ensuite la plus grosse erreur au niveau de ton menu est au niveau de la conception. Tu utilise un gif transparent pour fixer la taille de tes boutons pour afficher un fond derrière. C'est inutilement compliqué et pas du tout adapté à une conception en CSS.
Bref c'est mal :)
Essais comme ça :
Refais une image de fond pour tes boutons mais sans texte.
Puis modifie tes styles comme ceci :
Code:
a.f {
font-weight: bold;
text-align: center;
color: #000;
display: block;
border: 1px solid #fff;
width: 100px;
height: 25px;
line-height: 25px;
font-size: 18px;
float: left;
margin-right: 10px;
background: url('.../boutonjaune.gif') left top;
}
a.f:hover {
background: url('.../boutonviolet.gif') left top;
}
|
|
Puis tu n'as plus qu'a mettre tes liens comme ceci:
Code:
<a class="f" href="boo.html">Bouton 1</a>
etc...
|
|
C'est pas encore parfais mais c'est un peu mieux.
Il y a de trés bons cours sur la conception en CSS sur le site
http://www.alsacreations.com/articles/
Tu trouveras ton bonheur pour la construction de menus en tout genre. Mais lis bien tout pour bien comprendre les bases. |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 08:36:43
Bonjour et un grand mea culpa...
Oui c'est bourré de fautes mais c'était pour faire un exemple vite fait je m'en excuse ( et pour vérifier vos compétences ;) ) mais sans les fautes le probléme est le même .J'ai effectivement trouvé la solution avec les boutons hier soir tard et cela marche tres bien sauf que j'aimerais pouvoir leur donner une taille fixe...
Je vais tenter ta solution mais elle doit etre similaire a la mienne... |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 09:53:53
Salut
jb_gfx je viens d'essayer ton code il me semble que cela marche mais comme c'est dans une feuille pas trés orthodoxe j'essaye cela propre a midi en tout cas je te remercie car c'est génial ca a l'air de ce que je veux...je te fais signe des que j'ai fait cela proprement ;) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: jb_gfx le le 03-02-2005 a 13:15:30
Pour faire un peu plus "clean" au niveau de la sémantique, il est recommandé de regrouper les liens de ton menu.
Le plus adapté est d'utiliser une liste non ordonnée, donc <ul>.
En plus de regrouper logiquement les éléments de ton menu cela permet de le styler plus facilement. Un petit exemple simple :
Code:
<ul id="menu_horizontal">
<li><a href="page1.html" title="Descritption de la 1ere rubrique">Mon lien 1</a></li>
<li><a href="page2.html" title="Descritption de la 2eme rubrique">Mon lien 2</a></li>
<li><a href="page3.html" title="Descritption de la 3eme rubrique">Mon lien 3</a></li>
etc...
</ul>
|
|
A partir de là tu peux styler :
1. l'ensemble :
Code:
#menu_horizontal {
/* stlyles s'appliquant à l'ensemble des éléments du menu */
}
|
|
2. La liste elle même :
Code:
ul#menu_horizontal {
/* stlyles s'appliquant à la liste */
}
|
|
3. Les éléments de la liste :
Code:
#menu_horizontal li {
/* stlyles s'appliquant aux éléments de listes */
}
|
|
Code:
#menu_horizontal a {
/* stlyles s'appliquant aux liens */
}
|
|
Comme tu peux t'en rendre compte tu aura un trés bon contrôle sur l'aspect de ton menu.
Un bout d'exemple concret des styles pour ce menu :
Code:
ul#menu_horizontal, #menu_horizontal li {
/* stlyles communs à la liste et a ses éléments */
margin: 0; /* suppression marges et padding par défaut */
padding: 0;
list-style: none; /* cache les puces */
}
etc...
|
|
|
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 13:53:12
Merci a toi
Bon ben j'ai 1H devant moi je vais essayer d'intégrer cela.... tu dis un petit exemple simple ...mais quand on commence c'est pas evident donc je met en application et je te ferais signe quand ce sera clean mais vu ce que je veux faire je pense que tes conseils sont plus que bienvenus ... :) :) :) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 14:41:38
je bosse mais je suis vraiment débutante donc c'est pas rapide...
En tout cas cela correspond bien a ce que je veux
:) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: lupucide le le 03-02-2005 a 15:05:07
jb_gfx => gné ?!?
background:URL('image.png') no-repeat top center; |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 15:10:10
Bon j'ai mis en ligne une version pas finie (il reste a faire les boutons definitifs; a réécrire les liens et a faire une feuille de style pour sept couleurs différentes mais là j'ai pas le temps )
En attendant voila
http://home.tele2.fr/agnesD/Copiedeindex.html
je te dis un trés grand merci car même avec de la bonne volontée c'est pas toujours évident... vous faites un super boulot
:) :) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 03-02-2005 a 15:20:40
J'ai du virer "id" et le remplacer par "class" car j'ai deux lignes de menu et c'était pas valide...
|
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 04-02-2005 a 10:03:03
Voila c'est propre je pense.....et visible là
http://home.tele2.fr/agnesD/Nouveaudossier/Copiedeindex.html
Il me reste plus qu' adapter des variantes pour mon site et faire les boutons définitifs
merci beaucoup
:) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: OKKO le le 04-02-2005 a 10:29:23
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 04-02-2005 a 13:38:11
Titre: Re:"Inline" + probléme avec firefox
Posté par: jb_gfx le le 04-02-2005 a 17:53:36
jb_gfx => gné ?!?
background:URL('image.png') no-repeat top center;
|
|
Faut m'oublier sur ce coup là, il m'arrive d'être un peu à la masse aussi :D
@AgnesD: jolie progression, ça fait plaisir :)
Y'a un truc que je comprend pas, pourquoi tu as le même menu en bas de page mais avec des classes différentes?
Ne t'arrètes pas en si bon chemin, tu devrais changer ton menu de gauche selon le même prinicpe : supprimer les images, englober le tout dans une liste, etc.
Ensuite pour améliorer l'accéssibilité et l'ergonomie tu devrait penser à ajouter des déscriptions à tes liens, au moins pour les menus.
Code:
<a class="maclasse" href="virus.html" title="qu'est ce qu'un virus et comment s'en protéger">ViRUS</a>
|
|
Et aussi un truc trés simple à mettre en place et qui profitera aux personnes utilisant des navigateurs en mode texte (et aux autres pour améliorer encore le confort de navigation), ajoute des accesskey et tabindex aux liens de ton menu principal.
Code:
<a class="maclasse" href="index.html" title="aller à la page d'accueil du site" accesskey="1" tabindex="1">Accueil</a>
|
|
|
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 04-02-2005 a 19:45:58
jb_gfx
C'est a moi que cela fait le plus plaisir
Pour le menu différent tu verras quand j'aurais fini.... ;) cette page n'est qu'un test ...
Pour le menu de gauche j'y pense et tes autres recommandations aussis...Par contre les accesskey et tabindex je sais pas ce que c'est mais je vais chercher....pas de soucis
Par contre je vais décrocher (si je peux ;)) pour le week end...faut vraiment que je prenne un peu l'air...
Je te remercie de tes conseils
passe un bon week end :) |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 04-02-2005 a 23:44:39
Bon j'ai pas encore réussi a décrocher et cela progresse ...Par contre je viens de me rendre compte que cela crée un affichage trés particulier sous explorer... ::) c'est assez...original ... si quelqu'un a une idée ?
A+
Et encore merci |
Titre: Re:"Inline" + probléme avec firefox
Posté par: AgnesD le le 14-02-2005 a 14:35:12
bon ce n'est pas encore super parfait car j'ai un probléme d'affichage avec explorer qui met mon menu horizontal en escalier...il y a un truc qui m'échappe... ???
Une petite idée???? please.... |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|