18014 sujets

Questions générales et questions de débutants

Include d'un css

Bonjour,

Je suis nouveau sur le forum, je me présente donc Smiley cligne il y a 15 ans, je commençais sur le HTML 0.0 et je suis resté à ce niveau là ... Le boulot faisant, j'ai laissé tombé mon site internet et maintenant .. j'ai envie de m'y remettre ( surtout pour le fun) ...

Je viens vers vous car j'ai un petit souci .. ( certainement d'un niveau basique pour vous)

En fait, j'ai pris un menu en css sur une page ( nommée menu.html).

Chaque page .php reprenant mon menu.

J'utilise la ligne de code include pour cela.

Tout fonctionne normalement sauf pour internet explorer lorsque j'effectue l'appel de cette page.

Regardez : http://www.petitsous.be/menu3.html fonctionne normalement même sous IE

mais lorsque je passe par http://www.petitsous.be/essai3.php ( qui fait appel à menu3.html) ... bam ... finito les compagneros ... Avec google Chrome/ mozilla ça fonctionne normalement . Je me dis que je fais une connerie avec "include" en php...

Pourriez vous me faire part de vos suggestions ?
Bonjour brassharr,

Lorsque tu utilises la ligne 'include', je suppose que tu parles de ça :
<?php include('chemin-de-ton-fichier.php'); ?>

Lorsque l'on m'a conseillé cette ligne, on m'a également suggéré de donner l'extension PHP à TOUS mes fichiers.
Ce que j'ai fait et je n'ai pas eu de problème avec IE ... (enfin pas concernant l'insertion...).
Je ne sais pas si tu l'as fait ou non mais peut-être ça résoudrait tes problèmes.

Bonne journée et bon courage pour reprendre ton site.
Modifié par leonardus (26 Aug 2013 - 17:16)
En effet, c'est assez curieux ton histoire Smiley smile peux tu nous illustrer ton architecture ainsi que tes appels css et include ?

En regardant dans les consoles j'ai un 404 sur ta page php ; peux être que cela bloc le reste du JS que tu génères. Normalement non mais pour le moment je n'ai pas assez d'élément pour te proposer plus d'hypothèses.
Bonjour, le php n'a rien à voir avec le rendu de la page, du moins pas directement... vous avez dû poser deux fois le même include. Je suis allé voir le code source de la page qui pose problème, jugez par vous même :
<html>
<head>
	<meta charset="utf-8" />
    <title>Un menu d&#65533;roulant en CSS3</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

	</head>
<body>	

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8" />
    <title>Un menu déroulant en CSS3</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	
<style>

Au passage, notez l'emplacement du doctype...

Vous faite appel deux fois au script "jquery-latest.min.js". La plupart des navigateurs peuvent faire abstraction en ignorant le second appel du fichier js, mais c'est cela qui doit poser problème avec IE.
Bonjour,

Votre fichier inclus (menu.html) ne doit pas contenir de balises <html>, <head> et <body> si elles sont déjà présentes dans essai3.php.
Une tête et un corps par page pas plus.

Pour bien faire il faut scinder votre fichier menu.html en 2. D’un côté la présentation (css) de l’autre le contenu (html)

fichier essai4.php

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8" />
    <title>Un menu déroulant en CSS3</title>
    <link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<?php include("menu.html");?>
Blabla
</body>
</html>


fichier menu.css

body
{
	background: url("http://www.petitsous.be/image1.png") repeat scroll 0 0 #F5F5F5;
etc…


fichier menu.html

<ul id="menu">
	<li><a href="http://www.petitsous.be">accueil</a></li>
etc…

Modifié par adrien881 (26 Aug 2013 - 17:22)
Hé bien merci pour toutes vos rapides réponses.

J'ai en effet séparé le .css et .html ... ça fonctionne super bien comme cela. Smiley confused

Désolé pour les horreurs que vous devez lire ... Voilà le code de départ qui ne fonctionnait pas.

Le fichier Php

<html>
<head>
	<meta charset="utf-8" />
    <title>Petit Sous </title>
    <style>
body
{
	background: url("http://www.petitsous.be/image1.png") repeat scroll 0 0 #F5F5F5;
	width: 960px;
	margin: 40px auto;
}

/* Main menu */

#menu
{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}

#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
	color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>

<!-- AdPacks -->
<style>
#adpacks-wrapper{font-family: Arial, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;}
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
body .one{overflow: hidden}
</style>

	</head>
<body>	

<?php include('menu3.html'); ?>
		   Blabla
</body>
</html>


le fichier HTML

   
<ul id="menu">
	<li><a href="http://www.petitsous.be">accueil</a></li>
	<li>
		<a href="#">Categories</a>
		<ul>
			<li>
				<a href="#">Fiches</a>
				<ul>
					<li><a href="#">lien 11</a></li>
					<li><a href="#">lien 12</a></li>
					<li><a href="#">lien 13</a></li>
					<li><a href="#">lien 14</a></li>
				</ul>				
			</li>
			<li>
				<a href="#">impots</a>
				<ul>
					<li><a href="#">lien 21</a></li>
					<li><a href="#">lien 22</a></li>
					<li><a href="#">lien 23</a></li>
					<li><a href="#">lien 24</a></li>
				</ul>				
			</li>
			<li>
				<a href="#">Eco</a>
				<ul>
					<li><a href="#">lien 31</a></li>
					<li><a href="#">lien 32</a></li>
					<li><a href="#">lien 33</a></li>
					<li><a href="#">lien 34</a></li>
				</ul>				
			</li>
			<li>
				<a href="#">Voiture</a>				
				<ul>
					<li><a href="#">lien 41</a></li>
					<li><a href="#">lien 42</a></li>
					<li><a href="#">lien 43</a></li>
					<li><a href="#">lien 44</a></li>
				</ul>	
			</li>
		</ul>
	</li>
	<li>
		<a href="#">lien</a>
		<ul>
			<li>
				<a href="#">lien 1</a>
				<ul>
					<li>
						<a href="#">lien 11</a>		
						<ul>
							<li>
								<a href="#">lien 111</a>						
							</li>
							<li>
								<a href="#">lien 112</a>
							</li>
							<li>
								<a href="#">lien 113</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 12</a>
						<ul>
							<li>
								<a href="#">lien 121</a>						
							</li>
							<li>
								<a href="#">lien 122</a>
							</li>
							<li>
								<a href="#">lien 123</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 13</a>
						<ul>
							<li>
								<a href="#">lien 131</a>						
							</li>
							<li>
								<a href="#">lien 132</a>
							</li>
							<li>
								<a href="#">lien 133</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
			<li>
				<a href="#">lien 2</a>
				<ul>
					<li>
						<a href="#">lien 21</a>
						<ul>
							<li>
								<a href="#">lien 211</a>						
							</li>
							<li>
								<a href="#">lien 212</a>
							</li>
							<li>
								<a href="#">lien 213</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 22</a>
						<ul>
							<li>
								<a href="#">lien 221</a>						
							</li>
							<li>
								<a href="#">lien 222</a>
							</li>
							<li>
								<a href="#">lien 223</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 23</a>
						<ul>
							<li>
								<a href="#">lien 231</a>						
							</li>
							<li>
								<a href="#">lien 232</a>
							</li>
							<li>
								<a href="#">lien 233</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
			<li>
				<a href="#">lien 3</a>
				<ul>
					<li>
						<a href="#">lien 31</a>
						<ul>
							<li>
								<a href="#">lien 311</a>						
							</li>
							<li>
								<a href="#">lien 312</a>
							</li>
							<li>
								<a href="#">lien 313</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 32</a>
						<ul>
							<li>
								<a href="#">lien 321</a>						
							</li>
							<li>
								<a href="#">lien 322</a>
							</li>
							<li>
								<a href="#">lien 323</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href="#">lien 33</a>
						<ul>
							<li>
								<a href="#">lien 331</a>						
							</li>
							<li>
								<a href="#">lien 332</a>
							</li>
							<li>
								<a href="#">lien 333</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
		</ul>		
	</li>
	<li>
		<a href="#">livre d'or</a>	
	</li>
	<li>
		<a href="#">Contact</a>	
	</li>
</ul>

<br>


ça c'est la meilleure version que je suis arrivé à faire seul Smiley confused mais ça ne donnait rien. ( voire pire alors je suis revenu en arrière et remis les balises html et body dans le fichier menu.html )

Je suis encore plus satisfait avec la solution donnée par Adrien Smiley biggrin mais je suis curieux de savoir si ça pouvait arriver quelque part de ma façon ?
Modifié par brassharr (26 Aug 2013 - 18:06)
Sujet clos
Aller à