[VOTRE AVIS/AIDE] Mon site sur les freewares
mattdu29
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
mattdu29 Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
mattdu29 Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- [VOTRE AVIS/AIDE] Mon site sur les freewares
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
21 réponses
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
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 (<head>).
N'hésite pas à indiquer un texte alternatif pour tes images
Tu indiques “<div id="pied_page2">” 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 “<br style="text-decoration: underline;">”.
Inutile. <br> 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.
--
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
<div class="Style13" style="text-align: left;">
et on continue
<p style="color: #004080"><font size="+1">
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 (<head>).
N'hésite pas à indiquer un texte alternatif pour tes images
<area shape="rect" coords="22,315,168,339" href="divers.html"> <area shape="rect" coords="22,315,168,339" href="divers.html" alt="divers">
Tu indiques “<div id="pied_page2">” 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 “<br style="text-decoration: underline;">”.
Inutile. <br> suffit.
Ne répète pas les choses inutilement
<a href="http://freewares.olympe-network.com/liste.html"></a>
<a href="http://freewares.olympe-network.com/liste.html"></a>
<a href="http://freewares.olympe-network.com/liste.html"></a>
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.
--
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.
--
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.
--
Un peu plus propre. Un assez bon début.
Fais gaffe quand même à ton code (-;
Referme les balises :
Mais :
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) :
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 :
On peut adapter cette solution, la simplifier :
On vient ensuite écrire par dessus dans les <a></a>. 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) :
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…
--
Fais gaffe quand même à ton code (-;
Referme les balises :
<p><a href="essai.html"><img src="images/bouton-accueil.gif" alt="Accueil" width="200" height="56" /></a></p>c'est bon.
Mais :
<p><a href="dossiers.html"><img src="images/bouton-dossiers.gif" alt="dossiers" width="200" height="56" />ne ferme ni le <a> ni le <p>…
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) :
<div id="menu">
<ul>
<li><a href="essai.html"></a></li>
<li><a href="dossiers.html">
<li><a href="liste.html"></li>
<li><a href="msn.html">
<li><a href="divers.html">
</li>
</ul>
</div>C'est plus lisible, on voit mieux ce qui manque :<div id="menug">
<ul>
<li><a href="essai.html"></a></li>
<li><a href="dossiers.html"></a></li>
<li><a href="liste.html"></a></li>
<li><a href="msn.html"></a></li>
<li><a href="divers.html"></a></li>
</ul>
</div>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 :
<div id="menug2">
<ul>
<li><a id="menug2_li_a1" href="essai.html"></a></li>
<li><a id="menug2_li_a2" href="dossiers.html"></a></li>
<li><a id="menug2_li_a3" href="liste.html"></a></li>
<li><a id="menug2_li_a4" href="msn.html"></a></li>
<li><a id="menug2_li_a5" href="divers.html"></a></li>
</ul>
</div>Ç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 :
<div id="menug3">
<ul>
<li><a href="essai.html">essai</a></li>
<li><a href="dossiers.html">dossiers</a></li>
<li><a href="liste.html">liste</a></li>
<li><a id="msn" href="msn.html">msn</a></li>
<li><a href="divers.html">divers</a></li>
</ul>
</div>Il s'agit d'utiliser une seule image en arrière-plan des menus.
On vient ensuite écrire par dessus dans les <a></a>. 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…
--
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é
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.
--
Ç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.
<div id="bandeau">
<img src="images/logo(2).gif" alt="freewares 2.0" width="650" height="170" />
</div>
<div id="menu">
<ul>
<li><a href="essai.html">essai</a></li>
<li><a href="dossiers.html">dossiers</a></li>
<li><a href="liste.html">liste</a></li>
<li><a id="msn"
href="msn.html">msn</a></li>
<li><a href="divers.html">divers</a></li>
</ul>
</div>
<div id="contenu">ou <div id="bandeau">
<img src="images/logo(2).gif" alt="freewares 2.0" width="650" height="170" />
</div>
<div id="menu">
<ul>
<li><a href="essai.html">essai</a></li>
<li><a href="dossiers.html">dossiers</a></li>
<li><a href="liste.html">liste</a></li>
<li><a id="msn" href="msn.html">msn</a></li>
<li><a href="divers.html">divers</a></li>
</ul>
</div>
<div id="contenu">
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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!
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!
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?
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?
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/
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/
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!
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!
Si tu veux de la fluidité (des %), il vaut mieux t'y prendre autrement encore.
Comme dans ce gabarit où on trouve du absolute.
En adaptant un peu, ça devrait passer.
**
C'est maintenant qu'on voit qu'il est préférable de ne pas utiliser de séparateurs ( ) dans les noms des fichiers.
--
Comme dans ce gabarit où on trouve du absolute.
En adaptant un peu, ça devrait passer.
#conteneur {
position: relative;
width: 82%;
margin : 0 auto;
}avec l'image en arrière-plan**#header {
height: 170px;
background: url(logo2.gif) center no-repeat;
}
**
C'est maintenant qu'on voit qu'il est préférable de ne pas utiliser de séparateurs ( ) dans les noms des fichiers.
--
ç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
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
--
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
--
Fallait bien que je te remercie ^^
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
Site:
http://freeware.telecharger.free.fr/
Style :
http://freeware.telecharger.free.fr/styles.css
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
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
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.
--
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.
--
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?
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?