css avec <body> : KO. . . avec moi !

**rjl** · 28/04/2008, 01h09

Bonjour,
Je m'aperçois que j'avais laissé du style directement avec le HTML au niveau de <body>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Aînés Ruraux 22 Objectifs</title>
  <link rel="stylesheet" type="text/css"
 href="../CSS-AR22.css" />
</head>
<body style="margin: 10px; background-color: rgb(255, 255, 204);">
<div class="colgch">

Dans ce cas, mes éléments de style sont pris en compte ; si je les porte en css que ce soit directement avec la référence body ou comme je l'ai aussi fait aussi pour essai en créant une class "bodystyl" ça ne fonctionne plus ? Comment m'en sortir

? Nécessité de rester dans la feuille HTLM avec le style comme pour les images ?
Voila ce que j'ai en css ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<head>
.bodystyl { margin:10px; background-color: rgb(255, 255, 204); font-family: "comic sans ms", verdana, helvetica, 
arial, sans-serif ; font-size: medium; line-height: 120%;}
.colgch { width: 15%; color: blue; float: left; }

Si quelqu'un peut me préciser l'impact de head (et son pendant /head) en css, alors merci !
Je sais que c'est aberrant mais si je le supprime, mes lignes de texte se chevauchant verticalement, en particulier rendant toute lecture impossible !!
D'avance merci que ce soit pour ma question de base (css avec body) ou la question subsidiaire (head).
@bientôt RJL20080428

**veevee** · 28/04/2008, 08h45

[QUOTE=rjl;3205500]Bonjour,
Je m'aperçois que j'avais laissé du style directement avec le HTML au niveau de <body>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Aînés Ruraux 22 Objectifs</title>
  <link rel="stylesheet" type="text/css"
 href="../CSS-AR22.css" />
</head>

jusque là, ça va : tu as une feuille exterieure CSS-AR22.CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<body style="margin: 10px; background-color: rgb(255, 255, 204);">
<div class="colgch">

Là, ça ne va plus du tout
La ligne body style="...." est acceptable, mais la class suivante <div class="colgch"> doit être virée impérativement sinon, tu obtiens n'importe quoi

A partir du moment où tu ne structures pas un minimum attends toi à n'importe quoi et ne tire surtout pas de conclusions des aberrations

@+

**rjl** · 28/04/2008, 10h37

Bonjour veevee,
et merci de ta réponse ; qu'est-ce qu'une feuille "non structurée" ?
J'ai une feuille faite de 3 colonnes (la plus étroite à gauche pour le menu, les 2 autres regroupées pour les titres ou une occupation large ou individuelles ; ça marche avec le style en HTML direct mais pas lorsque le style déjà cité est confié à la feuille css !
Je joins 2 images dont celle en direct HTML

(déjà publiée sur iFrance.com) et l'autre que j'obtiens sur Kompozer avec le style porté en css

: les pointillés rouges (gris sur cette miniature) induits par Kompozer à l'ouverture initiale montrent bien la structure de la feuille dont, chose curieuse, les 10 pixels de marge déclarés dans la css sans que la couleur de fonds ne soit, elle, prise en compte !! Noter que le titre est une image avec en incrustation en fond de la même couleur que celle qui disparaît par le style en css
On remarque cette même marge (blanche) sur l'image obtenue avec le style direct en HTML !

Le <head> en 1ère ligne de css me gène aussi, dans le principe et plus encore le fait que le retirer sème une panique monstre !
Tu m'expliques que je ne structure pas et dois retirer la description de la colonne gauch… mais sans m'expliquer comment la remplacer : pour moi, <body> est le 1ère structuration (incontournable) puisqu'elle représente l'ensemble de la feuille ?
Merci de ta réponse
@bientôt RJL20080427

**Candygirl** · 28/04/2008, 10h43

Pourrais-tu stp donner le lien vers ta page en ligne?

**rjl** · 28/04/2008, 11h42

Bonjour et merci de t'intéresser à mes soucis.
Je peux donner la page en ligne http://ar22.ifrance.com/
mais c'est celle de mes premiers essais donc avec fond jaune : je n'ai pas remonté celle qui me supprime le fond (en le déclarant par la css).
Si nécessaire, je le ferai (mais perdrait le précédent).
Précédemment, je tentais de mettre les images par Image Shack mais je me suis battu pour ne pas avoir des timbres postes et n'ai réussi qu'à moitié !
A bientôt et pas de problème si d'autres éléments sont souhaitables.
@+ RJL20080427

**Candygirl** · 28/04/2008, 11h46

ok

Ton <head></head> n'a rien à faire dans ton fichier CSS-AR22.css

Qu'entends-tu par:

le retirer sème une panique monstre

?

**rjl** · 28/04/2008, 13h47

Effectivement, "sème une panique monstre" n'est pas très descriptif !
Donc, si j'ôte le <head ></head> de la css, les textes se superposent rendant le tout complètement illisible !

Si l'image veut bien passer, ça illustre le résultat !
En principe, si je remets le couple <head></head> dans la css, ça reprend une apparence normale !
Ca n'a donc rien à faire dans la ss... mais !
@ bientôt et merci d'avance RJL20080428

**Candygirl** · 28/04/2008, 14h16

En fait, vu l'erreur de syntax, ton <head> empêche la prise en compte de la première déclaration de ton css, soit ce que tu as déclaré dans ton body {}.

L'enlever fait prendre en compte les propriétés attribuées à ton body, en particulier ta déclaration de line-height qui pose problème dans ton cas.

Si tu supprime le <head></head> et la déclaration de line-height de ton body les choses fonctionnent-elles a peu près comme tu le souhaites ?

**rjl** · 28/04/2008, 22h13

Bon, j'ai trainé suite à nombre de corrections et je m'empresse de mettre un mot ce soir étant absent demain.
J'ai enlevé le <head> en css puis redressé les polices, leur taille, etc...
Maintenant tout est OK de ce côté et je dois ne remercier ceux qui ont pris la peine de répondre car ça me permet, au passage de progresser.

Dire que tout est clair... non, il ne faut pas exagérer !
Deux ou trois cas dont une table qui me pose un double problème :
je n'arrive pas à la centrer, ni n'ai pu lui donner une largeur en % ! J'ai donc rusé en forçant des espaces durs (&nbsp

sur une ligne, ce qui fonctionne en l'élargissant artificiellement au niveau de chaque colonne ; mais ce n'est pas correct ! En fait, rien ne semble pris en compte dans la css pour table !
De plus, je n'ai pas pu mettre en gras le contenu de 2 colonnes en mettant pourtant la class au niveau de chaque td !
Voici le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Aînés Ruraux 22 Conseil d'Administration</title>
  <link rel="stylesheet" type="text/css"
 href="../CSS-AR22.css" />
<!-- Fin Head -->
</head>
<body>
<div class="colgch">
<div><img style="text-align: left; width: 100%;"
 src="../Images22/Logo%20AR.gif" alt="Logo Aînés Ruraux" /></div>
<!-- Fin div img Logo AR -->
<div class="menu">Menu</div>
<!-- Fin class Menu -->
<ul id="navigation">
  <li><a href="../Index.html">Retour Accueil</a></li>
  <li><a href="AR22-Organisation.html">Retour
Organisation</a></li>
  <li><a href="AR22-Conseil%20d%27Administration.html">&nbsp;</a></li>
  <li><a href="AR22-Commissions.html">Commissions</a></li>
  <li><a href="AR22-Secteurs.html">Secteurs</a></li>
  <li><a href="AR22-Clubs.html">Clubs</a></li>
  <li><a href="AR22-plansite.html">Plan du Site</a></li>
  <li><a href="AR22-blog.html">Notre Blog</a></li>
  <li><a href="mailto:ar22@ifrance.com">Nous
contacter</a></li>
<!-- Fin li #organisation --><!-- Fin ul #navigation -->
</ul>
<div><img
 style="text-align: center; width: 60%; padding-left: 20%;"
 src="../Images22/Cartes/100px-CA_22.gif"
 alt="Logo Côtes d'Armor" /></div>
<!-- Fin div img CA22 -->
</div>
<!-- Fin div colgch -->
<div class="colreg"><!-- Ajouter ici les donnée recouvrant l'espace (hors menu) -->
<h1 class="titrepag">Conseil d'Administration</h1>
<p>&nbsp;</p>
<div class="cadre3">
<p>Autour du Président, Monsieur Jean DANIEL, sont rassemblés
20 Administrateurs et Personnes Qualifiées.</p>
</div>
<!-- Fin div class= cadre3 -->
<table>
<!-- style="background-color: rgb(255, 255, 128); color: rgb(0, 0, 0); text-align: left; font-size: 0.75em; width: 100%; margin-left: -6%;" -->
  <caption>Liste des élus titulaires et
personnes qualifiées</caption>
  <thead> <tr>
    <th class="prenom">
    <p>Prénom</p>
    </th>
    <th class="nom">Nom</th>
    <th class="bureau">&nbsp;</th>
    <th class="fonction">Fonction</th>
    <th class="canton">Canton</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td class="prenom">&nbsp;Jean</td>
      <td class="nom">DANIEL</td>
      <td class="colbureau">Bureau : </td>
      <td>Président</td>
      <td>Canton</td>
    </tr>

Pour le css correspondant, j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body { background-color: rgb(255, 255, 204) ; font-family: verdana, helvetica, arial, sans-serif ; font-size: 
small; line-height: 200%; }
.colgch { width: 14%; color: blue; float: left; }
.menu { text-align: center ; font-size: xx-large; padding-bottom: 0.5em }
#navigation { margin: 0 ; padding: 0; text-align: center ; text-decoration: none ; }
#navigation li{ background: #efe54d ; color: blue ; border: 1px solid #600 ; margin-bottom: 1px ; text-align: 

center ; text-decoration: none ; list-style-type:none; }
#navigation li a { display: block; background: #ffff80; color: #00c0ff; font-size: 1.2em;margin-bottom: 1px; 

text-align: center; line-height: 180%; text-decoration: none; list-style-type: none; }
#navigation a:link { color:#00f; }
#navigation a:visited { color:#c0c; }
#navigation a:hover { color:#0f0; }
#navigation a:active { color:#f00 ; }
.colreg { float:right; width:82%; padding-left: 2%; padding-top: 0.6em;}
.centered {padding-top: 2.5em; text-align: center; width: 90%; padding-left: 7%;}
.titrepag { color: blue; text-align:center; font-size:2.5em; }
.centered0; text-align:left; font-size:0.75em;}
table {height:100%;  width:90%; text-align:center ; background-color:#ffff80; color:#00F;padding-left: 10%;}
caption {font-size: 1.5em; color:blue; font-weight: bold; }
thead {font-weight: bold; font-size: 1.25em; text-align: center;
border:1px solid #6495ed; background-color:#ffff80;
}
tbody {
border:1px solid #6495ed; background-color:#ffff80;font-size: 1.1em;
}
th {color:blue; font-size:2m; text-align:center;
}
.colprenom { font-weight: bold;}
.colnom { font-weight: bold; }
.colbureau { text-align: right;}
.colfonction { width:30%;}
.colcanton { height:100%; width:18%;}
.colmil { width: 50%; float: left; font-size: 1.5em ;  padding-left: 0%; text-align: left; 
padding-top: 2.9em;  }
#accueil { font-size: 1.6em; padding-left: 4%;  color:blue; padding-top: 0.0em; }
#accueil2 { display: block; font-size: 1.1em;  padding-left: 0%; color:blue; text-align: center; padding-top: 

1.2em;}
.acc-simple { color: blue; font-size: 1.5em;  padding-left: 5%; text-align: left; padding-top: 1.2em;} 
.bloc-adr { display: block; color: black ; font-size: 0.9em; padding-top: 1.3em; padding-left: 8%; text-align: 

left; }
#tel { font-size: 0.85em; text-align: center; padding-top: 1em; }
.rouge {color: red;}
.colmil cadregch p { text-align: left; font-size: 0.8em; color:#000080; font-weight: bold; }
.frmliste li {padding-top: 0.3em;  padding-left: 2.5%; font-size: x-large; color: blue; font-weight: normal; }
.coldrt { width: 47%; float: right; font-size: 1.5em ; text-align: left; padding-left: 5px; padding-top: 2.75em;}
.coldrt cadredrt p { text-align: left; font-size: 0.8em; #000080;font-weight: bold; }
.centre { text-align: center; }
.cadre3 { text-align: left; font-size: x-large; color: blue; padding-top: 0em; padding-left: 10%;}

Chose curieuse, la class "colbureau" a bien cadré à droite chaque dt concerné de la table !!
On voit cette table décalée à gauche sur l'image de la page :
http://img135.imageshack.us/img135/566/caproblge2.jpg

Merci si les explications sont disponibles, je me ferai un plaisir de les appliquer (et essayer d'être autonome sur ces points) !
Bonne journée @bientôt RJL20080428

css avec <body> : KO. . . avec moi !

CSS

Discussions similaires

Partager

Partager