Création d'une feuille de style
jackemon
-
kevin76110 Messages postés 4273 Date d'inscription Statut Membre Dernière intervention -
kevin76110 Messages postés 4273 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voila je viens de traduire ma page web psd que jai découpé et traduite en xhtml maintenant le gros probleme pour moi c'est de crée la feuille de style css de ma page voila le code xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Accro Roller : Association de roller et skateboard à Dakar au Sénégal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="images/style_accroroller.css" />
</head>
<body>
<div id="general">
<div id="page">
<div id="entete">
<h1>Accro Roller : Association de roller et skateboard à Dakar au Sénégal</h1>
<ul>
<li><a href="#" title="Actualités">Actualités</a></li>
<li><a href="#" title="Qui sommes-nous ?">qui sommes nous</a></li>
<li><a href="#" title="Photos">Photos</a></li>
<li><a href="#" title="Vidéos">Videos</a></li>
<li><a href="#"title="Contact">Contacts</a></li>
</ul>
</div>
<div id="contenu">
<div id="actualites">
<h2>Actualités</h2>
<a href="#">
<div>
<img src="images/photo_actu.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div>
<img src="images/photo2.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div>
<img src="images/photo3.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
</div>
<div id="evenement">
<h2>Evénement !</h2>
<a href="#">
<div>
<img src="images/photo4.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
</div>
<div id="toutsavoir">
<h2>Tout savoir sur Accro roller</h2>
<div id="lesaccros">
<h3>Les Accros</h3>
<ul>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
</ul>
</div>
<a href="#">
<div id="quisommesnous">
<h3>Qui sommes-nous ?</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div id="commentsinscrire">
<h3>Comment s'inscrire ?</h3>
<p>C'est très simple: telecharger,imprimer,remplir et signer le formulaire d'inscription,mes droits d'inscriptions...</p>
</div>
</a>
</div>
<div id="tropcool">
<div id="photos">
<h3>Photos</h3>
<ul>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
</ul>
</div>
<div id="videos">
<h3>Vidéos</h3>
<ul>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
</ul>
</div>
</div>
</div>
<div id="basdepage">
<img src="images/logo_accro_roller.png">
<div id="contact">
<h2>Association Accro Roller</h2>
<p>7643 SICAP Memoz<br>Dakar / Sénégal<br>www.accroroller.tk<br>accrosroller@yahoo.fr</p>
</div>
<div id="planacces">
<h2>Plan d'accès</h2>
<img src="images/plan.gif">
</div>
<div id="newsletter">
<h2>Newsletter</h2>
<p>Pour reçevoir nos actualités par mail, inscrivez-vous à notre newsletter</p>
</div>
</div>
</div>
</div>
<div id="formulaire">
<form action="http://accro-roller.tk/cgi-bin/comments.pl">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td align="right">Prénom:</td>
<td><input name="prenom" type="text" class="champ" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Nom de famille:</td>
<td><input name="nom" type="text" class="champ" size="30" maxlength="40"></td>
</tr><tr>
<td align="right" valign="top">Sexe:</td>
<td>
<input type="radio" class="option" name="sexe" value="m"> masculin<br>
<input type="radio" class="option" name="sexe" value="w"> féminin
</td>
</tr><tr>
<td align="right" valign="top">Caractéristiques:</td>
<td>
<input type="checkbox" class="cocher" name="caracteristique" value="Roller"> Roller<br>
<input type="checkbox" class="cocher" name="caracteristique" value="Skateboard"> Skateboard<br>
<input type="checkbox" class="cocher" name="caracteristique" value="mordu-sport extréme"> mordu de,sport extréme
</td>
</tr><tr>
<td align="right" valign="top">Grande ville la plus proche:</td>
<td>
<select name="Pays et villes" class="choix" size="1">
<option value="DAKAR">Dakar</option>
<option value="PARIS">Paris</option>
<option value="New york">New york</option>
<option value="Tokyo">Tokyo</option>
<option value="London">London</option>
<option value="Niger">Niger</option>
<option value="Mali">Mali</option>
<option value="Burkin faso">Burkin faso</option>
<option value="Togo">Togo</option>
<option value="Gabon">Gabon</option>
<option value="Congo Brazza">CONGO BRAZZA</option>
<option value="Maroc">Maroc</option>
<option value="Tunisie">Tunisie</option>
<option value="Egypte">Egypte</option>
</select>
</td>
</tr><tr>
<td align="right" valign="top">Commentaire:</td>
<td><textarea name="Text" class="passage" rows="10" cols="50"></textarea></td>
</tr><tr>
<td align="right">Formulaire:</td>
<td>
<input type="submit" class="Bouton" value="Envoyer">
<input type="reset" class="Bouton" value="Interrompre">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
merci de bien voiloir massister
voila je viens de traduire ma page web psd que jai découpé et traduite en xhtml maintenant le gros probleme pour moi c'est de crée la feuille de style css de ma page voila le code xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Accro Roller : Association de roller et skateboard à Dakar au Sénégal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="images/style_accroroller.css" />
</head>
<body>
<div id="general">
<div id="page">
<div id="entete">
<h1>Accro Roller : Association de roller et skateboard à Dakar au Sénégal</h1>
<ul>
<li><a href="#" title="Actualités">Actualités</a></li>
<li><a href="#" title="Qui sommes-nous ?">qui sommes nous</a></li>
<li><a href="#" title="Photos">Photos</a></li>
<li><a href="#" title="Vidéos">Videos</a></li>
<li><a href="#"title="Contact">Contacts</a></li>
</ul>
</div>
<div id="contenu">
<div id="actualites">
<h2>Actualités</h2>
<a href="#">
<div>
<img src="images/photo_actu.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div>
<img src="images/photo2.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div>
<img src="images/photo3.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
</div>
<div id="evenement">
<h2>Evénement !</h2>
<a href="#">
<div>
<img src="images/photo4.jpg">
<h3>2e compétition de roller</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
</div>
<div id="toutsavoir">
<h2>Tout savoir sur Accro roller</h2>
<div id="lesaccros">
<h3>Les Accros</h3>
<ul>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
<li><a href="#">Nom + Prénom</a></li>
</ul>
</div>
<a href="#">
<div id="quisommesnous">
<h3>Qui sommes-nous ?</h3>
<p>7 clubs de roller pour 88 participants aux épreuves de saut en hauteur</p>
</div>
</a>
<a href="#">
<div id="commentsinscrire">
<h3>Comment s'inscrire ?</h3>
<p>C'est très simple: telecharger,imprimer,remplir et signer le formulaire d'inscription,mes droits d'inscriptions...</p>
</div>
</a>
</div>
<div id="tropcool">
<div id="photos">
<h3>Photos</h3>
<ul>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
<li><a href="#">Album photo</a></li>
</ul>
</div>
<div id="videos">
<h3>Vidéos</h3>
<ul>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
<li><a href="#">Vidéo</a></li>
</ul>
</div>
</div>
</div>
<div id="basdepage">
<img src="images/logo_accro_roller.png">
<div id="contact">
<h2>Association Accro Roller</h2>
<p>7643 SICAP Memoz<br>Dakar / Sénégal<br>www.accroroller.tk<br>accrosroller@yahoo.fr</p>
</div>
<div id="planacces">
<h2>Plan d'accès</h2>
<img src="images/plan.gif">
</div>
<div id="newsletter">
<h2>Newsletter</h2>
<p>Pour reçevoir nos actualités par mail, inscrivez-vous à notre newsletter</p>
</div>
</div>
</div>
</div>
<div id="formulaire">
<form action="http://accro-roller.tk/cgi-bin/comments.pl">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td align="right">Prénom:</td>
<td><input name="prenom" type="text" class="champ" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Nom de famille:</td>
<td><input name="nom" type="text" class="champ" size="30" maxlength="40"></td>
</tr><tr>
<td align="right" valign="top">Sexe:</td>
<td>
<input type="radio" class="option" name="sexe" value="m"> masculin<br>
<input type="radio" class="option" name="sexe" value="w"> féminin
</td>
</tr><tr>
<td align="right" valign="top">Caractéristiques:</td>
<td>
<input type="checkbox" class="cocher" name="caracteristique" value="Roller"> Roller<br>
<input type="checkbox" class="cocher" name="caracteristique" value="Skateboard"> Skateboard<br>
<input type="checkbox" class="cocher" name="caracteristique" value="mordu-sport extréme"> mordu de,sport extréme
</td>
</tr><tr>
<td align="right" valign="top">Grande ville la plus proche:</td>
<td>
<select name="Pays et villes" class="choix" size="1">
<option value="DAKAR">Dakar</option>
<option value="PARIS">Paris</option>
<option value="New york">New york</option>
<option value="Tokyo">Tokyo</option>
<option value="London">London</option>
<option value="Niger">Niger</option>
<option value="Mali">Mali</option>
<option value="Burkin faso">Burkin faso</option>
<option value="Togo">Togo</option>
<option value="Gabon">Gabon</option>
<option value="Congo Brazza">CONGO BRAZZA</option>
<option value="Maroc">Maroc</option>
<option value="Tunisie">Tunisie</option>
<option value="Egypte">Egypte</option>
</select>
</td>
</tr><tr>
<td align="right" valign="top">Commentaire:</td>
<td><textarea name="Text" class="passage" rows="10" cols="50"></textarea></td>
</tr><tr>
<td align="right">Formulaire:</td>
<td>
<input type="submit" class="Bouton" value="Envoyer">
<input type="reset" class="Bouton" value="Interrompre">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
merci de bien voiloir massister
A voir également:
- Création d'une feuille de style
- Modèle de style word - Guide
- Creation de site web - Guide
- Creation de compte google - Guide
- Creation compte gmail - Guide
- Bruler feuille de laurier - Guide
4 réponses
Si tu veux créer ton fichier css, apprend à le faire. On ne va pas tout coder pour toi.
En plus ton code est déjà prêt pour le css: tout est bien identifié. Tout ce qu'il te faut c'est le css :) aucune modification de ton code a priori.
Courage :) siteduzero.com :)
En plus ton code est déjà prêt pour le css: tout est bien identifié. Tout ce qu'il te faut c'est le css :) aucune modification de ton code a priori.
Courage :) siteduzero.com :)
Bonjour,
Je vois pas bien ce que tu demandes. Quelle est la question? Qu'est-ce que tu n'arrives pas à faire?
Je vois pas bien ce que tu demandes. Quelle est la question? Qu'est-ce que tu n'arrives pas à faire?
je sais coin coin mais tu vois une communauté ça ser souvent a ça je voudrais qu'on maide c tou si tu peux donne moi juste quelque conseil ou essaye au moin de me faire le plan du squelette du fichier css bref caméléon 33 est ce que tu penses que tu pourrais me donné une idée du squellete
merci
merci
Le mieux si tu veux savoir faire ta feuille CSS c'est d'aller voir là :
https://openclassrooms.com/fr/
Une feuille CSS n'a pas vraiment d'architecture prédéfinie... Il est impossible de te donner un squelette. Je te conseille d'aller voir le site du zéro. Il est très bien fait et en peu de temps tu seras capable de faire ta feuille CSS.
Un conseil, soit patient, c'est long de faire un design en CSS... Le html c'est vraiment le plus simple...
https://openclassrooms.com/fr/
Une feuille CSS n'a pas vraiment d'architecture prédéfinie... Il est impossible de te donner un squelette. Je te conseille d'aller voir le site du zéro. Il est très bien fait et en peu de temps tu seras capable de faire ta feuille CSS.
Un conseil, soit patient, c'est long de faire un design en CSS... Le html c'est vraiment le plus simple...
