aide choix cms svp urgent!

aide choix cms svp urgent! - HTML/CSS - Programmation

Marsh Posté le 03-05-2011 à 12:14:44    

Bonjour,
 
désolé, je ne sais pas si je suis à la bonne rubrique.
 
Je viens d'acheter un nom de domaine et un hébergement chez un E-clicking.fr.
 
Je désire créer un site qui ressemblera, dans un premier temps, à ça:
 
http://www.2dhero.com/
 
une seule page + images statiques + textes.
 
puis, dans un moyen terme, je souhaite qu'il ressemble à ça:
 
http://babyloniantwins.com/
 
Ajout d'une ou deux pages + une vidéo Youtube + Icone de lien facebook, twiter, appstore etc
 
Quel cms me conseillez vous, sachant que je n'ai aucune compétence en programmation.
 
on me demande aussi dans les tutos de "Créez une base de donnée pour wordpress sur votre serveur web"
 
comment fait on svp ?
 
un grand merci.

Reply

Marsh Posté le 03-05-2011 à 12:14:44   

Reply

Marsh Posté le 03-05-2011 à 16:29:26    

Citation :

Quel cms me conseillez vous, sachant que je n'ai aucune compétence en programmation.

 

Je te conseille le fameux CMS JeTrouveQq1PourMeLeFaire,
ou alors, il n'est pas mal non plus : JArreteDeCroireAuPereNoelEtJapprendsAuMoinsLesBases

 

Dans les deux cas tu trouveras facilement en commençant par google :-)

 

PS : le premier est livré d'office avec le plugin RienNEstGratuit :whistle:


Message édité par vanish le 03-05-2011 à 16:31:11
Reply

Marsh Posté le 03-05-2011 à 19:13:50    

Sinon, il y a des adultes dans la place ?
 
Si j'ai commis une erreur, dites le moi, je suis grand garçon, je sais reconnaitre qand je foire.
 
pas besoin de me sortir des vannes du niveau cours préparatoire.  
 
j'ai pas de temps à perdre.

Reply

Marsh Posté le 04-05-2011 à 00:27:03    

Citation :

Si j'ai commis une erreur, dites le moi, je suis grand garçon, je sais reconnaitre qand je foire.

 

Je te l'ai dit, plutôt clairement, même si sous forme d'humour assez légé je l'avoue.

 


Bref il n'y a pas de CMS magique qui fait tout pour toi en lui balançant un joli psd photoshop :D
Ou bien tu apprends les bases du html/css et, celle du php ou du language développé par le cms en question (le php a l'avantage de servir a autre chose lol).
Ou bien tu fais faire ton site.

 


Pour finir qaund on balanbce un truc comme

Citation :

on me demande aussi dans les tutos de "Créez une base de donnée pour wordpress sur votre serveur web"

 

comment fait on svp ?

il ne faut pas s'étonner de se prendre des vannes, espérer monter un site en ne sachant même pas se servir de google c'est moyen.

 


Voilà la version sans humour, tu préféres ? :)
Maintenant si demain tu viens avec tes essais (cqfd: si tu commences par essayer de le faire) et des questions precises sur des points ou tu bloques je serais ravis de t'aider.

  


Message édité par vanish le 04-05-2011 à 00:35:44
Reply

Marsh Posté le 04-05-2011 à 10:08:01    

Merci, c'est moins... humiliant. ;)
 
Et puis ça tombe bien ton message, je reviens de ma librairie d'occaz d'où je viens d'acheter ce livre:
http://www.amazon.fr/MySQL-pour-Nu [...] 517&sr=1-3
 
en aurais-tu un autre à me conseiller s'il te plait ? au format poche si possible.
 
Et puis j'ai cherché sur google, mal peut-être, mais j'ai cherché "Créez une base de donnée pour wordpress" mais je n'ai rien trouvé qui me soit accessible.
 
 
dernière question: une page comme celle là http://www.2dhero.com/  
avec seulement 3 petite photos et quatre lignes de texte ça peut se faire en combien de temps ?
 
merci de ton aide.

Reply

Marsh Posté le 04-05-2011 à 10:24:04    

Re,

 

une page comme ça se fait en environ 5 minutes, sans cms ;).

 

Je me sers rarement de bouquins, je prends plutot mes infos en ligne en général.

 

Tiens voilà un excellent tuto (et ce site en regorge n'hésite pas à explorer, la aprtie "Site Web" du menu à gauche) pr apprendre les bases du html/css. Rien qu'avec ça tu pourras faire un site de ce genre, et même bien plus évolué graphiquement.
http://www.siteduzero.com/tutoriel [...] e-web.html

 

Pour php/mysql (car en général pour un site on gére mysql grâce à php), c'est utile surtout pour enregistrer des données autre que le contenu statique de ton site. Donc dans un premier temps ce n'est peut etre pas la peine.
Sinon donc tjrs sur le même site (j'veux pas donner l'impression de travailler pour eux mais quand il s'agit de partir de zéro pr apprendre un langage info on y rouve en général son bonheur)
http://www.siteduzero.com/tutoriel [...] mysql.html

 


Pour la plupart des cms, pour de simples retouches de themes deja existant, tu pourras t'en sortir dès que tu maitrisera un peu le CSS, vu qu'en général il suffit de modifier un peu ceux-ci.

 


Pour la base de donnée (db - database), dès que tu aura suivit un peu le tuto au dessus... bin il n,'y aura plus rien a comrpendre, une db se créer en 3 cliques, et ensuite c'est le script d'installation du CMS qui gére tout.

 


Message édité par vanish le 04-05-2011 à 10:31:38
Reply

Marsh Posté le 04-05-2011 à 10:27:36    

Salut,

 

Franchement si tu veux faire comme sur ce site http://www.2dhero.com/ prends quelques heures pour apprendre le html/css.

 

Il y a pleins de tutos sur le web pour t'aider. Et pour créer une page avec un peu de texte et quelques photos c'est très rapide et facile d'accès pour quelqu'un qui n'a jamais codé.

 

Après lorsque tu voudra passer à un CMS ce que tu aura appris te servira.

 

Edit: Grillé mais +1 pour le site du zéro.


Message édité par egege le 04-05-2011 à 10:28:37
Reply

Marsh Posté le 04-05-2011 à 10:28:37    

merci je m'en vais de suite voir tout ça.
 
A+

Reply

Marsh Posté le 04-05-2011 à 15:24:24    

Par rapport à ta question sur "on me demande aussi dans les tutos de "Créez une base de donnée pour wordpress sur votre serveur web" : WordPress est un CMS de type "blog". Donc faut aller dans PhpMyadmin (si t'as pris un hébergeur avec mysql + php, tu l'auras probablement) et tu crées juste une BD vide. Durant l'instal de wordpress, faudra juste lui donner le nom de cette BD + login et mdp.
 
Pour info, des CMS comme Wordpress, DotClear, SPIP, Joomla... ont pleins de plugins et souvent des thèmes (chartes graphiques) disponibles gratuitement. Donc, oui, on peut trouver des CMS tous faits avec une charte graphique pas trop mal dès lors qu'on n'est pas trop exigent...
 
Comme autre type de CMS, t'as les wiki comme Mediawiki (utilisé par wikipedia). Ca peut permettre de se faire facilement un site web ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 04-05-2011 à 16:35:13    

Franchement, l'idéal pour quelqu'un qui ne connaît pas le web reste l'utilisation d'un outil WYSIWYG.
En libre il y a Bluegriffon par exemple ...

Reply

Marsh Posté le 04-05-2011 à 16:35:13   

Reply

Marsh Posté le 04-05-2011 à 16:48:49    

Surtout pas le wysiwyg!  :o C'est le meilleur moyen pour le voir se repointer ici et dire : voilà mon code, je comprend pas pourquoi ça s'affiche pas pareil entre IE, FF et autres navigateurs :/ Et là, t'as un code imbitable, impossible de l'aider.
 
Au moins, la plupart des CMS modernes respectent les normes du W3C + la séparation xhtml/css. Donc soit il prend un cms tout fait avec une charte graphique toute faite, soit il passe qq heures sur le site du zéro ou alsacreations et il fait tout tout seul ;)


Message édité par rufo le 04-05-2011 à 16:48:56

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 04-05-2011 à 17:10:40    

Mon métier est de développer des applications, dont une bonne partie en web.
Je n'utilise pas de wysiwyg, parce que je sais faire du HTML.
 
Toi aussi ? tant mieux.
 
Mais pas Zekast. Il veut une solution rapide pour faire une page web simple. BlueGriffon lui donnera un code correct rapidement.
Il ne demande pas des tutos HTML, il demande comment faire son site statique.

Reply

Marsh Posté le 04-05-2011 à 17:35:43    

Je disais ça parce que c'est du vécu/vu sur ce forum :/ Dreamweaver dans les mains d'un débutant, ça lui faire croire le temps de la conception de son site en local sur son PC que ça marche et une fois mis en ligne, ah ben ça marche pas :(
 
Pour moi, le wysiwyg, ça se situe entre le cms tout fait avec la charte trouvée gratis sur un site et la création from scratch du site à l'aide de tutos. Il fait son site sans vraiment le faire, du coup, il maîtrise rien et si y'a le moindre pb, il est mal car le code est généralement bien moisi...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 04-05-2011 à 17:46:56    

rufo a écrit :

Je disais ça parce que c'est du vécu/vu sur ce forum :/ Dreamweaver dans les mains d'un débutant, ça lui faire croire le temps de la conception de son site en local sur son PC que ça marche et une fois mis en ligne, ah ben ça marche pas :(

 

Pour moi, le wysiwyg, ça se situe entre le cms tout fait avec la charte trouvée gratis sur un site et la création from scratch du site à l'aide de tutos. Il fait son site sans vraiment le faire, du coup, il maîtrise rien et si y'a le moindre pb, il est mal car le code est généralement bien moisi...


Le code est pas toujours si moisi que ça (pas pire que ce que font certains de mes collègues ...)
Tout dépend du temps qu'il veut y passer. Mais dans son cas, il vaut mieux utiliser un éditeur wysiwyg que se prendre la tête à configurer un CMS pour servir du contenu statique ...

 

Exemple de code géneré à la va-vite avec le wizard (j'ai viré le CSS qui était trop long):

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.    <title>azer</title>
  5. <style type="text/css">/* [...] */</style><meta name="author" content="..." /><meta name="generator" content="BlueGriffon wysiwyg editor" /></head>
  6. <body><div id="doc2" class="yui-t1">
  7. <div id="hd">
  8. <h1>PAGE HEADER</h1></div>
  9. <div id="bd">
  10. <div xmlns="http://www.w3.org/1999/xhtml" id="yui-main">
  11. <div class="yui-b">
  12. <div xmlns="http://www.w3.org/1999/xhtml" class="yui-g">
  13. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div>
  14. <div xmlns="http://www.w3.org/1999/xhtml" class="yui-gc">
  15. <div class="yui-u first">
  16. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div>
  17. <div class="yui-u">
  18. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div></div>
  19. <div xmlns="http://www.w3.org/1999/xhtml" class="yui-gf">
  20. <div class="yui-u first">
  21. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div>
  22. <div class="yui-u">
  23. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div></div>
  24. <div class="yui-g">
  25. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p></div></div></div>
  26. <div class="yui-b">NAVIGATION PANE</div></div>
  27. <div id="ft">
  28. <p>FOOTER</p></div></div></body>
  29. </html>
 

Je ne trouve pas ça moisi ...


Message édité par Paulp le 04-05-2011 à 17:47:33
Reply

Marsh Posté le 04-05-2011 à 18:04:59    

Y'a des xmlns partout parfaitement inutiles, des class qui doivent probablement pas servir, le css qui est dans le code au lieu d'un fichier css, le doctype qui m'a l'air douteux vu sa forme :/
 
Tout ces trucs en trop, ça bouffe de la bande-passante pour rien et complexifie le code inutilement.
 
Pour info, un cms comme SPIP, DotClear ou Wordpress s'installe en moins de 5 minutes :/ En plus, pour Wordpress, t'as carrément dans l'ihm d'admin un moteur de recherche de plugins/extension et qui te le télécharge et l'installe tout seul, juste en cliquant sur un bouton. difficile de faire plus simple ;) Par ailleurs, Wordpress permet de faire des pages statiques en plus de faire des billets...


Message édité par rufo le 04-05-2011 à 18:05:30

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-05-2011 à 09:33:20    

merci pour ce débat rufo et paulp vos avis perso m'aideront surement dans mes futurs choix ;)
 
mais pour l'instant, je vais m'en tenir au conseil de vanish et egege: je continu à bosser les cours xhtml et css du site zero qui sont pour l'instant très facile d'accès pour moi.
 
A+

Reply

Marsh Posté le 05-05-2011 à 10:17:28    

zekast a écrit :

merci pour ce débat rufo et paulp vos avis perso m'aideront surement dans mes futurs choix ;)
 
mais pour l'instant, je vais m'en tenir au conseil de vanish et egege: je continu à bosser les cours xhtml et css du site zero qui sont pour l'instant très facile d'accès pour moi.
 
A+


 
Donc tu vas dans le sens de l'une de mes 2 propositions : apprendre par toi-même. Je ne peux que te féliciter pour ta démarche volontaire ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-05-2011 à 11:53:10    

zekast a écrit :

merci pour ce débat rufo et paulp vos avis perso m'aideront surement dans mes futurs choix ;)
 
mais pour l'instant, je vais m'en tenir au conseil de vanish et egege: je continu à bosser les cours xhtml et css du site zero qui sont pour l'instant très facile d'accès pour moi.
 
A+


Le débat continue en MP :)
 
Tu n'as pas choisi la solution de facilité, bravo !

Reply

Marsh Posté le 05-05-2011 à 16:00:40    

Noemie, faire la pub pour ta propre boîte sans dire que t'en fait partie, c'est franchement limite :/ On pourrait considérer ça comme du spam et c'est pas très apprécié sur ce forum.
 
par ailleurs, zekast a bien dit dans son dernier post qu'il avait choisi d'apprendre le html.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-05-2011 à 18:35:02    

Bon salut à tous j'ai besoin d'un petit coup de main svp.
 
voilà, j' étais en train de construire mon site (sur mon disque encore) grâce au cours quelques ligne de code en html, puis un peu de css le site commencait à ressembler à un site et puis d'un coup j'ai du enlever un truc, ça ne marche plus: il n'y a plus la couleur de fond, le peu de texte ne se centre plus... j'ai regardé et re-regardé, mais je ne vois pas ce qui cloche.
 
merci


Message édité par zekast le 05-05-2011 à 18:36:47
Reply

Marsh Posté le 05-05-2011 à 21:16:10    

c'est même carément du spam --> msg supprimé :O


---------------
ma vie, mon oeuvre - HomePlayer
Reply

Marsh Posté le 05-05-2011 à 22:46:00    

bon j'y vais de mes essais de débutant:
 
j'aimerais savoir pourquoi mon n'est pas noir et le texte centré svp merci.  
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <title>Prince of Europa platformer game coming soon for iphone</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. </head>
  7. <body>
  8. <h1>www.princeofEuropa.com</h1>
  9. <img src="images/Logotrans.png" alt="logo prince of europa"/>
  10. <p>
  11. New 2D platformer game<br/>
  12. Coming soon for iphone
  13. <h5>©Prince of Europa team project 2011</h5>
  14. </p>
  15. </body>
  16. </html>


 

Code :
  1. /*
  2. essai.css
  3. ---------
  4.  
  5. */
  6. body
  7. {
  8.    background-color: black;
  9.    color: white;
  10. }
  11. h1
  12. {
  13.    font-size: xx-large;
  14.    font-family: impact;
  15.    text-align: center;
  16.  
  17. }
  18. p
  19. {
  20.    font-size: medium;
  21.    font-family: impact;
  22.    text-align: center;
  23. }
  24. h5
  25. {
  26. font-family: impact;
  27. text-align: center;
  28. }

Reply

Marsh Posté le 05-05-2011 à 23:29:18    

Dans le head, t'as oublié de mettre une balise <link rel="stylesheet" type="text/css" href="essai.css" media="screen"/>
 
Pour info, une balise <hx> (x allant de 1 à 6) ne se met pas dans une balise <p> ;)
 
Vas sur alsacreations.com comme site, y'a de très bons tutos sur xhtml et css ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-05-2011 à 23:41:52    

merci, je savais que j'avais enlevé une ligne par mégarde mais je n'arrivais pas à trouvé laquelle.
 
je suis les tutos du zero, mais j'irais faire un tour alsacréation  
 
"Pour info, une balise <hx> (x allant de 1 à 6) ne se met pas dans une balise <p> ;) "
 
oui tout à fait, je sais pas pourquoi je l'ai laissé là

Reply

Marsh Posté le 06-05-2011 à 10:31:06    

+1 pour alsacreations, une mine d'or, particulièrement pr le css

Reply

Marsh Posté le 06-05-2011 à 10:58:10    

attends vanish revient un p'tit coup stp
 
voilà j'essaye d'afficher "un bas de page" (un copyright) j'ai trouvé un exemple mais il persiste à rester en haut de la page
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="essai2.css" media="screen"/>
  5. <title>Prince of Europa 2d platformer game coming soon for iphone</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  8. <body>
  9. <div id="contenu">
  10. <img src="images/Logotrans.png" alt="logo prince of europa" width="224" height="96"/>
  11. </div>
  12. <div id="pied_de_page">
  13. <p>©Prince of Europa team project 2011</p>
  14. </div>
  15. <p>
  16. 2D platformer game<br/>
  17. Coming soon for iphone<br/>
  18. prochainement sur Iphone
  19. </p>
  20. </body>
  21. </html>


 

Code :
  1. body /* On travaille sur la balise body, donc sur TOUTE la page */
  2. {
  3.    Background-Color: black;
  4.    color: RGB(229,185,71);
  5. }
  6. #contenu{
  7.  position:absolute;
  8.  left: 50%;
  9.      top: 50%;
  10.      margin-top: -110px;
  11.      margin-left: -110px;
  12. }
  13. #pied_de_page
  14.  {
  15. padding: 5px;
  16. text-align: center;
  17. background-color: #626262;
  18. background-repeat: repeat-x;
  19. border: 2px solid black;
  20.  }
  21. p
  22. {
  23.    font-size: medium;
  24.    font-family: georgia;
  25.    text-align: center;
  26. }

Reply

Marsh Posté le 06-05-2011 à 11:06:25    

Salut,

 

ton "contenu" étant en display: absolute, il sort du "flux" normal, il n'influence plus et n'est plus influencé par les elements qui l'entoure pour son positionnement.

 

Donc "pied_de_page" se retrouve en premier.

 

En général on essaye d'éviter au maximum la position absolute : c'est plus lourd et ça s'adapte moins facilement aux différentes résolutions.


Message édité par vanish le 06-05-2011 à 11:06:54
Reply

Marsh Posté le 06-05-2011 à 11:14:24    

Une petite astuce : on peut mettre un style (une image de fond, par ex) sur la balise <html>.
Ex : si on veut une image de fond en haut différente de celle du bas, on met la première image en background de <body> et la 2ème en background de <html> ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 06-05-2011 à 14:10:52    

Un petit conseil en passant, je sais pas si tu connais l'extension Firebug (pour Firefox) mais elle est grandement utile quand tu veux comprendre ton affichage.
 
Elle te permet de modifier ton css en direct (mais ca ne s'enregistre pas dans ton fichier css).  
 

Reply

Marsh Posté le 06-05-2011 à 14:41:42    

+1 pour firebug ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 06-05-2011 à 14:53:39    

Uaip juste indispensable :)

 

A noter que Chrome intégre nativement un équivalent (je ne l'ai pas testé en profondeur mais ça a l'air pas mal).
IE depuis 7 également, même si un peu pourri c'est mieux que rien.


Message édité par vanish le 06-05-2011 à 14:53:50
Reply

Marsh Posté le 07-05-2011 à 15:41:14    

je reviens pour vous dire que, ça y est mon site est en ligne, enfin je veux dire ma page, pour l'instant, merci à vous tous pour votre aide et de m'avoir dirigé vers le site du zero et son forum.
 
mon petit site http://www.princeofeuropa.com/ qui deviendra grand ;)

Reply

Marsh Posté le 09-05-2011 à 10:49:29    

Petite détail : si une classe a un nom qui ne servira qu'une fois de par sa nature (ex : le pied de page), nomme la balise avec l'attribut id plutôt que class. Dans le css, tu remplaces p.NomDeMaClass par #NomID


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed