Mon 'tit site

Habillage de sites web et de forums : réalisation graphique et technique.

Modérateur : Ze Techos

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Mon 'tit site

Message par Flamme »

Voilà ma dernière création.

http://monde-des-forts.org/lignes_en_jeu/index.html

Ce n'est bien sur pas de la qualité des réalisation de piouPiouM ou d'autres, mais bien, je débute en XHTML/CSS dont je fais comme je peux, surtout quand mon temps est limité. Faites un tour sur le forum, j'ai retravaillé un subSilver pour faire une unité graphique. Et je m'éclate avec Inkscape qui m'a plus servi que Gimp, en l'occurence... Pour le reste, c'est "Bloc-Note powaaaa". :P

Sinon, je rêve d'un sélecteur de style : quel est le meilleur système ?
Dernière modification par Flamme le 14 mars 2006, 11:20, modifié 1 fois.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
Joël
Grand Gourou du Clic droit
Messages : 218
Inscription : 21 avr. 2004, 08:05
Localisation : Belgique
Contact :

Message par Joël »

Personnellement, j'ai beaucoup utilisé le styleswitcher de Paul Sowden, et j'en ai toujours été satisfait.
[url=http://www.akikaze.org][img]http://www.akikaze.org/style/images/minibarre.png[/img][/url] [url=http://joelbajot.deviantart.com/gallery/digitalart/fractals/][img]http://www.akikaze.org/media/images/fractales_sur_da.png[/img][/url]
[size=75]Les francophones se comprennent mieux en français : merci d'éviter le sabir msn/sms et les fautes volontaires...[/size]
Avatar de l’utilisateur
piouPiouM
Pro de la Gimp-Attitude
Messages : 562
Inscription : 01 août 2005, 12:48
Localisation : Lyon
Contact :

Message par piouPiouM »

Graphiquement, c'est certes épuré, mais le rendu est très propre, harmonieux. La navigation y est agréable, la lecture des articles claire.

Au niveau du code, il y a juste quelques petites erreurs de sémantique et de petites améliorations qui pourront êtres apportés. Je te fais un topo complet un peu plus tard Flamme si cela ne te gène pas ;)

Sympa donc :)

Joël a écrit :Personnellement, j'ai beaucoup utilisé le styleswitcher de Paul Sowden, et j'en ai toujours été satisfait.
Le problème avec ce styleswitcher est qu'il présente les différents thèmes en liens, ce qui n'est pas des plus pratiques lorsqu'il commence à s'entasser un nombre important de styles :?
Un style-switcher construit en PHP, muni d'une liste déroulante est une autre alternative.
Il existe aussi une solution basée sur JavaScript et une liste déroulante, mais, malheureusement, seuls les navigateurs munient de Gecko le supporte.


HS : /me ne sait plus où se mettre... :oops:
[url=http://www.amazon.fr/dp/2744021733/]Découvrez le livre, Gimp : Apprenez, pratiquez, créez ! [color=darkgreen](2ème édition)[/color][/url]
[url=http://gimp4you.eu.org/]Gimp4you[/url], [url=http://gimp4you.eu.org/]tutoriels[/url] pour [url=http://gimp.org/]Gimp[/url] \(^o^)/
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

OK pour le top, n'hésite pas, si tu veux on en parle sur MSN plus tard. :) Je ne demande qu'à apprendre, le HTML m'est très familier mais j'avoue être encore un peu "boiteuse" quant il s'agit de XHTML et de styles. :oops:
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
Joël
Grand Gourou du Clic droit
Messages : 218
Inscription : 21 avr. 2004, 08:05
Localisation : Belgique
Contact :

Message par Joël »

piouPiouM a écrit :Le problème avec ce styleswitcher est qu'il présente les différents thèmes en liens, ce qui n'est pas des plus pratiques lorsqu'il commence à s'entasser un nombre important de styles :?
Ce n'est pas insurmontable : on peut très bien "masquer" la liste de styles dans un "menu", soit en Javscript, soit en... css (ben oui !)

Pour le site de Flamme, effectivement, c'est clair et lisible, et c'est là l'essentiel. Moi j'aime bien ;)
[url=http://www.akikaze.org][img]http://www.akikaze.org/style/images/minibarre.png[/img][/url] [url=http://joelbajot.deviantart.com/gallery/digitalart/fractals/][img]http://www.akikaze.org/media/images/fractales_sur_da.png[/img][/url]
[size=75]Les francophones se comprennent mieux en français : merci d'éviter le sabir msn/sms et les fautes volontaires...[/size]
Avatar de l’utilisateur
piouPiouM
Pro de la Gimp-Attitude
Messages : 562
Inscription : 01 août 2005, 12:48
Localisation : Lyon
Contact :

Message par piouPiouM »

Joël a écrit :Ce n'est pas insurmontable : on peut très bien "masquer" la liste de styles dans un "menu", soit en Javscript, soit en... css (ben oui !)
Oui oui, mais encore faut il savoir le faire ;)
[url=http://www.amazon.fr/dp/2744021733/]Découvrez le livre, Gimp : Apprenez, pratiquez, créez ! [color=darkgreen](2ème édition)[/color][/url]
[url=http://gimp4you.eu.org/]Gimp4you[/url], [url=http://gimp4you.eu.org/]tutoriels[/url] pour [url=http://gimp.org/]Gimp[/url] \(^o^)/
Avatar de l’utilisateur
Adreqi
Pro de la Gimp-Attitude
Messages : 834
Inscription : 02 mai 2005, 12:25
Contact :

Message par Adreqi »

bah pour un début c'est vraiment bien ^^

simple mais efficace, clair et précis.
le seul regret que je me prends à avoir c'est le manque de rapport avec le thème du site...
sinon bien joué !
Adreqi

Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

dayplayr a écrit :le seul regret que je me prends à avoir c'est le manque de rapport avec le thème du site...
Avec plein de D10 partout ? ;)

Bon, je vois ce que tu veux dire, ça manque de rêve et de glamour, mais comme le site est généraliste, mon idée était de créer des thèmes précis, style Polar, Medfant, SF, etc. D'où le style switcher. :D

Sinon, merci pour les avis.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Par contre Flamme, attention sur ton site.


Il y a un ptit scroll horizontal en 1024x768 :)
[img]http://naiko91.free.fr/Autres/Forum/signatures/the_painkiller.png[/img]
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

en effet...
Bizarre, seuls les menus sont fixes.

Si quelqu'un voit d'où ça vient...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
xun
Gimpeur extraordinaire
Messages : 198
Inscription : 13 sept. 2004, 15:23
Localisation : Atomic City
Contact :

Message par xun »

Trés agréable la page d'accueil.
J'aime bien les dessins fait avec Inkscape.
Bravo.
[url=http://proximus1.deviantart.com/]Art abstrait, ethnique et psychédélique[/url]
www.redsilverjon.deviantart.com
Avatar de l’utilisateur
piouPiouM
Pro de la Gimp-Attitude
Messages : 562
Inscription : 01 août 2005, 12:48
Localisation : Lyon
Contact :

Message par piouPiouM »

Flamme a écrit :Si quelqu'un voit d'où ça vient...
Retire le width:100% de #entete ;)

Rappel : conformément aux recommendations du w3c, la largeur d'un élément est la somme de ses marges internes, marges externes ainsi que de sa largeur définie par width.
Dans ton cas cela donnait pour le div#entete : (10px * 2) + 100% (padding*2 plus width) et donc on se retrouvait avec 20px en trop ^_^
Supprimer le width n'a pas d'impact visuel car, par défaut, un élément de type bloc s'étend tant qu'il le peut dans son conteneur parent ; mais en le précisant à 100% tu le contrains à utiliser 100% de la largeur de l'élément conteneur, qui ici à la largeur de la la surface affichable :)
[url=http://www.amazon.fr/dp/2744021733/]Découvrez le livre, Gimp : Apprenez, pratiquez, créez ! [color=darkgreen](2ème édition)[/color][/url]
[url=http://gimp4you.eu.org/]Gimp4you[/url], [url=http://gimp4you.eu.org/]tutoriels[/url] pour [url=http://gimp.org/]Gimp[/url] \(^o^)/
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

Merci, ça marche bien ! :) C'est pourtant ce qu'il y avait indiqué sur les templates modèles d'un ouvrage spécialisé... :?

J'ai aussi un peu rationalisé le menu : à présent tous les :hover sont sur "a", ça marche donc aussi sur IE (eh oui, il faut y penser sur un site généraliste...)
Dernière modification par Flamme le 27 mars 2006, 17:39, modifié 2 fois.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
Papy the lolo
Maître pisteur
Messages : 2731
Inscription : 03 déc. 2005, 19:09
Localisation : Montargis
Contact :

Message par Papy the lolo »

j' y suis allé promener mes arpions sur ton t'site:deux remarques
1) j'apprécie son relatif depouillement et sa sobriété, parfois trop de clinquant parfois nuit
2) je n'ai eu aucun mal a me repérer ni dans le site ni dans le forum
en fait , je me sentais assez 'ch'eu nous ', même si je ne suis pas jeu de rôle (question de génération),ni jeu d'ailleurs..... ;)
En fait j'aimerais avoir ta maitrise de webmestre :oops:
toi aussi tu apprécie inkscape....
[color=indigo][b]Administrateur de GA[/b][/color]
Site Gimp Attitude : [url=http://www.gimp-attitude.org/ressources.php]découvrez nos ressources ![/url]
[url=http://tsovorp.org/histoire/index.html][img]http://images.imagehotel.net/4e397efd0d.png[/img][/url] [url=http://radiologie.tsovorp.org/index.html][img]http://images.imagehotel.net/2602f51d28.png[/img][/url][url=http://gimpfractal.tsovorp.org/][img]http://img75.imageshack.us/img75/2733/gimfrqd4.png[/img][/url]
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

Maîtrise toute relative, je suis autodidacte. Et pour les forums, il y a Février derrière qui s'occupe de tout l'aspect technique.

Après pour jongler avec les communautés, c'est encore autre chose, c'est entre la com, la gestion de personnel, et la réunion de famille avec toute sa complexité... :?

Pas étonnant que tu te sentes "de chez nous", vu que l'ambiance n'est pas si différente de GA ! ;)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Avatar de l’utilisateur
Papy the lolo
Maître pisteur
Messages : 2731
Inscription : 03 déc. 2005, 19:09
Localisation : Montargis
Contact :

Message par Papy the lolo »

Flamme a écrit : Après pour jongler avec les communautés, c'est encore autre chose, c'est entre la com, la gestion de personnel, et la réunion de famille avec toute sa complexité... :? ! ;)
Tant que aborde pas l'affaire dreyfus .... ou son pendant tooshop vs gimp, ms vs linux, on est entre gens de bonne compagnie ;) ;)
Mais , plus je lis, me balade, plus l'envie de créer un site me demange, mon seul problème est de trouver un hébergement car ce que j'en en tête va sans aucun doute dépasser les capacités des pauvres 20 mo de mon fai m'alloue dans sa grande générosité. :roll:
[color=indigo][b]Administrateur de GA[/b][/color]
Site Gimp Attitude : [url=http://www.gimp-attitude.org/ressources.php]découvrez nos ressources ![/url]
[url=http://tsovorp.org/histoire/index.html][img]http://images.imagehotel.net/4e397efd0d.png[/img][/url] [url=http://radiologie.tsovorp.org/index.html][img]http://images.imagehotel.net/2602f51d28.png[/img][/url][url=http://gimpfractal.tsovorp.org/][img]http://img75.imageshack.us/img75/2733/gimfrqd4.png[/img][/url]
Avatar de l’utilisateur
Adreqi
Pro de la Gimp-Attitude
Messages : 834
Inscription : 02 mai 2005, 12:25
Contact :

Message par Adreqi »

Ya bien free qui donne 1go mais bon faut s'inscrire et la vitesse est pas top ^^ (au moins c'est gratuit ^^)

pour l'affaire toshop vs gimp de toute façon dès que tu parleras de gimp a quelqu'un qui a ne serait-ce qu'entendu parler de photoshop, il va comparer c'est sûr.
Adreqi

Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Avatar de l’utilisateur
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Très bien ton site Flamme. Plus de scroll, tout est niquel :D

Style simple mais néanmoins très très agréable... Franchement, j'aime beaucoup. L'avantage, c'est qu'il se charge rapidement à chaque fois.

Je suis en train de mijoter un enième site découpé avec GimP (ou Photoshop - Non pas tapé :D -) puis retouches CSS derrière, je sens que ça va lutter dans les temps de chargement :P
[img]http://naiko91.free.fr/Autres/Forum/signatures/the_painkiller.png[/img]
Avatar de l’utilisateur
Papy the lolo
Maître pisteur
Messages : 2731
Inscription : 03 déc. 2005, 19:09
Localisation : Montargis
Contact :

Message par Papy the lolo »

dayplayr a écrit :Ya bien free qui donne 1go mais bon faut s'inscrire et la vitesse est pas top ^^ (au moins c'est gratuit ^^)
.
Merci pour l'info, mais changer de fournisseur pour free, cela me fait un peu kaguer, avec un peu de paresse aussi ;)
[color=indigo][b]Administrateur de GA[/b][/color]
Site Gimp Attitude : [url=http://www.gimp-attitude.org/ressources.php]découvrez nos ressources ![/url]
[url=http://tsovorp.org/histoire/index.html][img]http://images.imagehotel.net/4e397efd0d.png[/img][/url] [url=http://radiologie.tsovorp.org/index.html][img]http://images.imagehotel.net/2602f51d28.png[/img][/url][url=http://gimpfractal.tsovorp.org/][img]http://img75.imageshack.us/img75/2733/gimfrqd4.png[/img][/url]
Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : 20 avr. 2004, 23:33
Localisation : Vincennes, France
Contact :

Message par Flamme »

Je pense utiliser ce style pour la prochaine version du site Gimp Attitude, je n'aurai pas à me casser la tête. :)

Ca sera quand même plus moderne et plus agréable, et puis avec les styles on a plus d'envies créatives vu que c'est tout de même plus aisé de changer tout le design. :)

Pour Lignes en Jeu, je vais peut-être retravailler la bannière, pour faire quelqlue chose de plus moderne et dynamique à partir des mêmes design (vive la vectoriel ! :P), et de plus discret dans la page.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Répondre