Projet design de site fini

snooper · 2 Janvier 2008

Bonjour

Le design du site n'a pas encore été mis en forme CSS, mais voici le rendu du design:

1) Ancien: http://www.legypteantique.com
2) Nouveau: http://www.legypteantique.com/xhtml0/

Il n'y a pas une grosse différence graphique, si ce n'est les suivantes, par rapport à l'ancien design:

Aspects Techniques

-Le design sera entièrement "CSSer", pour une meilleure lisibilité et intégration du site par rapport à l'ancien

-Le texte est modulable, selon le choix de l'internaute, pour une facilité d'accès des mal-voyants.

-Site conçu pour les résolutions dès 800 px de large

-Site optimisé Iexplorer et Firefox

-Sou-liens placés dans articles

-Allègement des métas, doctype renouvelé

Aspects graphiques

-Couleurs exprimées en rgb pour une parfaite harmonisation entre images graphiques (angles de bas de page) et menu, pour une harmonisationgrapgique

-Design les moins beaux supprimés

-Couleurs de bordures moins vives

-Les colonnes du design par défaut seront bleues au lieu de gris précédemment, la couleur préférée des français.

-Une bordure de 2 pixels tout autour du contenu principal pour mieux différencier tableau et fond d'écran, quand avant la colonne bleue du tableau se confondait au fond bleu du site par exemple.

Divers

-Les polices de caractères sont plus petites et plus "belles" à mon goût

-Une meilleure lisibilité des articles grâce aux différentes sous-parties

-Des sous-liens pour lire directement la partie qui nous intéresse

-Meilleure intégration des publicités Adsense (es publicités sont ici représent&es par les images ayant pour sous titre pub)

J'hésite encore à faire des bordures grisées au bord des tableaux à l'instar de http://www.anata.fr et à mettre des citations en bas des articles. Quand à l'image retour haut de l'article (la fleche rouge), est-ce assez explicite?

Pouvez vous me dire votre avis de manière constructive sur ce design (les "c'est magnifique" ou les "c'est de la daube" seront ici proscrits). Si vous avez des suggestions, n'hésitez pas.

Questions annexes: Pourquoi quand je mets le doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

la mise en page des <h1> et <h2> est differente que sans le doctype?

cf http://www.legypteantique.com/xhtml0/in ... octype.php

et

http://www.legypteantique.com/xhtml0/index.php

Comment aboutir au niveau du menu à un résultat type http://www.legypteantique.com/xhtml0/image_voulue.gif sachant que le titre est dans un h1? j'ai "tout" essayé: le div float = right, le span align=right, creer une nouvelle propriete dans la feuille css, ...

En attendant, je tiens à remercier tout ceux et toutes celles qui m'ont soutenu. Si vous avez besoin de quoi que ce soit à l'avenir, faites moi signe

Cordialement

jf_evreux · 2 Janvier 2008

salut,
je pense que tu devrais poster ton msg dans le forum idoine, sinon, de prime abord, je vois pas vraiment de changement, notable en tout cas. Il y a bien quelques couleurs et elements css qui changent mais je ne vois pas vraiment, pour etre direct, en quoi le design change ???

snooper · 2 Janvier 2008

tu veux dire quoi par forum idoine??? Je ne vois pas quel forum serait mieux adapté?

Le but de ce chnagement n'était pas de révolutionner le design, mais de faire plein de petite améliorations ici et là: plus rapide à charger, plus lisible, ...

Marie-Aude · 2 Janvier 2008

L'absence de doctype fait que tes navigateurs passent en mode quirks et interprétent le code à leur façon.

"forum idoine" veut sans doute dire forum spécialisé sur les css comme Alsacreations.

Rien qu'en lisant leurs tutos tu saurais comment faire des menus avec des listes en mettant une image en symbole de puce, au lieu de ton horreur de <img src> avec les <br /> (horreur au point de vue du code).

Par ailleurs je ne comprends absolument pas à quoi servent tes tables, tu n'as aucun besoin de table avec une mise en page aussi simple.

snooper · 2 Janvier 2008

Marie-Aude

Merci pour tout. Mais je sais comment mettre une image en puce (je l'ai fait pour le h1) je me suis simplement cantonne ici a l'aspect graphique des choses. Idem pour les table.

Je demandais simplement au niveau général un avis

snooper · 2 Janvier 2008

Marie-Aude

Merci pour tout. Mais je sais comment mettre une image en puce (je l'ai fait pour le h1) je me suis simplement cantonne ici a l'aspect graphique des choses. Idem pour les table. Sinon OK merci pour le forum je vais aller demander ça.

Je demandais simplement au niveau général un avis

Bonne nuit

bproductiv · 2 Janvier 2008

probleme de largeur le contenu est 'chassé' en bas... sur FF win Xp pro sp2

pcamliti · 2 Janvier 2008

bproductiv a dit:
probleme de largeur le contenu est 'chassé' en bas... sur FF win Xp pro sp2

idem avec IE 7

passion · 2 Janvier 2008

probleme de largeur le contenu est 'chassé' en bas... sur FF win Xp pro sp2

+1 :wink:

snooper · 2 Janvier 2008

Oui je sais entre temps j'ai essayé de coder le design en css, mais pourquoiu quand je mets dans mon css le code

BODY {
width: 754px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
background-image: url("/images/blue_background.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */

text-align: center;

}

#page
{
background-color: rgb(255,255,255);/*couleur de fond*/
width: 754px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#menu-haut
{
background-color: rgb(192,224,255);/*couleur de fond*/
width: 750px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
height: auto; /*hauteur automatique*/
border: 0px solid rgb(254, 140, 16); /*la bordure*/
margin-left: 2px;/*marge de gauche*/
margin-right: 2px;/*marge de gauche*/
margin-top: 2px;
border-top: none;/*pas de bordure en haut pour l'image*/
margin-top: none;/*pas de marge en haut*/
float: left; /*le menu sera a gauche*/

}

#menu-gauche
{
background-color: rgb(192,224,255);/*couleur de fond*/

border: 0px solid rgb(254, 140, 16); /*la bordure*/
margin-left: 0px;/*marge de gauche*/
border-top: none;/*pas de bordure en haut pour l'image*/
margin-top: none;/*pas de marge en haut*/
float: left;
width: 180px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
margin-left: 2px;/*marge de gauche*/
height: auto;/*hauteur automatique*/
}

#corps-de-page
{
height: auto;/*hauteur automatique*/
margin-left: 180px; /*marge a gauche*/
width: 570px; /*largeur*/
background-color: rgb(255,255,255);/*couleur de fond*/
border: 0px solid rgb(254, 140, 16);/*la bordure*/
}

l'article se glisse sous le menu gauche?

cordialement

Marie-Aude · 2 Janvier 2008

Parce que ton div qui contient la "couleur du site" est un chouia trop large.

Installe le plugin Web Developper Toolbar pour FF et utilises la fonction outline block, ça saute aux yeux.

En fait la largeur est 180 + 2 (bordure) et donc trop large par rapport à tes 570

Par ailleurs, d'expérience, même si tu "sais comment faire", je te conseille de coder les choses directement dès le départ. Cela te permettra d'éviter d'avoir à revoir ton design entièrement parce qu'il y a un petit truc qui ne fonctionne pas.

Il ne fait pas faire des espacements avec des balises <p> mais en gérant les marges et les paddings.
Pour tes images tu n'as pas besoin de faire deux divs, un seul contenant l'image et soit un <p> soit un <span> sera suffisant.
Pareil pour la signature....

Tu n'as toujours pas une structure de "faux columns" si tu n'as pas abandonné cette idée, c'est ce que tu devrais mettre en place en premier.

snooper · 3 Janvier 2008

Merci marie-aude pour le conseil.

Tu veux dire quoi par Parce que ton div qui contient la "couleur du site" est un chouia trop large. ??? J'ai passé de nombreuses heures a reprendre le code de siteduzero, alsacreation, ... en vain

Sinon ce que je comprends pas c'est le coup du 750.

Le tableau fait 754 pixels de large. Il y a 2 pixels de marge autour de tout le contenu. Donc le menu gauche fait 180 px avec 2 px a gauche en marge, le menu central 570 px avec 182 px de marge a gauche et 2 px a droite. Je ne vois vraiment pas ou est l'erreur. Je vais essayer ton logiciel.

Toujour est-il, le design doit avoir pour rendu http://www.legypteantique.com/xhtml/

Quand aux false colomns, je m'en occupe des demain.

Bonne nuit a toi marie-aude, et, pour toi comme les autres qui m'ont aidé, n'hésitez pas à vous inscrire sur mon annuaire http://www.i-services.net/membres/annua ... user=17146

ou a me demander, je vous inscrit sur mes partenaires.

Cordialement