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

Cherche aide pour creer une page avec css ...

Message par PierreFox »

Calimo a écrit :@PierreFox : tu as tellement peur de créer un nouveau sujet ? Clin d'oeil Parce que c'est suffisemment vaste comme domaine pour en mériter un Cool
Voilà ca arrive ... je voudrais recreer un site que j'ai réaliser avec des tableaux pour la présentation http://treuzmod.free.fr/ en y mettant des css !

J'ai lu quelques guides sur le net mais rien à faire je ne comprends vraiment pas comment cela fonctionne, si quelqu'un pourrait m'aider merci :-D
Avatar de l’utilisateur
bambi
Iguane
Messages : 601
Inscription : 17 sept. 2003, 12:29

Message par bambi »

T'aider parait difficile comme ça.
Il faut lire et encore lire les différents tutos dispo, tu finiras pas comprendre si tu as été capable de faire un premier site.

Je t 'invite à lire le forum d' Alsa Créations, en particulier cette liste.

Mais tu peux parcourir tout le forum ainsi que les tuto (en haut du site) en plus de ceux de cette liste.

Bon courage :wink:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

Ok merci je vais regarder cela ... peut-être que je vais un peu mieux comprendre ... j'espère


Mais par exemple si je prend le début du code de ma page :

Code : Tout sélectionner

<body bgcolor="#99999B">
<div align="center">
  <center>
<table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr>
    <td colspan="4" width="800" height="93"><a name="haut"><img border="0" src="images/arch_banniere.gif" width="800" height="93" alt="Accueil"></a></td>
  </tr>

  <tr>
    <td width="195" height="58" valign="top"><a href="news.htm" onMouseOver="ChangeMessage('News','ejs_texte')" onMouseOut="ChangeMessage('News','ejs_texte')"><img border="0" src="images/arch_menu_news.gif" width="195" height="58" alt="News"></a></td>
quelqu'un pourrait-il me donner un exemple de ce que ca peut donner en css pour que je puisse observer et comprendre, et surtout savoir ce qu'on met dans le css et ce qu'on met dans le htm c'est là mon pb :s
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

voir aussi Openweb :
http://openweb.eu.org/

éventuellement, choisir un CMS qui soit valide XHTML et CSS
(comme Dotclear par exemple qui n'est pas réellement mais un CMS ...)
ça peut aider à comprendre aussi !
:wink:

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
Avatar de l’utilisateur
bambi
Iguane
Messages : 601
Inscription : 17 sept. 2003, 12:29

Message par bambi »

Openweb est bien evidemment dans la liste d'alsa créations.

Lis aussi les tutos :arrow: http://www.alsacreations.com/articles/ si tu veux voir des exemples de mise en page et les codes associés.
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

Ok je commence tout doucement donc la bannière en haut j'ai mis dans le html :

Code : Tout sélectionner

<body bgcolor="#99999B">
<div class="entete"></div>
</body>
et dans le css :

Code : Tout sélectionner

style type="text/css">
<!--
html, body {
	margin:0;
	padding:0;
  	widht: 800px;
}
.entete {
	background-image: url('images/arch_banniere.gif');
	widht: 800px;
	height: 93px;
}
-->
</style>
et déjà j'ai un problème, l'image de bannière se repète en largeur ... je ne la veut qu'une seule fois !
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Prenons donc ce début de la page http://treuzmod.free.fr/site/news.htm

Qu'y a-t-il comme contenu important ? Il y a une image "Accueil" et une image "News". Et ? C'est tout !

Donc en premier, le but va être de baliser ce code en HTML de manière à lui donner un sens. Il faut bannir tout ce qui n'est pas important d'un point de vue de la sémantique de la page.

Ainsi ce début de la page donnerait :

Code : Tout sélectionner

<body>
<h1>Accueil</h1>
<p>News</p>
Rien de plus. Ce n'est pas nécessaire.

Il faut donc tout reprendre depuis 0. C'est le plus simple. Si tu ne le fais pas tu regrettera de ne pas l'avoir fait une fois pour toutes, et tu prendra encore plus de temps à "boucher les trous" après :wink:

Ça demande un sacré courage pour tout reprendre.
Je ne peux que te conseiller ce tutorial HTML. C'est le seul valable que je connaisse.
Tu va y aller lentement, point par point. Il explique clairement toutes les balises à savoir. Et il n'y en a pas beaucoup.

C'est très important de commencer par le HTML. Si tu commences direct à mettre en forme par CSS, tu courres vers les ennuis, parce qu'après tu voudra modifier ton code HTML et tout sera fichu en l'air. :|

Bref, au commencement est le HTML et son sens. C'est lui qui détermine ce qu'il y a dans la page.
Ensuite une fois que c'est fait, que la page est correctement balisée, alors là on peut passer aux CSS, et c'est là que les choses se corsent :? Mais c'est une autre histoire (même si je sais que tu piaffes d'impatience :wink: ), chaque chose en son temps :D
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :Prenons donc ce début de la page http://treuzmod.free.fr/site/news.htm

Qu'y a-t-il comme contenu important ? Il y a une image "Accueil" et une image "News". Et ? C'est tout !
Comprends pas ... tu voudrais que je fasse une page avec juste le milieu de la page sans le menu et tout et ensuite faire le css pour le tout c'est cela ?

Et je ne comprend pas trop ce que tu appelle les images Accueil et News (désolé...)


J'ai isoler dans un fichier ce qui concerne uniquement les news ex :

Code : Tout sélectionner

<body bgcolor="#99999B">
<div align="center">
  <center>
      <p align="center"><font face="Verdana" color="#FFFFFF" size="2">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 ;-)</font></p>
      <p align="center">&nbsp;</p>
      <table border="0" cellspacing="1" width="570" cellpadding="2">
        <tr>
          <td bgcolor="#666668" height="18"><font size="2" face="Verdana" color="#FFFFFF">Concours
            ouvert à tous : la NUIT MAX !!!</font></td>
        </tr>
        <tr>
          <td bgcolor="#818183" height="17"><font face="Verdana" color="#FFFFFF" size="1">Posté
            le 20 novembre 2004 à 23h00 par Pierre</font></td>
        </tr>
      <tr>
        <td bgcolor="#8E8E91" height="18">
          <p align="justify"><font face="Verdana" size="2" color="#FFFFFF">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 !
          </font></p>
        </td>
      </tr>
    </table>
      <p align="center">&nbsp;</p>
      <table border="0" cellspacing="1" width="570" cellpadding="2">
        <tr>
          <td bgcolor="#666668" height="18"><font size="2" face="Verdana" color="#FFFFFF">Ouverture
            officiel du site des créations de TreuZ !</font></td>
        </tr>
        <tr>
          <td bgcolor="#818183" height="17"><font face="Verdana" color="#FFFFFF" size="1">Posté
            le 26 octobre 2004 à 00h00 par Pierre</font></td>
        </tr>
      <tr>
        <td bgcolor="#8E8E91" height="20">
          <p align="justify"><font face="Verdana" size="2" color="#FFFFFF">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>
          </font></p>
          <p align="center"><font face="Verdana" size="2" color="#FFFFFF"><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"><font face="Verdana" size="2" color="#FFFFFF">http://treuzmod.free.fr/</font></a></td>
      </tr>
</body>
</html>
donc là j'ai bien mon html non ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

PierreFox a écrit :Comprends pas ... tu voudrais que je fasse une page avec juste le milieu de la page sans le menu et tout et ensuite faire le css pour le tout c'est cela ?
La page peut contenir le menu. Simplement elle ne doit rien contenir de mise en page.

Le menu fait partie du contenu. C'est même un élément très important :wink: Il est souvent présenté sous forme de liste, mais ça c'est déjà une autre histoire :roll:

Bref, le but est d'avoir une page minimale, avec uniquement ce qui est strictement nécessaire. Rien d'autres.

Ensuite on peut se mettre à la mise en page.
Probablement qu'il faudra modifier quelques trucs du code HTML, rajouter un ou deux <div> qui seront bien utiles pour la mise en forme... mais dans l'idéal ça ne devrait pas être nécessaire.
PierreFox a écrit :Et je ne comprend pas trop ce que tu appelle les images Accueil et News (désolé...)
Dans le code que tu as présenté, tu as une image appelée "Accueil" et une autre appelée "news".

Mais fais comme si je n'avais rien dis et code une page comme tu pense que la page actuelle pourrait être si elle était simplifiée au maximum. Même contenu, mais juste le contenu :wink:

EDIT : oui c'est bien du HTML mais il y a pleins de trucs qui ne servent à rien :wink:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

calimo a écrit :EDIT : oui c'est bien du HTML mais il y a pleins de trucs qui ne servent à rien :wink:
Oui un peu logique je m'étais aidé de frontpage car avec ma présentation en tableau c'était trop galère au bloc note

Est-ce que c'est mieux comme ceci :

Code : Tout sélectionner

<body bgcolor="#99999B">
  <center>
      <p align="center"><font face="Verdana" color="#FFFFFF" size="2">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 ;-)</font></p>
      <p align="center">&nbsp;</p>
      <table border="0" cellspacing="1" width="570" cellpadding="2">
        <tr>
          <td bgcolor="#666668" height="18"><font size="2" face="Verdana" color="#FFFFFF">Concours ouvert à tous : la NUIT MAX !!!</font></td>
        </tr>
        <tr>
          <td bgcolor="#818183" height="17"><font face="Verdana" color="#FFFFFF" size="1">Posté le 20 novembre 2004 à 23h00 par Pierre</font></td>
        </tr>
      <tr>
        <td bgcolor="#8E8E91" height="18">
          <p align="justify"><font face="Verdana" size="2" color="#FFFFFF">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 !</font></p>
        </td>
      </tr>
    </table>
      <p align="center">&nbsp;</p>
      <table border="0" cellspacing="1" width="570" cellpadding="2">
        <tr>
          <td bgcolor="#666668" height="18"><font size="2" face="Verdana" color="#FFFFFF">Ouverture officiel du site des créations de TreuZ !</font></td>
        </tr>
        <tr>
          <td bgcolor="#818183" height="17"><font face="Verdana" color="#FFFFFF" size="1">Posté le 26 octobre 2004 à 00h00 par Pierre</font></td>
        </tr>
      <tr>
        <td bgcolor="#8E8E91" height="20">
          <p align="justify"><font face="Verdana" size="2" color="#FFFFFF">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></font></p><p align="center"><font face="Verdana" size="2" color="#FFFFFF"><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"><font face="Verdana" size="2" color="#FFFFFF">http://treuzmod.free.fr/</font></a></td>
      </tr>
</body>
</html>
Je veux bien virer d'autres trucs s'ils ne servent à rien mais je veux quand même garder en lisibilité !


Edit : dans le bloc note certains trucs apparaissent sur une seule grande ligne pas comme ici !
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Non !

Oublie tout ce que tu as fait jusqu'à maintenant. Repart de 0 (zéro, nada, que d'alle) en t'aidant de http://www.tuteurs.ens.fr/internet/web/html/

Reprend juste le texte. Oublie toutes les balises HTML que tu as déjà dans le code :wink:

Comme je l'ai dit tu peux conserver le menu :wink:

Code : Tout sélectionner

<body>
<h1>Accueil</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>
<p>Posté le 20 novembre 2004 à 23h00 par Pierre</p>
Etc.
:wink:

PS : tu y gagnera beaucoup en lisibilité une fois que tu auras tout viré ! Et n'oublie pas : la mise en page viens après !!! :wink:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

Ah donc ces fameux h1, h2 etcetc ce sera les différentes polices que je mettrais dans le css c'est bien cela ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Non !!! :lol:
Ce seront des balises qui définiront les différents titres et sous-titres de ta page :wink:
Il se trouve qu'en effet ils se manifestent visuellement par différentes tailles de police. Mais c'est absolument et extrêmement secondaire. Tu dois les voir comme "titre de premier niveau", "titre de second niveau", etc :wink:

Là CSS ça viendra après :wink: :lol:
PierreFox
Iguane
Messages : 501
Inscription : 28 sept. 2004, 21:54

Message par PierreFox »

ok par contre j'ai la même police pour "Voici les dernières news concernant le site, les projets, ..." et "c'est officiel, c'est l'ouverture du site..." par exemple est-ce que je met devant ces deux texte h1 ou je met des hx différent ?

Même question entre le "Posté le 20 novembre 2004 à 23h00 par Pierre" et le "Posté le 26 octobre 2004 à 00h00 par Pierre" dsl pour toutes les questions mais une fois que tout sera clair je pourrais bien me lancer :-D
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Tu ne dois pas réfléchir en terme de police (c'est surement Sarkozy qui te fais peur mais il est parti maintenant tu peux oublier la police :lol: Désolé pour ce hors sujet à 5 centimes :oops: )
Je disais donc : tu ne dois pas réfléchir en terme de police, mais de hiérarchie.

Est-ce que "Voici les dernières news concernant le site, les projets" Est un titre ?
Et "c'est officiel, c'est l'ouverture du site"... c'est un titre ? C'est à toi de voir si ce sont des titres.

Si oui, un titre de premier niveau, ou de second niveau ?
On peut voir ça du style :

Code : Tout sélectionner

Titre niveau 1
 |-----titre niveau 2
 |-----titre niveau 2
          |-----titre niveau 3
          |-----titre niveau 3
 |-----titre niveau 2
Titre niveau 1
Bon c'est assez mal fait, mais tu dois bien voir le rapport titre / sous-titre / sous-sous-titre, etc.

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 ?
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités