Page 1 sur 1

CSS (débutante)

Publié : 09 sept. 2004, 16:32
par Carlita
Je débute avec les CSS (sur MacOsX et GoLive), j'ai compris à quoi ça sert et les avantages hallucinants qui en découlent et ça m'éclate ! Je bute néanmoins sur le pas de la porte. Je m'explique : j'ai d'un côté un doc .scc et de l'autre un doc .html comment est-ce que ces 2 univers cohabitent ?

Je crée un canevas, avec les ".entete, .pied, .gauche, et .droite " et comment est-ce que ensuite je les remplis ?

Pour l'instant j'ai un truc qui ressemble à ça :

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Page sans titre</title>
<style type="text/css" media="screen"><!--
<style type="text css"> <!-- html, body {
margin: 0;
height: 100% }

.entete {
background-color: #3333cc;
height: 10% }

.contenu {
background-color: #66ccff;
height: 80% }

.menu {
color: #ffffff;
background-color: #330066;
width: 200px;
height: 100%;
float: left }

.centre {
margin-left: 200px }

.pied {
background-color: #336699;
height: CSS_PROPERTY_UNDEF }

< style> { }

--></style>
</head>

<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div class="entete"></div>
<div class="contenu">
<div class="menu"></div>
<div class="centre"></div>
</div>
<p></p>
</body>
</html>

J'ai recherché aussi des ouvrages… difficil en français, j'ai joué au jardin Zen… mais il me manquerai le doc html final pour comprendre… si qqn avait la gentillesse de m'aider un peu se serai cool !

Publié : 09 sept. 2004, 16:49
par jv2759
Déjà je te déconseille d'utiliser golive si tu veux aprendre à utiliser les css...

Un bon logiciel avec coloration sintaxique, me semble bien plus efficace. Car si golive permet de crée rapidement des pages, le code n'est pas forcement simple à comprendre et donc tu peux aller moins loin.

Mais bon ce n'est qu'un avie...

Sinon pour des lien qui son pas mal concernant xhtml (qui me semble mieux convenir pour le css)et css.

http://www.geckozone.org/forum/viewtopic.php?t=13

Pour ton exemple si tu veux séparer html et css :

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Page sans titre</title>
<link rel="stylesheet" href="monstyle.css" type="text/css" />
</head>

<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div class="entete"></div>
<div class="contenu">
<div class="menu"></div>
<div class="centre"></div>
</div>
<p></p>
</body>
</html>
le fichier monstyle.css

Code : Tout sélectionner

html, body {
margin: 0;
height: 100% }

.entete {
background-color: #3333cc;
height: 10% }

.contenu {
background-color: #66ccff;
height: 80% }

.menu {
color: #ffffff;
background-color: #330066;
width: 200px;
height: 100%;
float: left }

.centre {
margin-left: 200px }

.pied {
background-color: #336699;
height: CSS_PROPERTY_UNDEF }

PS : L'avantage de bien manipuler le code source, c'est que quand tu as des probléme simple dans ce genre tu peux faire : Aller sur un site qui te semble faire ce que toi tu veux, puis directement clic droit afficher la source et tu peux voir comment il ont résolut eux le probléme...

Publié : 09 sept. 2004, 18:04
par Nucleos
pas cool de vous envoyer des Ko de code sur le forum :p
(vous pouvez utilisez des «walls» ou cjoint.com par exemple.)

Bon sinon, ton code CSS n'est pas valide, et je trouve ça aussi pas forcément facile de comprendre CSS _grace à_ GoLive. M'enfin tous les chemins mènent à Rome. Tu as déjà eu vent de Openweb et Selfhtml ?

Sinon, le meilleur moyen reste de regarder comment les sites sont faits.

Ah et puis, dernière chose : utilise des identifiants (au lieu de class=, préferer id=, et en CSS à la place de .classe, préférer #id) à la place des class si c'est possible. Ça te permettera de faire des liens du type http://domaine.com/index.xhtml#id :p