Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1380 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°718592
korxx
Posté le 25-09-2005 à 10:43:46  profilanswer
 

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 :
  3. Site plus large (900 au lieu de 800).
  4. Seulement 2 mignatures par ligne.
  5. Affichage plus important pour les images (partie droite).
  6. Simplification du css.
  7. Supression de l'include et de la page inutile (cause doublon de <head> ).
  8. Probleme d'affichage sous ie et firefox résolu.
  9. Utilisation d'une feuille de style externe.
  10. 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: )
  14. - Mise a jour, 27/09 :
  16. - Creation de la page d'acceuil et de sous galleries.
  17. - 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
mood
Publicité
Posté le 25-09-2005 à 10:43:46  profilanswer
 

n°718610
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 11:19:42  profilanswer
 

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
n°718644
PIGs_GrosT​ony
Force rose !
Posté le 25-09-2005 à 12:35:19  profilanswer
 

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 ...
n°718646
PIGs_GrosT​ony
Force rose !
Posté le 25-09-2005 à 12:38:30  profilanswer
 

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;
 :)

Message cité 1 fois

---------------
Bois mes paroles ...
n°718676
MisteR War​E
Allons plus loin =&gt;
Posté le 25-09-2005 à 14:29:27  profilanswer
 

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:

Message cité 1 fois

---------------
http://www.reivaxbook.fr
n°718682
baai
Posté le 25-09-2005 à 14:44:21  profilanswer
 

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.

n°718720
PIGs_GrosT​ony
Force rose !
Posté le 25-09-2005 à 16:07:25  profilanswer
 

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

Message cité 2 fois

---------------
Bois mes paroles ...
n°718721
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 16:15:15  profilanswer
 

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

Message cité 1 fois

---------------
Linux registered user #352556
n°718723
MisteR War​E
Allons plus loin =&gt;
Posté le 25-09-2005 à 16:29:49  profilanswer
 

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
n°718750
korxx
Posté le 25-09-2005 à 17:31:35  profilanswer
 

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
mood
Publicité
Posté le 25-09-2005 à 17:31:35  profilanswer
 

n°718752
korxx
Posté le 25-09-2005 à 17:33:28  profilanswer
 

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
n°718754
korxx
Posté le 25-09-2005 à 17:34:43  profilanswer
 

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)

n°718836
PIGs_GrosT​ony
Force rose !
Posté le 25-09-2005 à 20:04:06  profilanswer
 

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;
  9.      margin: 0px;
  11.      padding: 10px 10px 10px 10px;
  13.      padding: 8px 8px 8px 8px;
  15.      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:

Message cité 1 fois

---------------
Bois mes paroles ...
n°718858
korxx
Posté le 25-09-2005 à 20:32:36  profilanswer
 

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;
  9.      margin: 0;
  11.      padding: 10px;
  13.      padding: 8px;
  15.      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
n°718862
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 20:35:56  profilanswer
 

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

Message cité 1 fois

---------------
Linux registered user #352556
n°718867
Damonya
Posté le 25-09-2005 à 20:39:08  profilanswer
 

message supprimé


Message édité par Damonya le 29-09-2005 à 01:27:17
n°718869
korxx
Posté le 25-09-2005 à 20:39:48  profilanswer
 

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
n°718891
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 21:09:01  profilanswer
 

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.

Message cité 1 fois

---------------
Linux registered user #352556
n°718897
korxx
Posté le 25-09-2005 à 21:30:50  profilanswer
 

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
n°718903
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 21:47:32  profilanswer
 

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.

Message cité 1 fois

---------------
Linux registered user #352556
n°718906
MisteR War​E
Allons plus loin =&gt;
Posté le 25-09-2005 à 21:58:16  profilanswer
 

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

Message cité 1 fois

---------------
http://www.reivaxbook.fr
n°718909
korxx
Posté le 25-09-2005 à 22:01:58  profilanswer
 

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 :)

Message cité 1 fois
n°718910
korxx
Posté le 25-09-2005 à 22:04:39  profilanswer
 

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
n°718912
MisteR War​E
Allons plus loin =&gt;
Posté le 25-09-2005 à 22:08:55  profilanswer
 

korxx a écrit :

normalement les problemes sont résolus :)


Bien joué  :jap:


---------------
http://www.reivaxbook.fr
n°718916
claque2000
GamerTag : claquos2000
Posté le 25-09-2005 à 22:13:40  profilanswer
 

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

Message cité 1 fois

---------------
Linux registered user #352556
n°718918
korxx
Posté le 25-09-2005 à 22:16:25  profilanswer
 

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]

n°719630
korxx
Posté le 27-09-2005 à 13:40:58  profilanswer
 

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 ;)

n°719687
Damonya
Posté le 27-09-2005 à 15:17:02  profilanswer
 

message supprimé

Message cité 1 fois
Message édité par Damonya le 29-09-2005 à 01:27:32
n°719698
PIGs_GrosT​ony
Force rose !
Posté le 27-09-2005 à 15:28:31  profilanswer
 

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:

Message cité 2 fois

---------------
Bois mes paroles ...
n°719714
korxx
Posté le 27-09-2005 à 16:05:53  profilanswer
 

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
n°719726
Damonya
Posté le 27-09-2005 à 16:27:29  profilanswer
 

message supprimé

Message cité 1 fois
Message édité par Damonya le 29-09-2005 à 01:27:44
n°719729
korxx
Posté le 27-09-2005 à 16:30:28  profilanswer
 

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
n°719822
korxx
Posté le 27-09-2005 à 20:38:03  profilanswer
 

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
n°720638
korxx
Posté le 29-09-2005 à 19:19:01  profilanswer
 

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"

Message cité 1 fois
n°720666
FlorentG
Unité de Masse
Posté le 29-09-2005 à 20:56:50  profilanswer
 

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

Message cité 1 fois
n°720668
korxx
Posté le 29-09-2005 à 21:02:03  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

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

 

Sujets relatifs
Votre avis sur le graphisme d'un siteUn petit avis sur mon site
Votre avis sur un siteDemanded'avis - critique sur mon site
Besoin de critiques sur mon site... newbie inside..Venez tester mon site : spleener-creation
acceuil site web quel logiciel utiliser?logo du site s'affiche dans les favoris ? comment?
Site en Flash pour avis et conseils 
Plus de sujets relatifs à : 1er Site (css/html/php) en construction, conseils ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.148 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR