1er Site (css/html/php) en construction, conseils ?

1er Site (css/html/php) en construction, conseils ? - Web design - Graphisme

Marsh Posté le 25-09-2005 à 10:43:46    

Bonjour :)
 
Je suis en train de realiser mon premier site et j'aurais besoin de vos avis sur ce que j'ai fait jusqu'a maintenant.
J'ai choisi une mise en page a l'aide de css, et j'ai utilisé du php pour tout les parties dynamique du site.
(Creation des vignettes, affichage des images, vérification sur la presence de commentaire et affichage le cas echeant)
 
Par contre je suis moyennement convaincu par mon systeme de navigation :/
Vous en pensez quoi ?
 
Une idée de ce que je pourrais mettre en arrivant sur les galleries ? (lorsque l'on a pas encore choisi l'image a afficher ? )
 
 
Merci d'avance sur toute critique ou commentaire ou aide qui me sera offerte  :jap:  
 
http://stephane-l.club.fr/korxx22/
 

Code :
  1. Modifications effectuées, 25/09 :
  2. Site plus large (900 au lieu de 800).
  3. Seulement 2 mignatures par ligne.
  4. Affichage plus important pour les images (partie droite).
  5. Simplification du css.
  6. Supression de l'include et de la page inutile (cause doublon de <head> ).
  7. Probleme d'affichage sous ie et firefox résolu.
  8. Utilisation d'une feuille de style externe.
  9. Utilisation d'id sur les images afin de ne pas s'y perdre dans le scrolling lors du rafraichissement de la page (Merci a FlorentG pour l'idée et l'aide sur le code  :jap: )
  10. - Mise a jour, 27/09 :
  11. - Creation de la page d'acceuil et de sous galleries.
  12. - Refonte du design :
    • Fond bleu au lieu de blanc
    • [*]Zone d'affichage des images encadré, j'ai viré le "bloc" gris qui etait peu esthetique aux dire de certains.
    • [*]Très légere diminution de la hauteur afin que le site ne soit pas redimentionné lors d'une resolution > ou = a 1024/768
    • revers de la medaille, les images sont plus petites...


Message édité par korxx le 29-09-2005 à 09:30:43
Reply

Marsh Posté le 25-09-2005 à 10:43:46   

Reply

Marsh Posté le 25-09-2005 à 11:19:42    

Hum ça a l'air pas mal, voir mm sympathique.
 
Par contre,c'est quoi l'énorme espace blanc entre la barre de menu et le reste du site ? Un bug d'affichage avec Safari où c'est normal ?
Tir d'écran joint :  
http://img357.imageshack.us/img357/921/image25ge.th.png
 
Sinon mais c'est pas si important que ça mais c'est mieux de séparer le fichier css de l'html.
 
Edit : Ah mais j'avais pas fait gaffe, comment ca se fait que y'a plusieurs <head></head> dans ta page ?
        Une seule fois le doctype ça suffit aussi

Message cité 1 fois
Message édité par claque2000 le 25-09-2005 à 11:24:39

---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 12:35:19    

j'ai une bonne et une mauvaise nouvelle:
la bonne c'est que ton site il est plutot beau, sobre, bien construit (un site sans table ca fait plaisir)
la mauvaise c'est qu'il est pas top avec le navigateur mozilla. Alors bien sur avec IE c'est beau les ascenseur son rouge et tout, mais bon il fau savoir que IE respecte tres mal les standards CSS et il se permet certaine deviations inacceptable (sur mon site, parfois du texte disparaissai sans raison, j'ai été obligé de revoir son apparence parceque Monsieur IE n'aimai pas le fait que j'utilise plusieur fois la propriété clear dans mon CSS.
 
Enfin bon essaye de developpé a la fois avec IE et Firefox, meme tente de tester avec d'autre navigateurs . Sinon bah bravo
 
P.S: si tu veu resepecter les normes xhtml, il faut construire tes balise img come ca:
<img src="" alt"" /> avec l'attribut alt a chaque foi et le /


---------------
Bois mes paroles ...
Reply

Marsh Posté le 25-09-2005 à 12:38:30    

Ah et le CSS il est correct mais il peut etre optimisé genre
 
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;
tu remplace par
padding: 0; (sans majuscule le CSS)
 
BACKGROUND-COLOR: #ffffff;
tu remplace par
background: #fff;
 :)


---------------
Bois mes paroles ...
Reply

Marsh Posté le 25-09-2005 à 14:29:27    

Korxx >> Bonne initiative de prendre la technologie CSS.
Il te faut maintenant une accessibilité sur tous les navigateurs.
Par ailleur, une bnnière avec un peu plus de déco que les chiffres (OU ces chiffres)
qui remplissent mieux cet aplat de bleu derriere serait le bienvenu.
Sinon c'est bien parti  :jap:  
 
 
PIGs_GrosTony >> bienvenue sur Forum Hardware  :jap:


---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 25-09-2005 à 14:44:21    

Autant pour les ascenceurs rouges on peut se dire que c'est pas grave si on ne les a pas (sous autre chose qu'IE), autant l'espace vide entre la banière et les images est impossible à laisser tel quel : parce qu'en effet ce n'est pas limité à Safari, on l'a aussi avec Firefox.
 
Et au passage, sous Firefox idem, je n'ai pas accès à la molette de la souris dans le boc des miniatures.

Reply

Marsh Posté le 25-09-2005 à 16:07:25    

merci MisteR WarE !! Mais je me demande un truc : comment sais tu que je suis nouveau??? :bounce:


---------------
Bois mes paroles ...
Reply

Marsh Posté le 25-09-2005 à 16:15:15    

PIGs_GrosTony a écrit :

merci MisteR WarE !! Mais je me demande un truc : comment sais tu que je suis nouveau??? :bounce:


 
Pitêtre en regardant ton profil  :D


---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 16:29:49    

PIGs_GrosTony a écrit :

merci MisteR WarE !! Mais je me demande un truc : comment sais tu que je suis nouveau??? :bounce:


claque2000 a écrit :

Pitêtre en regardant ton profil  :D


 :jap:


Message édité par MisteR WarE le 25-09-2005 à 16:30:30

---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 25-09-2005 à 17:31:35    

claque2000 a écrit :

Hum ça a l'air pas mal, voir mm sympathique.
 
Par contre,c'est quoi l'énorme espace blanc entre la barre de menu et le reste du site ? Un bug d'affichage avec Safari où c'est normal ?
Tir d'écran joint :  
http://img357.imageshack.us/img357 [...] 5ge.th.png
 
Sinon mais c'est pas si important que ça mais c'est mieux de séparer le fichier css de l'html.
 
Edit : Ah mais j'avais pas fait gaffe, comment ca se fait que y'a plusieurs <head></head> dans ta page ?
        Une seule fois le doctype ça suffit aussi


 
C'est pas prévu pour etre comme ca non, en fait j'ai mis en absolute pour le margin-top et la il a l'air de te le considerer en relative, mais c'est peut etre moi qui utilise mal le css vu que je debute...
 
Sinon j'ai prévu de séparer le css de l'html mais je le ferais a la fin, la je me familiarisais avec l'outil.
 
Plusieurs <head> ? bizarre, faut que je regarde.
 
edit : pour les head je pense savoir :) J'ai mis en include le fichier php qui genere les mignature etc..
or pour tester ce fichier j'avais fait une page avec <Head > et doctype, le duplicage doit venir de la :)
Je corrige ca tout de suite ;)


Message édité par korxx le 25-09-2005 à 17:36:40
Reply

Marsh Posté le 25-09-2005 à 17:31:35   

Reply

Marsh Posté le 25-09-2005 à 17:33:28    

MisteR WarE a écrit :

Korxx >> Bonne initiative de prendre la technologie CSS.
Il te faut maintenant une accessibilité sur tous les navigateurs.
Par ailleur, une bnnière avec un peu plus de déco que les chiffres (OU ces chiffres)
qui remplissent mieux cet aplat de bleu derriere serait le bienvenu.
Sinon c'est bien parti  :jap:  
 
 
PIGs_GrosTony >> bienvenue sur Forum Hardware  :jap:


 
Je vais essayer de resoudre ces problemes, merci pour ces encouragements et conseils.   :jap:


Message édité par korxx le 25-09-2005 à 17:34:58
Reply

Marsh Posté le 25-09-2005 à 17:34:43    

PIGs_GrosTony a écrit :

Ah et le CSS il est correct mais il peut etre optimisé genre
 
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;
tu remplace par
padding: 0; (sans majuscule le CSS)
 
BACKGROUND-COLOR: #ffffff;
tu remplace par
background: #fff;
 :)


 
thx je met ca a jour :)
 
Sinon une idée pour qu'il n'y ai pas la marge de 200px qui s'affiche sous firefox ? (ca correspond en fait a la taille du header)

Reply

Marsh Posté le 25-09-2005 à 20:04:06    

alors le css est encore optimisable, je te donne juste les lignes que tu peux améliorer:
 

Code :
  1. scrollbar-face-color: #780001;
  2.      scrollbar-shadow-color: #000000;
  3.      scrollbar-highlight-color: #000000;
  4.      scrollbar-3dlight-color: #000000;
  5.      scrollbar-darkshadow-color: #000000;
  6.      scrollbar-track-color: #000000;
  7.      scrollbar-arrow-color: #000000;
  8.      margin: 0px;
  9.      padding: 10px 10px 10px 10px;
  10.      padding: 8px 8px 8px 8px;
  11.      color: #ffffff;

 
 
voila a toi de trouver comment ca s'améliore.
le principe c'est eviter les redondances, c'est jamais très bon
 
ensuite sinon pour ton problême de marge, il faut faire des test hein y'a pas de miracle, essaye de retier #header , de tester en changeant des parametre de css. La j'ai regardé mais je t'avou que je vois pas trop. Enfin la plupart du temps, les bug qu'on croi dût a firefox, sont en fait des grosse erreur de notre part, qu'internet explorer ne vois pas puisque c'est de la m..... (dsl)
 
voila bon courage :)   :bounce:


---------------
Bois mes paroles ...
Reply

Marsh Posté le 25-09-2005 à 20:32:36    

PIGs_GrosTony a écrit :

alors le css est encore optimisable, je te donne juste les lignes que tu peux améliorer:
 
 
 
voila a toi de trouver comment ca s'améliore.
le principe c'est eviter les redondances, c'est jamais très bon
 
ensuite sinon pour ton problême de marge, il faut faire des test hein y'a pas de miracle, essaye de retier #header , de tester en changeant des parametre de css. La j'ai regardé mais je t'avou que je vois pas trop. Enfin la plupart du temps, les bug qu'on croi dût a firefox, sont en fait des grosse erreur de notre part, qu'internet explorer ne vois pas puisque c'est de la m..... (dsl)
 
voila bon courage :)   :bounce:


 
 
 

Code :
  1. scrollbar-face-color: #780001;
  2.      scrollbar-shadow-color: #000;
  3.      scrollbar-highlight-color: #000;
  4.      scrollbar-3dlight-color: #000;
  5.      scrollbar-darkshadow-color: #000;
  6.      scrollbar-track-color: #000;
  7.      scrollbar-arrow-color: #000;
  8.      margin: 0;
  9.      padding: 10px;
  10.      padding: 8px;
  11.      color: #fff;

 
 
 
Merci pour ce petit cours ;)
 
Je suis en train de m'installer firefox pour me pencher sur ce bug d'affichage.


Message édité par korxx le 25-09-2005 à 20:40:17
Reply

Marsh Posté le 25-09-2005 à 20:35:56    

Tu n'as peut être pas fini les modifs mais au cas où :  
ca fait pas très beau l'écart de largeur entre le header et le reste du site


---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 20:39:08    

message supprimé


Message édité par Damonya le 29-09-2005 à 01:27:17
Reply

Marsh Posté le 25-09-2005 à 20:39:48    

claque2000 a écrit :

Tu n'as peut être pas fini les modifs mais au cas où :  
ca fait pas très beau l'écart de largeur entre le header et le reste du site


 
Je ne comprends pas de quel ecart tu parle, je pense que tu as un probleme de fichier en cache.
 
edit : ecart d'affichage sous firefox, je me penche sur le probleme.
Par contre il n'y a plus l'ecart de marge en haut  :lol:
 
 
Alors pour l'ecart j'ai trouvé d'ou ca venait mais je me demande comment le resoudre pour conserver un affichage qui soit correct dans IE et dans firefox & co
Apparemment le padding est gérée de 2 maniere differentes.
 
pour ie, c'est une marge interne a chaque bloc
pour firefox, c'est une marge externe a chaque bloc (ca m'elargit donc le bloc de la valeur du padding)
 


Message édité par korxx le 25-09-2005 à 20:48:48
Reply

Marsh Posté le 25-09-2005 à 21:09:01    

J'ai vidé mon cache et donc le problème est toujours présent. Voila le tir d'écran :  
http://img302.imageshack.us/img302/3280/image11me.th.png
On voit bien sur cette image que la zone grise d'affichage n'est pas alignée avec l'image du header, ce qui fait pas très beau. Il en est de même à gauche mm si la différence d'alignement n'a l'air d'être que de moins de 10 pixels.


---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 21:30:50    

claque2000 a écrit :

J'ai vidé mon cache et donc le problème est toujours présent. Voila le tir d'écran :  
http://img302.imageshack.us/img302 [...] 1me.th.png
On voit bien sur cette image que la zone grise d'affichage n'est pas alignée avec l'image du header, ce qui fait pas très beau. Il en est de même à gauche mm si la différence d'alignement n'a l'air d'être que de moins de 10 pixels.


 
oui j'ai installé firefox et j'ai les memes problemes que toi, j'en ai trouvé l'origine mais j'arrive pas a resoudre le probleme...  :cry:  
merci en tout cas de tes reports de bug :)
 
edit : probleme résolu, merci beaucoup de m'avoir eclairé sur ces problemes de conception  :jap:  
 


Message édité par korxx le 25-09-2005 à 21:40:36
Reply

Marsh Posté le 25-09-2005 à 21:47:32    

Il reste toujours un petit décalage sur le côté gauche. Le menugauche est alligné avec rien en fait, c'est bizarre. Ni aligné avec le 8 qui ressort de l'image du header, ni avec le bord de cette image. Enfin ça fait une impression bizarre.


---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 21:58:16    

Ces problèmes d'affichages sont dûs aux marging mal gérés : à revoir les paramètres CSS des marges.


---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 25-09-2005 à 22:01:58    

MisteR WarE a écrit :

Ces problèmes d'affichages sont dûs aux marging mal gérés : à revoir les paramètres CSS des marges.


 
normalement les problemes sont résolus :)

Reply

Marsh Posté le 25-09-2005 à 22:04:39    

claque2000 a écrit :

Il reste toujours un petit décalage sur le côté gauche. Le menugauche est alligné avec rien en fait, c'est bizarre. Ni aligné avec le 8 qui ressort de l'image du header, ni avec le bord de cette image. Enfin ça fait une impression bizarre.


 
 
Aucun probleme chez moi sous ie ou sous firefox, j'ai fait des captures d'ecran et j'ai comparé avec l'outil ligne dans photoshop :)
 
Je viens de verifier sur les screens que tu avais posté, aucun probleme apparemment  :jap:

Message cité 1 fois
Message édité par korxx le 25-09-2005 à 22:06:23
Reply

Marsh Posté le 25-09-2005 à 22:08:55    

korxx a écrit :

normalement les problemes sont résolus :)


Bien joué  :jap:


---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 25-09-2005 à 22:13:40    

korxx a écrit :

Aucun probleme chez moi sous ie ou sous firefox, j'ai fait des captures d'ecran et j'ai comparé avec l'outil ligne dans photoshop :)
 
Je viens de verifier sur les screens que tu avais posté, aucun probleme apparemment  :jap:


 
Ok c'était bien juste une impression. Joli travail sur la journée


---------------
Linux registered user #352556
Reply

Marsh Posté le 25-09-2005 à 22:16:25    

claque2000 a écrit :

Ok c'était bien juste une impression. Joli travail sur la journée


 
 
J'etais au boulot toute la journée :o C'est juste ce soir  :sol:  
 
Bon en meme temps j'ai pas fait grand chose, juste corrigé les bugs  [:ddr555]

Reply

Marsh Posté le 27-09-2005 à 13:40:58    

Petite mise à jour :)
 
Le design est legerement modifié (plus de bloc gris pour l'affichage des images mais un cadre a la place, un fond bleu au lieu de blanc)
 
mais surtout il y a maintenant un semblant de page d'acceuil ;)

Reply

Marsh Posté le 27-09-2005 à 15:17:02    

message supprimé

Message cité 1 fois
Message édité par Damonya le 29-09-2005 à 01:27:32
Reply

Marsh Posté le 27-09-2005 à 15:28:31    

ouais du coup je sais pas ou t'en est mais t'a l'ai d'avoir resolu ton souci. Par contre le padding, sous IE ou sous Firefox c'est toujours une marge interne au bloc (et le margin externe) . Sinon ta feuille de style est tres belle maintenant :D
Continu bon courage :D
:bounce:


---------------
Bois mes paroles ...
Reply

Marsh Posté le 27-09-2005 à 16:05:53    

Damonya a écrit :

euh t sûr ? Je vois que la bannière et une image à gauche ! :heink: ah si et un menu horizontal sous la bannière


 
 
 
Désolé petit pb d'upload c'est de nouveau up, il n'y avait pas encore la dubdivision en gallerie :)  
 
 
 

PIGs_GrosTony a écrit :

ouais du coup je sais pas ou t'en est mais t'a l'ai d'avoir resolu ton souci. Par contre le padding, sous IE ou sous Firefox c'est toujours une marge interne au bloc (et le margin externe) . Sinon ta feuille de style est tres belle maintenant :D
Continu bon courage :D
:bounce:


 
en fait j'ai fait un nouveau bloc dans lequel j'ai defini le padding et ca a resolu tous mes problemes, mais je t'assure qu'avec firefox il etendait la zone du bloc (ex largeur fixé a 200, padding a 8 je me retrouvais avec un bloc de 216 de large, vraiment space)
 
Merci pour ma feuille de style :)


Message édité par korxx le 27-09-2005 à 16:09:34
Reply

Marsh Posté le 27-09-2005 à 16:27:29    

message supprimé

Message cité 1 fois
Message édité par Damonya le 29-09-2005 à 01:27:44
Reply

Marsh Posté le 27-09-2005 à 16:30:28    

Damonya a écrit :

as tu mis ceci dans ton code ?
 
*{padding:0;margin:0;border:0;}


 
 
dans le body oui pourquoi ?
 
enfin j'ai pas mis border:0, mais padding et margin a 0 dans le body {}


Message édité par korxx le 27-09-2005 à 16:32:47
Reply

Marsh Posté le 27-09-2005 à 20:38:03    

bon j'ai rajouté un petit retour page d'accueil :)
Ca facilite un peu la navigation   :jap:  
 
 
(quoi j'ai galéré pour le placer en m'enmellant les pinceaux pendant 1h sur le css ? :o )


Message édité par korxx le 27-09-2005 à 21:53:44
Reply

Marsh Posté le 29-09-2005 à 19:19:01    

PIGs_GrosTony a écrit :

ouais du coup je sais pas ou t'en est mais t'a l'ai d'avoir resolu ton souci. Par contre le padding, sous IE ou sous Firefox c'est toujours une marge interne au bloc (et le margin externe) . Sinon ta feuille de style est tres belle maintenant :D
Continu bon courage :D
:bounce:


 
 
le probleme venait sans doute de ca :
 
"BoxModel Microsoft :  
Quand tu fais un width, le width concerne le padding, le border et le contenu  
 
BoxModel W3C, un width ne concerne que le contenu.  
donc la largeur d'une boite sera Width+padding+border"

Reply

Marsh Posté le 29-09-2005 à 20:56:50    

korxx a écrit :

le probleme venait sans doute de ca :
 
"BoxModel Microsoft :  
Quand tu fais un width, le width concerne le padding, le border et le contenu  
 
BoxModel W3C, un width ne concerne que le contenu.  
donc la largeur d'une boite sera Width+padding+border"


Ca c'est valable si IE est en mode Quirks. Suffit de mettre un Doctype Strict, et de ne pas mettre de déclaration XML, et c'est bon

Reply

Marsh Posté le 29-09-2005 à 21:02:03    

FlorentG a écrit :

Ca c'est valable si IE est en mode Quirks. Suffit de mettre un Doctype Strict, et de ne pas mettre de déclaration XML, et c'est bon


 
 
ah ok, bon je sais pas de quoi venait le probleme alors :o  
 
Le principal etant qu'il soit résolu :D

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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