Cherche aide pour creer une page avec css ...

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Le titre de premier niveau c'est h1 ; celui de 2è niveau, le sous-titre, c'est h2 ; celui de 3è niveau, h3, le sous-sous-titre ; et ainsi de suite.

Les paragraphes qui ne sont pas des titres c'est simplement <p> :wink:

Est-ce un peu plus clair ?
Oui et non, désolé mais je dois avoir un peu de mal, par exemple le texte de la news qui est dans le tableau (le corps du texte) c'est un titre ou non ?

En gros est-ce que ca pose un problème pour la suite si certaines parties ne sont pas des titres ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Euh... à ton avis ?
C'est toi qui sais. Si c'est du corps de texte c'est un titre ?

Un titre c'est un titre. Comme dans un livre, tu as des chapitres, et ces chapitres ont des titres. Mais le corps du texte... c'est du texte pas des titres non ? C'est même toi qui le dis ;-)

Je dois dire qu'expliquer ce qu'est un titre... pas facile, d'autant qu'il n'y a pas de règle stricte sur ce qu'es un titre. C'est à chacun de voir le sens qu'il veut lui donner. Si tu vois ça comme un titre, alors pourquoi pas ? Il n'y a pas vraiment de règle précise à ce sujet.
Que dire ? Ouvre un dictionnaire, cherche la définition de "titre" et regarde si ça colle ;-)

C'est toute la différence entre le wysiwyg où on se demande "quel look ça doit avoir ?" et le codage à la main où on se demande "Qu'est-ce que c'est ?". Réfléchis bien, je suis sur que tu peux trouver tout seul 8)

Bon, je te laisse il faut bien dormir quand-même cette nuit :wink:
Bonne nuit, on continue la discussion demain :)

PS : la nuit porte conseil, mais ne pense pas à ça au point de ne plus pouvoir dormir :lol:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

Ok donc maintenant je pense que ca a du sens, non pars pas je dodo pas moi lol

Code : Tout sélectionner

<body>
<h1>News</h1>
<p>Voici les dernières news concernant le site, les projets, c'est ici que vous retrouverez toute l'actualité en quelques coups d'&oelig;il</p>

<h2>Concours ouvert à tous : la NUIT MAX !!!</h2>
<h3>Posté le 20 novembre 2004 à 23h00 par Pierre</h3>
<p>La nuit MAX mais kekoiça ? Durant toute la nuit de 21h30 à 8h30 demain matin, pleins d'amateurs vont s'affronter pour remporter ce <i>concours qui se déroule en une nuit et dont le but est de créer la plus belle image possible avec un logiciel d'infographie 3D.</i> C'est un concours pour avant tout se faire plaisir, le but n'étant pas de gagner quelque chose (de toute manière il n'y a rien à gagner !).<br><br>Le thème est tombé à 21h30 précise mais il est encore temps de commencer, le voici : <b>"Illustrer un film ou dessin animé de votre choix avec pour seule contrainte d'être reconnaissable sans en indiquer le titre"</b>.<br><br>Bonne chance à tous ceux qui souhaitent participer au concours, pour vous inscrire rendez-vous à l'adresse suivant : <a href="http://nuitmax.3dvf.net/" target="_blank">http://nuitmax.3dvf.net/</a>, prenez bien le temps de lire le <a href="http://nuitmax.3dvf.net/page_reglement/reglement.php" target="_blank">règlement</a> au risque sinon de vous faire disqualifier ...<br><br>Le site propose aussi les meilleurs créations des précédentes éditions, vous pouvez toujours y jeter un coup d'&oelig;il, certaines créations sont vraiment époustouflantes !</p>

<h2>Ouverture officiel du site des créations de TreuZ !</h2>
<h3>Posté le 26 octobre 2004 à 00h00 par Pierre</h3>
<p>Voilà c'est officiel, c'est l'ouverture du site de TreuZ qui a pour but de présenter ses créations, ses projets en cours et d'autres choses que vous pourrez découvrir :-D<br><br>Pour le moment tout n'est pas encore référencé, par la suite viendront les images des autres projets 3D terminés (armes et voitures), et un enrichissement des commentaires sur les wip, il y a tout de même la base, après c'est l'évolution...<br><br>Bonne visite sur ce nouveau site et pensez à laisser vos commentaires sur les réalisations et aussi sur le site à l'aide de <a href="http://treuzmod.free.fr/forum/" target="_blank">forum</a>, au passage merci à la communauté <a href="http://www.phpbb.com/" target="_blank">phpBB</a> pour la travail qu'elle fournie pour produire des forums de qualité :)<br><br>Vous retrouvez pleins de projets et d'images sur les différentes pages du site, voici par exemple l'avancement d'un personnage en 3D "KIRO" réalisé avec 3dsMax :<br><img border="0" src="images/wip/3d/kiro_1_small.jpg" alt="Kiro" width="127" height="150"></font><br><a href="http://treuzmod.free.fr/" target="_blank">http://treuzmod.free.fr/</a></p>
</body>
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

J'aurais du te donner tout de suite une adresse comme http://ian.hixie.ch/ pour voir un peu ce que je voulais dire ;-)

C'est mieux en effet :)

Il reste encore quelques balises de mise en forme : <i> (italique, c'est de la mise en forme), <b> (idem), les <br> aussi à la limite. Il reste un <font> (ou plutôt uniquement sa fermeture), des target="_blank" sur les liens (pas de la mise en forme mais de la dynamique aussi, à bannir du contenu donc)...
Tout ça me laisse penser que tu n'as pas fait ce que je te demandais, qui n'était pas de nettoyer, mais de le reprendre depuis 0. :P

Bon, on va recommencer de plus loin alors :wink:

Petit scénario à 2 balles : nous sommes dans un monde où le HTML n'a jamais été inventé. Jusque-là ça va ?

Donc les pages web sont... de simples fichiers textes.
Tu va donc créer un fichier texte (avec l'extension ".txt"), vide, sans rien dedans.
Et tu va essayer de rendre la page http://treuzmod.free.fr/site/news.htm de manière à ce qu'elle soit le plus lisible possible.

Est-ce que c'est clair ?
J'ai bien dit tout, y-compris les liens, à toi de voir comment tu fais pour rendre ça (inspire-toi du site que j'ai donné ;-))
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Il reste encore quelques balises de mise en forme : <i> (italique, c'est de la mise en forme), <b> (idem), les <br> aussi à la limite. Il reste un <font> (ou plutôt uniquement sa fermeture), des target="_blank" sur les liens (pas de la mise en forme mais de la dynamique aussi, à bannir du contenu donc)...
Oui je connais les balises pour l'italic, le gras etcetc mais je pensais qu'il fallait tout de même que je les garde moi, bon bah on va refaire, si si j'ai repris dans un nouveau fichier txt, j'ai copié collé les partit du texte, nouvelle version dans quelques minutes lol
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

Bon là je crois que c'est bien :-)

Code : Tout sélectionner

<body>
<h1>News</h1>
<p>Voici les dernières news concernant le site, les projets, c'est ici que vous retrouverez toute l'actualité en quelques coups d'&oelig;il</p>

<h2>Concours ouvert à tous : la NUIT MAX !!!</h2>
<h3>Posté le 20 novembre 2004 à 23h00 par Pierre</h3>
<p>La nuit MAX mais kekoiça ? Durant toute la nuit de 21h30 à 8h30 demain matin, pleins d'amateurs vont s'affronter pour remporter ce concours qui se déroule en une nuit et dont le but est de créer la plus belle image possible avec un logiciel d'infographie 3D. C'est un concours pour avant tout se faire plaisir, le but n'étant pas de gagner quelque chose (de toute manière il n'y a rien à gagner !).</p>

<p>Le thème est tombé à 21h30 précise mais il est encore temps de commencer, le voici : "Illustrer un film ou dessin animé de votre choix avec pour seule contrainte d'être reconnaissable sans en indiquer le titre".</p>

<p>Bonne chance à tous ceux qui souhaitent participer au concours, pour vous inscrire rendez-vous à l'adresse suivant : <a href="http://nuitmax.3dvf.net/">http://nuitmax.3dvf.net/</a>, prenez bien le temps de lire le <a href="http://nuitmax.3dvf.net/page_reglement/reglement.php">réglement</a> au risque sinon de vous faire disqualifier ...Le site propose aussi les meilleurs créations des précédentes éditions, vous pouvez toujours y jeter un coup d'&oelig;il, certaines créations sont vraiment époustouflantes !</p>

<h2>Ouverture officiel du site des créations de TreuZ !</h2>
<h3>Posté le 26 octobre 2004 à 00h00 par Pierre</h3>
<p>Voilà c'est officiel, c'est l'ouverture du site de TreuZ qui a pour but de présenter ses créations, ses projets en cours et d'autres choses que vous pourrez découvrir :-D</p>

<p>Pour le moment tout n'est pas encore référencé, par la suite viendront les images des autres projets 3D terminés (armes et voitures), et un enrichissement des commentaires sur les wip, il y a tout de même la base, après c'est l'évolution...</p>

<p>Bonne visite sur ce nouveau site et pensez à laisser vos commentaires sur les réalisations et aussi sur le site à l'aide de <a href="http://treuzmod.free.fr/forum/">forum</a>, au passage merci à la communauté <a href="http://www.phpbb.com/">phpBB</a> pour la travail qu'elle fournie pour produire des forums de qualité :)</p>

<p>Vous retrouvez pleins de projets et d'images sur les différentes pages du site, voici par exemple l'avancement d'un personnage en 3D "KIRO" réalisé avec 3dsMax : <img border="0" src="images/wip/3d/kiro_1_small.jpg" alt="Kiro" width="127" height="150"><a href="http://treuzmod.free.fr/">http://treuzmod.free.fr/</a></p>
</body>

T'en penses quoi ?


P.S : sur ton site le style "orange" fait planter mon firefox
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

C'est un fichier texte ça ? :shock:
J'ai dis : "le HTML n'a jamais été inventé" :lol:
Voir par exemple la page http://www.hixie.ch/advocacy/xhtml

Bon, admettons :wink: on va continuer à partir de ça :D

Et le menu il est passé où :?: :roll:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :C'est un fichier texte ça ? :shock:
J'ai dis : "le HTML n'a jamais été inventé" :lol:
Voir par exemple la page http://www.hixie.ch/advocacy/xhtml

Bon, admettons :wink: on va continuer à partir de ça :D

Et le menu il est passé où :?: :roll:
Bah je comprends pas du veux quoi :? J'ai mis la page en fonction des titre et tout, j'ai viré toutes les polices, ... si c'est pas bien je veux bien recommencer mais si tu me dis que je dois faire car il me semblait avoir suivit tes instructions :roll:
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Oui mais le trucs c'est qu'il ne fallait pas le voir comme "je vire les trucs pas bien" mais comme "je recommance à 0" :wink:

Maintenant ce code là est bon, mais il ne fait pas une page html. Il n'y a pas de menu, et tout le reste de la page est absent ;-)
Pour faire du CSS il faut commencer par avoir une page complète. Sinon forcément ça va pas marcher :lol: :wink:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Oui mais le trucs c'est qu'il ne fallait pas le voir comme "je vire les trucs pas bien" mais comme "je recommance à 0" :wink:

Maintenant ce code là est bon, mais il ne fait pas une page html. Il n'y a pas de menu, et tout le reste de la page est absent ;-)
Pour faire du CSS il faut commencer par avoir une page complète. Sinon forcément ça va pas marcher :lol: :wink:
Oui j'ai repris à 0 enfin quasiment en mettant mes balises et en copiant collant le texte ... oui je sais que cela ne constitu pas une page mais le menu etait dans un tableau donc comme je n'ai plus le droit de faire de mise à en forme je ne vois vraiment pas ce que je peux faire ... moi je connais juste les tableaux, je voudrais apprendre les css, mais là sans tableau et sans css je ne vois pas cmt faire le menu :roll:
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Ben un menu c'est une suite de liens.

En général on les ordonne sous forme de liste :
http://www.tuteurs.ens.fr/internet/web/ ... .html#s4_4 :wink:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Ben un menu c'est une suite de liens.

En général on les ordonne sous forme de liste :
http://www.tuteurs.ens.fr/internet/web/ ... .html#s4_4 :wink:
Quand je refais mon menu je peux garder mon javascript ou non ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

:lol:

J'y crois pas ! Tu y tiens hein ? J'ai dit : pas de mise en forme !

Bon, on reprend : fais une page complète avec tout ce qu'il faut en mode texte seul (on reprend à "Le HTML n'a jamais été inventé" :wink: ), comme cette page. Aucune balise HTML, juste ce qu'il faut dans un monde où le web s'est développé sans HTML :wink:

Tu veux griller les étapes ! Tu as le doit, mais alors tu te débrouilles sans moi ;-)
Selon moi pour faire une page propre on doit partir sur de bonnes bases. Parce que mettre un emplâtre sur une jambe de bois, ça fait plus de mal qu'autre chose. Or c'est ce que tu veux faire.

Donc fais-moi cette page, HTML interdit, et on en reparle demain. Je veux qu'elle ait tous les liens et tout le contenu que tu voudra dans la page finale ;-)
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Bon, on reprend : fais une page complète avec tout ce qu'il faut en mode texte seul (on reprend à "Le HTML n'a jamais été inventé" :wink: ), comme cette page. Aucune balise HTML, juste ce qu'il faut dans un monde où le web s'est développé sans HTML :wink:
Mais je comprends plus, juste avant tu m'as fais mettre des balises <h1>, <h2> ... donc maintenant je dois tout virer ???
calimo a écrit :Tu veux griller les étapes ! Tu as le doit, mais alors tu te débrouilles sans moi ;-)
Non non je ne veux pas ...
calimo a écrit :Donc fais-moi cette page, HTML interdit, et on en reparle demain. Je veux qu'elle ait tous les liens et tout le contenu que tu voudra dans la page finale ;-)
Mais je ne sais pas comment disposer le tout, j'ai fais mon menu, ma page mais concernant la bannière par exemple j'ai juste à mettre

Code : Tout sélectionner

<img border="0" src="images/arch_banniere.gif" width="800" height="93" alt="Accueil">
???
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Bon je t'accordes que je ne suis pas très pédagogue :lol:

Qu'est-ce que j'essaye de te faire comprendre ? Qu'il est indispensable de partir sur de bonnes bases. Et je dois dire que je ne sais pas trop comment t'y prendre pour te l'expliquer :oops:

Je veux que tu ait un code HTML le plus propre possible... et tu ne me facilite pas la tâche (mais moi non plus...) :(

Pour moi ta page elle pourrait se résumer à ça :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>TreuZ Mod - News</title>
</head>

<body>
	<h1>News</h1>
	
	<!-- le menu -->

	<ul id="menu">
		<li><a href="/site/news.htm">News</a></li>
		<li><a href="/site/gallerie.htm">Gallerie</a></li>
		<li><a href="/site/wip.htm">Wip</a></li>
		<li><a href="/site/dl.htm">Downloads</a></li>
		<li><a href="/forum/">Forum</a></li>
		<li><a href="/site/links.htm">Links</a></li>
		<li><a href="/site/contact.htm">Contact</a></li>
	</ul>
	
	<!-- le contenu à proprement parler -->
	<p>Voici les dernières news concernant le site, les projets, c'est ici que vous retrouverez toute l'actualité en quelques coups d'&oelig;il</p>

	<h2>Concours ouvert à tous : la NUIT MAX !!!</h2>

	<p class="sous-titre">Posté le 20 novembre 2004 à 23h00 par Pierre</p>
	<p>La nuit MAX mais kekoiça ? Durant toute la nuit de 21h30 à 8h30 demain matin, pleins d'amateurs vont s'affronter pour remporter ce concours qui se déroule en une nuit et dont le but est de créer la plus belle image possible avec un logiciel d'infographie 3D. C'est un concours pour avant tout se faire plaisir, le but n'étant pas de gagner quelque chose (de toute manière il n'y a rien à gagner !).</p>
	<p>Le thème est tombé à 21h30 précise mais il est encore temps de commencer, le voici : "Illustrer un film ou dessin animé de votre choix avec pour seule contrainte d'être reconnaissable sans en indiquer le titre".</p>
	<p>Bonne chance à tous ceux qui souhaitent participer au concours, pour vous inscrire rendez-vous à l'adresse suivant : <a href="http://nuitmax.3dvf.net/">http://nuitmax.3dvf.net/</a>, prenez bien le temps de lire le <a href="http://nuitmax.3dvf.net/page_reglement/reglement.php">réglement</a> au risque sinon de vous faire disqualifier ...Le site propose aussi les meilleurs créations des précédentes éditions, vous pouvez toujours y jeter un coup d'&oelig;il, certaines créations sont vraiment époustouflantes !</p>

	<h2>Ouverture officiel du site des créations de TreuZ !</h2>
	<p class="sous-titre">Posté le 26 octobre 2004 à 00h00 par Pierre</p>
	<p>Voilà c'est officiel, c'est l'ouverture du site de TreuZ qui a pour but de présenter ses créations, ses projets en cours et d'autres choses que vous pourrez découvrir :-D</p>
	<p>Pour le moment tout n'est pas encore référencé, par la suite viendront les images des autres projets 3D terminés (armes et voitures), et un enrichissement des commentaires sur les wip, il y a tout de même la base, après c'est l'évolution...</p>
	<p>Bonne visite sur ce nouveau site et pensez à laisser vos commentaires sur les réalisations et aussi sur le site à l'aide de <a href="/forum/">forum</a>, au passage merci à la communauté <a href="http://www.phpbb.com/">phpBB</a> pour la travail qu'elle fournie pour produire des forums de qualité :)</p>

	<p>Vous retrouvez pleins de projets et d'images sur les différentes pages du site, voici par exemple l'avancement d'un personnage en 3D "KIRO" réalisé avec 3dsMax : <img border="0" src="/site/images/wip/3d/kiro_1_small.jpg" alt="Kiro" width="127" height="150"> <a href="/">http://treuzmod.free.fr/</a></p>
</body>

</html>
Est-ce que tu vois ce que je veux dire ?
Là tu as un code HTML simple, plus ou moins propre, et à partir de ça on va pouvoir appliquer des styles CSS :wink:

Tu me suis toujours ? On peut y aller ?
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité