[Avis] Nouveau design pour mon blog

Nouveau design pour mon blog [Avis] - Web design - Graphisme

Marsh Posté le 02-11-2006 à 06:17:29    

Hey!
 
Bon, je commençais a en avoir vraiment marre des templates proposés par défaut sur Blogger.com (là où se trouve mon blog), et ceux qu'on peut trouver un peu partout sur le web pour ce blog ne sont pas franchement excitants non plus. [:prodigy]
 
J'ai donc décidé de mettre les mains à la pâte et en faire un perso. Je dois dire que, si le design a été assez simple de concevoir, l'intégration au système Blogger (tags propriétaires pour afficher les données) par contre a été un peu plus compliquée. Néanmoins moins compliquée que ce que je pensais...
 
Alors le résultat se trouve ici: http://101tests.blogspot.com
 
Il est presque terminé. Le gros est fait. Il reste plus qu'à faire une sidebar bien foutue (là où il y aura les liens, archives, etc.) et il reste à faire la page des archives. Éventuellement le pied de page mais ça c'est secondaire.
 
J'aimerais votre avis côté design et mise en page. Dites-moi ce qui est bien et ce qui cloche, ce qui n'a rien à faire là, ce qui pourrait être amélioré, etc. :wahoo:
 
Côté CSS, j'ai passé un temps fou à intégrer tout le bordel comme je voulais pour que ça sorte bien sous Firefox et IE. J'imagine qu'il y aurait des trucs qui pourraient être simplifiés mais je pense que je vais laisser ça comme ça... :/
 
J'attends vos feedbacks!
Merci...
A+,
 
 
PS: oui oui, encore et toujours en portugais, le blog. :o
 
PS(2): vous avez des idées pour une sidebar pas mal foutue?

Message cité 1 fois
Message édité par Pinzo le 02-11-2006 à 06:18:19

---------------
“I'll thank you very much.”
Reply

Marsh Posté le 02-11-2006 à 06:17:29   

Reply

Marsh Posté le 02-11-2006 à 06:57:15    

j'aime bien,c'est pas mal
ça fait vide à droite  [:dawak]  
et c'est pas homogène vers le haut,on voit trop un contraste à monis que ça soit voulu  [:mr marron derriere]


---------------
UNICORN OVERLORD | Japanese game developer translations (not mine :o)
Reply

Marsh Posté le 02-11-2006 à 15:17:15    

C'est pas mal dut tout. J'ai moi même un blog chez eux et j'avoue que tu t'en ai très bien sortie.
 
Par contre tu feras attention, c'est pas en français on comprend rien :lol:   :lol:  

Reply

Marsh Posté le 02-11-2006 à 21:18:29    


 
J'aime bcp,
il ne manque plus qu'un petit tuto et tout le monde changera  le look de blogger...
Mes felicitations!
 
 
 

Pinzo a écrit :

Hey!
 
Bon, je commençais a en avoir vraiment marre des templates proposés par défaut sur Blogger.com (là où se trouve mon blog), et ceux qu'on peut trouver un peu partout sur le web pour ce blog ne sont pas franchement excitants non plus. [:prodigy]
 
J'ai donc décidé de mettre les mains à la pâte et en faire un perso. Je dois dire que, si le design a été assez simple de concevoir, l'intégration au système Blogger (tags propriétaires pour afficher les données) par contre a été un peu plus compliquée. Néanmoins moins compliquée que ce que je pensais...
 
Alors le résultat se trouve ici: http://101tests.blogspot.com
 
Il est presque terminé. Le gros est fait. Il reste plus qu'à faire une sidebar bien foutue (là où il y aura les liens, archives, etc.) et il reste à faire la page des archives. Éventuellement le pied de page mais ça c'est secondaire.
 
J'aimerais votre avis côté design et mise en page. Dites-moi ce qui est bien et ce qui cloche, ce qui n'a rien à faire là, ce qui pourrait être amélioré, etc. :wahoo:
 
Côté CSS, j'ai passé un temps fou à intégrer tout le bordel comme je voulais pour que ça sorte bien sous Firefox et IE. J'imagine qu'il y aurait des trucs qui pourraient être simplifiés mais je pense que je vais laisser ça comme ça... :/
 
J'attends vos feedbacks!
Merci...
A+,
 
 
PS: oui oui, encore et toujours en portugais, le blog. :o
 
PS(2): vous avez des idées pour une sidebar pas mal foutue?



---------------
"Capter le merveilleux dans l'instant present"
Reply

Marsh Posté le 02-11-2006 à 22:37:37    

kyouray a écrit :

j'aime bien,c'est pas mal
ça fait vide à droite  [:dawak]  
et c'est pas homogène vers le haut,on voit trop un contraste à monis que ça soit voulu  [:mr marron derriere]

C'est voulu, et le vide à droite... justement il manque la sidebar. [:rhetorie du chaos]
 

Zedlefou a écrit :

C'est pas mal dut tout. J'ai moi même un blog chez eux et j'avoue que tu t'en ai très bien sortie.
 
Par contre tu feras attention, c'est pas en français on comprend rien :lol:   :lol:

:lol:
 

Sleepwell a écrit :

J'aime bcp,
il ne manque plus qu'un petit tuto et tout le monde changera  le look de blogger...
Mes felicitations!

:jap:
J'en ferai un tuto, quand j'aurai fini le truc. Avec des connaissances en CSS et un peu de bon goût c'est pas compliqué. :)
 
Merci pour vos remarques.
 
Sinon, plus personne n'a de suggestions à faire sur ce machin? [:ddr555]


Message édité par Pinzo le 02-11-2006 à 22:39:05

---------------
“I'll thank you very much.”
Reply

Marsh Posté le 03-11-2006 à 00:11:54    

un copyright tout en bas ?  [:opus dei]  
ça parle de quoi au fait ?  :D


---------------
UNICORN OVERLORD | Japanese game developer translations (not mine :o)
Reply

Marsh Posté le 03-11-2006 à 00:13:45    

Ca parle de rien, c'est un blog. Ca peut parler de 36'000 trucs. Là n'est pas le sujet. Si ça t'ennuie pas j'aimerais qu'on reste sur le côté graphique/technique de la chose... On va encore me traiter de spammer.
 
Ouai nan mais le copyright fait partie des petits trucs finaux qu'on met à la fin. [:ddr555]
 
EDIT: petite recommandation -> cliquez sur la petite boîte avec le chiffre sur le bord du post, ça mène à la page des commentaires.


Message édité par Pinzo le 03-11-2006 à 00:15:14

---------------
“I'll thank you very much.”
Reply

Marsh Posté le 03-11-2006 à 00:18:04    

si tu me l'avais pas dit,je l'aurais pas vu :/

Message cité 1 fois
Message édité par kyouray le 03-11-2006 à 00:18:16

---------------
UNICORN OVERLORD | Japanese game developer translations (not mine :o)
Reply

Marsh Posté le 03-11-2006 à 00:20:05    

kyouray a écrit :

si tu me l'avais pas dit,je l'aurais pas vu :/

Je sais pas pourquoi le curseur se transforme pas en main sous IE. Pourtant c'est un lien comme un autre. :/
J'ai utilisé la forme suivante: <a href=""><div id="">le-nb-de-commentaires</div></a>
Sais pas pourquoi IE ne transforme pas le curseur en main: :(


---------------
“I'll thank you very much.”
Reply

Marsh Posté le 03-11-2006 à 11:01:47    

Attention à l'accessiblité des liens, qui sont vides :(
 
Sinon pour ta dernière questions aussi, on n'a pas le droit de mettre des div dans un a, il faut utiliser un span plutôt. Sinon y'a une propriété cursor pour forcer la main :)
 
sinon le design est bien [:dawak]

Reply

Marsh Posté le 03-11-2006 à 11:01:47   

Reply

Marsh Posté le 03-11-2006 à 16:54:53    

Pinzo a écrit :

Je sais pas pourquoi le curseur se transforme pas en main sous IE. Pourtant c'est un lien comme un autre. :/
J'ai utilisé la forme suivante: <a href=""><div id="">le-nb-de-commentaires</div></a>
Sais pas pourquoi IE ne transforme pas le curseur en main: :(


 
C'est quoi cette horreur ?! :ouch:  
Les div se sont des balises de type bloc et non pas inline.
Dans ton cas, un span aurait été beaucoup plus approprié qu'un div.
 

Citation :

Trop de dvi tue les div !


 
La chose la plus adapté à cette ligne est la suivante : <a href="" id="">le-nb-de-commentaires</a>
C'est exactement la même chose mais c'est beaucoup plus lisible et léger.
 
Sinon, tu as essayé de faire disparaitre la barre blogger ?


---------------
Twitter
Reply

Marsh Posté le 03-11-2006 à 17:39:59    

koskoz a écrit :

C'est quoi cette horreur ?! :ouch:  
Les div se sont des balises de type bloc et non pas inline.
Dans ton cas, un span aurait été beaucoup plus approprié qu'un div.
 

Citation :

Trop de dvi tue les div !


 
La chose la plus adapté à cette ligne est la suivante : <a href="" id="">le-nb-de-commentaires</a>
C'est exactement la même chose mais c'est beaucoup plus lisible et léger.
 
Sinon, tu as essayé de faire disparaitre la barre blogger ?

Oh le con, je me suis même pas rappelé de cette solution. :/
 
Pour la barre, oui j'ai essayé... et c'est tout con: html>body #b-navbar {display:none !important}
Mais je réfléchis encore si je vais la guarder ou pas. [:cupra]
 
FlorentG: mais en utilisant un span je peux pas utiliser les propriétés de background et tout le bordel. Si?
(je suis pas un pro du CSS, faut comprendre [:ddr555])
Quant au curseur, ouai je sais... j'avais mis cette valeur au début, mais j'ai dû restructurer la chose et j'ai oublié de le remettre. Mais à quoi c'est dû cette absence de curseur? :??:

Message cité 1 fois
Message édité par Pinzo le 03-11-2006 à 17:41:11

---------------
“I'll thank you very much.”
Reply

Marsh Posté le 04-11-2006 à 10:56:26    

Si, tu peux styler un span comme un div, la seule différence est qu'un div est en display block, et un span en inline. Suffit donc de mettre la span en display block.
 
De manière générale, n'importe quel élément peut être style comme on veut. Sous FF, on peut même s'amuser à donner un style au <head> [:johneh]

Reply

Marsh Posté le 04-11-2006 à 22:32:39    

J'aime bien, les couleurs sont reposantes et c'est lisible (bien qu'incompréhensible :D)
Je trouve la page un peu déséquilibré sur mon 1280 de large, trop près du bord gauche.
 
J'attend de voir ce que tu vas faire du menu lattéral.
 
La page de comment tu l'as pas designé non ?  
Si oui ça fait bizarre :??:
 
edit: y'avait un truc qui me titillait dans ton header, j'ai trouvé ce que c'est... c'est les différentes orientations d'ombres.

Message cité 1 fois
Message édité par Skopos le 04-11-2006 à 22:34:40
Reply

Marsh Posté le 05-11-2006 à 00:13:45    

FlorentG a écrit :

Attention à l'accessiblité des liens, qui sont vides :(
 
Sinon pour ta dernière questions aussi, on n'a pas le droit de mettre des div dans un a, il faut utiliser un span plutôt. Sinon y'a une propriété cursor pour forcer la main :)
 
sinon le design est bien [:dawak]


 

Pinzo a écrit :


 
Quant au curseur, ouai je sais... j'avais mis cette valeur au début, mais j'ai dû restructurer la chose et j'ai oublié de le remettre. Mais à quoi c'est dû cette absence de curseur? :??:


 
je veux bien en savoir plus aussi sur ce problème, j'ai aussi un curseur main qui a disparu dans un site sur lequel je travaille :/  
 
:hello:


Message édité par krysalia le 05-11-2006 à 00:18:19

---------------
Tuto ~ ►Nano Miams◄ ~ Books ♥
Reply

Marsh Posté le 05-11-2006 à 01:07:29    

Skopos a écrit :

J'aime bien, les couleurs sont reposantes et c'est lisible (bien qu'incompréhensible :D)
Je trouve la page un peu déséquilibré sur mon 1280 de large, trop près du bord gauche.
 
J'attend de voir ce que tu vas faire du menu lattéral.
 
La page de comment tu l'as pas designé non ?  
Si oui ça fait bizarre :??:
 
edit: y'avait un truc qui me titillait dans ton header, j'ai trouvé ce que c'est... c'est les différentes orientations d'ombres.

Ouai ça doit faire un peu bizarre sur des écrans larges... :D
La page de commentaires je l'ai faite aussi oui.
 
Pour les ombres... j'aime bien l'effet mais j'ai peut être gaffé oui. :D


---------------
“I'll thank you very much.”
Reply

Marsh Posté le 05-11-2006 à 11:09:40    

Pour les liens genre "*" qui pointent sur le post, le problème peut venir du fait que le lien soit vide... Vaut mieux y mettre le caractère * dedans (ou quelque chose de plus explicite), et le dégager via les différentes techniques disponible

Reply

Marsh Posté le 05-11-2006 à 13:18:42    

exact , je pose ma réponse ici comme j'avais posé la question et qu'entre temps j'ai résolu mon problème :  
 
c'est un problème de pas de bras, pas de chocolat :D  
pas de href, pas de main sur le lien !  
dans mon cas, c'était un pop up de galerie qui s'ouvrait à partir d'une zone d'une imagemap. comme le lien n'était pas indiqué par href dans le javascriptdu pop up, ben firefox dit qu'il n'y a pas de lien, et ne met pas le curseur main.  
par contre on peut bien cliquer pour ouvrir le pop up :pt1cable:  
 
j'ai rajouté un href dans la <area> , (qui recharge la page en cours en dessous du pop up quand il se déclenche, mais on s'en fout elle est très legère et l'image déja chargée ) et ça marche, du coup la petite main apparait sur le lien :D
 
la propriété cursor ne semble pas marcher sur firefox par contre, mais elle fonctionne sous IE .

Message cité 1 fois
Message édité par krysalia le 05-11-2006 à 13:19:32

---------------
Tuto ~ ►Nano Miams◄ ~ Books ♥
Reply

Marsh Posté le 05-11-2006 à 13:50:19    

krysalia a écrit :

dans mon cas, c'était un pop up de galerie qui s'ouvrait à partir d'une zone d'une imagemap. comme le lien n'était pas indiqué par href dans le javascriptdu pop up, ben firefox dit qu'il n'y a pas de lien, et ne met pas le curseur main.  
par contre on peut bien cliquer pour ouvrir le pop up :pt1cable:


Ah ben voilà, on code de la merde et on s'étonne que ça marche pas :o

Reply

Marsh Posté le 05-11-2006 à 16:31:36    

ah tu veux m'aider ? ben c'est super !  
j'attends ton projet de code propre de pop up a partir d'une imagemap, qui fonctionne sous firefox et IE, le tout en MP  :jap:  
 
merci a toi de ta gentille proposition [:marc]  
 


---------------
Tuto ~ ►Nano Miams◄ ~ Books ♥
Reply

Marsh Posté le 06-11-2006 à 11:28:47    

Pinzo a écrit :

Ouai ça doit faire un peu bizarre sur des écrans larges... :D
La page de commentaires je l'ai faite aussi oui.


Je parle de la page formulaire des commentaires, ça fait bizarre on se croirait sur un autre site :gratgrat:

Reply

Marsh Posté le 06-11-2006 à 17:50:38    

Skopos a écrit :

Je parle de la page formulaire des commentaires, ça fait bizarre on se croirait sur un autre site :gratgrat:

Ah non, bien entendu. C'est la page de Blogger, on peut pas la modifier. [:spamafote]


---------------
“I'll thank you very much.”
Reply

Marsh Posté le 08-11-2006 à 18:23:05    

Salut, comment as-tu fais pour changer la langue (exemple: moi j'ai "about me", "links"....etc) ?
 
Sinon, pas mal ton design ! :p

Reply

Marsh Posté le 08-11-2006 à 18:25:30    

Étant donné que je n'ai pas encore mis la barre latérale, je vois pas très bien de quoi tu parles... :??:


---------------
“I'll thank you very much.”
Reply

Marsh Posté le 08-11-2006 à 18:42:58    

Ah oué :/
Donc t'as rien traduit ?
Dans le code j'ai réussi a trouver et changer les titres, mais pour le profil ("about me" ) ça fait appel à un "truk" en PHP qu'on ne peut pas modifier !

Reply

Marsh Posté le 08-11-2006 à 18:47:54    

Bon, là Blogger est en rade donc j'arrive pas à accéder à ma dashboard ni au Knowledge de Blogger pour t'apporter la réponse, mais il me semble que oui, c'est tout à fait possible. Tous les éléments présents sur le template sont des tags propriétaires, chacun correspondant à un élément précis (date, titre, posts anciens, etc.). Il en est de même pour les éléments du profil (nom, localisation, etc.), donc tu peux balancer ces éléments dans une boîte quelconque à laquelle du donneras le nom que tu veux.
 
Personnellement j'ai jarté la partie "about me". [:spamafote]
 
 
 :hello:
 
EDIT: en fait j'ai réussi à y accèder. Voilà les tags de profil:
 

<$BlogOwnerNickname$> - Your nickname.
<$BlogOwnerFirstName$> - Your first name.
<$BlogOwnerLastName$> - Your last name.
<$BlogOwnerFullName$> - Your first and last name.
<$BlogOwnerEmail$> - Your email address.
<$BlogOwnerLocation$> - Your city, state and/or country.
<$BlogOwnerAboutMe$> - Your "About Me" text.
<$BlogOwnerPhotoUrl$> - The URL of your profile photo.
<$BlogOwnerProfileUrl$> - The URL of your complete profile.


 
Te te fais une présentation pas trop mal foutue avec ces tags et c'est bon.
 
http://help.blogger.com/bin/answer [...] topic=8930


Message édité par Pinzo le 08-11-2006 à 18:51:25

---------------
“I'll thank you very much.”
Reply

Marsh Posté le 08-11-2006 à 20:16:14    

Ah cool c'est bien ça qu'il me fallait, merci bien ;)

Reply

Marsh Posté le 10-11-2006 à 06:46:14    

UP!
 
La conception du template arrive gentillement à son terme. Néanmoins, j'ai un putain de problème que je n'arrive pas à résoudre. Du moins, mes connaissances en CSS m'empêchent de trouver une solution.
 
http://101tests.blogspot.com
 
Une petite comparaison Firefox / Internet Explorer s'impose. Alors, sous Firefox et sous Opera, le template sort parfait, tel que je le veux. Sous Internet Explorer (6) par contre, mon menu de droite se voit coupé au milieu. :/
 
Alors où est-ce que j'ai gaffé? J'ai mis un truc qu'il fallait pas dans le CSS?
 
Concernant le code CSS final, je veux bien que ce soit un peu le cambouis, mais bon, le résultat sort bien. Peut être qu'il y a plus simple, et donc peut être qu'un jour j'optimiserai ça. Pour le moment ça sort pas trop mal à pars ce putain de IE qui fait chier. :/
 
EDIT: ah, encore une chose... quelqu'un sait me dire pourquoi le nombre de commentaires affiché dans la petite boîte à droite du post se voit automatiquement copié à gauche du post aussi, sous IE?


Message édité par Pinzo le 10-11-2006 à 06:48:00
Reply

Marsh Posté le 10-11-2006 à 18:27:54    

UP?

Reply

Marsh Posté le 12-11-2006 à 13:56:13    

Pour le menu coupé, je ne suis pas un pro du Css, mais il s'agit peut être du paramétres : position
essaie de changer entre absolute ou relative ou autre chose ....

Reply

Marsh Posté le 12-11-2006 à 14:01:08    

Ouais attention aux positions absolues qui peuvent faire chier parfois

Reply

Marsh Posté le 12-11-2006 à 14:33:33    

J'ai déjà essayé... j'ai l'impression de pas trouver la bonne combinaison. :/

Reply

Marsh Posté le 12-11-2006 à 21:24:08    

Un float oublié ou en trop ?


---------------
Twitter
Reply

Marsh Posté le 12-11-2006 à 21:30:07    

c'est en chocolat ton blog j'aime bien  :)

Reply

Marsh Posté le 12-11-2006 à 21:44:11    

koskoz a écrit :

Un float oublié ou en trop ?

En trop... peut être... Oublié, je pense pas. :/
Vais voir. :jap:
 
Zenith: merci :hello:

Message cité 1 fois
Message édité par Pinzo le 12-11-2006 à 21:44:37
Reply

Marsh Posté le 12-11-2006 à 21:53:04    

Pinzo a écrit :

En trop... peut être... Oublié, je pense pas. :/
Vais voir. :jap:
 
Zenith: merci :hello:


 
En fait il savère que sur IE certains float sont en trop alors que sur FF si tu l'enlèves ça déconne (et sur IE au contraire ça fonctionne).
 
Il doit sans doute s'agir d'une mauvaise construction générale de la position des blocs et du flux mais pour ne pas me prendre la tête quand IE n'a pas besoin du float et que FF si tu fais un petit
 

Code :
  1. float: left !important;
  2. float: none;


---------------
Twitter
Reply

Marsh Posté le 12-11-2006 à 22:01:29    

koskoz a écrit :

En fait il savère que sur IE certains float sont en trop alors que sur FF si tu l'enlèves ça déconne (et sur IE au contraire ça fonctionne).
 
Il doit sans doute s'agir d'une mauvaise construction générale de la position des blocs et du flux mais pour ne pas me prendre la tête quand IE n'a pas besoin du float et que FF si tu fais un petit
 

Code :
  1. float: left !important;
  2. float: none;


Je vois... Ce ne serait pas plus correct de faire ainsi? --->
 

Code :
  1. #bloc {float: none;}
  2. html>body #bloc {float: left;}


 
 :??:

Message cité 1 fois
Message édité par Pinzo le 12-11-2006 à 22:03:26
Reply

Marsh Posté le 12-11-2006 à 22:28:15    

Je ne crois pas que ça fonctionne, tu dois faire "floater" chaque bloc en fait :/


---------------
Twitter
Reply

Marsh Posté le 13-11-2006 à 09:26:31    

Pinzo a écrit :

Je vois... Ce ne serait pas plus correct de faire ainsi? --->
 

Code :
  1. #bloc {float: none;}
  2. html>body #bloc {float: left;}


 
 :??:


Le plus correct c'est ça :
 
ie.css

Code :
  1. #bloc {float: left;}


style.css

Code :
  1. #bloc {float: none;}


html

Code :
  1. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  2. <!--[if lt IE 7]>
  3.   <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
  4. <![endif]-->

Reply

Marsh Posté le 13-11-2006 à 18:21:32    

FlorentG a écrit :

Le plus correct c'est ça :
 
ie.css

Code :
  1. #bloc {float: left;}


style.css

Code :
  1. #bloc {float: none;}


html

Code :
  1. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  2. <!--[if lt IE 7]>
  3.   <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
  4. <![endif]-->


:jap:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed