Technique CSS à l'essai

[vinche999]

Bonjour,

J'ai des problèmes d'affichage pour mon site http://www.bcal.be par rapport à certaines résolutions.
Du coup, en suivant la critique de certaines personnes sur ce forum, j'ai décidé d'apprendre le CSS et de créer un site plus professionnel.

Ce n'est que le début.
J'ai testé l'affichage de cette maquette (qui doit encore être grandement amiéliorée) en 1024... et 800...
http://www.bcal.be/modele.php
Tout ce passe bien et tout est aligné.
Je n'ai pas la possibilité de la tester sur d'autres résolutions.

Pourriez-vous le faire pour moi et me dire si c'est bon?
Pouvez-vous également me dire ce que vous pensez de cette maquette?

Merci d'avance

 

[shrom]

Vu que les dimansions sont fixes, il ne devrait pas y avoir de problème sur les autres résolutions.

Chez moi, ça passe en 1280x800.

 

[easy_zik]

Le code m'a l'air tres bien. Un petit conseil cependant :

Evite les <BR> pour séparer les blocs...
Ca doit se traiter avec les marges normalement. (margin-top, margin-bottom, etc...)

 

[neophyte]

+ 1 avec easyzik

en 800x640 c'est Ok

Les dimesions fixes ne résolvent pas tous les problèmes si le centrage n'est pas OK : ça va sous windows (text-align: center) mais sous mac il n'y a aucun centrage donc on perd une marge (j'ai regardé sous Mac 0S X Safari + Firefox + IE5) ; tu peux t'en rendre compte avec firefox ou mozilla sous windows dans ta résolution en diminuant la largeur de ta fenêtre...

Il y a plusieurs mèthodes pour centrer correctement (et text-align n'est pas correct pour les blocs) , une piste ici

Ne pas oublier de tester aprés en plus petite résolution (on a des surprises avec le centrage vertical...)

Sinon n'oublie pas que tu n'as pas mis de description et qu'il ne faut pas que GG retrouve cette page plus tard : duplicate content...

 

[vinche999]

Le code m'a l'air tres bien.

Peux tu également me dire ce que tu penses du site.
Est ce que je me rapproche d'un site PRO?

Si on compare avec la version actuelle (version qui ne fait pas l'unanimité sur ce forum). Qu'en dis tu?

 

[vinche999]

Les dimesions fixes ne résolvent pas tous les problèmes si le centrage n'est pas OK : ça va sous windows (text-align: center) mais sous mac il n'y a aucun centrage donc on perd une marge (j'ai regardé sous Mac 0S X Safari + Firefox + IE5) ; tu peux t'en rendre compte avec firefox ou mozilla sous windows dans ta résolution en diminuant la largeur de ta fenêtre...

Il y a plusieurs mèthodes pour centrer correctement (et text-align n'est pas correct pour les blocs) , une piste ici

Merci de tes conseils.
Mais, j'ai suivi alsacréations pour le centrage de ma page.
J'ai du rater un épisode.

j'ai contrôlé en mettant la fenêtre plus petite et j'ai vu le problème.
Comment puis je résoudre ce problème de centrage?

 

[mamijo]

c'est peut-être parce que tu as donné une largeur de 78% : il vaudrait mieux la donner explicitement, malheureusement ce n'est pas toujours bien compris cela dépend du contexte (en plus cela ne te sert à rien puisque les blocs intérieurs ont une largeur explicite en pixels)

 

[neophyte]

tu as un exemple avec le site de mon profil (l'accueil n'est plus valide à cause d'une bêtise dans un javascript mais regarde les pages internes) ; tu as aussi les pages de photos du site de mamijo...

mieux : un site avec des template (en bas de page tu as un template centré)

et dans ce template la largeur est donnée en % comme tu le fais, donc mystère et boule dde gomme...

 

[vinche999]

c'est peut-être parce que tu as donné une largeur de 78%

Exactement, c'est ce "%" qui posait problème.
J'ai changé et mis 780px et là, miracle, ca fonctionne !!!
Centré comme pas deux.

Bon, première chose règlée !!!

J'attends vos remarques et critiques objectives sur le modèle : http://www.bcal.be/modele.php

Des conseils sur ce que je devrais faire.
Si cela ne vous ennuye pas bien sûr.

Merci

 

[neophyte]

c'est OK sous mac ou du moins il n'y a plus que le petit défaut de centrage vertical des textes dans les cases de ton menu : tu peux t'en apercevoir avec mozilla ou firefox sous windows...

Il manque la balise description et les keywords.

A ta place je passerais au XHTML maintenant : tu as fait 99 % du chemin et le doctype que tu as choisi est provisoire (et moins fiable : c'est peut-être pour ça que tu as eu un problème avec les % , en XHTML ça marche) ...

 

[vinche999]

Merci neophyte mais comment dois je faire pour passer en xhtml?

 

[neophyte]

Il faut changer le doctype (tu peux prendre celui de mon profil, pas celui de mamijo c'est de l'expèrimental il y a un FR là où il faudrait un EN...) et tant que ça ne passe pas au validateur ce n'est pas bon :lol:

De mémoire voici les différences (un attribut obligatoire peut être vide exemple title=""):

* attribut title obligatoire pour la balise <a>
* attribut alt obligatoire pour la balise <img>
* pas d'attribut name sauf pour la balise <a>
* et surtout : TOUTES les balises doivent être fermées, y compris les balises qui n'ont pas de contenu (seulement des attributs) : br (<br />) , img (<img ... />) et les metas donc
<meta name="Description" content="et patati et patala..." />
...

En cherchant avec GG tu devrais trouver mieux...

Je n'ai pas tout compris pour les balises pour déclarer les javascript mais j'ai trouvé une façon de faire qui fonctionne :? :

<script type="text/javascript" src="truc.js"> </script>

Au point de vue syntaxe c'est idiot mais quand j'utilise

<script type="text/javascript" src="truc.js" /> j'ai des problèmes...

Tu vois que dans ton cas il n'y a plus grand-chose à faire, bon courage

Par ailleurs j'ai regardé le look de ton site : bravo pour le progrés par rapport à l'ancienne version

 

[vinche999]

Bonjour neophyte,

Juste pour te dire que j'ai validé mon site test en XHTML 1.0 strict.

Merci pour tes conseils.

 

[u7365]

* attribut title obligatoire pour la balise <a>
* attribut alt obligatoire pour la balise <img>
* pas d'attribut name sauf pour la balise <a>

"title" n'a jamais été obligatoire sur les balises A, mais facultatif.
"alt" sur les IMG par contre oui.