Css : comment la couleur de fond peut-elle être vue =opaque

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
Emm'
Salamandre
Messages : 45
Inscription : 21 juin 2006, 00:34

Css : comment la couleur de fond peut-elle être vue =opaque

Message par Emm' »

Bonjour,
Je suis novice & apprends avec le tuto Framasoft "manuel nvu standart".
J'applique les exercices pour apprendre & comprendre.

Pour apprendre l'utilisation css, j'ai créé plusieurs feuille de style interne :
body, h1, h2, a. Pour qu'elles s'appliquent aux éléments concernés.

Les nouvelles couleurs de textes, décentrages... fonctionnent, sauf la couleur de fond qui reste blanche. Que je regarde l'éditeur css, rubrique "fond", ligne opacité / transparant, le curseur est sur transparant : je me dis que c'est normal que la couleur n'apparaisse pas. Sauf que si je bouge le curseur, il n'est pas enregistré à sa nouvelle place, quand je ré-ouvre l'éditeur : à nouveau transparant.... Et la couleur n'est jamais apparue à l'écran !

Merci !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

- 1 seule feuille de style suffit pour les règles h1, h2, etc...
- quand le curseur "transparent" est completement à droite, cela veut dire opaque. Plus on va à gauche et plus on augmente la transparence.
- tu as bien mis une couleur sur la première ligne au dessus de "transparent"?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

chinon37 a écrit : quand le curseur "transparent" est completement à droite, cela veut dire opaque. Plus on va à gauche et plus on augmente la transparence.
C'est justement ça qui est paradoxal : quand on met le curseur du coté transparent, c'est opaque et vice versa.

Image
JP
Image
Image
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Kazé, à toi de jouer!!!!
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Emm'
Salamandre
Messages : 45
Inscription : 21 juin 2006, 00:34

Message par Emm' »

J'ai bien qu'un seule feuille de style.
J'ai bien mis la couleur au dessus de la ligne...
Autre bizarerie (!), une fois le css paramètré, par exemple h2, couleur fond rouge, la couleur de fond donc ne s'affiche pas. Si je transforme en "corps de texte", puis après avoir validé, à nouveau en h2, la couleur de fond apparait.... sur Nvu. Si je regarde la page sur Firefox : elle n'apparait pas ! ????

Le seul cas où ça marche c'est un calque "div", le fond du calque est de la bonne couleur (pas les titre ni paragraphes).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

peux-tu donner le code de ta page? ou l'adresse si elle est en ligne?
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Emm'
Salamandre
Messages : 45
Inscription : 21 juin 2006, 00:34

Message par Emm' »

Voici le code (elle n'est pas en ligne!) :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="direction: ltr;" lang="fran&ccedil;ais">
<head>



  
  
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">



  
  
  
  
  
  
  <title>Le langage HTML</title>
  <meta content="Emmanuel Bernard" name="author">



  
  
  
  <meta content="une br&egrave;ve introduction au langage HTML" name="description">


  
  
  <style title="essai" media="screen" type="text/css">
  body { border: 3px solid rgb(255, 255, 255);
    font-family: arial,verdana,sans-serif;
    font-size: 0.9em;
    line-height: 16pt;
    text-align: justify;
    background-color: rgb(173, 183, 177);
    position: relative;
    width: 70%;
    left: 25%;
    }

  h1 { color: rgb(0, 102, 0);
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 2px;
    border-bottom-width: 2px;
    }

  h2 { border-style: outset;
    border-width: 1px;
    color: rgb(255, 204, 51);
    text-align: center;
    background-color: rgb(51, 102, 102);
    position: relative;
    width: 55%;
    left: 10%;
    }

  p {  }

  a { border: 1px inset rgb(0, 0, 0);
    color: rgb(51, 102, 255);
    background-color: rgb(192, 192, 192);
    width: 8em;
    }

  #presentation { border: 2px solid rgb(0, 0, 0);
    text-align: left;
    background-color: rgb(255, 255, 204);
    margin-left: 5px;
    margin-right: 5px;
    }

  #presentation h2 { border: 2px groove rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    background-color: rgb(128, 136, 138);
    position: relative;
    width: 80%;
    left: 8%;
    margin-left: 5px;
    margin-right: 5px;
    }


  </style>
</head>


<body style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">



<h1 style="background-color: rgb(255, 255, 255);"><a name="haut_page"></a>Hypertext markup language</h1>



<br>



<br>

<div style="position: relative; top: 19px; left: -239px; width: 227px;" id="presentation">
<h2>Pr&eacute;sentation</h2>

<br>

<p style="background-color: rgb(255, 255, 255);">HTML, sigle de
HyperText Markup Language (litt&eacute;ralement langage de marquage
hyper-text), est le langage con&ccedil;u pour cr&eacute;er les pages du
World Wide Web. C'est un langage de description bas&eacute; sur SGML.</p>

</div>







<br>



<h2>Explication du langage HTML</h2>



<br>



<p style="background-color: rgb(255, 255, 255);">Les documents HTML
sont g&eacute;n&eacute;ralement stock&eacute;s sur un serveur web, et
sont affich&eacute;s par un navigateur Web. Le document lui-m&ecirc;me
est constitu&eacute; de balises, c'est-&agrave;-dire un nom de marqueur
plac&eacute; entre un signe plus petit (<) et plus grand (>). Par
exemple, la balise br s'&eacute;crit <br>. Il existe aussi des
balises de fin, qui repr&eacute;sentent la fin d'une balise apparue
plus t&ocirc;t dans le document, et qui sont marqu&eacute;es par une
balise oblique (/). Par exemple : </li> ferme une balise
pr&eacute;c&eacute;dente <li>.</p>



<br>



<h2>Il y a trois type de balises HTML :</h2>



<br>



<ul style="background-color: rgb(255, 255, 255);">



  <li>un marquer de structure : d&eacute;crit la fonction du texte. Exemple : <hl>Titre</hl></li>



  <li>un marqueur de pr&eacute;sentation : d&eacute;finit la
fa&ccedil;on dont un texte doit &ecirc;tre pr&eacute;sent&eacute;.
Exemple : <b>Texte en gras</b></li>



  <li>un marqueur hypertexte : &eacute;tablit des liens avec d'autres
documents, au sein d'une page, d'un site ou entre des pages de sites
diff&eacute;rents. Exemple : <a href="http://www.wikipedia.org">
Wikipedia</a></li>



</ul>



<h2>Origine du langage et but</h2>



<br>



<p style="background-color: rgb(255, 255, 255);">Tel qu'il a
&eacute;t&eacute; pens&eacute; &agrave; ses origines par Tim
Berners-Lee, le HTML ne sert pas &agrave; d&eacute;crir le rendu visuel
des pages Web (contrairement &agrave; la PAO), mais plut&ocirc;t le
sens des diff&eacute;rentes parties du texte : titre, liste, mise en
&eacute;vidence... Son ambition &eacute;tait d'avoir un langage de
description des documents au format ouvert qui soit ind&eacute;pendant
de l'architecture des ordinateurs qui serviraient &agrave; lire les
pages. Par cons&eacute;quent, il n'est pas pr&eacute;vu que telle ou
telle police de caract&egrave;re soit utilis&eacute;e explicitement, ni
que le moniteur du cient utilise telle ou telle r&eacute;solution. Le
logiciel exploit&eacute; pour la navigation devrait lui aussi ne pas
&ecirc;tre une source de discrimination</p>



<br>



<h2>Perspective et avenir du HTML</h2>



<br>



vdfsvsvfsdvsv<br>



fvsfvsfvfsvfsvfdgdhthgbh ht &nbsp;h hrt rth hry;kmlmgl*&ugrave;
m&ugrave; m&ugrave;* m&ugrave;* l kj io j oj ikj &nbsp;ggjkgkfldkgd^kl
&nbsp;kthkdlg*m *&ugrave;g* <br>



<p style="background-color: rgb(255, 255, 255);">rgkkg&ugrave;mlgrq.</p>



<br>



<h2>Pr&eacute;sentation des feuilles de style CSS</h2>



<br>



<p style="background-color: rgb(255, 255, 255);">ghjkgjkvm&ugrave;ws:&ugrave;Xm*WFWX fkgqkrg lkl*za &ugrave;gare thokrt &nbsp;,mokjo k ^k&ugrave;m hug uyfyhb </p>



<br>



<ol style="background-color: rgb(255, 255, 255);">



  <li>toute l'architecture</li>



  <li>Un m&ecirc;me doc peut donner</li>



  <li>Le code HTML est concid&eacute;rablement r&eacute;duit</li>



</ol>



<br>



<h2>Tableau comparatif entre HTML 2.0 et xHTML 1.1</h2>



<br>



<table style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="1" cellpadding="2" cellspacing="2">



  <tbody>



    <tr>



      <td>HTML 2.0 (1995)</td>



      <td>xHTML 1.1 (2001)</td>



    </tr>



    <tr>



      <td><DOCTYPE &nbsp;HTML &nbsp; "-//IETF//DT HTML 2.0//EN"><br>



      <br>



<tittle>Hello, World!</tittle><br>



      <br>



<p>Hello, World!</td>



      <td><!DOCTYPE &nbsp;HTML &nbsp;PUBLIC &nbsp;"-//W3C//DTD XHTML 1.1//EN"<br>



&nbsp;"http://www.w3c.org/TR/xHTML11/DTD/xHTML L11.dtd"><br>



<HTML<br>



xmlns="http://www.w3c.org/1999/xHTML"><br>



      <br>



<head><br>



<title>Hello, World!<tittle><br>



<head><br>



      <br>



<body><br>



<p>Hello, World!</p><br>



      <br>



</body><br>



</HTML></td>



    </tr>



  
  
  
  </tbody>
</table>



<br>


<p style="text-align: center;"><a href="#haut_page">Haut de page</a></p>



</body>
</html>
Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
Kazé
Varan
Messages : 1743
Inscription : 10 févr. 2005, 10:26

Message par Kazé »

chinon37 a écrit :Kazé, à toi de jouer!!!!
Ca doit être dans mes cordes ça. ;)
Par contre, question bête (et hors-sujet, comme d'hab) : j'ai l'impression que "opacity" n'est pas une propriété CSS standard, je me trompe ou bien ?
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Kazé: propriété de css3: ça te permet de prendre un peu d'avance

Emm': tu as 2 styles de définis pour body (par exemple):
- un style dans la feuille de style
- un style interne.
le style interne prend le dessus sur la feuille de style: conclusion, la couleur de fond de la feuille de style (#adb7b1 - gris foncé) est supplantée par celle du style interne (#ffffff - blanc)!
Commence par supprimer tous les styles internes (styles se trouvant entre la balise <body> et </body> .... tu y verras plus clair! :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Emm'
Salamandre
Messages : 45
Inscription : 21 juin 2006, 00:34

Message par Emm' »

Récapitulons !
Sur ma page d'abord j'ai :
"!doctype"
balise méta
une récap des styles de la feuille de style tittle; h1, h2, p, a ,#presentation, #presentation2,
puis : body style....
h1 style...
br
div style...

C'est la ce que j'ai à éffacer ? dans body style ?

Merci !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Code : Tout sélectionner

<style title="essai" media="screen" type="text/css">
  body { border: 3px solid rgb(255, 255, 255);
    font-family: arial,verdana,sans-serif;
    font-size: 0.9em;
    line-height: 16pt;
    text-align: justify;
    background-color: rgb(173, 183, 177);
    position: relative;
    width: 70%;
    left: 25%;
    }

  h1 { color: rgb(0, 102, 0);
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 2px;
    border-bottom-width: 2px;
    }

  h2 { border-style: outset;
    border-width: 1px;
    color: rgb(255, 204, 51);
    text-align: center;
    background-color: rgb(51, 102, 102);
    position: relative;
    width: 55%;
    left: 10%;
    }

  p {  }

  a { border: 1px inset rgb(0, 0, 0);
    color: rgb(51, 102, 255);
    background-color: rgb(192, 192, 192);
    width: 8em;
    }

  #presentation { border: 2px solid rgb(0, 0, 0);
    text-align: left;
    background-color: rgb(255, 255, 204);
    margin-left: 5px;
    margin-right: 5px;
    }

  #presentation h2 { border: 2px groove rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    background-color: rgb(128, 136, 138);
    position: relative;
    width: 80%;
    left: 8%;
    margin-left: 5px;
    margin-right: 5px;
    }


  </style> 
9a, c'est ta feuille de style: à conserver en l'état

Code : Tout sélectionner

<body style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">



<h1 style="background-color: rgb(255, 255, 255);"><a name="haut_page"></a>Hypertext markup language</h1>



<br>



<br>

<div style="position: relative; top: 19px; left: -239px; width: 227px;" id="presentation">
<h2>Pr&eacute;sentation</h2>
etc .... 
là, tout ce qui suit "style=" est du style interne -> tu supprimes tout ce qui concerne la couleur:
tu obtiens:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      Le langage HTML
    </title>
    <meta content="Emmanuel Bernard" name="author">
    <meta content="une brève introduction au langage HTML" name="description">
<style title="essai" media="screen" type="text/css">
body { border: 3px solid rgb(255, 255, 255);
font-family: arial,verdana,sans-serif;
font-size: 0.9em;
line-height: 16pt;
text-align: justify;
background-color: rgb(173, 183, 177);
position: relative;
width: 70%;
left: 25%;
}
h1 { color: rgb(0, 102, 0);
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
}
h2 { border-style: outset;
border-width: 1px;
color: rgb(255, 204, 51);
text-align: center;
background-color: rgb(51, 102, 102);
position: relative;
width: 55%;
left: 10%;
}
p { }
a { border: 1px inset rgb(0, 0, 0);
color: rgb(51, 102, 255);
background-color: rgb(192, 192, 192);
width: 8em;
}
#presentation { border: 2px solid rgb(0, 0, 0);
text-align: left;
background-color: rgb(255, 255, 204);
margin-left: 5px;
margin-right: 5px;
}
#presentation h2 { border: 2px groove rgb(0, 0, 0);
color: rgb(255, 255, 255);
background-color: rgb(128, 136, 138);
position: relative;
width: 80%;
left: 8%;
margin-left: 5px;
margin-right: 5px;
}
</style>
  </head>
  <body alink="#EE0000" link="#0000EE" vlink="#551A8B">
    <h1>
      <a name="haut_page" id="haut_page"></a>Hypertext markup language
    </h1><br>
    <br>
    <div style="position: relative; top: 19px; left: -239px; width: 227px;" id="presentation">
      <h2>
        Présentation
      </h2><br>
      <p>
        HTML, sigle de HyperText Markup Language (littéralement langage de marquage hyper-text), est le langage conçu
        pour créer les pages du World Wide Web. C'est un langage de description basé sur SGML.
      </p>
    </div><br>
    <h2>
      Explication du langage HTML
    </h2><br>
    <p>
      Les documents HTML sont généralement stockés sur un serveur web, et sont affichés par un navigateur Web. Le
      document lui-même est constitué de balises, c'est-à-dire un nom de marqueur placé entre un signe plus petit
      (<) et plus grand (>). Par exemple, la balise br s'écrit <br>. Il existe aussi des balises de fin,
      qui représentent la fin d'une balise apparue plus tôt dans le document, et qui sont marquées par une balise
      oblique (/). Par exemple : </li> ferme une balise précédente <li>.
    </p><br>
    <h2>
      Il y a trois type de balises HTML :
    </h2><br>
    <ul>
      <li>un marquer de structure : décrit la fonction du texte. Exemple : <hl>Titre</hl>
      </li>
      <li>un marqueur de présentation : définit la façon dont un texte doit être présenté. Exemple : <b>Texte en
      gras</b>
      </li>
      <li>un marqueur hypertexte : établit des liens avec d'autres documents, au sein d'une page, d'un site ou entre
      des pages de sites différents. Exemple : <a href="http://www.wikipedia.org"> Wikipedia</a>
      </li>
    </ul>
    <h2>
      Origine du langage et but
    </h2><br>
    <p>
      Tel qu'il a été pensé à ses origines par Tim Berners-Lee, le HTML ne sert pas à décrir le rendu visuel des pages
      Web (contrairement à la PAO), mais plutôt le sens des différentes parties du texte : titre, liste, mise en
      évidence... Son ambition était d'avoir un langage de description des documents au format ouvert qui soit
      indépendant de l'architecture des ordinateurs qui serviraient à lire les pages. Par conséquent, il n'est pas
      prévu que telle ou telle police de caractère soit utilisée explicitement, ni que le moniteur du cient utilise
      telle ou telle résolution. Le logiciel exploité pour la navigation devrait lui aussi ne pas être une source de
      discrimination
    </p><br>
    <h2>
      Perspective et avenir du HTML
    </h2><br>
    vdfsvsvfsdvsv<br>
    fvsfvsfvfsvfsvfdgdhthgbh ht  h hrt rth hry;kmlmgl*ù mù mù* mù* l kj io j oj ikj  ggjkgkfldkgd^kl  kthkdlg*m
    *ùg*<br>
    <p>
      rgkkgùmlgrq.
    </p><br>
    <h2>
      Présentation des feuilles de style CSS
    </h2><br>
    <p>
      ghjkgjkvmùws:ùXm*WFWX fkgqkrg lkl*za ùgare thokrt  ,mokjo k ^kùm hug uyfyhb
    </p><br>
    <ol>
      <li>toute l'architecture
      </li>
      <li>Un même doc peut donner
      </li>
      <li>Le code HTML est concidérablement réduit
      </li>
    </ol><br>
    <h2>
      Tableau comparatif entre HTML 2.0 et xHTML 1.1
    </h2><br>
    <table style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="1" cellpadding="2"
    cellspacing="2">
      <tbody>
        <tr>
          <td>
            HTML 2.0 (1995)
          </td>
          <td>
            xHTML 1.1 (2001)
          </td>
        </tr>
        <tr>
          <td>
            <DOCTYPE  HTML   "-//IETF//DT HTML 2.0//EN"><br>
            <br>
            <tittle>Hello, World!</tittle><br>
            <br>
            <p>Hello, World!
          </td>
          <td>
            <!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD XHTML 1.1//EN"<br>
             "http://www.w3c.org/TR/xHTML11/DTD/xHTML L11.dtd"><br>
            <HTML<br>
            xmlns="http://www.w3c.org/1999/xHTML"><br>
            <br>
            <head><br>
            <title>Hello, World!<tittle><br>
            <head><br>
            <br>
            <body><br>
            <p>Hello, World!</p><br>
            <br>
            </body><br>
            </HTML>
          </td>
        </tr>
      </tbody>
    </table><br>
    <p style="text-align: center;">
      <a href="#haut_page">Haut de page</a>
    </p>
  </body>
</html>

Fais un copier coller de ce code dans nvu et tu verras la différence. ensuite tu compares ce code avec le tien....
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Emm'
Salamandre
Messages : 45
Inscription : 21 juin 2006, 00:34

Message par Emm' »

Super grand merci d'avoir pris le temps ! La j'ai compris super clairement !

Avec quelques questions :
Ta mise en pages est très compacte, celle de ma feuille créée par Nvu, avec beaucoup d'espace, pourquoi ?
Le début de ta page est différente de la mienne, qu'est ce qui fait cela ?

Encore merci !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

J'ai installé une des grandes extensions de Kaze: handcoder qui avec l'application tidy remet un peu d'ordre dans la page

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités