[VOTRE AVIS/AIDE] Mon site sur les freewares

Question

Bonjour,

J'ai créé un site web, et souhaiterait savoir ce que vous en pensez...

1.Pour le moment, seule l'interface graphique est en place ( pas le texte), pourriez vous me donner des idées, concernant le graphisme de ce site?

2.De plus, ce site portera sur les freewares, avez vous des logiciels gratuits, que vous trouvez indispensable, et dont il faudra que je parle sur mon site?

3. Le code source et les balises métas sont complètement bordéliques... pourriez vous me donner un coup de main?

L'adresse est : http://freewares.olympe-network.com/

Merci d'avance,
Thomas.

Gihef · Answer

Bonjour, Inutile de nous demander ça en gras (-; Sinon, d'accord. On y va ? Je vais surtout m'intéresser au point 3. de ton intervention. Ce qui gêne au premier abord un humble connaisseur comme moi, c'est de ne pas pouvoir voir la totalité de la page. Ensuite, c'est de trouver des choses mélangées dans le code. Tu sembles choisir d'utiliser les CSS et puis on trouve aussi du formatage en HTML. Par exemple.Style13 {color: #FF0000} et puis

et on continue

C'est compliqué. Essaye de t'en tenir à quelque chose de constant. Le choix des CSS semble être, si ça t'est possible, le bon choix. Le code de tes pages sera allégé, plus lisible. Elles seront plus facilement modifiables. Et puis, tant qu'à faire, regroupe tes styles dans ta feuille de styles. Ça simplifiera encore ta page. Mais nomme tes styles de façon descriptive. Pas de “.Style13” ou “.Style14”. Essaye de rédiger un code simplement correct. Tu peux tester ça ici (en anglais) (choisis “Group Error Messages by type”, c'est plus facile à lire). Entre autres, respecte la structure d'un document HTML. Ne ferme pas les balises n'importe où, place les éléments aux bons endroits (). N'hésite pas à indiquer un texte alternatif pour tes images Tu indiques “

” et tu places ça à gauche. Logiquement le pied de page est en bas, tout en bas de la page. Trouve un autre nom. Ou mets ça en bas. Ou utilise le modèle comme c'est prévu (-; Au sujet des menus, il est souvent possible d'utiliser des listes pour les fabriquer. Et “
”. Inutile.
suffit. Ne répète pas les choses inutilement Trouve autre chose que des espaces pour… espacer. Où est-ce que “sig.ish-lyon.cnrs.fr” indique ce que tu prétends ? Évite les espaces, accents dans les noms des fichiers, dossiers de ton site. En reprenant un peu ton code, on obtient ce début de résultat (avec bordures). Tu y remarqueras que tout n'apparaît pas et que le Menu semble occuper une place disproportionnée. Si on continue un peu, on obtient celui-là. J'y ai choisi des positionnement en absolute, mais on peut faire autrement. Ce n'est qu'un début, une piste sur laquelle tu peux éventuellement te diriger. À tester. --

mattdu29 · Answer

Bonjour, 

Merci beaucoup pour cette réponse... plus que complète!

Je vais, grâce à tes abondants conseils refaire le code de ma page; Je te tiens bien sur au courant!

mattdu29 · Answer

J'ai changé d'hébergeur... 

Voici mon site, refait bien proprement : http://freewares.kilu.de/  
J'ai décidé de ranger les différentes feuilles de styles dans un dossier nommé styles.css La feuille de style de l'accueil y est placée, et s'appelle stylesaccueil.css (http://freewares.kilu.de/styles.css/stylesaccueil.css)

Qu'en pense tu?

Gihef · Answer

Je pense que tu ne t'es pas foulé (-;

Tu as simplement Copié/Collé l'exemple que je te donnais.
Tu as juste adapté les liens et rétabli la map de gauche.
Mais tu n'as pas modifié les noms de tes fichiers. Les espaces y sont encore présents.
La bordure du menu du haut n'était là que pour matérialiser sa présence.

Est-on d'accord avec le fait que ce n'est qu'une piste ? À son début ?
Qu'il y a encore du travail ?

Des modifications dans ton fichier d'origine t'auraient certainement apporté plus.

--

mattdu29 · Answer

Bien sûr que cela n'est qu'une ébauche :-)
Je vais y retravailler d'ici ce soir! 

A bientôt ^^

mattdu29 · Answer

Un début on ne peut plus propre : http://freewares.olympe-network.com/essai.html

Qu'en pense tu?

Gihef · Answer

Un peu plus propre. Un assez bon début. Fais gaffe quand même à ton code (-; Referme les balises :

c'est bon. Mais :

dossiers ne ferme ni le ni le

… Et n'abuse pas des “auto” (-; À moins que tu aies fait ces choix avec un but précis (?) Je ne comprends pas l'intérêt d'avoir le menu de 200px de large… avec une largeur auto. Je regrette que tu n'aies pas placé tout de suite… la suite, le bloc qui sera à droite du menu et qui contiendra certainement les infos que tu veux donner. Tu peux tester différents gabarits chez Alsacreations. Et puis, j'insiste, un menu n'est pas vraiment une suite de paragraphes de texte. C'est plutôt un résumé (très résumé), une liste de propositions. Essaye tout de suite de te familiariser avec les listes. Ce n'est pas bien compliqué. Par exemple, ton menu (sans les images) :

C'est plus lisible, on voit mieux ce qui manque :

Bon, d'accord, ce n'est pas suffisant. On ne voit rien. Ça marche, mais on ne voit rien. Mais tu peux ensuite placer tes images en arrière plan par CSS. C'est là que ça se complique. Parce qu'il va falloir gérer chaque entrée du menu individuellement :

Ça fait du code CSS supplémentaire à gérer#menug2_li_a1 { background : transparent url(images/bouton-accueil.gif) left top no-repeat; } #menug2_li_a2 { background : transparent url(images/bouton-dossiers.gif) left top no-repeat; } #menug2_li_a3 { background : transparent url(images/bouton-liste.gif) left top no-repeat; } #menug2_li_a4 { background : transparent url(images/bouton-msn.gif) left top no-repeat; } #menug2_li_a5 { background : transparent url(images/bouton-divers.gif) left top no-repeat; } On peut adapter cette solution, la simplifier :

Il s'agit d'utiliser une seule image en arrière-plan des menus. On vient ensuite écrire par dessus dans les . Il faut bien-sûr choisir une police que tout le monde possède (J'ai ajouté des choses dont tu n'as pas forcément besoin) :#menug3 li a { background : transparent url(images/bouton.gif) left top no-repeat; color : #fff; font : bold 1.8em 'Trebuchet MS', Arial, sans-serif; text-transform : capitalize; letter-spacing : 1px; text-align : center; line-height : 56px; } Tu peux tester ça dans cet exemple. Comme je trouve difficile de gérer toute cette élasticité, j'ai ajouté cet exemple, à partir du 3e exemple de menu, qui centre simplement le contenu sur la page. Teste tout ça, modifie-le, adapte-le… --

mattdu29 · Answer

Bonjour, 
désolé d'avoir mis autant de tant à te répondre : )
J'étais parti en vacances... Sinon, après avoir réussi à obtenir un compte free, je me remets au boulot! Dis moi si c'est bon ; )

Ma nouvelle adresse : http://freeware.telecharger.free.fr/

Gihef · Answer

Je trouve ça excellent. Ça me rappelle quelque chose, mais je trouve ça excellent (-; Tu l'as testé avec IE ? J'espère que tu comprends ce qui est mis en œuvre. Par exemple, pourquoi avoir conservédiv#menu li a { display : block; width : 200px; height : 56px; background : transparent url(images/bouton.gif) left top no-repeat; color:#000099; font : bold 1.8em 'Trebuchet MS', Arial, sans-serif; text-transform : capitalize; letter-spacing : 1px; text-align : center; line-height : 56px; text-decoration : none; } div#menu li a#msn { text-transform : uppercase; } ? Et teste ça. Reprends mes paragraphe de faux texte, ou une autre grande quantité de texte, dans ton #contenu. Que se passe-t-il ? Il va falloir que tu gères le fait d'avoir limité sa hauteur à 600px. Comment-eviter-que-mes-elements-flottants… À moins que ce soit temporaire, pour l'exemple… ++ Des bricoles. Le choix que tu as fait du XHTML te contraint, théoriquement, à écrire tous les composants HTML en minuscule. Conserve cette manière de faire jusque dans la feuille de styles. Écris également les couleurs en minuscules. Tu peux aussi utiliser des raccourcis lorsque les groupes de valeurs sont identiques. Par exemple “#99FF33” (99 FF 33) peut s'écrire “#9f3”. Mais “#99f533” ne le pourrait pas. Et puis, essaye de conserver une indentation logique dans ta page.

ou

--

mattdu29 · Answer

Voilà! je pense que c'est pas mal! j'ai résolu tous les problèmes que tu évoquais!

J'ai mis mes tailles en % mais le problème est que, si je réduis trop la page, le div#contenu passe en dessous... 

comment faire pour pouvoir réduire ma page sans qu'il ne passe dessous mais plutôt qu'il diminue de taille?

En tous cas, merci pour ton aide!

just.1 · Answer

APS mlal le site est bien fait, moi aussi je fait un site,blog sous wordpress qui traite des logiciel indispensable(si possible gratuit) et aussi de la musique
http://justdream.servhome.org
Voilà 
a+

mattdu29 · Answer

ça ne résous pas le problème... En fait, en 800*600, le texte passe en dessous du menu, au lieu d'occuper moins de place

mattdu29 · Answer

http://zea.yoopix.org/1195940482/8422088/88/site.GIF

Gihef · Answer

Tout en jaune !
Tiens, on dirait que j'ai une amoureuse ici (-;

http://cjoint.com/data/lyx0TZzpUZ_v2-1.jpg
http://cjoint.com/data/lyx1wrkNv3_v2-2.jpg

--

mattdu29 · Answer

Fallait bien que je te remercie ^^

mattdu29 · Answer

J'y comprends plus rien... ça marche avec IE, sauf qu'au bout d'un moment ça ne rétrécie plus, et avec firefox, ça ne marche carrément pas...
Site:
http://freeware.telecharger.free.fr/
Style :
http://freeware.telecharger.free.fr/styles.css

just.1 · Answer

Normal IE et firefox sont très different et surtout IE ne respect pasles standart du web
mais a tu essayer de valider ton site? pour voir si il est conforme au règle du web
tien essaye sur ce site http://validator.w3.org/
Il suffit d'entrer ton adresse et de voir, ensuite il te mettrat ce qu'il ne va pas

Gihef · Answer

Notre échange contient toutes les solutions.
Du début à la fin.

Tu peux donc trouver le moyen de le faire.
Tu n'as pas fait les bonnes modifications dans la version de ton intervention #17.

Une piste.
#12 indique : “Comme dans ce gabarit où on trouve du absolute.”
Est-ce que tu y trouves du float ?

Vois où ta feuille de styles est différente. Dans le positionnement.
 
--

mattdu29 · Answer

Pfoooooooooouuuuuuu...
Après 4h de boulot (je sais, je suis pas doué ^^) Voici enfin une version qui m'a l'air pas mal... elle est en absolute, et se redimensionne complètement selon l'écran de l'utilisateur. Petit bug, par contre, le conteneur ne contient pas toutes les div si l'on redimensionne la page... comment y remédier?

Sinon, j'ai choisi d'exploiter tout l'écran, est ce une bonne idée?

Gihef · Answer

Bon, ben voilà de bonnes bases.

Le “height : 150%;”, ce n'est pas un peu trop ?

--

mattdu29 · Answer

En effet... mais comment faire pour que le conteneur s'adapte automatiquement au contenu?
Sinon, Pourquoi  

div#menu a:visited {
color : #000;
}

ne s'applique pas???

[VOTRE AVIS/AIDE] Mon site sur les freewares

21 réponses

Votre réponse

Discussions similaires

Newsletters