css sur body ?? - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  css sur body ??

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: css sur body ?? (Lu 1223 fois)

css sur body ??
« sur: le 28-04-2008 a 00:58:12 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonjour,
Je m'aperçois que j'avais laissé du style directement avec le HTML au niveau de <body>.
Code:
<!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éent une class "bodystyl" ça na fonctionne plus ? Comment s'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:

<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 fin 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

Rapporter au modérateur

Re:css sur body ??
« Répondre #1 sur: le 04-05-2008 a 10:19:12 »

Izanagi
Membre récent

Hors-Ligne

Sexe: Male

Messages: 27

Tes styles doivent se trouver entre les balises
<STYLE type="text/css"></style> et non directement dans head.

<STYLE type="text/css">
      
      </STYLE>

Rapporter au modérateur

Penpal Tradition - La correspondance en toute simplicité - www.penpal-tradition.net
Ordi'Assistance - Dépannage informatique et créations Web - www.ordi-assistance.be

CSS sur body ??
« Répondre #2 sur: le 05-05-2008 a 00:08:42 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonjour Izanagi
et merci de tes indications ; pour autant, je ne pense pas être en faute sur ces points puisque j'utilise une feuille de style externe
Citation:
Code:
<link rel="stylesheet" type="text/css"
href="../CSS-AR22.css" />
Le problème vient de mes éléments de style pris en compte en direct mais non pris en compte s'ils proviennent de cette feuille de style externe (contrairement à la majorité des éléments de styles pris en compte normalement ) !
La question : "qu'est ce qui cloche dans les élément de style de la feuille externe contenant ":
Code:
.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%;}
Merci d'avance pour vos remarques RJL20080505

Rapporter au modérateur

Re:css sur body ??
« Répondre #3 sur: le 05-05-2008 a 08:52:42 »

Izanagi
Membre récent

Hors-Ligne

Sexe: Male

Messages: 27

tu utilises la classe "bodystyl", dans quelle balise l'utilises-tu ?

Plus haut je vois que tu indiques :

<body style="margin: 10px; background-color: rgb(255, 255, 204);">

Mais il n'y a aucune classe dedans. Essaie de rajouter class="bodystyl" pour voir ?

<body style="margin: 10px; background-color: rgb(255, 255, 204);" class="bodystyl">

ou remplace .bodystyl dans ta feuille css par body :

body {
...
}

Vérifie que le chemin relatif vers la feuille de style est correct :

href="../CSS-AR22.css"

Rapporter au modérateur

Penpal Tradition - La correspondance en toute simplicité - www.penpal-tradition.net
Ordi'Assistance - Dépannage informatique et créations Web - www.ordi-assistance.be

Re:css sur body ??
« Répondre #4 sur: le 06-05-2008 a 01:02:19 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Tu as raison, ce n'est plus cohérent dans ma présentation car je continue à essayer de progresser et donc, je modifie tant le HTML que la CSS !
En fait, je me suis rendu compte que les css étaient prises en compte mais pas pour toutes leurs propriétés : je ne domine pas du tout les dépendance ou filiation des balises

Suite à ces essais, je suis maintenant bloqué sur la prise en compte des attributs pour centrer dans une colonne le menu ! Je n'arrive pas à faire agir un text-align:center; !
(J'ai d'ailleurs des problèmes similaires pour les images d'où les styles leur correspondant restés noyé avec le HTML, faute de savoir pour moi le faire agir en css !)
Code:
<div class="centrage">
<div class="menu">Menu</div>

<div class="menucorps">
<ul id="navigation">
<li><a href="../Index.html">Retour
menu principal</a></li>
<li><a href="#"> </a></li>
<li><a href="AR22-ConseilAdministration.html">Conseil
d'Administration</a></li>
<li><a href="AR22-Commissions.html">Commissions</a></li>

Correspondant à cet essai de centrage la css est alors :
Code:
.centrage { text-align: center ;}
.menu { font-size: xx-large;}
.menucorps {font-size:normal; width: 83%;}
#navigation li{ background: #ffff80 ; color: blue ; border: 1px solid #600 ; margin-bottom: 1px ; text-align: center ; text-decoration: none ; list-style-type:none;}
Je n'arrive pas à trouver d'exemple sur ce thème et j'ai réussi à approcher (mal) une solution en forçant du padding à droite !
@ bientôt et merci RJL20080506

Rapporter au modérateur

Re:css sur body ??
« Répondre #5 sur: le 08-05-2008 a 08:15:09 »

Lilian
Administrateur

Hors-Ligne

Sexe: Male

Messages: 3209

Il faut fixer une taille à chaque élément du li autrement il peut pas centrer.

Pour ce qui est de définir du style à un "body"

Il suffit de déclarer dans le CSS :

body { }

Rapporter au modérateur

Re:css sur body ??
« Répondre #6 sur: le 12-05-2008 a 19:15:18 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Merci , Lilian, de la réponse et mes excuses pour le retard lié à la Pentecôte !
Je me suis mal exprimé : Les éléments intérieurs au menu (Li) sont bien centrés mais c'est la colonne, elle même qui n'est pas centrée et donne impression d'être à droite et même plutôt de respecter un padding gauche absent !!
Je joins le code :
Code:
<!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>Accueil Aînés Ruraux 22</title>
<link rel="stylesheet" type="text/css"
href="CSS-AR22.css" />
</head>
<body>
<div class="bodystyl">
<div class="colgch">
<div><img src="Images22/Logo%20AR.gif"
style="text-align: left; width: 100%;" alt="Logo Aînés Ruraux" />
</div>
<div class="centrage">
<div class="menu">Menu
</div>
<div class="menucorps">
<ul class="navigation">
<li><a href="Page22/AR22-objectifs.html">Objectifs
- Rôle</a></li>
<li><a href="Page22/AR22-organisation.html">Organisation</a></li>
<li><a href="Page22/AR22-actualites.html">Actualité</a></li>
<li><a href="Page22/AR22-activites.html">Activités</a></li>
<li><a href="Page22/AR22-avantages.html">Avantages</a></li>
<li><a href="Page22/AR22-partenaires.html">Partenaires</a></li>
<li><a href="Page22/AR22-plansite.html">Plan du
Site</a></li>
<li><a href="Page22/AR22-blog.html">Notre Blog</a></li>
<li><a href="mailto:ar22@ifrance.com">Nous
contacter</a></li>
</ul>
</div>
</div>
</div>
<div class="colreg">
<div class="centered"><img
src="Images22/Titre%20Fede22.jpg" alt="Titre Fédération AR 22" />
</div>
<div class="colmil">
et la CSS correspondante :
Code:
.bodystyl { background-color: #ffffc0; color: blue; font-family: verdana, helvetica, arial, sans-serif ;

font-size: small; line-height: 200%; }
.colgch { width: 16%; color: blue;float: left;}
.centrage { text-align: center ;}
.menu { font-size: xx-large;}
.menucorps {font-size:normal;width:95%}
.navigation li{ background: #ffff80 ; color: blue ; border: 1px solid #600 ; margin-bottom: 1px ;

text-align: left ; text-decoration: none ; list-style-type:none;}
.navigation li a { display: block; font-size: 1.2em;margin-bottom: 1px; text-align: center; line-height:

180%; }
.navigation a:link { color:#00f; }
.navigation a:visited { color:#c0c; }
.navigation a:hover { color:#0f0; }
.navigation a:active { color:#f00 ; }
.colreg { float:right; width:83.5%; background-color: #ffffc0; padding-top: 0.6em;}
.colreg2 { float:right; width:100%; background-color: #ffffc0; padding-top: 0.6em;}
.centered {padding-top: 1.5em; text-align: center; width:90%; padding-left: 4%;}
.titrepag { color: blue; text-align:center; font-size:3em; font-weight: bold; padding-top:1.5em; }
Je joins aussi une photo qui montre mon bloc menu décalé à droite !

D'avance, merci à qui pourrait m'indiquer ce qui provoque cela ?
@ bientôt
RJL20080512