18041 sujets

Questions générales et questions de débutants

Html et css en une seule page impossible

Bonjour,

pour simplifier l'intégration du code, je voudrais mettre le html et le style en une seule page ; or, si je fais ça, une partie du style (les largeurs) n'est pas prise en compte alors qu'elle l'était avec un CSS séparé ; pourquoi ?

<html>
  <head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
  <style type="text/css">
#navigation { width:790px; font-family:Arial, Helvetica, sans-serif;}
#navigation .menu { float:left; width:33%;margin:0; padding:0; }
#navigation ul li { list-style:none; }
.title {
background-color:#4FA600; 
color:white;
width:790px;
display:inline-block;
text-align:center;
}
.clear{
   clear:left; list-style: none;
   margin:0; padding:0;
} 
.level0,.level1 {
 display: inline-block;
background-color:#EAEAEA; 
 width:300px;
  font-size:14px;
}
 .level2 {
 display: inline-block;
 width:350px;
 font-size:14px;
  line-height:15px;
  padding-left:10px;
  background: url(http://---/green_bullet.gif) left no-repeat; 
 }
  .level3 {
 display: inline-block;
  width:300px;
   font-size:12px;
  line-height:15px;
  padding-left:20px;
 }
 .level2:hover {color:#87D300; }
.level2 a:hover {color:#87D300; }
.level3:hover {color:#87D300; }
.level3 a:hover {color:#87D300; }
</style>
  </head>
  <body>
   
    <!-- All sitemap in a div, then each item, 3 <ul> (3 levels) and most of the texts into span (to apply CSS classes)-->
    <div id="navigation">
      <ul>
        <li><span class="title"><font width="100%">Site Map</font></span></li>
        <li>
          <ul class="menu">
            <li><span class="level0"><a href="#">User Centric</a></span></li>
            <li><span class="level1"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Project_Managers_Area/$File/ProjectManagers_home2.html">Project
                  Manager</a></span></li>
            <li><span class="level1"><a href="#">Project leaders</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Project+Design+Leader+Home/$File/DesignTest_ProjectDesignLeader2.html">Design
                  &amp; tests</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Indust_Home/$File/Industrialization2.html">Industrialization</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Offer+Marketing+home/$File/OfferMarketing2.html">Marketing</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Users+Centric+Purchasing/$File/Purchasing2.html">Purchasing</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Project+Quality+Leader+Home/$File/Project_Quality_Leader2.html">Quality</a></span></li>
            <li><span class="level2"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Downstream_SC_Leader/$File/Downstream_SC_Leader2.html">Downstream
                  Supply Chain </a></span></li>
...
Modérateur
Salut,

Je n'ai pas lu tout ton code, mais je vois une grossière erreur : pas de doctype !
Sans le doctype, tu passes en mode quirk. Si je ne m'abuse, c'est l'équivalent d'un IE5.5.
Si on est en xhtml transitional ou strict, le nom des éléments html (tag/balise html) doit être en minuscule.
Si on doit écrire un mono-élément, la fin devra se terminer par un espace, suivi d'un slash et d'un chevron fermant. ex :

<img src="un-image.png" alt="description de l'image" />


Pour finir, je te conseille de valider ton code tout le temps ! Surtout si tu as un bug bizarre. Smiley cligne
Modifié par niuxe (02 Oct 2013 - 19:23)
d'abord merci de me répondre ! (Comme on fait +1 sur ce forum ?) Smiley merci

C'est vrai que j'ai un code à rallonge ! Le voici un peu raccourci mais je laisse quand même tout le CSS ;

<!DOCTYPE html>
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
 <style type="text/css">
#navigation { width:790px; font-family:Arial, Helvetica, sans-serif;}
#navigation .menu { float:left; width:33%;margin:0; padding:0; }
#navigation ul li { list-style:none; }
.title {
background-color:#4FA600; 
color:white;
width:1102px;
display:inline-block;
text-align:center;
}
.clear{
   clear:left; list-style: none;
   margin:0; padding:0;
} 
.level0,.level1 {
 display: inline-block;
background-color:#EAEAEA; 
 width:250px;
  font-size:14px;
}
 .level2 {
 display: inline-block;
 width:250px;
 font-size:14px;
  line-height:15px;
  padding-left:10px;
  background: url(http://www.schneider-electric.fr/gc_1_0/images/structure/green_bullet.gif) left no-repeat; 
 }
  .level3 {
 display: inline-block;
  width:250px;
   font-size:12px;
  line-height:15px;
  padding-left:20px;
 }
 .level2:hover {color:#87D300; }
.level2 a:hover {color:#87D300; }
.level3:hover {color:#87D300; }
.level3 a:hover {color:#87D300; }
</style>
  </head>
  <body>
   
    <!-- All sitemap in a div, then each item, 3 <ul> (3 levels) and most of the texts into span (to apply CSS classes)-->
    <div id="navigation">
      <ul>
        <li><span class="title"><font width="100%">Site Map</font></span></li>
        <li>
          <ul class="menu">
            <li><span class="level0"><a href="#">User Centric</a></span></li>
            <li><span class="level1"><a href="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Project_Managers_Area/$File/ProjectManagers_home2.html">Project
                  Manager</a></span></li>
...


Donc le doctype, c'était juste un oubli de le mettre dans le code !

Pour les majuscules, j'ai changé "META" en "meta".

Je ne comprends pas ta remarque sur les mono-éléments vu qu'il n'y en a pas...

Valider le code, tu veux dire le passer dans un validateur W3C ?

Bon, mais le problème est encore là Smiley decu
Modifié par laurentsc (02 Oct 2013 - 23:03)
Bonsoir,

Il n'y a pas de raison pour que le style soit différent (à part les liens vers les images qui peuvent être différent). Regarde bien les différences entre les 2 versions.

Peut tu simplifier ton code, le mettre en entier (sur http://jsfiddle.net/ par exemple) et nous dire ce qui ne va pas ?

laurentsc a écrit :
pour simplifier l'intégration du code, je voudrais mettre le html et le style en une seule page ;

Sauf contrainte technique particulière, c'est une mauvaise solution. Séparer le css du html est une bonne pratique et la feuille de style permet sa mise en cache dans le navigateur.
Modérateur
laurentsc a écrit :

Pour les majuscules, j'ai changé &quot;META&quot; en &quot;meta&quot;.

La meta charset utf-8 en html5 ne s'écrit pas comme cela, mais comme ceci :
<meta charset="UTF-8">


laurentsc a écrit :
Je ne comprends pas ta remarque sur les mono-éléments vu qu'il n'y en a pas...

Si puisqu'il y a la meta

laurentsc a écrit :
Valider le code, tu veux dire le passer dans un validateur W3C ?

oui

Au passage, oublie l'élément font. C'est déprécié. Utilise plutôt le css pour styliser un texte.

benj a écrit :
Sauf contrainte technique particulière, c'est une mauvaise solution. Séparer le css du html est une bonne pratique et la feuille de style permet sa mise en cache dans le navigateur


Dans la globalité, je suis entièrement d'accord avec toi. Par contre, si on fait un one page et strictement un one page, je ne vois pas l'intérêt de lier la css à la page html. En plus, ça demandera une requête supplémentaire (appel du fichier)

<<<EDIT
Pour revenir à ton souci initial :
- valide ta page
- met sur le forum le code complet et valide de ta page (doctype - html - head - body - fin de body et fin html)

Ainsi, on comprendra mieux le souci. Là tel que tu as mis le code sur le forum, je peux pas faire grand chose (code non valide)
EDIT;
Modifié par niuxe (03 Oct 2013 - 16:56)
Bonjour,

je vais suivre les conseils et pour commencer réaliser un fichier très simple (mais avec un style définit dans le même fichier) et qui servira de test, mais seulement demain...
niuxe a écrit :
Dans la globalité, je suis entièrement d'accord avec toi. Par contre, si on fait un one page et strictement un one page, je ne vois pas l'intérêt de lier la css à la page html. En plus, ça demandera une requête supplémentaire (appel du fichier)

Appliquer des bonnes pratiques au pied à la lettre sans se poser de question, n'a de toute manière pas une bonne pratique Smiley cligne . Mais il est toujours bon de les rappeler, surtout sur un forum ou l'on trouve de nombreux débutant.
J'ai supprimé "font" et ce matin, ça semble marcher ; si ça ne convient pas à mon "client", je reviendrai peut-être...
Sujet clos
Aller à