28172 sujets

CSS et mise en forme, CSS3

Bien le bonsoir, je cherche en ce moment à faire mon site Smiley lol

Par contre je rencontre un truc etrange avec mes fichier de style.

Voici mon index.php:


<!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=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="header.css" href="./css/header.css" />
<link rel="stylesheet" media="screen" type="text/css" title="footer.css" href="./css/footer.css" />
<link rel="stylesheet" media="screen" type="text/css" title="body.css" href="./css/body.css" />
<title>NV-Systems</title>
</head>
<body>
<?php 
include "./pages/header.php";
include "./pages/body.php";
include "./pages/footer.php";
?>
</body>
</html>


MAIS, je ne peux utiliser qu'un seul fichier CSS à la fois.
C'est à dire que si je charge la page, il vas m'afficher correctement le header, avec le menu correctement affiché, par contre je n'aurais pas de corps ni de pieds de pages.

Par contre si je commente, le fichier css du header ou du corps j'ai bien le pied de page ou le corps qui s'affiche mais j'ai toujours qu'un sur les trois qui s'affiche.

le truc le plus lourd c'est que si je tente de mettre le link pour le fichier css dans la page incluse ba non ça ne fonctionne pas tout est affiché mais pas la mise en page. Smiley sweatdrop
Modifié par DR I (26 Apr 2010 - 09:11)
Inclue une feuille principale dans ta page avec la balise <link>, et les autres, tu les inclues dans ta feuille de style principale avec @import. Il semblerait qu'une seule feuille de style ne soit lue quand elle est importée comme tu l'as fait (j'avais eu le même problème).
Modifié par phpdoesnotcare (25 Apr 2010 - 19:28)
DR I a écrit :
Est ce que cela pourrait venir d'un paramétrage du serveur distant?

Non, ça vient de ton utilisation de l'attribut title pour tes éléments LINK.
En gros, tu dis au navigateur:
«J'ai trois groupes de feuilles de styles, nommés "header.css", "footer.css", et "body.css"; dans ton interface, merci de proposer à l'utilisateur d'appliquer au choix l'un de ces trois groupes de feuilles de styles, à l'exclusion des deux autres.»

Un code qui ne posera pas ce problème sera simplement:
<link rel="stylesheet" media="screen" type="text/css" href="css/header.css" /> 
<link rel="stylesheet" media="screen" type="text/css" href="css/footer.css" /> 
<link rel="stylesheet" media="screen" type="text/css" href="css/body.css" />
(À noter que pour le href la notation "./chemin" et "chemin" sont équivalentes. On pourrait aussi utiliser un chemin absolu depuis la racine du domaine ou sous-domaine, soit "/css/...".)
Modifié par Florent V. (25 Apr 2010 - 21:48)
phpdoesnotcare a écrit :
Inclue une feuille principale dans ta page avec la balise <link>, et les autres, tu les inclues dans ta feuille de style principale avec @import.

Solution inutile (vu qu'elle contourne le problème au lieu de simplement le résoudre Smiley cligne ) et potentiellement problématique car:
- ça rajoute une requête HTTP;
- le navigateur doit récupérer un premier fichier et l'analyser pour savoir quelles feuilles de styles il doit appeler (grosse latence...).
Le principal effet sera donc de rendre le chargement des pages plus lent, ce qui est rarement souhaitable.
Pour ma part j'utilise une feuille de style qui est celle liée à mon site, et une autre qui me sert de base commune pour tous les sites sur lesquels je travaille (un peu comme la fameuse reset.css, en fait).
Florent V. a écrit :

Non, ça vient de ton utilisation de l'attribut title pour tes éléments LINK.
En gros, tu dis au navigateur:
«J'ai trois groupes de feuilles de styles, nommés "header.css", "footer.css", et "body.css"; dans ton interface, merci de proposer à l'utilisateur d'appliquer au choix l'un de ces trois groupes de feuilles de styles, à l'exclusion des deux autres.»

Un code qui ne posera pas ce problème sera simplement:
<link rel="stylesheet" media="screen" type="text/css" href="css/header.css" /> 
<link rel="stylesheet" media="screen" type="text/css" href="css/footer.css" /> 
<link rel="stylesheet" media="screen" type="text/css" href="css/body.css" />
(À noter que pour le href la notation "./chemin" et "chemin" sont équivalentes. On pourrait aussi utiliser un chemin absolu depuis la racine du domaine ou sous-domaine, soit "/css/...".)


OK je vais virer le title, pourtant, il me semblais que cette balise n'interagissait pas avec la generation de la page, je vais revoir les options de Link je pense. Smiley ravi

Pour les chemins, je travail sur unix donc pas de souci je connais Smiley biggrin
Modifié par DR I (26 Apr 2010 - 09:10)
Bonjour,

DR I a écrit :
OK je vais virer le title, pourtant, il me semblais que cette balise n'interagissait pas avec la generation de la page, je vais revoir les options de Link je pense. Smiley ravi
Ca, ça se gère avec les #ID, éventuellement les .class définis dans le HTML et le CSS, rien à voir avec les options de Link.

Pourrait-on voir une page en ligne (j'ai l'impression que tu te mélange un peu) ?