Menu à partir d'un fichier .css : possible ? [Débutant(e)]

**Link14** · 08/09/2005, 20h57

Bonjour à tous

Je viens de mettre à jour un menu de mon site et faire ca à toutes les pages je trouve ca vraiment long! Je me suis donc dit que comme il existe un code HTML avec un fichier .css pour l'écriture et les couleurs de fond tout ca... je me suis dit que y'a peut-etre moyen de faire ca mais pour les menus.

Je fait donc appel à vous pour me dire si cela est possible et si oui comment fait-on?
Merci beaucoup pour ceux qui me répondront!

**spirou** · 08/09/2005, 23h07

Salut !!

Tu peux utiliser le css pour tes menus, comme pour toutes les balises html ce qui allégera considérablement tes pages, mais tu ne pourras jamais le faire sans balises html.

Un très bon site avec divers exemple de menu :
http://www.cssplay.co.uk/menus/index.html

Bon courage

**Sub0** · 09/09/2005, 15h43

Il faut utiliser PHP (un langage serveur). PHP permet de générer du code HTML/Javascript et CSS.
Ainsi, tu as juste à ajouter dans le script PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

include_once('menu.php');

Le code du menu se trouvant dans le script "menu.php".
Je suis justement en train de mettre au point un menu compatible avec tous les navigateurs, fonctionnant sans Javascript, avec pleins d'options... Je te le montrerai une fois terminé, à+

Lien tout en bas à gauche de cette fenêtre

**Link14** · 09/09/2005, 17h00

ok, mais sans PHP c'est possible? et il fonctionne avec tout les navigateurs ?

J'ai essayé le code que tu as mis mais ca marche pas, j'ai du me planter quelque part...

**MasterOfChakhaL** · 09/09/2005, 17h14

php ne fonctionne pas avec les naviguateurs.

C'est ce qu'on peut appeler un langage côté serveur.
C'est a dire que ca mouline là ou le site est hébergé, puis ca renvoie une page html (a priori) et c'est seulement la qu'on se pose la question du navigateur...

Si tu veux simplement développer sur ton poste en php, il te faut installer un serveur qui pourra interpréter le php.
Je peux te conseiller de te renseigner sur EasyPHP ou alors Wamp (j'en connais pas d'autre)

**Link14** · 09/09/2005, 17h29

moi je veut juste mettre mon menu sur un fichier .css mais en html!
un truc tout con parce que j'y connais pas grand chose

Merci !

**Sub0** · 09/09/2005, 17h56

Tu mets ton code du menu dans un fichier à part (peu importe l'extension en fait).
Pour t'expliquer, voici un exemple incomplet, le contenu du fichier "menu.htm" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
  <style type="text/css">
  <!--
  @import url("menu.css"); 
  -->
  </style>
 
  <ul class=menu>
  <li>
    <a href="Accueil.htm"><div>Accueil</div>
 
    ect...
 
  </ul>

Puis tu l'intègres dans tes pages en ajoutant cette ligne par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.htm" width="100%"></iframe>

**Link14** · 09/09/2005, 17h58

Ok merci beaucoup! ton aide me sera précieuse!

EDIT: j'ai réussi a mettre le code dans lapge, le code marche bien mais y'a un prob au niveau du fichier, en fait, j'ai modifier le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.htm" width="100%"></iframe>

j'ai mis un fichier menu.css donc j'ai changé le code en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.css" width="100%"></iframe>

Le prob c'est que y'a une petite fenêtre qui s'afiche dans la page avec le texte écris dans le menu.css, c'est à dire ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <style type="text/css">
  <!--
  @import url("menu.css");
  -->
  </style>
 
  <ul class=menu>
  <li>
    <a href="Accueil.htm"><div>Accueil</div>
 
    ect...
 
  </ul>

Donc j'y suis presque! mais y'a un truc qui cloche

SVP aidez-moi

**dasdeb** · 09/09/2005, 19h35

Je vois, ce que tu n'as pas compris c'est que dans l'exemple Sub0 utilise en fait 3 fichiers:
1- menu.css : ce fichier ne contient que les déclarations CSS.
2- menu.html : ce fichier contient le code HTML de ton menu.
3- xxx.html : ce fichier contient le code HTML avec les <iframe ...></iframe>

menu.css est appelé dans muni.html qui, lui-même est appelé dans xxx.html

**Link14** · 09/09/2005, 19h39

a OK ben je vais tester

merci

**Sub0** · 09/09/2005, 20h07

Quand tu auras fini de mettre ton menu dans le cadre (iframe), tu pourras supprimer la bordure du cadre et coller ton menu dans le coin supérieur gauche pour rendre l'iframe invisible. A noter que tu devras connaitre les dimensions nécessaires pour l'affichage complet de ton menu (surtout si il est déroulant) en définissant les propriétés width et height. Pour le moment, je n'ai pas trouvé de solution pour que la hauteur et la largeur de l'iframe s'ajuste automatiquement au contenu... En fait, ça ne doit pas être bien possible (à moins d'utiliser du Javascript).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.htm" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" width="100%" height="70px"></iframe>

**Sub0** · 09/09/2005, 20h35

Une autre solution que l'iframe existe : La balise <object>

Envoyé par Raphael

**Link14** · 10/09/2005, 19h25

Ouais mais je comprends plus rien la

quelqu'un peut me réexpliquer avec les étapes à faire et en clair SVP

Merci!

**Sub0** · 10/09/2005, 19h36

qu'est-ce-que tu ne comprend pas exactement ?

ps: Depuis combien de temps as-tu commencé la programmation internet ?

**Link14** · 10/09/2005, 21h52

ben en fait ca fait à pu près 1an je crois mais au début j'été avec front page

Ce code la je comprends pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
  <!--
  @import url("menu.css");
  -->
  </style>
 
  <ul class=menu>
  <li>
    <a href="Accueil.htm"><div>Accueil</div>
 
    ect...
 
  </ul>

le truc @import url("menu.css") y'a quelque chose à changer le dedans ?

Et sinon aparament je doit mettre mon menu HTML dans un fichier .css

en fait le code au-dessus je le mets dans une page "menu.html" et dans le fichier "menu.css" je mets le vrai menu en html c'est bien ca?

Et donc, j'introduit le "menu.htm" avec ca dans ma page web :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.htm" width="100%"></iframe>

J'ai bon ou pas ?

Merci beaucoup de m'aider, ca doit vraiment etre chiant pr toi

**Sub0** · 10/09/2005, 22h05

bah ce qui est chiant, c'est de répéter les choses en fait...

Je reprend du début.

• Soit le fichier nomé "styles.css" contenant le code CSS de ton menu (la police, la taille, les couleurs, etc...).
• Soit le fichier nomé "menu.htm" contenant le code HTML de ton menu (les balises html).
Ce fichier a besoin de "styles.css" pour donner le style au menu. On peut l'intégrer au menu avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<style type="text/css"> 
  <!-- 
  @import url("styles.css"); 
  --> 
</style>

• Soit le fichier nomé "page.htm" contenant le code HTML de ta page dans laquelle tu veux intégrer ton menu.
Tu intègres le menu en y ajoutant le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="menu.htm" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" width="100%" height="70px"></iframe>

Tu vois bien que tu as 3 fichiers :
- styles.css
- menu.htm
- page.htm

Vouloir renomer le menu avec l'extension CSS est idiot puisque ton menu est en HTML pas en CSS.
Cela ne peut que t'induire en erreur !
Maintenant, si tu ne comprend toujours pas, je te conseille de prendre des cours car le forum n'est pas là pour ça.
Bon courage, à+

**Link14** · 11/09/2005, 12h58

OK merci, la j'ai compris, merci beaucoup!

**Sub0** · 11/09/2005, 13h11

Parfait! N'hésite pas si tu as d'autres questions. Tu vas probablement te rendre compte que cette solution comporte quelques inconvéniants, comme par exemple le fait de ne pas pouvoir donner à l'iframe les dimensions exactes du menu (surtout si le menu est déroulant et donc sa hauteur peut varier). Ce serait bien de voir le résultat de ce que tu as réalisé, ça nous permettrait éventuellement de mieux te conseiller...

Mais je persiste à dire que l'idéal est d'utiliser PHP. D'ailleurs, je me demande comment tu as pu faire pour t'en passer car je ne connais pas beaucoups de site pouvant fonctionner sans, à moins de se contenter d'un minimum de fonctions... (pas de formulaire par exemple).

**Link14** · 11/09/2005, 17h41

j'ai essayé et ca marche nickel, enfin presque

Le menu s'affiche vechement bien mais je comprends pas pourquoi il est complétement en haut de la page de mon site

http://perso.wanadoo.fr/puissancegta/test/jghfvgh.htm

Voila, tu peut aller voir

Sinon pour la police du menu j'ai pas encore fait avec le fichier .css donc c'est normal que ce n'est pas la bonne police.

Donc il faudrai me dire comment mettre le menu en dessous de ma banière et à droite puisque que c'est le menu de droite.

Désolé de t'embéter encore une fois et merci beaucoup de ton aide!

Sinon tu parle de PHP, moi je veut bien mais je sais pas du tout comment ca marche PHP.

**Huntress** · 11/09/2005, 18h23

Le mieux pour connaître qq chose c'est de s'y mettre !

Voici deux packs, très facile d'utilisation, tu en choisis un, tu l'installes sur ton ordi et tu te lances.
WAMP, EasyPHP

Un lien indispensable :
Doc PHP officielle

Besoin d'aide pour la suite ? Penser à :
- Réfléchir
- Google
- Recherche sur le forum

Le dernier recours étant de poster

Bon courage

Menu à partir d'un fichier .css : possible ? [Débutant(e)]

CSS

Vue hybride

Discussions similaires

Partager

Partager