1er site en CSS et Xhtml... j'ai du faire plein d'erreur

Bonsoir à vous tous !
Ma chérie va lancer son institut de beauté... et me demande de lui créer un site...
arf début des galères.

j'ai trouver 2 tutos vidéo de jojoratonlaveur exceptionnels (merci à lui) mais malgrès cela j'ai plein de soucis...
* déja le premier c'est que dès que je change la résolution de mon écran, tout bouge dans tous les sens... lol (parfait chez moi sur un 22")
* site concu sous firefox donc au passage de IE... le bordel
* sans compter le fait que j'ai beaucoup de mal à caler tout au bon endroit je patauge un peu dans les margin et padding mais a force de tester j'y arrive.
* et enfin, quand je met la balise utf-8, WC3 validator bug et je n'ai plus les accents...

l'adresse du site est : http://www.hors-du-temps.fr

si quelqu'un a le courage de jeter un œil au code pour me dire ou sont les problèmes...

je vous met ici les liens fairs les deux fichiers codes :
index.h (a renomer .html)
style.c (.css)

Merci à vous tous, et bravo pour votre boulot !
Modifié par taiyong (02 Jun 2009 - 10:51)

Salut taiyong et bienvenue sur le forum,

Ce soir en rentrant, je vais voir ce que je peux faire. J'ai fait un saut sur ton url et en effet, c'est pas le top. Pour info, la largeur maximum pour une résolution 1024*768 est de 960px. Je te posterai demain la correction de ta page.

++

cool merci beaucoup, c'est vraiment sympa !

re,

Là, je viens de regarder le code source. . Faut reprendre pratiquement à zéro. Toutefois, l'important, c'est d'essayer et de comprendre. Je vais te faire un gabarit ce soir et tu t'en inspireras. .

++
Modifié par Nolem (30 May 2009 - 22:13)

Salut,

Nolem a écrit :
Faut reprendre pratiquement à zéro.

Pourquoi dis-tu ça ?

Il y a bien le H1 qui devrait être sur "Hors du temps" (voir l'article : Mettre un titre en image et rester accessible) et donc transformer les H1 actuels en H2.

Le tout devrait également être dans un conteneur pour pouvoir centrer facilement.

Plus 2 ou 3 choses à revoir au niveau CSS...

Bref c'est un bon début.

Je t'invite à jeter un oeil au tuto Réalisation d'un design complet (XHTML / CSS) en 5 étapes pour voir les différentes étapes d'une intégration ainsi qu'aux gabarits pour partir d'une bonne structure de base.


Edit:

taiyong a écrit :
* et enfin, quand je met la balise utf-8, WC3 validator bug et je n'ai plus les accents...

Je suppose que tu veux parler de la balise <meta http-equiv="Content-Type"... auquel cas c'est normal puisque ton document est bien enregistré en latin1 (iso-8859-1). Lire Notions de base sur l'encodage des caractères.
Modifié par Heyoan (31 May 2009 - 00:04)

Salut taiyong,

Nolem a écrit :

...
Faut reprendre pratiquement à zéro.
...

ouch, hier soir j'ai été un peu dur. mille excuses :s. Néanmoins, j'ai vu des petites erreurs dans le html et le CSS. Je t'ai rectifié le tout. Je te propose d'aller sur ce lien et de cliquer sur ton pseudo (taiyong). Tu vas trouver un zip avec les corrections/optimisations du css et de l'HTML. Là, je n'ai pas regarder si mon code est valide. J'ai dû peut être faire une pétouille quelque part.

En ce qui concerne les erreurs récurantes que j'ai vu :
* trop de div (j'ai viré pas mal de div obsolète). Attention, ta sémantique peut en dépendre
* des petits soucis de compréhension de style en cascade (parent->enfant). Ce n'est pas la peine de te répéter puisque l'une des forces du CSS est de permettre de donner une propriété au père et ainsi son enfant récupèrera cette dernière
* des petits soucis de compréhension de ciblage (sans trop grande gravité).
* Je me suis aperçu que tu as des petits soucis de positionement. (float right et left, clear, etc.). Il me semble qu'il y a sur Alsacréations, des tuts à ce propos. en faisant un petite recherche, tu devrais trouver ton bonheur.
* Lors de l'assignation de la font-family, toutes polices ayant des nom composées doivent être écrit entre guillemets doubles « " » ex :

body{
	font-family:"Times New Roman", times, georgia, serif;
}

Sinon, j'ai remarqué que ton menu principal est bien. J'ai pratiquement pas retouché ce dernier. Je te conseille de regarder mon code source et de le décortiquer. Également, n'hésite pas de me poser ou de poser des questions sur le forum. Je sais que mon code source peut encore être optimiser. Mais bon, j'ai préféré la clarté à l'optimisation.

Pour finir, j'ai vu que tu utilises trop le png. C'est bien, mais le soucis IE6, n'aime pas . Sur ce problème, il y a des solutions simples afin d'inviter le visiteur à mettre à jour son browser.

Bonne soirée à toi

nb : page testée sous IE6 et FF2.
Modifié par Nolem (31 May 2009 - 22:28)

SUPER ! ! !

T'es Génial Nolem !

Merci pour tout tu me sors une grosse épine du pied.
je vais pouvoir me baser sur ton super boulot pour les autres pages !

Je vais m'y mettre de ce pas !

si jamais tu passe sur Strasbourg fais moi signe que je te paye un coup (ou un massage )

Merci encore !

Nolem : j'ai fait quelques petites modif de ton super boulot que je t'invite à voir ici

ou si tu veux voir les fichiers modifiés : taiyong_modif

Merci encore, je vais commencer les autre pages à présent.
Modifié par taiyong (02 Jun 2009 - 11:35)

Bonjour Taiyong,

Cela me fait grandement plaisir que cela te convienne.

En effet, j'ai vu les petites modifications et je les trouve plus pertinentes. Néanmoins, je viens de comparer ma version et la tienne au validateur. Attention, tu as 5 petites erreurs. Ce n'est pas très grave en soi. Tu as fait une petite étourderie de saisie je pense :

<meta name="keywords" lang=[b]"[/b]fr[b]"[/b] content="institut, beauté, strasbourg, spa, soins, relaxation, massage, esthetique, épilation, ayurvédique, ayurveda, visage, dos, jambes, aromathérapie" />

Les guillemets que tu as utilisés sont inapropriés ou inextants.

Par ailleurs, si tu trouves que le sujet soit résolu, je t'invite à rééditer ton premier message et indiquer dans le titre [Résolu]. exemple :
[Résolu]Ma question pertinente.

Bonne journée à toi

ps : C'est gentil pour ton invitation. Le soucis est que je suis loin de Strasbourg. En tout cas merci de ton geste très sympatique.
Modifié par Nolem (04 Jun 2009 - 14:54)