5568 sujets

Sémantique web et HTML

[résolu] Problème de validation sur l'include de la feuille CSS

bonjour

j'ai une erreur de validation, sur l'include de la feuille de style
+ si je mets l'include dans le code PHP, la mise en pages est correcte, mais il y a une erreur de validation (page de test ici)
+ si je mets l'include dans le head, la mise en page est cassée, mais il n'y a plus d'erreur de validation (l'url de la feuille de style est absolue). page de test ici

cette page fait partie d'un pseudo frameset d'un site php que je suis entrain de refaire depuis un site frameset HTML

précision : les 2 pages s'affichent correctement sur IE 6, mais PAS sous Fx 1.0.7, image décalée vers le haut

code avec include dans le 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>
	<title>Naturaliste.be</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<?php 

	include("css/ShowMaxi.css");
	$ID_TAXON =$_GET['ID'];
	$ID_PHOTO=$_GET['ID_PHOTO'];
	$NOM_LATIN=$_GET['NOM'];
	// on affiche la photo en taille maxi
	echo "<div id='photo_maxi' >";
	echo "<img src='botanique/$ID_TAXON/photo$ID_PHOTO.jpg' alt='' />";
	echo "</div>";	
	// on affiche le nom latin
	echo "<div id='photo_maxi_nom_latin' >";
	echo "$NOM_LATIN";
 	echo "</div>";	
	// on affiche un bouton BACK
	echo "<div id='photo_maxi_back'>";
	echo "<a href='javascript:history.go(-1)' class='photo_maxi_back'>Retour</a>";
	echo "</div>";	
?>
</body>
</html>


code avec include dans le head


<!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>Naturaliste.be</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="http://naturaliste.be/css/ShowMaxi.css" />
</head>
<body>
<?php 
	
	$ID_TAXON =$_GET['ID'];
	$ID_PHOTO=$_GET['ID_PHOTO'];
	$NOM_LATIN=$_GET['NOM'];
	// on affiche la photo en taille maxi
	echo "<div id='photo_maxi' >";
	echo "<img src='botanique/$ID_TAXON/photo$ID_PHOTO.jpg' alt='' />";
	echo "</div>";	
	// on affiche le nom latin
	echo "<div id='photo_maxi_nom_latin' >";
	echo "$NOM_LATIN";
 	echo "</div>";	
	// on affiche un bouton BACK
	echo "<div id='photo_maxi_back'>";
	echo "<a href='javascript:history.go(-1)' class='photo_maxi_back'>Retour</a>";
	echo "</div>";	
?>
</body>
</html>


le validateur est yansanmo

la feuille de style :




<style type="text/css">
<!--
#photo_maxi{
position:absolute; 
left:180px;
top:80px;
z-index:20;
height:800px;
width:800px;
visibility: visible; background-color: #DED7BD;
border:1px solid gray;
}
#photo_maxi_nom_latin{
position:absolute; 
left:180px;
top:85px;
width:791px;
height:15px;
z-index:30;
font-family: Arial; 
font-style:italic;
font-weight:bold;
font-size: 14px;
color:#FFFFC8;
visibility: visible; background-color: #99cc99;
padding:5px;
}
#photo_maxi_back{
position:absolute; 
left:900px;
top:85px;
height:15px;
z-index:40;
font-family: arial, verdana, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 14px;

padding:5px;
}
a.photo_maxi_back
{
color:#ffff33;
text-decoration:overline underline;
}
a.photo_maxi_back:hover
{
color:#ffcc00;
text-decoration:overline underline;
} 


-->
</style>




merci de votre aide

JM
Modifié par liege67 (30 Dec 2005 - 22:49)
Bonjour liege67.

En premier lieu, un fichier.css ne doit pas contenir de balisage html :

[b][#red]<style type="text/css">[/#][/b]
<!--
(...)
-->
[b][#red]</style>[/#][/b]

Je me demande d'ailleurs pourquoi tu places tes déclarations dans un commentaire Smiley confus 

<style type="text/css">
[b][#red]<!--
(...)
-->[/#][/b]
</style>

En second lieu, dans une page html on insère généralement les déclarations entre les balises <head> et </head>. D'où l'erreur de validation (tes déclarations sont incluses dans le <body>).

Donc si tu appelles une feuille de style externe, enlève le html (y compris le commentaire html) de ton fichier.css et (mais) si tu inclus ton fichier dans ton document html, celui-ci doit être inclus entre les balises <head> et </head>.
Modifié par Stephan (30 Dec 2005 - 22:52)
Stephan a écrit :
Bonjour liege67.

En premier lieu, un fichier.css ne doit pas contenir de balisage html :

[b][#red]<style type="text/css">[/#][/b]
<!--
(...)
-->
[b][#red]</style>[/#][/b]

Je me demande d'ailleurs pourquoi tu places tes déclarations dans un commentaire Smiley confus 

<style type="text/css">
[b][#red]<!--
(...)
-->[/#][/b]
</style>

En second lieu, dans une page html on insère généralement les déclarations entre les balise <head> et </head>. D'où l'erreur de validation (tes déclarations sont incluses dans le <body>).


bonjour

si j'enleve tout ce que tu as mis en rouge et que je fais l'appel dans le head, comme je l'ai fait dans les autres pages, ... la CSS est lue comme un fichier texte et s'ouvre dans le navigateur
Smiley confus
Stephan a écrit :

Donc si tu appelles une feuille de style externe, enlève le html (y compris le commentaire html) de ton fichier.css et (mais) si tu inclus ton fichier dans ton document html, celui-ci doit être inclus entre les balises <head> et </head>.

Modifié par Stephan (30 Dec 2005 - 22:51)
l'appel de la CSS


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"  lang="fr">
<head>
	<title>Naturaliste.be</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="http://naturaliste.be/css/ShowMaxi.css" />
</head>
<body>


la CSS après modifications



#photo_maxi{
position:absolute; 
left:180px;
top:80px;
z-index:20;
height:800px;
width:800px;
visibility: visible; background-color: #DED7BD;
border:1px solid gray;
}
#photo_maxi_nom_latin{
position:absolute; 
left:180px;
top:85px;
width:791px;
height:15px;
z-index:30;
font-family: Arial; 
font-style:italic;
font-weight:bold;
font-size: 14px;
color:#FFFFC8;
visibility: visible; background-color: #99cc99;
padding:5px;
}
#photo_maxi_back{
position:absolute; 
left:900px;
top:85px;
height:15px;
z-index:40;
font-family: arial, verdana, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 14px;
padding:5px;
}
a.photo_maxi_back
{
color:#ffff33;
text-decoration:overline underline;
}
a.photo_maxi_back:hover
{
color:#ffcc00;
text-decoration:overline underline;
}
liege67 a écrit :

l'appel de la CSS
(...)

la CSS après modifications
(...)

Oui. Il faut que ça marche Smiley smile
Sujet clos
Aller à