Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: rjl le le 28-04-2008 a 00:58:12

Titre: css sur body ??
Posté par: rjl le le 28-04-2008 a 00:58:12

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

Code:

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

Titre: Re:css sur body ??
Posté par: Izanagi le le 04-05-2008 a 10:19:12

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

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

Titre: CSS sur body ??
Posté par: rjl le le 05-05-2008 a 00:08:42

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:

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

Titre: Re:css sur body ??
Posté par: Izanagi le le 05-05-2008 a 08:52:42

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"

Titre: Re:css sur body ??
Posté par: rjl le le 06-05-2008 a 01:02:19

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

Titre: Re:css sur body ??
Posté par: Lilian le le 08-05-2008 a 08:15:09

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 { }

Titre: Re:css sur body ??
Posté par: rjl le le 12-05-2008 a 19:15:18

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 !
[url=http://img396.imageshack.us/my.php?image=imagesite22bh4.jpg]
D'avance, merci à qui pourrait m'indiquer ce qui provoque cela ?
@ bientôt
RJL20080512

Titre: Re:css sur body ??
Posté par: rjl le le 13-05-2008 a 23:24:10

Pas simple ?
@ bientôt RJL20080513