Version complète: sur le forum Webmaster Hub : Le CSS
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
atelierducuir
Bonjour,

Je cherche partout de l'aide pour réaliser mon site en CSS, mais je ne trouve aucune aide utile (où l'on me conseil des pages pour apprendre le XHTML et le CSS) alors que je veut pouvoir finir mon site le plus rapidement possible, puisque j'ai déjà réaliser la page modèle de mon site (zone de texte où je mettrais les informations, menu, bannière, design, bas de page etc...).

J'ai un livre (CSS 2.0 - Michel Dreyfus - Compus Press) et on me montre cet exemple de page style :

CODE
body {background-color: yellow;}
h1 {color: red;}
p {background-color: black;}
table { border: 1px solid black; padding: 12px; width: 80%;}
th {background-color: #333; border:}
.avis {background-color: red; color: orange;)


Vu que j'avais déjà créer ma page avec FrontPage et que je voulais faire ça rapidement, j'ai créer une autre feuille de style avec le code HTML de mon site (ma page pour l'instant)

CODE

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><img border="0" src="image_site/banniere.bmp" width="900" height="115"></td>
</tr>
</table>
</center>
</div>
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="91%">
<tr>
<td width="15%" bgcolor="#CC3300">
<p align="left"><font face="Viner Hand ITC"><u>l'Atelier du cuir</u><br>
- <b>A</b></font><font face="Verdana" size="1">ccueil</font><font face="Viner Hand ITC"><br>
- <b>C</b></font><font face="Verdana" size="1">ontact</font><font face="Viner Hand ITC"><br>
- <b>L</b></font><font face="Verdana" size="1">e magasin</font><font face="Viner Hand ITC"><br>
- <b>C</b></font><font size="1" face="Verdana">onditions</font><font face="Viner Hand ITC"><br>
- <b>S</b></font><font face="Verdana" size="1">tages</font><font face="Viner Hand ITC"><br>
- <b>S</b></font><font face="Verdana" size="1">t Eulalie<br>
</font><b><font face="Viner Hand ITC" size="2">- L</font></b><font face="Verdana" size="1">es
outils<br>
</font><font face="Viner Hand ITC"><br>
<font color="#000000"><u>Nos produits</u></font><br>
- <b>R</b></font><font size="1" face="Verdana">estauration</font><font face="Viner Hand ITC"><br>
- <b>S</b></font><font face="Verdana" size="1">acs</font><font face="Viner Hand ITC"><br>
- <b>B</b></font><font size="1" face="Verdana">oîtes</font><font face="Viner Hand ITC"><br>
- <b>B</b></font><font size="1" face="Verdana">arrettes</font><font face="Viner Hand ITC"><br>
- <b>E</b></font><font face="Verdana" size="1">tuis à couteaux</font><font face="Viner Hand ITC"><br>
- <b>C</b></font><font size="1" face="Verdana">adres &amp; miroirs</font><font face="Viner Hand ITC"><br>
- <b>P</b></font><font size="1" face="Verdana">our le bureau</font><font face="Viner Hand ITC"><br>
- <b>P</b></font><font size="1" face="Verdana">orte-clefs</font><font face="Viner Hand ITC"><br>
- <b>C</b></font><font face="Verdana" size="1">eintures</font><font face="Viner Hand ITC"><br>
- <b>P</b></font><font size="1" face="Verdana">orte monnaie</font></p>
<p align="left">&nbsp;</p>
<p align="left"><br>
</td>
<center>
<td width="6%"><img border="0" src="image_site/bandeau1.bmp" width="30" height="600"></td>
<td width="162%">
<p align="center"><font face="Verdana" size="1">Accueil - Contact</font></p>
</center>
<p align="left"><font size="1" face="Verdana">Bienvenue,</font></p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left"><br>
<br>
</td>
<center>
<td width="11%"><img border="0" src="image_site/bandeau2.bmp" width="30" height="600"></td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">
<p align="center"><font face="Verdana" size="1">Design by <a href="mailto:jeremiegachelin_AT_orange.fr" target="_blank">J.
Gachelin<br>
</a>© Copyright 2006 - Atelier du Cuir<br>
</font></td>
</tr>
</table>
</center>
</div>


Et là ça ne marche pas !!!
ghost
Bonjour,

Si j'ai bien compris tu veux traverser l'atlantique à la voile sans avoir jamais vu la mer et encore le faire vite !! Sans vouloir te vexer, tu devrais écouter ceux qui t'ont conseillé d'apprendre le html et le css ... Sinon naufrage garanti.

Bon courage
Dan
Bonjour,

Il est clair qu'avec toutes tes balises <font...> tu es très -TRES- loin du CSS !
Idem pour tes <p align="left">&nbsp;</p> ...

Je pense que tu devrais pouvoir apprendre les rudiments en quelques heures... cela te permettrait au moins de mettre ta page en ligne.
Pour info, ta page n'a aucun style CSS...

Dan
atelierducuir
J'ai créer mon site avec FrontPage 2000 et j'ai copier le code HTML sans les balises (entre <body> et </body>) pour le deuxième code, et ont m'avait d'ailleurs déjà conseillé de ne pas utiliser FrontPage mais NVU (je possède aussi ce logiciel)

Merci de votre aide.

CITATION(Dan @ lundi 18 décembre 2006, 17h33) *
Je pense que tu devrais pouvoir apprendre les rudiments en quelques heures... cela te permettrait au moins de mettre ta page en ligne.


J'ai voulut imprimer ce cours : http://www.siteduzero.com/tuto-3-6-0-appre...e-site-web.html mais j'ai vite oublié car
toutes les informations qu'il y a et toutes sont indispensables !

Et combien de temps pour connaitre tout ? Parce que je ne veux pas simplement mettre ma page en ligne mais faire ça :

Page modèle

Je veux juste que cette page là puisse être reproduite dans toutes les nouvelles pages du site que je créerais au fur et à mesure. Comment avoir le langague CSS de cette page ?
marcelman
Ce qu'il y a, c'est que tu veux faire du CSS, mais tu ne veux pas prendre le temps de l'apprendre. C'est un peu comme si je voulais devenir tanneur sans passer par la case formation... Avoue que c'est un peu difficile. Honnêtement, je ne vois pas d'autre moyen que de passer du temps à lire des tutos (ceux du site du zéro sont très bien faits) ou des bouquins. Sinon, faut faire sans CSS et faire confiance à ton logiciel.
karnabal
Salut,

Tu trouveras forcément ton bonheur parmi les modèles d'Alsacréations, sans doute le chemin le plus court pour parvenir à tes fins ! Même si tu boucles/bâcle ton projet de page, tu vas rapidement t'apercevoir que l'affichage va coincer sous certains navigateurs.

[Edition] URL des modèles erronnée
atelierducuir
CITATION(karnabal @ lundi 18 décembre 2006, 19h50) *
Salut,

Tu trouveras forcément ton bonheur parmi les modèles d'Alsacréations, sans doute le chemin le plus court pour parvenir à tes fins ! Même si tu boucles/bâcle ton projet de page, tu vas rapidement t'apercevoir que l'affichage va coincer sous certains navigateurs.


Tu as mis ma page d'essai en lien d'Alsacréations, tu aurais un lien ? Je vais chercher sur Google peut-être que je trouverais... wink.gif

Ré-édition :

J'ai trouver : http://css.alsacreations.com/

Est-ce qu'avec le livre que j'ai, CSS 2.0 - Michel Dreyfus - Compus Press, cela peut suffir ?
karnabal
Oh oui tu trouveras, en attendant j'ai quand même rectifié le tir. Ah, je me suis emmêlé dans les copier-coller !

Garde bien la structure du gabarit que tu choisis, passe régulièrement ta page au validateur et teste l'affichage de temps en temps sous les différents navigateurs. wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.