- Prof a écrit:
Je n'ai pas tout à fait saisi le problème. Pourquoi ne fais-tu pas un fichier css par include?
Sinon, aurais-tu un exemple schématisé de ce que donne le code html du index et des includes
Ben oui c'est ce que je voudrais faire, une css par include... euh apparemment on peut...? parce que je croyais qu'en php il fallait virer les balises head et body donc si on appelle une feuille de style ça fait un avertissement... non ?
Pour le code, voilà un exemple de mon include "menu.htm" (il deviendra "menu.php" donc j'ai viré les balises) , ça doit donner ça (j'ai un nouveau pb avec les onglets qui s'affichent pas mais bon...) :
J'ai un gros doute qu'on puisse appeler une feuille css comme ça sans balise head...(?)
Et donc quand je mets :
- Citation :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Linéance</title>
<link href="css/lineance.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contener">
<div id="header">
<div id="head1"><a href="http://www.santebeaute.fr" target="_top"><img src="../img/logos/sante-beaute120x43.gif" alt="http://www.santebeaute.fr" title="http://www.santebeaute.fr" /></a></div>
<div id="head2"><?php include("../menu.htm"); ?></div>
</div>
<!--fin header-->
<hr class="ligne1" />
<div id="bandeau"><a href="http://www.santebeaute.fr/lineance"><img src="img/lineance-logo70.gif" alt="Linéance" title="Linéance" /></a></div>
<div id="text-defil">Linéance, Spécialiste de la minceur et du
soin du corps pour les femmes, et maintenant pour les hommes</div>
<div id="contenu">
<div id="menu-vertical">
</div>
<div id="main">main</div>
<hr class="ligne1" />
</div>
<!--fin contenu-->
<div id="footer-marque"><span class="petitemaj">Linéance</span>est une
marque des Laboraoires<span class="petitemaj">Santé Beauté</span>.</div>
<div id="footer">
<div class="coin1"> </div>
<div class="coin2"> </div>
</div>
<!--fin footer-->
</div>
<!--fin contener-->
</body>
</html>
Ben là ça fout le bazar et y'a plus rien d'aligné comme il faut...
Voilà ce que donne mon css attaché "lineance.css" :
- Citation :
- #contener {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
left: auto;
top: 0px;
right: auto;
}
hr.transparent {
display: none;
clear: both;
border: 0px none;
margin: 0px;
padding: 0px;
font-size: 0px;
line-height: 0px;
position: relative;
left: 0px;
top: 0px;
overflow:hidden;
}
hr.ligne1 {
clear: both;
color : #FFFFFF;
background-color: #FFFFFF;
margin: 0;
padding: 0;
line-height: 0;
height: 1px;
top: 0px;
bottom: 0px;
_margin: -7px 0;
padding: 0;
background-position: top;
display: block;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
z-index: -1;
}
img {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#contener #header {
margin: 0px;
padding: 0px;
height: 43px;
width: 760px;
background-color: #3C87C5;
line-height: 43px;
}
#head1 {
margin: 0px;
padding: 0px;
height: 43px;
width: 120px;
position: relative;
line-height: 43px;
float: left;
}
#head2 {
height: 43px;
width: 640px;
margin: 0px;
padding: 0px;
z-index: 20;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: relative;
display: block;
}
#bandeau {
height: 80px;
width: 760px;
text-align: center;
margin: 0px;
line-height: 80px;
z-index: 30;
background-image: url(../img/bandeau-1pix.jpg);
background-repeat: repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
position: relative;
background-position: center top;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
#text-defil {
line-height: 18px;
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
background-color: #4F57A6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
position: relative;
text-align: center;
color: #FFFFFF;
float: left;
font-weight: bold;
}
#contenu {
height: 100%;
width: 760px;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
display: inline;
}
#contener #contenu #menu-vertical {
margin: 0px;
width: 200px;
float: left;
left: 0px;
top: 0px;
bottom: 0px;
background-color: #27BDBE;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 100%;
padding-left: 0px;
}
#contener #contenu #main {
height: 100%;
width: 559px;
float: right;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 100%;
padding-left: 0px;
background-color: #B1B3B6;
margin: 0px;
position: relative;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
display: block;
background-position: right;
}
#contener #footer-marque {
line-height: 18px;
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
background-color: #4F57A6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-align: center;
color: #FFFFFF;
}
.petitemaj {
font-variant: small-caps;
letter-spacing: 2px;
font-weight: bold;
}
#footer {
height: 40px;
width: 760px;
position: relative;
background-color: #3C87C5;
}
.coin1 {
background-image: url(../../img/coins/coin_03.gif);
background-repeat: no-repeat;
background-position: left bottom;
height: 40px;
width: 20px;
z-index: 2;
padding: 0px;
margin-top: auto;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
left: 0px;
bottom: 0px;
}
.coin2 {
background-image: url(../../img/coins/coin_04.gif);
background-repeat: no-repeat;
background-position: right bottom;
position: absolute;
float: left;
height: 40px;
width: 20px;
top: 0px;
right: 0px;
}
#menu-haut {
height: 13px;
width: 640px;
margin: 0px;
padding: 0px;
background-color: #3C87C5;
line-height: 13px;
font-size: 0px;
}
Au résultat le menu est tout démoli et du coup je me demandais si c'était dû au fait que j'ai 2 css dont celui du menu qui est attaché sans balise head...
J'espère que je suis claire, c'est pas facile à expliquer
[/img]