[projet]Ma galerie

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

Modérateur : Ze Techos

Avatar de l’utilisateur
Psychogimpeur
Pro de la Gimp-Attitude
Messages : 699
Inscription : mar. oct. 17, 2006 5:17 pm
Localisation : Bruxelles

[projet]Ma galerie

Message par Psychogimpeur » mer. janv. 09, 2008 10:59 pm

Je me suis essayé à un design simple et sobre. Qu'en pensez vous ?
http://psykose.hostarea.org/Psy_tmp/test.html
Gimp un jour, Gimp toujours ...

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

Message par Flamme » mer. janv. 09, 2008 11:22 pm

Décidément, c'est la mode du gris... :roll:

C'est sobre. Personnellement, je ne suis pas (ou plutôt plus) fana du texte en frame, même par CSS, mais ça peut se défendre. Attention, vérifie la compatibilité avec les autres navigateurs que FF, qui n'est pas évidente...

Sinon, je trouve dommage qu'il n'y ait pas de rappel graphique entre le menu et le titre, à part la vague touche verte "contact". Il y a un style trop différent entre ce menu en pseudo-relief et le reste. D'ailleurs, ce menu fait un peu chiche, on dirait que tu a mendié pour l'avoir ;). Il gagnerait sans doute à être un peu grand et plus designé, même dans la sobriété.
[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
Psychogimpeur
Pro de la Gimp-Attitude
Messages : 699
Inscription : mar. oct. 17, 2006 5:17 pm
Localisation : Bruxelles

Message par Psychogimpeur » mer. janv. 09, 2008 11:45 pm

ya pas de frames ... :?
Gimp un jour, Gimp toujours ...

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

Message par Flamme » mer. janv. 09, 2008 11:47 pm

Je sais bien qu'il n'y a pas "d'Iframe" ;), mais la fenêtre déroulante revient au même à la navigation. Je trouve que c'est un peu... renfermé.
Dernière modification par Flamme le jeu. janv. 10, 2008 12:01 am, 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
Psychogimpeur
Pro de la Gimp-Attitude
Messages : 699
Inscription : mar. oct. 17, 2006 5:17 pm
Localisation : Bruxelles

Message par Psychogimpeur » mer. janv. 09, 2008 11:51 pm

OUi mais ça me permet de créer plusieurs blocs de contenu ;)

De toute façon ce n'est pas terminé, j'ai encore pleinde modifs à faire niveau design ^^
Gimp un jour, Gimp toujours ...

Avatar de l’utilisateur
Adreqi
Pro de la Gimp-Attitude
Messages : 834
Inscription : lun. mai 02, 2005 12:25 pm
Contact :

Message par Adreqi » jeu. janv. 10, 2008 12:34 pm

Je suis actuellement sur une résolution de 1440x900, et ça fait quand même bien vide... j'aurais mieux vu un rapprochement par le centre du menu et de la zone de texte histoire que ni l'un ni l'autre ne se sente trop seul ^^

sinon je rejoins Flamme en ce qui concerne le texte défilant dans un cadre, ça me rend claustrophobe.

A part ça, c'est pas mal, j'a hâte de voir ce que ça donnera avec des images ^^
Adreqi

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

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » mar. janv. 15, 2008 12:53 pm

Moi je vais parler plus codage. Sur ton menu de gauche, quand la souris pas dessus on remarque un rollover. Sauf que probleme! Pour acceder a la page sur laquel est la souris, il faut cliquer sur le texte et non sur l'image de fond. Cela me semble domage.

Pour remedier a sa, utilise la propriété display:block qui t'aidera a simplifier ton rollover, et le rendre plus sympathique.
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

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

Message par Flamme » mar. janv. 15, 2008 2:59 pm

Tout à fait, et de plus, cela peut régler certains problèmes d'interprétation sur IE...
[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
Bellette
Maître pisteur
Messages : 1306
Inscription : dim. oct. 23, 2005 4:52 pm
Localisation : Grenoble/Lyon
Contact :

Message par Bellette » mar. janv. 15, 2008 9:41 pm

Flamme a écrit :Tout à fait, et de plus, cela peut régler certains problèmes d'interprétation sur IE...
Je croyais pourtant que la dernière mouture était plutôt respectueuse niveau standard, non ? :o
[b]Administrateur GA[/b]

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

Message par Flamme » mar. janv. 15, 2008 10:14 pm

Tout le monde n'a pas la dernière mouture, vu qu'elle est si mal fichue qu'on ne sait même pas où cliquer pour commencer à naviguer ! :l0l:

Pour le reste, il y a eu du progrès, mais ce n'est pas encore genial... :x
[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 : sam. déc. 03, 2005 7:09 pm
Localisation : Montargis
Contact :

Message par Papy the lolo » mar. janv. 15, 2008 10:23 pm

erreur 404 a 22h 43 :(
[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
Psychogimpeur
Pro de la Gimp-Attitude
Messages : 699
Inscription : mar. oct. 17, 2006 5:17 pm
Localisation : Bruxelles

Message par Psychogimpeur » mer. janv. 16, 2008 12:04 am

Gimp un jour, Gimp toujours ...

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » mer. janv. 16, 2008 7:39 am

aucun changement sur les liens du menu :(
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

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

Message par Flamme » mer. janv. 16, 2008 10:26 am

Olah, grosse grosse erreur d'interprétation sous IE : l'en-tête du menu est décalé vers la gauche ! :shock:

Sinon, c'est exactement ce que je pensais.

Tu as sans doute mis un Hover sur le BG et sur les liens du menus. Résultats, sous FF, le fonds réagit séparémeent des liens, ce qui n'est pas très ergonomique, et sous IE, le fond ne réagit pas du tout... Juste le lien.

Je te conseille de faire la chose suivante :
- laisse la pseudoclasse sur le lien (a) et juste sur le lien ;
- définis le fonds dans le lien a, grâce à la propriété "display: block;" ;
- Lors du passage sur le lien, redéfini à la fois la couleur et l'image de fonds du lien.
La propriété "display: block;" permet d'attribuer les propriétés de ton lien à l'ensemble de ce block. Il faut en définir très préciséemnt la taille. Autre astuce : si tu veux centrer verticalement le texte à l'intérieur du bloc, ajoute un "line-height".

Ex :

Code : Tout sélectionner

a
{color : #xxx;
background-image: url('monimage.png');
display: block;
[etc]}

a:hover
{color: #yyy;
background-image: url('monimagebis.png');}
Résultat :
- meilleure ergonomie ;
- interprétation correcte à la fois sous FF et sous IE.

Attention, message d'erreur sous IE dans le fenêtre défilante :
Warning: mysql_close(): no MySQL-Link resource supplied in /home/web/clients/psykose.hostarea.org/www/Psy_tmp/index.php on line 26
[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
Adreqi
Pro de la Gimp-Attitude
Messages : 834
Inscription : lun. mai 02, 2005 12:25 pm
Contact :

Message par Adreqi » mer. janv. 16, 2008 1:23 pm

J'ai moins l'impression de vide, c'est mieux ^^

sinon je tiens à signaler quelques erreurs liées au codage du texte (affichage assez peu cavalier des accents)

utilise les codes html (é pour é, etc...) pour régler ça.
Adreqi

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

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » mer. janv. 16, 2008 11:08 pm

Je prefere le presenter autrement, de plus il manque un parametre :


a:link{
color : #xxx;
background-image: url(monimage1.png);
display: block;
width:***px;
height**px;
text-decoration:none;
}

a:visited{
color : #xxx;
background-image: url(monimage1.png);
display: block;
width:***px;
height**px;
text-decoration:none;
}

a:hover{
color : #xxx;
background-image: url(monimage2.png);
display: block;
width:***px;
height**px;
text-decoration:none;
}

Flamme , voici quelques remarques pour flamme et psykogimpeur:
-Tjs preciser "link"
-Reformuler les argument dans chaque parti pour eviter le probleme du "visited"
-preciser le visited avant le hover
-preciser une taille
-et si il y a un rollover du fond, pas besoin de rollover pour les liens
-les ' ne sont pas obligatoire.
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

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

Message par Flamme » jeu. janv. 17, 2008 12:03 am

Tu verras que j'ai mi un petit "etc." pour aller à l"'essentiel ;). Ne pas préciser ne signifie pas forcément qu'on ne sait pas, tu sais :P. Par contre c'est vrai que ne connaissant pas forcément le niveau de la personne en face, ça peut être utile. Cependant, Psychogimpeur ne part pas forcément de zéro, loin de là, on peut donc supposer qu'il peut retrouver tout seul les autres arguments. Pour ce qui est des url d'image avec ', ce n'est pas nécessaire, mais j'ai pris l'habitude de les mettre (comme les chiffres entre guillemets du HTML, parce que quand j'ai débuté, c'était comme ça, alors dans le doute...). C'est ça les vioques ! :P

Par contre pour le "link", je reconnais que je le zappe... Flemme quand tu nous tient ! :l0l: Je promets de m'amender sur ce point ;).

En passant, justement, le fait d'avoir à redéfinir tous les éléments n'est sans doute vrai que si tu emploies, justement, que des définitions de liens systématiquement avec pseudo-classes ("link", "hover" etc.). Si tu commence par définir avant toutes choses tous les éléments communs du style lié au lien "a", tu n'auras peut-être pas autant de problèmes. En tout cas, j'en constate aucune, du moment que je fais toutes mes déclaration dans le bon ordre (visited avant hover, etc.).

Par exemple :
a
{toutes les propriétés communes}

a:link
{color: #blabla;
background-image: url('titimage01.png)}

a:hover
{color: #tatata;
background-image: url('titimage02.png)}
Etc.

Quant à ça :
-et si il y a un rollover du fond, pas besoin de rollover pour les liens
J'avoue ne pas comprendre ce que tu veux dire. C'est plutôt le contraire... non ?
Si tu défini le rollover entièrement dans le lien, il est clair que tu n'as pas besoin de le définir, par exemple, sous l'entrée de liste "li".
Dernière modification par Flamme le jeu. janv. 17, 2008 9:50 am, 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
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » jeu. janv. 17, 2008 7:20 am

exemple qui va contredire :

a:link{
color:red;
width:200px;
height:100px;
}

a:visited{
width:200px;
height:100px;
}

a:hover{
width:300px;
height:100px;
}

Si je fait sa, quel va etre la couleur de mon lien apres que je l'ai visiter?
(sous IE)

-et si il y a un rollover du fond, pas besoin de rollover pour les liens
Lorsque la souris pas sur le fond, on a un rollover de l'image. Lorsque le souris passe sur le lien, on a un rollover du texte, or ce n'est pas utile d'avoir les 2.

Voila pourquoi je maintient, qu'il faut a chaque fois bien preciser les argument et tout cas pour ce qui concerne la couleur et le soulignage (les 2 par defaut de IE)
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

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

Message par Flamme » jeu. janv. 17, 2008 10:29 am

cuak a écrit :exemple qui va contredire :

a:link{
color:red;
width:200px;
height:100px;
}

a:visited{
width:200px;
height:100px;
}

a:hover{
width:300px;
height:100px;
}
Cela ne me contredit pas, contrairement à ce que tu penses. Il faut bien entendu repréciser à chaque fois les arguments qui varient, mais pas ceux qui ne varient pas !

Regardent dans l'exemple que je donne, tu verras que je préconise de repréciser les éléments variables : couleur, fonds... à chaque fois. Mais je ne vois pas l'intérêt de répéter les éléments qui ne varient pas, comme la taille du bloc, ou la police de caractère, comme tu sembles le dire... C'est contre-productif.

Plus ça va, plus je prends l'habitude de "syncoper" mes styles en rassemblant les propriétés communes et en ne singularisant que ce qui varie. Et ça marche très bien sous IE comme sous FF...

Sinon, si l'on veut vraiment chipouiller, ce n'est même pas a:hover que tu devrais utiliser, mais a:link:hover et a:vinsited:hover... :l0l: Pour être bien sûr de couvrir toutes les possibilités.
Lorsque la souris pas sur le fond, on a un rollover de l'image. Lorsque le souris passe sur le lien, on a un rollover du texte, or ce n'est pas utile d'avoir les 2.
Le problème du style de Psychogimpeur est là : un rollover sur le fonds (sur l'entrée de liste "li" ?) et un sur le lien ("a"). Ce qui crée un décalage désagréable et un défaut d'interprétation sous IE. Autant rassembler sous le lien, ce qui ne crée pas de déclage et est correctement interprété.

Après, choisir de faire varier le fonds et/ou le texte, c'est un choix artistique ! Il a tout à fait le droit de le faire s'il en a envie et s'il trouve que ça fait joli. Tant pis si ce n'est pas Web 2.0 ;)
[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
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » jeu. janv. 17, 2008 12:54 pm

Je voit pas le rapport avec le WEB 2.0 ^^

Bon sinon,
a:link{
color:red;
width:200px;
height:100px;
}

a:visited{
width:200px;
height:100px;
}

a:hover{
width:300px;
height:100px;
}
je ne vois pas l'intérêt de répéter les éléments qui ne varient pas
Si je fait sa, quel va etre la couleur de mon lien apres que je l'ai visiter?
(sous IE)
Petite piste pour la reponse :
et tout cas pour ce qui concerne la couleur et le soulignage
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

Répondre