Mettre un bloc sur toutes les pages

Question

Phoceen

20 Jun 2006 à 23:02

Bonjour,

Je souhaiterais que mon menu se mette directement sur toutes mes pages afin que je ne sois pas obligé de le mettre dans toutes mes pages. Est-ce possible ?

Si oui, comment ? en faisant un include php ??

Merci.
Modifié par Phoceen (20 Jun 2006 - 23:14)

Felipe

Administrateur

20 Jun 2006 à 23:51

Bonjour,

oui l'include php (Tutoriel: Inclure un fichier dans un autre, grâce à CSS et PHP) est la solution la plus simple et pratique Smiley smile

N'hésite pas à ouvrir un sujet dans le Salon SAV si tu as une question concernant ce tuto en particulier Smiley cligne

(après consultation de la FAQ et du Salon en question bien entendu).
Ou ci-dessous si tu as d'autres questions avant de te lancer Smiley smile

Felipe

EDIT: et pour le menu en lui-même ainsi que la mise en page, il y a les 2 tutos rangés dans la catégorie 'Modèles CSS'
Modifié par Felipe (20 Jun 2006 - 23:52)

Phoceen

21 Jun 2006 à 00:20

Merci beaucoup, c'e'st ce que je cherchais !!! Je vais essayer de le mettre en place et te tiens au courant.

MERCI !

Phoceen

21 Jun 2006 à 12:05

J'ai réussi à le mettre en place. Par contre j'ai un souci lorsque je veux inclure des scripts déjà fait (forum, galleie photos...). Les page inclues n'ont pas de css.

Comment faire pour que ces pages là aillent chercher leur CSS ?

Merci.
Modifié par Phoceen (21 Jun 2006 - 12:50)

Christian Le Bouler

21 Jun 2006 à 13:40

Salut,

si dans ton document php tu utilises l'include conditionnelle :


<body>
quelque part dans le body [smile] ...

<?php
if (page==galerie) {include 'galerie.php';}
?>
</body>

alors tu peux très bien dans le head du même document avoir :


<head>
if (page==galerie) {
echo '<link rel="stylesheet" type="text/css" media="screen, projection" href="style_galerie.css" />';
}
</head>

Modifié par clb56 (21 Jun 2006 - 13:41)

Phoceen

22 Jun 2006 à 11:53

En fait, mon problème c'est que je veux que ma page garde la mise en forme de ma CSS mais que le bloc central qui est dynamique s'appuie sur d'autres CSS.

Est-ce possible ?

Jedi

22 Jun 2006 à 12:00

Oui, c'est possible et les solutions sont multiples :
- Tu définis différents style dans ta feuille de style principale (un style par page) et tu les utilises ensuite.
- Tu définis les styles dans le corps même de ta page, après avoir appelé ta feuille de style principale :

<!-- Appel de la feuille de style principale -->
<link rel='stylesheet' media='screen' type='text/css' title='Design de base' href='style.css' />

<!-- Feuille de style spécifique à la page -->
<style type="text/css">
<!--

...

-->
</style>

nORKy

22 Jun 2006 à 12:01

Dans ton <head> tu rajoutes un lien vers ta feuille css
Dans cette feuille, tu te rejoutes un identifiant de type #ma_page qui sera un bloc pere qui entoure des parties à toi afin de ne pas mélanger tes styles et ceux de la page centrale. Ca devrait aller comme ca sans avoir à toucher aux style du bloc centrale

Phoceen

22 Jun 2006 à 12:11

nORKy a écrit :
Dans ton <head> tu rajoutes un lien vers ta feuille css
Dans cette feuille, tu te rejoutes un identifiant de type #ma_page qui sera un bloc pere qui entoure des parties à toi afin de ne pas mélanger tes styles et ceux de la page centrale. Ca devrait aller comme ca sans avoir à toucher aux style du bloc centrale

Je ne comprend pas très bien !? Smiley rolleyes

nORKy

22 Jun 2006 à 13:04

voici la maquette de sortie :


<head>
</head>
<body>
   des trucs a toi ici
   
   des trucs à la page incluses ici

  des trucs a toi ici
</body>

Le plus simple, si tu en veux pas du tout toucher aux css de la page include, c'est d'entourer tes blocs un identifiant perso à toi


<head>
</head>
<body>
   <div id="ma page">
   des trucs a toi ici
   </div>
   des trucs à la page incluses ici
   <div id="ma page">
  des trucs a toi ici
  </div>
</body>

dans ton head, tu peux rajouter un élement


<link [...] href="ma_page.css" [...]>
<link [...] href="style_de_page_incluse.css" [...]>

ainsi, dans ton ma_page.css tu fais tout précéder de #ma_page, par exemple


#page p {
  color: red;
}

ca permet de ne pas se confondre avec la feuille de style de la page include qui pourrait avoir


p {
  color: blue;
}

voilà, c'est + clair ?

Phoceen

22 Jun 2006 à 16:25

Oui, je vais essayer cela !

Phoceen

22 Jun 2006 à 16:54

En fait je ne comprend pas trop comment le mettre en place... Certaines de mes balises commencent déjà par #... et après je ne sais pas quoi mettre dans le code de ma page.

Voici ma CSS qui s'appelle style.css:

*
{
	padding: 0;
	margin: 0;
	border: 0;
}

html {
	height:100%;
}

body
{
	background-color: #3366FF;
	color: #000000;
	width:80%;
	height:100%;
	font: .8em/1.5em Verdana, Arial, sans-serif;
	text-align: center;
}
#document
{
	left:50%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: -40%;
	margin-right: auto;
	text-align:center;
	width: 80%;
	position: absolute;
	text-align: center;
	border: 2px solid;
	border-color: #FFFFFF;
	background-color: #6699FF;
	min-height:96%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 100%;
}

html>body #document {
    height: 100%;
}
#entete
{
	height: 70px;
	line-height: 7em;
	background-color: #6699FF;
	background-position: 50% 50%;
	background-image:url(images/banniere.jpg);
	background-repeat: no-repeat;
}
#colonne1, #colonne2
{
	position: absolute;
	border: 0px solid;
	border-color: #000;
	top: 70px;
	width: 14%;
	background-color: #6699FF;
}
#colonne1
{
	left: 0;
	padding-left:0px;
}
#colonne2
{	
	right: 0;
}
.corps
{
	margin-left : 14%;
	margin-right: 16%;
	height: 650px;
	width: 70%;
	background-color: #FFF;
	overflow: auto;
	padding: 1%;
}
#pied
{
	height: 20px;
	color: #FFFFFF;
	/* line-height: 3em; */
	background-color: #6699FF;
	vertical-align: middle;
	max-height:20px;

}
p
{
	padding: 2px;
}

h2
	{
	text-align: center ;				/* Alignement du texte */
	line-height: 25px ;				/* Espacement horizontal */
	font-size: 2em ;					/* Taille du texte */
	color: #3366FF ;					/* Couleur du texte */
	border-bottom: 2px solid #3366FF ;	/* Hauteur de la ligne */
	padding-bottom: 10px;
	}

/* Menu */
dl, dt, dd, ul, li 
	{
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#menu
	{
	position: absolute; /* placement du menu, à modifier selon vos besoins */
	top: 0;
	left: 0;
	}
#menu
	{
	width: 100%;
	}
#menu dt
	{
	cursor: pointer;
	color:#FFF;
	margin: 1px 0;;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #3366FF;
	background: #3366FF;
	}
#menu dd
	{
	border: 0px solid #3366FF;
	}
#menu li
	{
	text-align: center;
	background: #6666FF;
	}
#menu li a, #menu dt a
	{
	color: #FFF;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	}
#menu li a:hover, #menu dt a:hover
	{
	background: #6699FF;
	}
/* Fin du Menu */

Une CSS que je dois insérer dans la même page (styleN.css) :

/*  auteur: TyGuS 
 Date de création: 30/09/01  */
/* Définition de règle */
@charset "iso-8859-1";

/* Liens en général, définis comme ltexte */

A:hover {TEXT-DECORATION: underline}
A {font: 8pt; font-family: verdana; TEXT-DECORATION: none; color: #000066}



/* Liens des Menus */
.lmenu:hover {TEXT-DECORATION: underline}
.lmenu {font: 11px; font-family: verdana; TEXT-DECORATION: none; color: #000066}

/* Liens du Texte */
.ltexte:hover {TEXT-DECORATION: underline}
.ltexte {font: 8pt; font-family: verdana; TEXT-DECORATION: none; color: #000066}

/* Liens du Texte */
.lsimple:hover {TEXT-DECORATION: none}
.lsimple {font: 8pt; font-family: verdana; TEXT-DECORATION: none; color: #000066}

/* Titre des Menus */
.tmenu {font: bold 14px; font-family: verdana; TEXT-DECORATION: none}

/* Copyrights en bas de la page */
.copy {font: bold 9px; font-family: verdana;}

/* Le Texte, en général  */
.texte {font: 8pt; font-family: verdana;}

/* Le Texte des exemples php  */
.tutophp {font: 12px; font-family: Courier New}

/* Les 'ptits formulaires  */
.form {
	font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #16246C;
	text-decoration: none;
	background-color: #FFFFFF;
	border-bottom-color: #666666;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-left-color: #666666;
	border-right-color: #666666;
	border-right-width: 1px;
	border-top-color: #666666;
	border-top-width: 1px;}

/* Les ScrollBars  */
	BODY {scrollbar-face-color: #CFE3E3; scrollbar-shadow-color: #ABD5D5;
		scrollbar-highlight-color: #ABD5D5;scrollbar-3dlight-color: #2D7DA7;
		 scrollbar-darkshadow-color: #2D7DA7; scrollbar-track-color: #CFE3E3;
		  scrollbar-arrow-color: #ABD5D5}

et enfin ma page (index.php):

<!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>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Bienvenue sur le site officiel des Phocéens, Supporters de l'OM partout en France !</title>
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<link rel='stylesheet' href='styleF.css' type='text/css' />
		<?php 	include ('menu.js'); ?>
	</head>
	<body>
		<!--Document-->
		<div id="document">
			<!--Entete-->
			<div id="entete">
			</div>
			<!--Colonne 1-->
			<div id="colonne1">
				<?php include ('menu.php'); ?>
			</div>
			<!--Corps de page-->
			<div class="corps">
			</div>
			<!--Colonne 2-->
			<div id="colonne2">
				<p><?php include ('droit.php'); ?></p>
			</div>
			<!--Pied de page-->
			<div id="pied">© Phocéen.net</div>
	</div>
	</body>
</html>

Merci de votre aide.

Phoceen

23 Jun 2006 à 14:12

Personne pour m'aider ?

Phoceen

24 Jun 2006 à 13:32

J'ai toujours le problème, je ne sais pas comment faire sur ma feuille de style pour donner un "nom" aux balises.

Jedi

26 Jun 2006 à 10:07

Euuuh, faudrait pitêtes alors voir les bases du langage CSS, non ?!

http://www.tuteurs.ens.fr/internet/web/html/css.html
http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html#ss_part_2

coccimaster

27 Jun 2006 à 11:56

Une autre solution peut ëtre dans le head de ta page


if ( ereg('[i]nomPage1[/i]', $_SERVER['REQUEST_URI']))
echo '<link rel=StyleSheet href="[i]tonCss1[/i]" />'
elseif ( ereg('[i]nomPage2[/i]', $_SERVER['REQUEST_URI']))
echo '<link rel=StyleSheet href="[i]tonCss2[/i]" />'

en vérifiant que tes ereg ne se télescopent pas (ta chaine nomPage2 n'est pas contenu dans le nom du script de la 2, je suis pas sur d'etre très clair, mais ça peut arriver si tu met pas l'url complète dans la chaine que recherche ereg)
comme ça, tu n'inclus que le css nécessaire, mais je suis pas certain que ça soit forcément méga utile.
Modifié par coccimaster (27 Jun 2006 - 11:57)

Phoceen

27 Jun 2006 à 12:09

coccimaster a écrit :
Une autre solution peut ëtre dans le head de ta page
if ( ereg('[i]nomPage1[/i]', $_SERVER['REQUEST_URI']))
echo '<link rel=StyleSheet href="[i]tonCss1[/i]" />'
elseif ( ereg('[i]nomPage2[/i]', $_SERVER['REQUEST_URI']))
echo '<link rel=StyleSheet href="[i]tonCss2[/i]" />'
en vérifiant que tes ereg ne se télescopent pas (ta chaine nomPage2 n'est pas contenu dans le nom du script de la 2, je suis pas sur d'etre très clair, mais ça peut arriver si tu met pas l'url complète dans la chaine que recherche ereg)
comme ça, tu n'inclus que le css nécessaire, mais je suis pas certain que ça soit forcément méga utile.

Je ne pense pas que cette solution me soit utile car j'ai besoin de ma propre CSS pour ma page (bannière menu gauche et droit et le pieds de page) et seulement de la CSS du script pour le bloc central.

coccimaster

27 Jun 2006 à 12:15

D'ailleurs, je me posais la question à ce sujet : est-ce qu'on peut utiliser la règle @import, mais conditionné?

Phoceen

27 Jun 2006 à 12:24

coccimaster a écrit :
D'ailleurs, je me posais la question à ce sujet : est-ce qu'on peut utiliser la règle @import, mais conditionné?

Heu... Là je peux pas te répondre... !

Sujet clos

CSS et mise en forme, CSS3

Mettre un bloc sur toutes les pages