28172 sujets

CSS et mise en forme, CSS3

[Résolu] Inclure dans mon architecture css du css (php include)

Pages :
Salut à tous ! Je débarque sur ce forum qui je l'espère pourra m'aider !!

Alors j'expose mon probleme Smiley murf

Mon "index" est constitué en css et ne pose pas de probleme. Ma page d'accueil est elle aussi constituée de Css. comme cete page d'accueil est "incluse" dans mon idex, j'ai deux fichiers css actifs. Je n'ai pas de probleme d'affichage sous ie mais sous ff le css de "l'include" n'est pas du tout géré !!

la page :
http://galilandt.free.fr/index.php?dossier=&page=accueil

le code css index : 
body
{
width: 90%;
margin: auto;
margin-top: 4%;
margin-bottom: 4%;
background-color: #334551;
}

#ar-blanc
{
width: 100%;
margin-top: 1%;
margin-bottom: 1%;
background-color: #FFFFFF;
border: 1px solid #A0B7C5;
z-index: 0;
}

#ban_head
{
width: 100%px;
height: 174px;
background-image: url(images/body/head_arriereplan.jpg);
background-repeat: repeat-x;
}

#menu
{
background-color: #4D6B7D;
width: 130px;
float: left;
margin-left: 0.5%;
margin-top: 0.5%;
border: 1px solid #A0B7C5;
}

.elt_menu
{
margin-bottom: 10px;
}

#contenu
{
padding-left: 2%;
padding-right: 2%;
min-width: 20px; 
max-width: 78%;
background-color: #FFFFFF;
border-left: 1px solid #A0B7C5;
margin: auto;
margin-left: 150px;
margin-bottom: 3%;
margin-top: 0.5%;
text-align: center;
}

.contenu_titre
{
height: 30px;
background-color: #DAE3E9;
font-family: Century Gothic, Arial;
font-size: 26px;
color: #587C92;
margin-bottom: 5px;
}

.contenu_p
{

}


et le code css de laccueil :
#ar-bleu_clair
{
width: 95%;
margin-top: 1%;
margin-bottom: 1%;
background-color: #DAE3E9;
border: 1px solid #A0B7C5;
z-index: 1;
}

.ar-bleu-foncé
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
background-color: #A0B7C5;
border: 1px solid #4D6B7D;
z-index: 2;
}

.partie-news
{
margin: 1%;
width: 44%;
background-color: #4D6B7D;
float: left;
}

.partie-ajouts
{
margin: 1%;
width: 44%;
background-color: #A0B7C5;
float: right;
}


donc si vous savez d'ou vient le probleme Smiley cligne

édit du lien par Igor
Modifié par galinette (21 Feb 2005 - 15:40)
Il a a des jours où la capacité d'IE à gérer le code le plus erroné laisse songeur Smiley lol

C'est en tout cas une excellente illustration de la règle de base (au fait, est-ce qu'elle est bien dans la FAQ de ce forum, en rouge, clignotant, avec signal sonore ?):

Ne jamais ouvrir un site en développement dans Internet Explorer : attendre que le site soit terminé (dans des navigateurs normaux) pour voir quelles mesures prendre éventuellement pour IE.

Bref, ce qu'il faut enlever de l'include de contenu, pour le mettre dans le <head> de "index", c'est:
<link rel="stylesheet" media="screen" type="text/css" title="feuille_de_style_css_accueil" href="css_accueil.css" />


(Aucun navigateur n'est supposé tenir compte d'un élément <link> placé dans le <body>)
Modifié par Laurent Denis (20 Feb 2005 - 14:45)
@Laurent-Denis >> Ca sent un post sur ton blog ça ? Nan, ca ferait troll Smiley langue

Est-ce que cela existe le genre d'erreurs comme ca que IE accepte et pas Gecko, et le contraire, etc ?

Parce que cela m'arrive parfois en développant pour Gecko au départ, et me rendre compte à la fin que j'ai fait une erreur que Gecko a automatiquement corrigé, ou pas pris en compte quoi, mais que d'autres navigateurs ne comprennent pas du tout ...
Administrateur
galinette a écrit :
ui okj mais maintenant comment est ce ke mon "accueil" sora kelle css utiliser ?

Merci de faire un effort sur l'écriture. On est sur un forum et pas sur un lecteur SMS : tu as le temps d'écrire en français.
mon dieu j'ai marqué "ui" au lieu de "oui" et "okj" au lieu de "ok" tu dois tennuyer raphael

edit : j'ai essayé votre solution mais maintenant, le css de laccueil inclut n'est géré nul part. Smiley decu

en meme temps vu que mon fichier accueil donne ca, 

<div id="ar-bleu_clair">
<img src="images/body/accueil_newsbig.jpg" align="center">

   <div class="ar-bleu-foncé">
  
     <div class="partie-news">
dzhqhdhqd
qzhdqdhqizhdizq hidqzodhoqshdhsqj nduaznduianduazipdcaunzdip aznpyndapyndpaydpazy jdqsiopjdiqidqhdoqz doqh dqipd iqhd qiph diqhd 
h qipzh dqizhdiqhzdq dhhdqhpdhzqp dpqhdopqzhdqopzhdopdh qohdopqhdihdih dihihdqihqd ihq dih qd
     </div>

     <div class="partie-ajouts">
dzhqhdhqd
qzhdqdhqizhdizq hidqzodhoqshdhsqj nduaznduianduazipdcaunzdip aznpyndapyndpaydpazy jdqsiopjdiqidqhdoqz doqh dqipd iqhd qiph diqhd 
h qipzh dqizhdiqhzdq dhhdqhpdhzqp dpqhdopqzhdqopzhdopdh qohdopqhdihdih dihihdqihqd ihq dih qd     
     </div>

   </div>
</div>


comment peut il savoir quelle feuille charger vu ke les deux indications sont dans l'index ???

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="feuille_de_style_css2" href="css_index2.css" />
<link rel="stylesheet" media="screen" type="text/css" title="feuille_de_style_css_accueil" href="css_accueil.css" />
</head>
<body>


(dsl raphael mais tu es un petit peu tatillon Smiley langue )
Modifié par galinette (20 Feb 2005 - 16:59)
Administrateur
galinette a écrit :
mon dieu j'ai marqué "ui" au lieu de "oui" et "okj" au lieu de "ok" tu dois tennuyer raphael

Tu as oublié "sora" et "kelle", entre autres.

Non, je ne m'ennuye pas spécialement, au contraire. Mais je pars du principe que tu as un problème, donc que tu dois énoncer clairement ton soucis pour te faire comprendre.
Ce n'est pas aux autres membres de faire l'effort de déchiffrer les messages.

Peut-être que d'autres forums raffolent de langages SMS, mais ce n'est pas le cas ici. Tu as accepté de te conformer à des Règles en t'inscrivant.
A toi de les respecter maintenant... ou non.
En tout cas, je le répète, ce n'est pas moi qui ait un problème Smiley smile

EDIT : oui je suis tatillon, mais j'ai horreur du SMS dans les forums, désolé que ce soit tombé sur toi aujourd'hui Smiley cligne
Modifié par Raphael (20 Feb 2005 - 17:01)
Kevin a écrit :
Est-ce que cela existe le genre d'erreurs comme ca que IE accepte et pas Gecko, et le contraire, etc ?


A partir du moment où un navigateur passe en mode "récupération d'erreur HTML", on entre au Pays des Merveilles de Lewis Carroll : tout et son contraire devient possible Smiley cligne

Y a-t-il un navigateur plus rigide qu'un autre à cet égard ? C'est difficile à dire, dans la mesure où il s'agit souvent, pour Firefox, Opera, etc. , de parvenir à reproduire un comportement d'IE. Cependant, les risques de passer à côté d'une erreur HTML me semblent bien, à l'usage, moins grands en évitant de développer dans IE. C'est beaucoup plus évident en CSS (Le problème de galinette vient d'ailleurs aussi en partie des bugs de flottants d'IE, apparemment).

Y a-t-il un navigateur qui récupère mieux les erreurs qu'un autre ? Un petit exemple:

<body>
<link rel="stylesheet" href="bleu.css">
<link rel="stylesheet" href="orange.css">
<title>Le titre du document
</body>
<head>
<p id="bleu">un arrière-plan bleu.
<p id="orange">un arrière-plan orange.
</head>


(Pas de DTD, ni rien: juste ce code)

Ajoute les deux CSS qui font les deux couleurs d'arrière-plan, et regarde le résultat dans les 3 navigateurs (Opera, Firefox, IE) :Firefox parvient seul à restituer la page attendue. Mais est-ce vraiment un bonne idée ?

Finalement, mieux vaut développer d'abord pour le validateur, puis pour les navigateurs Smiley cligne
Modifié par Laurent Denis (20 Feb 2005 - 17:03)
galinette a écrit :
mon dieu j'ai marqué "ui" au lieu de "oui" et "okj" au lieu de "ok" tu dois tennuyer raphael


C'est qu'il faut penser aux vieux comme moi, qui ne comprend rien à cette "novlang", c'est d'ailleurs expliquer dans les règles que tu as dû apprendre par cœur Smiley lol :
Aides/Règles a écrit :
11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Le forum n'étant pas équipé d'un vérificateur d'ortographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux. Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.
galinette a écrit :
mon dieu j'ai marqué "ui" au lieu de "oui" et "okj" au lieu de "ok" tu dois tennuyer raphael


Raphaël est loin d'être le seul allergique au galimatias. Sans le second message en bon français, je laissais tomber... Smiley cligne

a écrit :

edit : j'ai essayé votre solution mais maintenant, le css de laccueil inclut n'est géré nul part. Smiley decu


C'est normal. Telles qu'elles sont appelées, les 2 feuilles sont exclusives. Pour qu'elles se cumulent, elles doivent avoir le même attribut title (ou ne pas en avoir)

a écrit :

comment peut il savoir quelle feuille charger vu ke les deux indications sont dans l'index ???


Il va "charger" les deux feuilles de styles et les appliquer toutes les deux. Les styles s'appliqueront en fonction des sélecteurs utilisés (classes, id, etc.) et d'un calcul de priorité.

En fait, il serait bien plus simple de réunir le tout dans une feuille unique.

Et il serait prudent de corriger les diverses erreurs HTML et CSS (utiliser les validateurs -> voir la FAQ du forum)

Enfin, il y a un problème de positionnement dans la CSS. Le résultat donné par IE est, semble-t-il, dû à un bug de celui-ci sur es éléments flottants, et ne correspond pas au comportement normal. Il manque un élément doté d'un clear:right placé dans le conteneur des deux flottants, après ceux-ci.
Modifié par Laurent Denis (20 Feb 2005 - 17:29)
Je laisse tomber.

<edit>
Histoire de ne pas avoir totalement perdu mon temps :

<!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">
  <head>
    <title>Soluces Heaven -- Soluces de jeux videos</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css"
    href="css_inde.css" />
  </head>
  <body>
    <div id="ar-blanc">
      <p id="ban_head"><img src="head_ars.jpg"
      alt="Soluces Heaven" /></p>
      <div id="menu">
        <p><img src="menu_sol.jpg" alt="Soluces" /></p>
        <p>Dbz : Budokai 3<br />
         Gta : San Andreas<br />
         Half-life&#178;<br />
         Pes 4<br />
         Tales of Symphonia<br />
         Zelda : Minish cap<br />
        </p>
        <p><img src="menu_div.jpg" alt="Divers" /></p>
        <p>Nous contacter<br />
         Devenir redacteur<br />
         Devenir partenaire<br />
        </p>
        <p><img src="menu_par.jpg" alt="Partenaires" /></p>
        <p>Fireworks-land<br />
         Global Arts<br />
         Cyber-astuces<br />
        </p>
      </div>
      <div id="contenu">
        <div class="contenu_titre">
          <p>Accueil</p>
        </div>
        <div id="ar-bleu_clair">
          <p><img src="accueil_.jpg" alt="News" /></p>
          <div class="ar-bleu-fonce">
            <div class="partie-news">
              <p>dzhqhdhqd qzhdqdhqizhdizq hidqzodhoqshdhsqj
              nduaznduianduazipdcaunzdip aznpyndapyndpaydpazy
              jdqsiopjdiqidqhdoqz doqh dqipd iqhd qiph diqhd h
              qipzh dqizhdiqhzdq dhhdqhpdhzqp
              dpqhdopqzhdqopzhdopdh qohdopqhdihdih dihihdqihqd
              ihq dih qd</p>
            </div>
            <div class="partie-ajouts">
              <p>dzhqhdhqd qzhdqdhqizhdizq hidqzodhoqshdhsqj
              nduaznduianduazipdcaunzdip aznpyndapyndpaydpazy
              jdqsiopjdiqidqhdoqz doqh dqipd iqhd qiph diqhd h
              qipzh dqizhdiqhzdq dhhdqhpdhzqp
              dpqhdopqzhdqopzhdopdh qohdopqhdihdih dihihdqihqd
              ihq dih qd</p>
            </div>
            <hr class="none" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

/* CSS Document */

.style1 {
	font-size: 12px;
	color: #000000;
}
.style3 {
	font-size: 26px;
	color: #587C92;
}
.style4 {
	font-size: 12px;
	color: #587C92;
}
.style5 {
	font-size: 16px;
	color: #587C92;
 height: 500px;
 }

.style6 {
	font-size: 10px;
	color: #587C92;
}
body {
font-family: Arial;
width: 90%;
margin: auto;
margin-top: 4%;
margin-bottom: 4%;
background-color: #334551;
}

#ar-blanc {
margin-top: 1%;
margin-bottom: 1%;
background-color: #FFFFFF;
border: 1px solid #A0B7C5;
}

#ban_head {
background-image: url(head_arr.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0;
}

#menu {
background-color: #4D6B7D;
width: 130px;
float: left;
margin-left: 0.5%;
margin-top: 0.5%;
margin-bottom: 10px;
border: 1px solid #A0B7C5;
font-size: 13px;
color: #FFFFFF;
}
#contenu {
padding-left: 2%;
padding-right: 2%;
min-width: 20px; 
max-width: 78%;
background-color: #FFFFFF;
border-left: 1px solid #A0B7C5;
margin: auto;
margin-left: 150px;
margin-bottom: 3%;
margin-top: 0.5%;
text-align: center;
}

.contenu_titre {
height: 30px;
background-color: #DAE3E9;
font-size: 26px;
color: #587C92;
margin-bottom: 5px;
}
#bas_de_page {
background-color: #990000;
border: 1px solid black;
}

.image_float {
float: left;
margin: 5px;
}
p {
font-size: 12px;
color: #000000;
}
h1 {
font-size: 24px;
color: #990000;
}
h2 {
font-size: 18px;
color: #990000;
}

.none {
visibility: hidden;
clear: right;
}
#ar-bleu_clair {
width: 95%;
margin-top: 1%;
margin-bottom: 1%;
background-color: #DAE3E9;
border: 1px solid #A0B7C5;
}
.ar-bleu-fonce {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
background-color: #A0B7C5;
border: 1px solid #4D6B7D;
}
.partie-news {
margin: 1%;
width: 42%;
background-color: #4D6B7D;
float: left;
}

.partie-ajouts {
margin: 1%;
float: right;
width: 42%;
background-color: #A0B7C5;
}


Reste à remplacer les <p> divers et variés par des éléments plus significatifs (listes pour le menu, titres, etc.
Pour éviter que l'arrière plan blanc s'étende sous le menu jusqu'en bas, déplacer le <hr /> et remplacer clear:right par clear: both.

Bonsoir.
Modifié par Laurent Denis (20 Feb 2005 - 17:49)
Administrateur
galinette a écrit :
Mon "index" est constitué en css et ne pose pas de probleme. Ma page d'accueil est elle aussi constituée de Css. comme cete page d'accueil est "incluse" dans mon idex, j'ai deux fichiers css actifs.

Attention : les include ne sont pas fait pour rassembler deux fichiers web complets.
Le fichier inclu doit être dénué de doctypes, metatags et autres head... sinon tu vas te retrouver avec un document final ayant 2 doctypes, 2 head, deux body, (deux liens CSS), etc !!

Il faut revoir ta façon de procéder.
Administrateur
galinette a écrit :
je sais bien raphael mais la je ne vois vraiment pas comment procéder Smiley ohwell

C'est simple : seule ta page "mère" (index), celle qui va inclure les contenus, diot avoir un doctype, un head, un body, etc.
Les autres "pages" (accueil) ne doivent être que du contenu et non des document web entier. Il ne faut donc garder que le code html nécessaire à être inclus... le contenu, quoi.

D'ailleurs, pour éviter toute confusion, je te déconseille de considérer les include comme des pages html. Renomme-les en .txt ou autre chose pour ne pas faire la confusion, puis tu ne gardes que ce qu'il y aentre les balises <body>.
uép ça je sais mais je te parle de mon probleme de css parcke tous mes fichiers inclus sont sant head, body ...
Administrateur
galinette a écrit :
uép ça je sais mais je te parle de mon probleme de css parcke tous mes fichiers inclus sont sant head, body ...

Si je déchiffre bien, j'en conclus qu'il n'y a qu'une seule feuille CSS.
Quel est donc le problème alors ?
Pages :
Sujet clos
Aller à