Un de mes sites.

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

Modérateur : Ze Techos

Avatar de l’utilisateur
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Un de mes sites.

Message par KiWiX »

Salutations,

Je n'ai pas donné beaucoup de news ces derniers jours. Je travail activement sur plusieurs sites dont celui-ci que j'ai décidé de vous montrez, juste pour avoir un avis.

Evidemment, il est très incomplet. Je ne suis dessus que depuis 3 jours et je m'en occupe selon mon temps libre (Et avec le stage et une femme à s'occuper, ce n'est pas facile d'en avoir).

La bannière a été faite par un ami. Moi j'ai fais les boutons du menu et taper tout le code CSS.
Le but du site sera de se faire connaître un peu en proposant une éventuelle section Open Source avec descriptif et liens permettant d'utiliser The Gimp et plusieurs logiciels libre d'accès.
Ce n'est pas ce site qui fera qu'il y aura plus d'utilisateurs de l'open source mais bon, je trouvais ça intéressant.

Bref, je pense déjà à une conversion en PHP mais je ne sais pas si un site comme ça en vaut le coup. Ca dépend si j'ai des visiteurs ou pas mais je ne peux rien proposer de révolutionnaire.

IMPORTANT : Vous devez vous connectez avec ces codes d'accès, j'ai placé un .htaccess sur mon serveur (temporairement).

TRES IMPORTANT : Utiliser absolument MOZILLA FIREFOX si vous voulez un alignement le plus correct possible. Sous IE, il y a beaucoup de décalages.

login : public
pass : gimp

L'adresse du site : http://perso.wanadoo.fr/kiwix

A vos commentaires. :)
[img]http://naiko91.free.fr/Autres/Forum/signatures/the_painkiller.png[/img]
Avatar de l’utilisateur
tramway
Pixelium magister
Messages : 324
Inscription : 16 sept. 2004, 08:28
Localisation : Lyon 4

Message par tramway »

salut !
Alors commentons :D

-il faut règler le problème d'alignement rencontré avec IE (testé avec IE4linux)
-l'utilisation de moz-border ne revête aucun intérêt, c'est une balise propriétaire qui ne fonctionne pour le moment qu'avec les moteurs de rendu gecko, il existe d'autres moyens, certes plus délicats, mais plus standards, pour arriver à faire des bordures à coins arrondis
-est ce que les dessins sont libres de droits ? As tu le droit de les utiliser ?
-il y a un problème avec les blocs à coins arrondis, lorsqu'on augmente la taille des police, ces blocs restent avec des dimensions fixes, du coup le teste dépasse.
-puisque le site comporte 3 pages, je ne vois aucun intérêt à utiliser le PHP (je pense que tu parles pour des includes, par exemple menu + header + footer ? )mais tu peux le faire, pourquoi pas ?
-à cause de l'utilisation de margin-left, tu perds 127 pixels à gauche qui ne servent à rien lorsqu'on redimensionne le navigateur. Il aurait mieux fallu centrer tout le contenu à l'aide d'un conteneur global.
-tu ne proposes à chaque fois qu'un seul type de police, polices qui existent peut etre sous windows par défaut, mais pas sur les autres SE, essaye de proposer des polices plus standards (sans...)
-pourquoi avoir inclu des CSS dans les fichiers HTML ? Pourquoi ne pas utiliser la même feuille de style ?

Voilà !

Sinon tout va bien, et c'est un site que je trouverai joli et clair si tu me dis que tu as le droit d'utiliser les dessins que tu y a incorporé ;)
[url=http://www.inconcevable.net/photo]GIMP pour les photographes[/url]
[img]http://img55.imageshack.us/img55/1241/essai13qf.gif[/img]
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 »

Bon, on pourrait faire un cours de sémantique, mais soit...

D'abord, en ce qui concerne le design pur : si le fond du menu est destiné à rester blanc en toutes circonstances, il serait plus agréable à l'oeil de ne pas utiliser des .gif trasparents avec arrondis, ça donne un petit aspect "escalier" pas très joli sur les courbes. Si le fond reste blanc, utilise plutôt un .png ou un .jpg sur fond blanc, tu pourras ainsi "adoucir" l'effet d'escalier sur les arrondis.

Autrement dit : tu prends ton bouton, tu crées une nouvelle image à fond blanc, tu y copies/colles ton bouton dans un nouveau calque à fond transparent. Ensuite, sur le calque du bouton, tu fais "alpha vers sélection", tu réduis la sélection d'un ou deux pixels, tu l'inverses, puis tu y appliques un léger flou gaussien. Quand tu es satisfait de l'effet, tu aplatis l'image.

Toujours avec les boutons : la police. Bon, question de goût, mais à cette taille, désolé, la lisibilité compte. Je sais, je suis casse-pieds, mais mon dada, c'est l'accessibilité :)

Le fond avec les scanlines obliques est très fatigant pour les yeux. En plus, il t'empêche d'appliquer la même technique aux "boîtes" (la bannière, le menu, le contenu... ont tous des coins arrondis / escaliers - mais là c'est du moz-border, voir le commentaire de tramway). Un conseil en tout cas si tu tiens aux scanlines obliques : essaye de moins contraster les couleurs : la différence entre le foncé et le clair doit être très, très réduite. Celles de la bannière sont plus douces.

Pour la date, un petit padding supplémentaire sur la droite serait le bienvenu pour l'écarter du bord de la boîte.

Enfin, un conseil avec les polices en général : pour la lecture à l'écran, les polices "sans-serif" (Arial, Tahoma, Helvetica, bref toutes celles sans empattement) sont conseillées. Les polices "serif" conviennemnt mieux pour les titres et la lecture sur papier. Par ailleurs, il est préférable de conserver une certaine cohérence dans les polices sur un site.

http://en.wikipedia.org/wiki/Serif#Usage

Ow, et enfin... le FrEaK SpEaK, c'est obligé? c'est pas très "accessible" non plus...
[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
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Eh ben, moi qui voulait des critiques détaillées, je suis servi :D

Il est clair que je dois trouver un moyen pour rendre accessible le tout sur l'ensemble des navigateurs. Le problème, c'est que je manque de temps et je n'ai pas toutes les compétences nécessaires pour rendre le site accessible. Ma passion au départ, c'est les réseaux et le hardware, pas le langage web :D

Au sujet du fond avec les scanline, tout le monde l'a critiqué et encore, j'ai baissé l'opacité à 60 % pour les lignes...

Au sujet des images, je ne pense pas les garder, j'ai fais des recherches sur google Images et autres et je n'ai pas vraiment trouvé le moyen de réclamer à les utiliser. Donc je suppose qu'elles ne sont pas libre de droit.

Le Freak speak, c'est pour le trip. Ca ne sert absolument à rien et ça ne fait pas sérieux mais il faut toutefois rappeller le contexte du site. Pas de vocation professionnelle ou autres, juste un délire avec une possibilité d'en faire un mini centre de ressources mais pour l'instant, rien de concret.

Les polices, j'ai horreur des polices par défaut donc je les aient modifiés et je suis conscient qu'elles ne sont pas accessibles à partir de tous les SE.

Les arrondis, je comptais déjà les remplacer mais ils ne sont là qu'à titre indicatif, pour avoir une idée de la tête que ça aurait avec et sans. Je vais sûrement faire ça avec des images.

Il n'y a que 3 pages et il ne manque plus que les idées pour remplir le site. L'utilisation du PHP se ferait au cas où j'aurai l'envie subite de m'y mettre car je suis à la bourre. Ce n'est pas parce que l'on souhaite devenir administrateur réseau que l'on doit négliger les langages de référence.

Il est clair que le site ne donne pas un aspect professionnel mais c'est justement ça le but. Les chartes graphiques et tout le reste, perso je m'en suis vu imposé quelques-unes dans le cadre du travail et pour un site perso, je ne vois pas l'intérêt de s'appliquer un code de conduite strict. Un minimum de cohérence et d'accessibilité mais je ne réserve pas mon site à des gens qui n'ont pas l'habitude d'Internet.

Il y a un conteneur global qui contient déjà la globalité de la structure. Il faut juste que je modifie le règlage du width qui est à 100%. Je dois intégrer des scripts de redimensionnement. Le margin-left et le margin-right ont été placés afin de centrer l'affichage en plein écran. Maintenant, moi qui suit en 1152*864, j'ai forcément un décalage.

Je précise encore une fois que j'ai fais ça en quelques jours, et que rien n'est parfait. Mais bon, ça plait à la personne qui m'a demandé de commencer à faire un design et qui m'a sollicité par la suite pour continuer. De nombreuses améliorations et modifications seront à apportées et vos remarques vont m'aider à évoluer.
[img]http://naiko91.free.fr/Autres/Forum/signatures/the_painkiller.png[/img]
bounntyx
Gimpeur extraordinaire
Messages : 119
Inscription : 22 sept. 2005, 10:05

Message par bounntyx »

tu as remis un mdp,
ca m'aiderait de voir ce que tu as fais pour pouvoir connaitre ton niveau. Tu debloques ? (pour le tuto umbrella)
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 »

Pour les scanlines du fond, tu peux baisser l'opacité à 25-30% sans problème. Sur ton échantillon dans Gimp, ça semblera peu, mais sur le site, l'effet "masse" fera ressortir les lignes.

Et en ce qui concerne la charte graphique, le fait d'en avoir une bien définie ne signifie pas pour autant que le site à un look "corporate". Va voir sur CSS Zen Garden pour te faire une idée... C'est justement le fait d'appliquer ce que tu appelles un "code de conduite strict" qui te permettra d'assurer l'affichage correct de ton site dans tous les navigateurs (en attendant IE7 ;) )

Autre chose : effectivement, si ton conteneur global est à width: 100%, les margin-left et -right: auto ne servent à rien.
[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]
bounntyx
Gimpeur extraordinaire
Messages : 119
Inscription : 22 sept. 2005, 10:05

Message par bounntyx »

merci joel
desolée kiwix
j'avais pas lu... (le mot de passe)

1ere impression: c'est pixelisé.
sinon j'aime bien les scanlines sur le perso. enfin la trame.
Avatar de l’utilisateur
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Vous pouvez me filer des indications sur le problème de pixels ? Les images ont été retouchées vite fais et à priori, il n'y a rien qui me choque... Autre chose :

J'ai modifier un peu la dispo et 2/3 trucs. Par exemple, j'ai tout regroupé dans un seul fichier CSS.

Je dois retoucher les images, les convertir en Jpg... Enfin bon, pleins de choses que je ferai rapidement dans la semaine je pense.

La nouvelle adresse du site : (Pas de mdp)
http://ozefteam.free.fr

J'ai baissé l'opacité des scanline à 40 % il me semble et effectivement, ça choque moins. Il me reste à trouver la solution des arrondis et ça sera pratiquement bon pour la structure (+ quelques changements de police).

Merci Joel pour ton liens sur CSS Zen Garden ;)
[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 »

D'abord, les points positifs : c'est vrai que la scanline choque moins. Dans l'ensemble, c'est joli et c'est clair. Je passerai sur les points déjà débattus de la pixelisation des angles... ;)

Pour le code, je ne comprends pas pourquoi tu n'as pas tout mis dans la feuille de style externe... Même la police de caractère et le format de l'heure. Ils sont définis par des "div" spécifiques, même si tu ne les rencontres que dans une seule page, rien ne t'oblige à les laisser en interne.Pour la police, ne serait-il pas plus approprié d'utiliser "font-family" avec dans les alternatives "cursive" que seulement un nom de police en fixe ?

Par contre, je ne vois pas très bien l'intérêt de la mention "menu" au dessus du menu. Quiconque voit ton menu avec une navigateur "graphique" devinera à quoi il sert ;), par contre si tu veux qu'il soit reconnu comme menu en navigation non graphique, mieux vaut le mettre en striucture "listes" (entre balises ul / li). Je trouve ce "menu" inutile et inesthétique. Mais ce n'est qu'un avis.

Tu juxtaposes directement sous le menu proprement dit des éléments qui n'ont pas grand chose à voir...
Par exemple la minibarre "ozef-team" qui ne sert pas à grand chose... D'autant qu'on pourrait la croire cliquable, ce qui n'est pas le cas.
Même chose pour la minibarre Firefox, ce n'est pas un élément de menu, mais un lien externe... Il faudrait que tu mettes un peu plus de logique dans l'agencement de ces éléments.

Enfin, dernier point, mais c'est un avis très personnel : mis à part le fait que les designs n'ont pas grand chose à voir avec le sujet, la miss de la bannière, avec son buste gonflé à l'hélium, est... grotesque... :shock: A moins que le but soit de faire fuir la gent féminine et de ne retenir que les males prépubères (enfin, c'est peut-être le but), peut-être serait-il approprié de tester un autre graphisme... ;)
[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 »

Pour la troisième fois, j'ai fais ça rapidos et y a toujours pas de vrai projet derrière. Si je l'ai fais, c'est parce qu'un ami me l'a demandé et qu'il aimait ces dessins-là.

Comme on dit, chacun ses goûts et ses passions. Au sujet des menus, il voulait 2 menu, un en haut et un à gauche. Je lui ai dis que cela ne servait à rien d'avoir 2 menu. J'ai simplement pas penser à changer le nom des balises. Les commentaires servent à me repérer et éventuellement, ça pourrait servir à des gens qui n'y connaissent rien en CSS.

Le lien vers Firefox suppose de le télécharger, pour celui qui ne l'aurait pas. Pas besoin donc de logique particulière à mon avis. Je recommande simplement ce navigateur, soucieux des normes, par soucis de compatibilité avec la structure de ma page.

J'ai tout rassembler dans un seul fichier CSS pour éviter d'avoir du code CSS sur 150 pages. Le but du CSS est d'avoir la déclaration de la structure ailleurs que dans les pages qui l'utilise. Ainsi, les pages sont moins lourdes qu'avec un positionnement en tableaux.

Enfin, pour les polices de caractère, j'ai bien pris note des recommandations de tout le monde et je compte y remédier lorsque j'aurai le temps de bosser dessus (Donc dans la semaine, logiquement).

Euh ba sinon, il manque beaucoup de choses.

Après, pour les images, c'est vrai qu'elles font un peu gamins qui aime les anime mais bon, ça change un ptit peu de coller des images en fond, ça donne un effet sympa au site au niveau de l'oeil et ça change du train train quotidien proposé par tous les sites en général.

Allez savoir, ça doit être une question de point de vue et éventuellement d'âge car je ne vous rappelle que je n'ai que 20 ans et la personne qui m'a demandé de faire ça, encore moins :P

Je vais peut-être agrandir un poil les fenêtres et veiller à ce que l'on voit moins les zones délimitées.

Bref, du boulot et pas de réels projets "sérieux" possibles car, même si j'aimerai créer une section Open-Source, je ne vois pas ce que je pourrai mettre dedans car beaucoup de sites l'ont déjà fait avant moi...

En tout cas, je prend note de vos remarques avec la plus grande attention. Je suppose qu'après, on risque de ne pas être tous d'accord sur la structure ou un élément particulier du site. Après, ce sont surtout des détails techniques qui m'intéresse, les questions de goûts et tout ça, je pense que c'est appréciable selon les personnes. Et personne n'est obliger de coder comme les autres.

Je vous tiens au courant pour savoir ce qui ne va pas :D

EDIT : C'est vrai que la nana sur la bannière a une sacrée paire de seins gonflés à l'hélium... Faudra que j'lui dise de faire de la retouche dessus :D
[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 »

KiWiX a écrit : J'ai tout rassembler dans un seul fichier CSS pour éviter d'avoir du code CSS sur 150 pages. Le but du CSS est d'avoir la déclaration de la structure ailleurs que dans les pages qui l'utilise. Ainsi, les pages sont moins lourdes qu'avec un positionnement en tableaux.
Justement, c'est bien te tout rassembler, je suis à 100% pour.
C'est justement pour cela que je me demander pourquoi tu avais laissé le format lié à la date et à la police en interne à la page... ;)
Dernière modification par Flamme le 27 mars 2006, 13:21, 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 »

Pour la pixelisation des arrondis, voilà une comparaison :

avec un .gif transparent, si je le mets sur fond blanc (comme sur ton site) ça donne ça :

Image

J'ai juste repris ton image, collée comme nouveau calque dans une image à fond blanc un peu plus large que le bouton d'origine.
Sur le calque transparent contenant ton bouton, je fais "alpha vers sélection" (depuis le menu de clic droit dans la fenêtre des calques).
Une fois que j'ai cette sélection, je fusionne les deux calques. Je réduis la sélection de 2px et je l'inverse. Ensuite j'applique un flou gaussien 2px RLE, et ça donne ceci :

Image

Pour le reste, effectivement, chacun code comme il l'entend, mais il existe tout de même des standards qu'il est toujours bon de respecter ;)
[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
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Joël a écrit : Pour le reste, effectivement, chacun code comme il l'entend, mais il existe tout de même des standards qu'il est toujours bon de respecter ;)
Ce qui est vexant, c'est que les normes CSS3 arriveront un jour et qu'il faudra tout refaire d'ici-là. Mozilla a intégré des normes qui seront intégrées d'office dans le CSS 3, c'est quand même pas normal de devoir s'adapter à IE...

Du coup, je fais une refonte globale de la structure afin de tout centrer sous IE et sous Firefox (Croyez moi, ça prend un peu de temps). Au niveau des arrondis, j'ai trouver une technique avec des images, l'iframe que je colle s'adapte très bien mais j'attend de vous montrez le tout quand ça sera finit.

Joël, au sujet du bouton, je ne sais pas ce que ça pourrait donner en l'intégrant dans la page mais avec le flou, ça fait tout de même spécial... Je ne sais pas ce qu'en pense les autres mais un effet escalier ou un effet flouté, c'est tout aussi remarquable et au final, pas top pour un design en général... Je vais tester tout de suite :D
[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 »

Je pense qu'il y a des moyens pour que ça ne soit ni flouté ni en escalier.
Si tu veux que ce soit parfait, commence par créer un fond de bouton largement supérieur à la taille voulu mais répondant aux même proportions homothétiques (si tu crains de ne pas savoir les déterminer, commence par créer une image vide et change sa taille en multipliant, par exemple, sa hauteur par quatre et en laissant sa largeur s'adapter). Prend un fonds d'image blanc ou proche de la couleur de fond du site.

Une fois le fond de bouton créé, tu peux le ramener à la taille définitive, puis fusionner les calques visibles.
Si tu veux l'enregistrer en gif, créer une couche Alpha et fais une sélection par couleur avec un seuil très bas, pour ne choisir que les pixels blanc pur. Tu conserveras ainsi les teintes dégradées entre la couleur sombre du bouton et le blanc, ce qui évitera l'effet d'aliasing.

Si tu veux profiter de l'alpha blending du png sous Firefox, tout en gardant un effet harmonieux sous IE, avant de fusionner les calques, rends invisible le fonds blanc puis enregistre en ayant préalablement choisi le blanc comme couleur d'arrière plan. Ainsi, sur FF, ton bouton sera parfait avec un beau fond transparent, sous IE, son fonds sera blanc et passera inaperçu.

Sinon, contrairement à ce que tu penses, il faut traquer toute ambiguité sur un siteweb. Ce n'est pas évident, mais il est clair que celui qui le développe est le plus mal placé pour réaliser ce qui peut sembler illogique, d'où l'intérêt d'avoir des avis extérieurs. ;) Per contre, je ne sais pas si c'est moi mais j'ai comme l'impression que tu n'as pas vraiment saisi le sens de mes remarques... :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
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Ne t'inquiête pas, je ne faisais qu'appuyer la plupart de tes remarques pour montrer que j'avais bien compris. Après, si c'est au sujet des images, je suis plutôt d'accord avec toi pour dire que ça fait un peu prépubère (le mythe de la femme avec des gros seins, surtout si peu naturels - vive la chirurgie...-).

J'ai de nouvelles infos pour vous :
Après quelques minutes acharnées, j'ai veiller à cadrer mon site horizontalement pour que l'affichage ne soit pas mauvais quelque soit la résolution (Au boulot, je suis en 1024x768).

J'ai veiller à aligner le tout sur IE et Firefox (Du moins, c'est ce que je croyais). Car si l'alignement du header, du menu en haut, du menu à gauche et du pied s'est bien déroulé, c'est lorsque j'ai voulu mettre un width à ma page (geek) que l'alignement s'est très mal déroulé (SUR IE EVIDEMMENT :evil: ).

Si vous pouviez tester, vous verrez que sur Firefox, l'alignement est excellent mais sous IE... Gros problème.

http://perso.wanadoo.fr/kiwix (J'ai enlever les mots de passe)
[img]http://naiko91.free.fr/Autres/Forum/signatures/the_painkiller.png[/img]
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 »

Et si tu ajoutais

Code : Tout sélectionner

float: right;

à ton #geek ?

Bon, j'ai pas vu sous IE, mais le mieux est de commencer ta déclaration en remettant tous les éléments "padding" et "margin" à 0...

Code : Tout sélectionner

* { margin: 0; padding: 0; }
[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
KiWiX
Fou du clic droit
Messages : 79
Inscription : 14 mars 2006, 14:57

Message par KiWiX »

Le coup du float right; ne change rien. Sur Firefox, l'alignement reste niquel mais pas sur IE. Donc, je suppose qu'il s'agit d'un soucis de marge.

Je bosse activement sur un site au travail durant mon stage et l'alignement se fait parfaitement sous IE... Sous Firefox, n'en parlons pas :Je suis profondément amusé: . Tant pis pour eux, ils n'utilisent pas FF toute façon :)

J'ai tout de même passer un peu de temps à améliorer le site de la ozef (Pas mis en ligne pour le moment) et j'ai surtout améliorer les feuilles de style et les structures de mon site au boulot. Toutefois, je voulais savoir si quelqu'un pouvait m'aider à faire un changement assez important... Comme vous pouvez le constater, j'utilise des iframe pour incorporer mes pages mais je crains que cette méthode soit obsolète et non conforme aux nouvelles normes (et aux futures).

Quelqu'un pourrait-il éclairer ma lanterne en m'expliquant comment afficher mes pages en "css dynamique" (si on peut appeller ça comme ça). En gros, on clic sur un lien et le contenu de ce lien s'affiche dans la bonne div (Là où est l'iframe.. La même chose mais sans l'iframe :D).

Sinon, rien à voir mais j'ai installer Fedora Core 5 à la maison... Très bon ;)
[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 »

Je viens de regarde un peu ta page, une partie du décalage semble venir de l'épaisseur des bordures. J'ai réussi à aligner un peu tout ça mais je ne sais même pas vraiment comment ! :Je suis profondément amusé: Je reteste ce soir et je te tiens au courant...
[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
Black_onix
Fou du clic droit
Messages : 54
Inscription : 09 mars 2006, 11:05

Message par Black_onix »

si j'ai un conseil a te donner utilise des tableau ca marchera beaucou mieu et tu n'aura plus ces problemes.

c'est ce que j'ai toujours fait pour mes site et je n'ait jamais eu tes problemes.

si tu a besoin d'aide, je peut pour une foi me vente rde pouvoir t'aider.

voici mon msn black__onix at hotmail.com

je serai present ce week end et je pourrai t'aider, sinon peut etre me verra tu avant ce week end
[img]http://membres.lycos.fr/blackonix80/barrette/gimp_user.png[/img]
PascalL
Maître pisteur
Messages : 1644
Inscription : 07 mai 2004, 07:53
Localisation : Suisse romande
Contact :

Message par PascalL »

Black_Onix c'est une très mauvaise idée. :roll:
Les tableaux sont à prohiber pour la mise en page!

Je ne vais pas t'embêter si tu les utilises parce que c'est la seule technique que tu connaisse, par contre si tu la conseille aux autres, je pourrais montrer mes canines! :Je suis profondément amusé:
Et je ne serai pas le seul!

A qui le tour?

Pascal
Répondre