La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  "Inline" + probléme avec firefox		 « Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: "Inline" + probléme avec firefox  (Lu 2654 fois)
"Inline" + probléme avec firefox
« sur: le 02-02-2005 a 21:22:39 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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é...
Rapporter au modérateur  

Re:"Inline" + probléme avec firefox
« Répondre #1 sur: le 03-02-2005 a 00:43:41 »
lupucide
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 90



f*ckin

Voir le Profil    WWW    E-Mail
Répondre avec citation

avec un background:center top ?
Rapporter au modérateur  
Pour souper avec le Diable mieux vaut avoir une longue cuillère.
Re:"Inline" + probléme avec firefox
« Répondre #2 sur: le 03-02-2005 a 01:30:11 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

"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.
Rapporter au modérateur  
http://www.pixemedia.com
Re:"Inline" + probléme avec firefox
« Répondre #3 sur: le 03-02-2005 a 08:36:43 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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...
Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #4 sur: le 03-02-2005 a 09:53:53 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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 

Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #5 sur: le 03-02-2005 a 13:15:30 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

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...
Rapporter au modérateur  
http://www.pixemedia.com
Re:"Inline" + probléme avec firefox
« Répondre #6 sur: le 03-02-2005 a 13:53:12 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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 ... 

Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #7 sur: le 03-02-2005 a 14:41:38 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

je bosse mais je suis vraiment débutante donc c'est pas rapide...
En tout cas cela correspond bien a ce que je veux
Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #8 sur: le 03-02-2005 a 15:05:07 »
lupucide
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 90



f*ckin

Voir le Profil    WWW    E-Mail
Répondre avec citation

jb_gfx => gné ?!?

background:URL('image.png') no-repeat top center;
Rapporter au modérateur  
Pour souper avec le Diable mieux vaut avoir une longue cuillère.
Re:"Inline" + probléme avec firefox
« Répondre #9 sur: le 03-02-2005 a 15:10:10 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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
Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #10 sur: le 03-02-2005 a 15:20:40 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

J'ai du virer "id" et le remplacer par "class"  car j'ai deux lignes de menu et c'était pas valide...
Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #11 sur: le 04-02-2005 a 10:03:03 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

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

Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #12 sur: le 04-02-2005 a 10:29:23 »
OKKO
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 645



Gueulard Deluxe - Disponible à 25% -

Voir le Profil    WWW
Répondre avec citation

C'est nikel

Rapporter au modérateur  
" Le raffinement est chose froide "
Re:"Inline" + probléme avec firefox
« Répondre #13 sur: le 04-02-2005 a 13:38:11 »
AgnesD
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 33



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

Ca fait plaisir
merci
Rapporter au modérateur  
Re:"Inline" + probléme avec firefox
« Répondre #14 sur: le 04-02-2005 a 17:53:36 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

Citation de: lupucide le le 03-02-2005 a 15:05:07
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


@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>
« Dernière Édition: le 04-02-2005 a 18:09:49 par jb_gfx » Rapporter au modérateur  
http://www.pixemedia.com
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg