Include page avec CSS dans une autre page avec CSS : possible ?

Question

tenoch

31 Jan 2006 à 11:12

Bonjour,

Ma question est : peut on faire un include d'une page avec CSS dans une page qui contient déjà un CSS ?
Si oui, comment faire ?

en quelques mots :

J'ai fait une page en CSS avec 2 "cadres" droite et gauche (sans frame!) +1 include menu horizontale (menu.html) => index.php avec index.css

Quand je veux inclure dans le cadre de gauche une autre page en Html/CSS avec un code java : photo.html avec photo.css, tous par en vrille.
Il n'y a plus l'include : menu.html et une partie de ma mise en page index.php est modifié.

j'ai l'impression que les 2 pages CSS ne sont pas compatibles. Moi je voudrais que seul la parti include photo.html lise et exécute photo.css.

Ce qui est pénible c'est que mes 2 pages séparées fontionnent bien !

merci d'avance

Tenoch

octopussy

31 Jan 2006 à 11:19

Verifie que tu n'as pas les mêmes nom de class entre tes deux CSS
Modifié par octopussy (31 Jan 2006 - 11:19)

Felipe

Administrateur

31 Jan 2006 à 11:36

Bonjour et bienvenue tenoch,

tenoch a écrit :
Quand je veux inclure dans le cadre de gauche une autre page en Html/CSS avec un code java : photo.html avec photo.css, tous par en vrille.

Java ou Javascript? Pourquoi un simple include (en PHP) ne suffit-il pas? Le problème peut venir de cette manière d'intégrer un bout de page dans une page. Voir le tutoriel de Raphael Inclure un fichier dans un autre, grâce à CSS et PHP et en particulier les avertissements finaux.
Est-ce que photo.html est une page affichable seule, avec <!Doctype, <head> et <body>? Dans ce cas, la page qui accueille photo.html va avoir beaucoup de déclarations normalement uniques en double, mais c'est difficile à dire sans le code sous les yeux. Smiley rolleyes

Comment est déclaré la 2ème CSS d'ailleurs?
Enfin, comme octopussy l'évoque, le problème peut venir de conflits entre les 2 CSS, par exemple si a {} est déclaré de 2 manières différentes, le moteur de rendu du navigateur a des règles internes pour décider quelle déclaration garder.
Modifié par Felipe (31 Jan 2006 - 11:39)

tenoch

31 Jan 2006 à 12:04

voilà les codes :

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta name="author" content="fullahead.org">
<meta name="keywords" content="reflection, fullahead, pat, OSWD, more, keywords, separated, with, commas">
<meta name="description" content="OSWD reflection XHTML template by fullahead.org">

<title>Tenoch Catus</title>
<link rel="stylesheet" type="text/css" href="css/plantes.css" media="screen, tv, projection">

</head>

<body>


<div id="siteBox">



<div id="header">


<span class="title">
<span class="white">Tenoch's Cactus</span> - Mes plantes -
<span class="subTitle"> Mes plantes
</span></span>



<? Include (‘menu_haut.html)?>

</div>



<div id="content">

<div id="contentLeft">
<img src="images/CG_HG.gif" alt="bottom corner" class="vBottom">

<p>
<span class="header">Les familles de cactees</span>
cliquez sur une famille de plante pour voir les photos...
</p>
<p>
<a href="aqua.html" title="different colour scheme" class="menuItem">aqua theme</a>


<script language="JavaScript">
function ChangeMessage(message,champ)
{if(document.getElementById)
document.getElementById(champ).innerHTML = message;}
</script>

<div id="ejs_texte">
</div>

</p>

<div style="text-align: center;">
</div>

<img src="images/CD_BG.gif" align="left">
<img src="images/CD_BD.gif" align="right">
<div class="bottomCorner">
</div>

</div>

<div id="contentRight">
<img src="images/CD_HG.gif" alt="bottom corner" class="vBottom">

<? Include (‘photo.html’)?>


<img src="images/CG_BG.gif" align="left">
<img src="images/CG_BD.gif" align="right">
<div class="bottomCorner">

</div>
</div>


<div id="footer">
<div id="footerLeft">
</div>

<div id="footerRight">
 
</div>
</div>
</div>
</body>
</html>

le code CSS correspondant : plantes.css
/* -- Main layout styles -- */

body {
margin: 0em 0em 0em 0em;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 1.0em;
background-color: #B8B885;}

#siteBox {
float: left;
width: 100%;
color: #999966;}

/* -- Header layout/display styles -- */

#header {
float: left;
width: 100%;
height: 4em;
background: #B8B885 url(../images/hdr.jpg) no-repeat bottom left;}

#header a {
float: right;
width: 8em;
padding: 5px 10px 5px 10px;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #660000;
background-color: #B8B885;
border-bottom: 2px solid #999966;
border-right: 1px solid #999966;
border-left: 1px solid #999966;}

#header a:hover, #header a.active {
padding-top: 5px;
color: #FC0;
background-color: #999966;}

#header a.lastMenuItem {
background-image: url(../images/corner_tr.gif);
background-repeat: no-repeat;
background-position: top right;
border-right: 0px;}

a .desc {
display: none;
text-transform: lowercase;
color: #FC0;}

a:hover .desc, .active .desc {
display: block;}

/* -- Header title and subTitle layout/display styles -- */

.title {
float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: right;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;}

.subTitle {
display: block;
font-size: 0.4em;
text-transform: lowercase;
line-height: 1.2em;
letter-spacing: 0.01em;}

/* -- Content layout/display styles -- */

#content {
float: left;
width: 100%;
padding: 2em 0 0em 0;
background-color: #B8B885;
height: 500px;
overflow: auto;
}

#contentLeft {
float: left;
width: 23.3%;
margin-bottom: 1em;
color: #000000;
background: #5C8FC2 url(../images/CG_HD.gif) no-repeat top right;}

#contentRight {
float: right;
width: 75%;
background: #000000 url(../images/CD_HD.gif) no-repeat top right;}

#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;}

#content a {
text-decoration: none;
color: #660000;
border-bottom: 1px solid #AAA;}

#content a:hover {
color: #FCO;
background-color: #666666;
border-bottom: 1px solid #EEEEEE;}

.header, .subHeader {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #B8B885;}

.subHeader {
border: 0px;}

/* -- Content left site links (large plus icon) -- */

#content a.menuItem {
display: block;
padding: 5px 0 5px 54px;
background: url(../images/icn_plus.gif) no-repeat center left;
border: 0px;}

#content a:hover.menuItem {
color: #FC0;
background: #477AAD url(../images/icn_plus_on.gif) no-repeat center left;
border: 0px;}

/* -- Footer layout/display styles -- */

#footer {
float: left;
width: 100%;
margin: 1em 0em 0em 0em;
height: 2em;
font-size: 0.6em;
text-transform: lowercase;
line-height: 2.6em;
color: #0AD;
background: #25509F url(../images/hdr.jpg) repeat-y top left;}

#footerLeft {
float: left;
width: 60%;
height: 2em;
text-align: left;}

#footerRight {
float: right;
width: 35%;
height: 2em;
text-align: right;}

#footer a {
color: #0AD;}

#footer a:hover {
color: #666666;}

/* -- Display formatting styles -- */

.grey {
font-size: 0.9em;
color: #AAA;}

.white {
color: #FFF;}

acronym {
cursor: help;
border-bottom: 1px dotted #AAA;}

/* -- <ul> tag styles -- */

ul{
font-size: 0.8em;
padding-top: 5px;
padding-bottom: 5px;
list-style-image: url(../images/li_bullet.gif);}

li {
margin-left: 50px;}

/* -- Image alignment classes -- */

.imgLeft, .imgRight {
margin: 5px;}

.imgLeft {
float: left;
margin-left: 0px;}

.imgRight {
float: right;
margin-right: 0px;}

/* -- Utility classes to create the bottom rounded corners -- */

.bottomCorner {
text-align: right;}

.vBottom {
vertical-align: bottom;}

la page photo à inclure avec JavaScript :

<head>
<link rel="stylesheet" type="text/css" href="css/photo.css" media="screen, tv, projection">

<title>photo</title>
<link rel="stylesheet" type="text/css"

<script language="JavaScript">
function ChangeMessage(message,champ)
{if(document.getElementById)
document.getElementById(champ).innerHTML = message;}
</script>

<body>
</style>

<table id="global">
<div id="tete">
<div id="ejs_texte">

</div>
</div>
<span class="ligne"></span>

<td id="page">
<div>

<a href="../cactus_1.JPG"><img style="width: 50px; height: 73px;" alt="" src="../cactus_1.jpg" onmouseover="ChangeMessage('cactus 1','ejs_texte')"></a>
<a href="../cactus_2.JPG"><img style="width: 50px; height: 73px;" alt="" src="../cactus_2.jpg" onmouseover="ChangeMessage('cactus 2','ejs_texte')"></a>
<a href="../cactus_3.JPG"><img style="width: 50px; height: 73px;" alt="" src="../cactus_3.jpg" onmouseover="ChangeMessage('cactus 3','ejs_texte')"></a>
<a href="../cactus_4.JPG"><img style="width: 50px; height: 73px;" alt="" src="../cactus_4.jpg" onmouseover="ChangeMessage('cactus 4','ejs_texte')"></a>

</div>
</td>
</tr>
</table>
</body>

et photo.css

body {
height: 100%;
width: 99%;
font-size: 2em;
text-align: center;
color: #FC0;

}
#global {
border-collapse: collapse;
width: 100%;
height: 100%;
}
#tete {
background: #000000;
height: 60px;
}
#page {
background: #000000;
width: auto;
height: 100%;
}
#page div {
width: 100%;
height: 580px;
}

.ligne {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
border-bottom: 1px solid #B8B885;}

img {border: 4px double #B8B885;
margin: 5pt
}

bonne lecture et merci pour vos commantaires.
A+
Tenoch

zanzibar

31 Jan 2006 à 13:48

Salut,

Ben ça peut pas marcher! il faut que tu révises le tuto sur les inclusions de page en php avec include. Tu n'as pas le droit de remettre des balises <body>, <head>...dans le fichier inclu si ses balises sont déjà présentes dans la page principale! Smiley cligne

Merçi aussi de mettre ton code entre balises "code" pour présenter convenablement sur le forum...et pour un code aussi long, l'idéal est plutôt de donner une URL de test!
Bonne continuation.
Modifié par zanzibar (31 Jan 2006 - 13:49)

Sujet clos