[Travail en cours] Refonte d'un site, vos avis (XHTML, CSS, design...

Bonjour,

Je poste dans ce forum parce que ma question regroupe diverses choses.
J'ai fait un site il y a un certain temps, sans connaître aucune règle du html, en ayant (mal) appris sur le tass :

http://www.luneo.org

Je voudrais le rendre moins amateur, tant par son contenu que sa mise en page, et surtout par son code.

Avant de me renseiger, j'ai créé ce "design" pour la page d'accueil sous photoshop, pour avoir une idée de ce que je voulais :

http://www.luneo.org/temp/site.jpg

(édité par Raphael : merci de cocher l'option "vignette" lorsque vous voulez afficher de grandes images sur le forum, sinon les images géantes comme celle-ci provoquent un affichage désastreux)
Reponse de l'autre Raphaël : oui, désolé, je n'avais pas fait attention

Sachant que pour la galerie, c'est ça va être à peu près comme mon site actuel, mais en plus petit.

Puis je me suis renseigné un peu sur le xhtml, la sémantique, et la mise en forme par css. J'ai lu le bouquin xhtml de Ian Graham.

Au niveau de la sémantique, j'ai un titre, l'image en haut à droite, au dessus du menu, un menu (donc une liste de liens), et un contenu général, le carré blanc à gauche, est-ce correct ?

Après divers bidouillages pour faire à peu près ce que je voulais, j'en suis arrivé à ça :

http://www.luneo.org/v3/

Ce n'est qu'un début, je n'ai pas encore eu le temps de résoudre les divers bugs.
Mais avant de me replonger dedans, et eventuellement aggraver l'existant, je me permets de vous demander conseil.

J'en viens aux question

1/ Trouvez vous que le changement de design est pertinent ?
2/ Au niveau du code, je suis parti d'un div de contenu, à gauche, et d'un menu à droite. J'ai rajouté un div pour le menu, pour pouvoir y mettre l'image en haut, et le fond gris. Puis un div global pour centrer, je n'ai pas réussi autrement . Est-ce correct, ou est-ce que je pars d'emblée dans une mauvaise direction ?
3/ Si j'essaie de mettre un padding dans mon div de contenu, ça me décale toute la page, je n'arrive pas à comprendre pourquoi...

Merci de votre aide, et de vos conseils si vous avez eu le courage de lire tout ça
Modifié par Luneo (17 Feb 2005 - 10:51)

Salut,

1) Je trouve "étrange" la bande blanche en bas de ton image et sur son côté droit. Elle crée une impression de déséquilibre dans le placement de l'image
2) Je te conseille de mettre le même padding au dessus et en dessous de tes liens de menus. Pour l'instant, ils sont déséquilibrés.
3) On ne crée pas de l'espace avec des sauts de ligne : les margin et padding sont là pour ça
4) Fais attention à la taille de ta zone de contenu : tu risques de te retrouver limité pour présenter ton portfolio
5) Le div pour centrer est quasi obligatoire si on veut centrer en hauteur, il me semble (étant donné que la hauteur du body est par définition celle de son contenu)

1/ Si tu parles du placement de l'image, collée en haut à gauche, normalement elle est centrée, avec une marge blanche tournante, mais je n'ai pas encore réussi à la placer !
2/ Je n'avais pas trouvé le problème, je vais regarder ça de plus près
3/ Ca je savais que c'était pas bon, mais je voyais pas comment faire. Mais pareil, je vais me pencher dessus, je devrais y arriver !
4/ C'est un peu juste, mais j'ai prévu une image de 400px de côté max, quitte à ouvrir un grand format dans une autre fenêtre...
5/ La je comprends pas... Le div, je l'ai mis uniquement pour centrer en largeur ! En hauteur, j'ai simplement une marge je crois.

En tous cas, merci beaucoup pour ces réponses

Pour l'image, il faut remplacer ta définition de #contenu comme suit dans le CSS):

#contenu
{
	[b][#red]padding: 25px;[/#][/b]
	float: left;
	width: [b][#red]450[/#][/b]px;
	height: [b][#red]450[/#][/b]px;
	background-color: #FFFFFF;
}

ça fonctionne, bien que je n'aime pas particulièrement les "px", mais bon, ça fonctionne...

@+, HoPHP
Modifié par HoPHP (15 Feb 2005 - 08:59)

Merci beaucoup !!
J'avais oublié de retirer le padding de la taille que j'affichais, c'est pour ça que je ne comprenais pas

Sinon, pour les px, je suppose que tu préfères la solution des pourcentages ?
C'est ce que j'avais commencé à faire, mais pour un début, j'ai trouvé ça un peu compliqué...
De toute façon, quand j'aurai un peu mieux assimilé tout ça, je pourrai passer en pourcentage !

Un gros problème se pose cependant avec le "em", les "pt" ou les "%": pour afficher des images, c'est pas évident pour qu'elle paraisse nette. Tu es obligé d'avoir une multiple de la taille d'origine (en px), pour que ça ne soit pas trop laid !

M'enfin bon, dans ce cas, ça joue

@+, HoPHP

Je ne pensais pas modifier la tailles des images, en fait, mais c'est vrai que le problème du coup c'est que le contenu risque facilement d'être trop petit !

Sinon j'ai bien avancé, dès que j'arrive à mettre ça en ligne, je vous montre pour exposer mes problèmes

Bonjour à tous,

Voilà où j'en suis désormais :

http://raph77.free.fr

J'ai erreurs dans mon fichier css, que je n'ai pas encore corrigé, je me suis concentré sur la partie code.
Il y a quelque chose que je n'ai pas compris :
Dans la page de portfolio, quand je clique sur une image, j'ai l'image qui s'affiche dans le cadre. Je voudrais centrer cette photo dans le bloc qui la contient, mais je ne veux pas centrer le contenu de ce bloc dans toutes les pages puisqu'il est amené à contenir du texte.
J'ai donc voulu mettre un margin: 0px auto; sur cette image, comme on fait pour un bloc, et comme j'ai cru lire quelque part.
Est-ce parce que c'est un élément en ligne ?

D'autre part, est-ce régulier de ne spécifier qu'une hauteur ou une largeur à une image ?
Mes photos doivent s'afficher en 400px max sur leur plus grand côté, or elles sont plus grandes.
Donc selon l'orientation portrait ou paysage, c'est au choix la largeur ou la hauteur que je veux spécifier. Mais je ne connais pas le rapport de proportions qui n'est pas toujours identique...
Modifié par Luneo (17 Feb 2005 - 10:50)