CSS : méthode et déclarations

Pang · le 23 mai 2010

Salut,

C'est un gadget pour seven fait en html et css; j'y connais pas grand chose.

Mon problème essentiel c'est l'aspect et la présentation du gadget affiché sur le bureau. Je teste le projet sur firefox mais le rendu final n'est absolument pas le même...

Voici la feuille de style :

body 

 { 
border-style:solid;
border-width:1px;
background-image:url('../background.png');	
width:155;
height:145;
line-height:180%;   
font-family: Segoe UI;text-align:center;
font-size:12;color:32CD32;
 }
h2
  {
 font-size:8;color: #FF0000;
  }
a img
 {
border: none;
 }

div#colonne1 {
float: left;
width: 33%;
}

div#colonne2 {
float: right;
width: 33%;
}

Avec le navigateur ça donne ça :

Hormis l'image background qui foire un peu l'alignement du texte et des éléments me convient environ.

En revanche, une fois 'gadgetisé', voilà le rendu sur le bureau :

Ici le positionnement du background est bon mais le texte "FIREWALL COMMANDER" est écrit trop bas, j'aimerai qu'il soit écrit juste sous le border.

et le texte en bas est écrit beaucoup trop bas et la couleur n'est pas la bonne (normalement c'est rouge #FF0000)

Ca m'énerve, pouvez vous m'aider ?

Accessoirement; si un intervenant a un code simple pour que mon truc ait les bords arrondis, j'en serai ravi !

Bon dimanche ^^

Dylav · le 23 mai 2010

Bonjour Pang,

Pour pouvoir te répondre, il ne serait pas inutile que nous disposions du code HTML de ton gadget, afin de constater très précisément les clauses de style associées aux textes concernés.

Pour le titre « FIREWALL COMMANDER » par exemple, est-il écrit dans un paragraphe <p>...</p> et, si oui, as-tu laissé à cette balise ses attributs par défaut, etc. Tu peux en effet « bénéficier » à l'insu de ton plein gré d'attributs auxquels tu ne t'attendais pas, comme par exemple margin-top et padding-top.

Une remarque au passage, toutes tes dimensions doivent être explicitement exprimées dans une unité, ici probablement le pixel “px”.

body {
border-style:solid;

border-width:1px;

background-image:url('../background.png');

width:155px;

height:145px;

line-height:180%;

font-family: Segoe UI;text-align:center;

font-size:12px;

color:#32CD32;

}

h2

{font-size:8px;

color:#FF0000;

}

Tu as également oublié le # devant le code RGB de la couleur de la police du body (code que tu pourrais remplacer par #33CC33, dont la différence avec l'autre est pratiquement imperceptible, et dont tu seras sûr que la couleur sera rendue de la même façon par tous les navigateurs).

Pang · le 23 mai 2010

Bonsoir dylav, merci de t'être arrêté ici.

J'ai rectifié et déclaré explicitement les valeurs (px).

Voici le code HTML :

<html>
<head>
 <link href="css/pf.css" rel="stylesheet" type="text/css" />   
 <script src="vbs/" language="vbs"></script>
</head>

<script>
 System.Gadget.settingsUI = "settings.html";
</script>

<body>
FIREWALL COMMANDER

<div id="colonne1">
<a href="vbs/pfon.vbs"><img src="images/pfon.png">
<a href="vbs/allowout.vbs"><img src="images/allowout.png">
</div>
<div id="colonne2">
<a href="vbs/pfoff.vbs"><img src="images/pfoff.png">
<a href="vbs/blockout.vbs"><img src="images/blockout.png">
</div>
<div id="centre">
<a href="vbs/fw.vbs"><img src="images/pf.png">
<a href="vbs/log.vbs"><img src="images/log.png">
</div>
<h2>Outbound is allowed</h2>
</body>
</html>

Pour le titre « FIREWALL COMMANDER » par exemple, est-il écrit dans un paragraphe <p>...</p>

Non parce que si je mets une balise <p> ça saute encore une ligne de plus en plus.

Dylav · le 23 mai 2010

Pour le positionnement du titre, essaie de préciser explicitement le padding-top du body (marge intérieure côté haut, entre border et contenu), par exemple à 5px, pour voir si ça fixe le comportement lors de la gadgetisation. Mais j'ai des doutes sur l'efficacité du conseil…

body {...
  padding-top:5px;
  ...
 }

Une remarque importante, la balise <a> doit toujours être refermée, par exemple :

<a href="vbs/pfon.vbs"><img src="images/pfon.png"></a>

KewlCat · le 23 mai 2010

Pourquoi testes-tu avec Firefox alors que vraisemblablement c'est le moteur de IE qui est utilisé pour afficher le gadget sur le bureau ?

Pourquoi n'utilises-tu pas un h1 pour ton titre ("Firewall commander") ? Tu pourras ainsi mieux lui indiquer ses marges et padding dans le CSS...

Pang · le 24 mai 2010

Dylav, j'ai rajouté les fermetures de balises </a> (

J'ai ajouté le padding-top:5px;

essaie de préciser explicitement le padding-top du body (marge intérieure côté haut, entre border et contenu),

Euh, dois je comprendre aussi que l'ordre des déclarations à une importance ?

Ceci dit en rajoutant cette marge, le titre est encore plus bas, et du coup la dernière ligne <h2> est presque en dehors du cadre.

De toute façon même sans ça, <h2> est écrit trop bas...

Kewlcat,

Avec IE le rendu est encore différent; le titre est toujours aussi bas et surtout les icônes sont sur une seule et même ligne.

J'avais essayé de faire un <h1> mais j'ai dû abandonné parce que justement je n'arrivais plus du tout à fixer ni la couleur ni la taille du texte.

Peut être quelque chose que je devrais savoir pour déclarer correctement les textes dans la feuille de style ?

Dylav · le 24 mai 2010

Pour les attributs des balises, classes ou id's dans une feuille de style, pas d'ordre particulier. En revanche, si tu précises deux fois le même attribut pour un même [type d'] objet, c'est le dernier qui gagne !

Pour le padding, si les effets sont nocifs, on va tenter d'employer les grands moyens, en imposant explicitement au <body> (conteneur principal), aux <h1> et <h2> (conteneurs de titres), des marges extérieures nulles et des marges intérieures nulles. Et, si ça ne suffit pas, tu pourras même tenter — encore plus fort — un padding-top négatif pour <h1> (genre -5px pour commencer). En tout cas, enlève le line-height, qui crée entre les lignes des espaces supérieurs au standard (ici 180%, contre 120% par défaut, si mes souvenirs sont exacts).

Ci-dessous, j'ai mis la feuille de style directement dans la page HTML — juste pour être plus concis.

<html>
<head>
<style>
body {margin:0;				 /* marges ext. nulles (haut, droite, bas, gauche) */
  padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
  border:1px solid #33CC33; /* épaisseur, style, couleur : écriture condensée */
  background-image:url('../background.png');
  width:155px;
  height:145px;
  text-align:center;
  font-family: Segoe UI;
  ...
 }
h1   {margin:0;				 /* marges ext. nulles (haut, droite, bas, gauche) */
  padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
  font-size:12px;
  color:#33CC33;
  ...
 }
h2   {margin:0;				 /* marges ext. nulles (haut, droite, bas, gauche) */
  padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
  font-size:8px;
  color:#FF0000;
  ...
 }
</style>
<script src="vbs/" language="vbs"></script>
<script>
 System.Gadget.settingsUI = "settings.html";
</script>
</head>
<body>
<h1>FIREWALL COMMANDER</h1>
<div id="colonne1">
<a href="vbs/pfon.vbs"><img src="images/pfon.png">
<a href="vbs/allowout.vbs"><img src="images/allowout.png">
</div>
<div id="colonne2">
<a href="vbs/pfoff.vbs"><img src="images/pfoff.png">
<a href="vbs/blockout.vbs"><img src="images/blockout.png">
</div>
<div id="centre">
<a href="vbs/fw.vbs"><img src="images/pf.png">
<a href="vbs/log.vbs"><img src="images/log.png">
</div>
<h2>Outbound is allowed</h2>
</body>
</html>

Nota : un <script>...</script> entre le </head> et le <body>, ce n'est pas possible, il faut choisir ! Je l'ai rapatrié dans le header, mais il faut peut-être l'installer dans le body ?

Pang · le 25 mai 2010

Dylav,

Déjà, un grand merci pour tes explications et ta pédagogie qui m'aident à comprendre ce que je fais.

C'est aussi toi et Mickey3d qui m'avez justement convaincu d'utiliser CSS.

En tout cas, enlève le line-height, qui crée entre les lignes des espaces supérieurs au standard (ici 180%, contre 120% par défaut, si mes souvenirs sont exacts).

J'avais rajouté cette balise pour espacer un peu l'écart entre les icônes (que je trouvais trop proche l'une de l'autre). Mais maintenant, plus besoin. J'ai juste un peu galéré à cause d'une accolade non fermée quelque part...

body 

 { 
margin:0;				 /* marges ext. nulles (haut, droite, bas, gauche) */
padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
border:1px solid #33CC33; /* épaisseur, style, couleur : écriture condensée */
background-image:url('../background.png');
width:155px;
height:145px;
text-align:center;
font-family: Segoe UI;
 }

h1  
 {
 margin:7;				 /* marges ext. nulles (haut, droite, bas, gauche) */
 padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
 font-size:12px;
 color:#33CC33;
 }


h2  
{
  margin:3;				 /* marges ext. nulles (haut, droite, bas, gauche) */
  padding:0;				/* marges int. nulles (haut, droite, bas, gauche) */
  font-size:10px;
  color:#FF0000;
 }


a img
 {
border: none;
 }

div#colonne1 {
float: left;
width: 33%;
}

div#colonne2 {
float: right;
width: 33%;
}

J'ai donc ajouté margin et padding (et laissé les commentaires) et adapté les valeurs suivant la disposition souhaitée; c'est carrément mieux et plus facilement 'réglable', super. Parfait pour l'évolution du gadget !

h2 n'est pas voué à rester ici. En lieu et place doit s'afficher dynamiquement le statut des connexions sortantes (autorisé, bloqué). Je ne sais pas encore si je dois afficher l'information suivant le clic sur l'icône (pas terrible) ou si je vais récupérer l'info quelque part dans windows (mieux).

J'ai aussi un p'tit problème avec l'appel au fichier settings.html (censé afficher l'icône option sur le côté du gadget). Certainement une virgule égarée quelque part dans le code .

LE problème de disposition est réglé mais je laisse le sujet ouvert parce que j'aurai certainement d'autres questions pour finaliser l'truc.

Dylav

^^

Modifié le 25 mai 2010 par Pang

Dylav · le 25 mai 2010

Pas de souci, tu reviens quand tu veux, bien sûr.

Une petite remarque sur ta feuille de style, tu as encore oublié d'indiquer l'unité pour les attributs margin, par exemple h1 { margin:7px; }. C'est important, parce que FireFox — entre autres — ignore l'attribut quand l'unité n'est pas précisée !

Tu relèveras néanmoins que moi-même n'avais pas indiqué d'unité, par exemple body { margin:0; }, mais pour les marges nulles. En fait, zéro c'est zéro, quelle que soit l'unité, donc il faut savoir être flemmard... quand c'est possible !

Connexion

Pas encore inscrit ?

CSS : méthode et déclarations

Messages recommandés

Pang

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Pang

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

Pang

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Pang

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer