WEBDESIGNER 2006
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
WEBDESIGNER 2006

enfin des pro qui savent ce qu'ils font
 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
-35%
Le deal à ne pas rater :
Philips Hue Kit de démarrage : 3 Ampoules Hue E27 White + Pont de ...
64.99 € 99.99 €
Voir le deal

 

 Feuilles de styles et includes

Aller en bas 
2 participants
AuteurMessage
Stéphanie

Stéphanie


Nombre de messages : 38
Localisation : Paris
Date d'inscription : 13/04/2006

Feuilles de styles et includes Empty
MessageSujet: Feuilles de styles et includes   Feuilles de styles et includes EmptyMer 17 Mai à 12:16

J'ai une question qui est certainement bête mais bon voilà, je me retrouve avec une page index.php qui comprend 2 includes mais le souci c'est que les includes ont des feuilles de style différentes car les couleurs des menus etc changent selon les rubriques...

Apparemment ça pose problème parce que les pages appelées sont censées appliquer le css de la page index.php, or ça je ne veux pas...

La seule solution que je vois serait de tout grouper dans la même css avec des id, class bien définies et pas redondantes mais alors quelle galère pour se repérer ensuite Shocked

Donc ma question : Y'a pas un moyen de spécifier qu'une css s'applique à une page dans "contaminer" les includes ?
Revenir en haut Aller en bas
http://www.alimage.com
Prof

Prof


Nombre de messages : 24
Date d'inscription : 26/04/2006

Feuilles de styles et includes Empty
MessageSujet: Re: Feuilles de styles et includes   Feuilles de styles et includes EmptyMer 17 Mai à 21:21

Stéphanie a écrit:
J'ai une question qui est certainement bête mais bon voilà, je me retrouve avec une page index.php qui comprend 2 includes mais le souci c'est que les includes ont des feuilles de style différentes car les couleurs des menus etc changent selon les rubriques...

Apparemment ça pose problème parce que les pages appelées sont censées appliquer le css de la page index.php, or ça je ne veux pas...

La seule solution que je vois serait de tout grouper dans la même css avec des id, class bien définies et pas redondantes mais alors quelle galère pour se repérer ensuite Shocked

Donc ma question : Y'a pas un moyen de spécifier qu'une css s'applique à une page dans "contaminer" les includes ?


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

Manu
Revenir en haut Aller en bas
http://www.gst93.greta.fr
Stéphanie

Stéphanie


Nombre de messages : 38
Localisation : Paris
Date d'inscription : 13/04/2006

Feuilles de styles et includes Empty
MessageSujet: Re: Feuilles de styles et includes   Feuilles de styles et includes EmptyMer 17 Mai à 23:59

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...) : Feuilles de styles et includes Menu9fe

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&eacute;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&eacute;ance" title="Lin&eacute;ance" /></a></div>
<div id="text-defil">Lin&eacute;ance, Sp&eacute;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&eacute;ance</span>est une
marque des Laboraoires<span class="petitemaj">Sant&eacute; Beaut&eacute;</span>.</div>
<div id="footer">
<div class="coin1">&nbsp;</div>
<div class="coin2">&nbsp;</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 Sad

Smile[/img]
Revenir en haut Aller en bas
http://www.alimage.com
Prof

Prof


Nombre de messages : 24
Date d'inscription : 26/04/2006

Feuilles de styles et includes Empty
MessageSujet: Re: Feuilles de styles et includes   Feuilles de styles et includes EmptyJeu 18 Mai à 8:43

Stéphanie a écrit:


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 Sad

:

Juste comme ca, sans regarder en détail le code: il faut bien entendu que tu mettes le code d'attachement du css dans le <head> du index.

Tu as le droit de faire dans index:

<head>
<link href="css/lineance.css" rel="stylesheet" type="text/css" />
<link href="css/menubleu.css" rel="stylesheet" type="text/css" />
</head>


Car, lorsque tu visualises la page menu, celle-ci est déjà incluse dans une page index, donc partage le meme head.

Le seul problème est la visualisation/modification de la page menu dans un éditeur WysiWyg, mais pour les tests, tu peux te creer un head dans menu que tu vires quand tu veux vérifier ce que donne la page complète (index+include).

A+

Manu
Revenir en haut Aller en bas
http://www.gst93.greta.fr
Stéphanie

Stéphanie


Nombre de messages : 38
Localisation : Paris
Date d'inscription : 13/04/2006

Feuilles de styles et includes Empty
MessageSujet: Re: Feuilles de styles et includes   Feuilles de styles et includes EmptyJeu 18 Mai à 10:38

Prof a écrit:

Juste comme ca, sans regarder en détail le code: il faut bien entendu que tu mettes le code d'attachement du css dans le <head> du index.

Tu as le droit de faire dans index:

<head>
<link href="css/lineance.css" rel="stylesheet" type="text/css" />
<link href="css/menubleu.css" rel="stylesheet" type="text/css" />
</head>


Car, lorsque tu visualises la page menu, celle-ci est déjà incluse dans une page index, donc partage le meme head.

Le seul problème est la visualisation/modification de la page menu dans un éditeur WysiWyg, mais pour les tests, tu peux te creer un head dans menu que tu vires quand tu veux vérifier ce que donne la page complète (index+include).

A+

Manu
Bon ben encore une fois, super Manu a résolu mon problème SmileSmile
Tu as mis le doigt dessus, c'est exactement ça Smile
J'imaginais même pas une seule seconde qu'on pouvait attacher deux css, j'ai honte... Embarassed

Merci beaucoup Manu Smile
Revenir en haut Aller en bas
http://www.alimage.com
Contenu sponsorisé





Feuilles de styles et includes Empty
MessageSujet: Re: Feuilles de styles et includes   Feuilles de styles et includes Empty

Revenir en haut Aller en bas
 
Feuilles de styles et includes
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
WEBDESIGNER 2006 :: DIT MOI PROF!!! :: QUESTIONS LE TEMPS DU STAGE-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser