[Résolu] Mon premier site en CSS (sans tableaux)

Bonjour tout le monde.

Bon ben je me lance voici ma premiere page faite entièrement en CSS sans tableaux

Bon, fatalement, vu que je suis totalement novice en la matière, je me suis fortement inspiré de la mise en page du site même d''Alsacréations ainsi que de son code, d'ou aucun mérite de ma part.

Je me suis également inspiré du tuto d'Alsacréations (d'ailleurs un merci infini à la rédaction pour ce formidable tuto) :

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

Et fatalement du code source d'autres sites tels :

http://www.csszengarden.com/tr/francais/
-http://www.webonorme.net/

Cela dit j'ai pas tout compris

Mais bon, c'est super gai à faire un site en CSS.

Suivant cette première mouture, ma première impression c'est que je ne continuerai pas dans cette voie, c'est à dire un site avec des dimensions larges fixes. Suivant les derniers posts que j'ai pu suivre, apparemment il semble préférable de créer des sites "fluides". Je pense que c'est la meilleure solution, car quand je vois ce petit travail sur mon écran central qui est en 1280 x 1024 et sur celui de mon beauf qui est en 1600 x 1200, l'espace perdu sur les côté du site est tout de même considérable !

Quel est votre avis là dessus ?

Tout est encore à faire, tels les liens d'évitements, retour vers le haut, peaufiner le code, les autres pages etc , ............ mais surtout comprendre ce que je fais

Merci à tous pour votre patience à lire les bévues des novices du CSS world et ......... bonne nuit
Modifié par Felipe (26 Apr 2010 - 14:34)

Coucou !

Moi j'aime bien ton design, surtout pour un premier design, c'est très sympa.
Il manque juste une majuscule sur le "contact" du haut.

Bravo et bonne continuation

E²xiT a écrit :
Coucou ! Moi j'aime bien ton design, surtout pour un premier design, c'est très sympa. Il manque juste une majuscule sur le "contact" du haut. Bravo et bonne continuation

Merci E²xiT

Corrigé pour le C de contact.

Reste encore des tonnes de choses à faire ...... surtout bien comprendre les CSS, pas évident du tout ces CLASS avec les "#" dans les DIV.

Je suis tellement habitué à créer des class du style comme ci dessous :

.texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #FFCC66;
	text-align: center;
}

Modifié par Cinecriture (21 Dec 2006 - 05:24)

Bonjour,

Le forum "Ergonomie et esthétique générale, demandes d'avis et de critiques" me semble plus adapté, non ?

Eldebaran a écrit :
Bonjour,Le forum "Ergonomie et esthétique générale, demandes d'avis et de critiques"
me semble plus adapté, non ?

Bonjour Eldebaran.

Ce n'est pas pour l'esthétique en fait que j'ai mis ce post ici mais pour des critiques sur le codage afin que j'évolue dans les CSS dans le cadre de l'accessibilité.

C'est pour cela que j'ai mis en titre mon premier site en CSS sans tableaux. Enfin première page pour le moment.
Modifié par Cinecriture (21 Dec 2006 - 09:34)

Salut,

a écrit :
Suivant cette première mouture, ma première impression c'est que je ne continuerai pas dans cette voie, c'est à dire un site avec des dimensions larges fixes. Suivant les derniers posts que j'ai pu suivre, apparemment il semble préférable de créer des sites "fluides". Je pense que c'est la meilleure solution, car quand je vois ce petit travail sur mon écran central qui est en 1280 x 1024 et sur celui de mon beauf qui est en 1600 x 1200, l'espace perdu sur les côté du site est tout de même considérable !

Quel est votre avis là dessus ?

Tout dépend comment sont fait les sites fluides. Personnellement je préfère un site centré bien structuré plutôt qu'un site fluide qui rend complexe sa consultation.

Pour expliquer :
De manière générale, le contenu d'un site se doit d'être court, simple et direct. Donc des phrases et des paragraphes courts.
Le problème c'est que généralement dans un site fluide, les lignes de texte deviennent très longues car c'est généralement le contenu qu'on choisit de laisser s'adapter.
Le résultat, c'est que les paragraphes qui font 3-4 lignes en 800x600 en font par fois une seule ou presque en 1600x1200. Donc on pert la structure rectangulaire que créent optiquement ces paragraphes.
De plus à chaque fin de ligne l'oeil est obligé de faire un effort pour revenir en arrière au début de la ligne suivante, car il a un plus grand parcours à faire.

Pour le design aussi, je trouve qu'il est assez peu évident de créer un design original qui mette en valeur les zones du site, car les images ne s'adaptent pas. Cela a pour conséquence de donner souvent des sites qui sont visuellement un peu trop carrés et peu personnalisés.

Pour mon propre goût, je trouve qu'un site centré permet à l'oeil de tout voir directement sans parcourir toute la largeur de l'écran. En 800x600 ou 1024x768, le problème ne se pose pas, car le site centré occupe une grande majorité de la page. En 1280x960 les marges latérales deviennent en effet plus conséquentes, mais le visiteur en fait abstraction pour se concentrer sur le site lui même, et il y'est aidé par le fait que le site centré est bien plus structuré visuellement. Il n'y a qu'en 1600x1200 et plus que cela n'est vraiment pas terrible, car le site n'occupe même pas 50% de la largeur et le contenu y semble un peu noyé. Ceci dit, il n'y a encore quand même que très peu de gens équipés de telles résolutions.

En fait je me dis que ca doit dépendre de la quantité de contenu dans le site. Pour un site simple ou les pages contiennent peu, un site centré est peut être plus adapté, pour un site très riche en bases de données, permettra plus d'information à l'écran en fluide, surtout pour les grandes résolutions.

Pour ton site, la redondance entre les deux menus est un peu géneante, surtout que les intitulés des liens ne sont pas les mêmes, cela peut créer une confusion dans la tête du visiteur.
Modifié par Mikachu (21 Dec 2006 - 11:21)

Mikachu a écrit :
Le problème c'est que généralement dans un site fluide, les lignes de texte deviennent très longues car c'est généralement le contenu qu'on choisit de laisser s'adapter. Le résultat, c'est que les paragraphes qui font 3-4 lignes en 800x600 en font par fois une seule ou presque en 1600x1200. Donc on pert la structure rectangulaire que créent optiquement ces paragraphes.

Mince j'avais déjà oublié cet aspect des sites fluides, effectivement j'ai pu remarquer cela dans des sites avec tables à 100% sur des écrans à haute résolution.

Mikachu a écrit :
Pour ton site, la redondance entre les deux menus est un peu géneante, surtout que les intitulés des liens ne sont pas les mêmes, cela peut créer une confusion dans la tête du visiteur.

Ben en fait j'ai d'abord calqué sur le site d'Alsacréations pour comprendre les mécanismes des CSS et du fameux menu "evitement" en tête de page. http://www.alsacreations.fr/

Mais j'ai effectivement ajouté des liens qui n'ont rien à faire là.

Voilà c'est changé, ton site est ajouté dans mes liens & inspirations ponctuelles le temps d'assimiler la technique.

Mikachu a écrit :
En 1280x960 les marges latérales deviennent en effet plus conséquentes, mais le visiteur en fait abstraction pour se concentrer sur le site lui même, et il y'est aidé par le fait que le site centré est bien plus structuré visuellement.

Oui tout à fait, ca m'a effleuré l'esprit et tu confirmes ce que je pensais en silence.

Mikachu a écrit :
En fait je me dis que ca doit dépendre de la quantité de contenu dans le site. Pour un site simple ou les pages contiennent peu, un site centré est peut être plus adapté, pour un site très riche en bases de données, permettra plus d'information à l'écran en fluide, surtout pour les grandes résolutions.

Je note

Merci pour ton intervention.
Modifié par Cinecriture (21 Dec 2006 - 12:17)

L'intérêt des sites fluides c'est de pouvoir travailler sur une largeur supérieure à 770px, par exemple 900px ou 1000px en gagnant sur les deux tableaux.

. Largeur optimale, limitée à 1000px donc, pour les grandes et très grandes résolution d'écran.

. Adaptation suivant le principe du fluide pour les résolutions inférieures, 800*600 ou 640*480.
Modifié par clb56 (21 Dec 2006 - 13:16)

Tiens en parlant de résolution et design fluide, voici un article sur alistapart avec une solution qui utilise javascript. Qu'en pensez-vous?

P.S. : sur mon écran 20" large je n'ai jamais les fenêtres de mon navigateurs en plein écran, je préfère les dimensionner aux proportions «format papier» pour ne pas être surpris quand je tombe sur un site fluide.
Modifié par Patidou (21 Dec 2006 - 13:35)

clb56 a écrit :
L'intérêt des sites fluides c'est de pouvoir travailler sur une largeur supérieure à 770px, par exemple 900px ou 1000px en gagnant sur les deux tableaux. Largeur optimale, limitée à 1000px donc, pour les grandes et très grandes résolution d'écran. Adaptation suivant le principe du fluide pour les résolutions inférieures, 800*600 ou 640*480.

Ok, je comprends mieux maintenant.

Merci.

Patidou a écrit :
pour ne pas être surpris quand je tombe sur un site fluide.

C'est vrai qu'un design fluide non limité ça doit donner des résultats un peu dingue sur certaines résolutions

Mais cette limitation est assez facile à obtenir.

Reste une question de fond, est ce que les très grandes résolutions sont réellement adaptées à la consultation de site internet ? C'est donc sans doute plus à l'heureux propriétaire de l'interface qu'au développeur de traiter le problème s'il y en a.

clb56 a écrit :

Reste une question de fond, est ce que les très grandes résolutions sont réellement adaptées à la consultation de site internet ? C'est donc sans doute plus à l'heureux propriétaire de l'interface qu'au développeur de traiter le problème s'il y en a.

Tout à fait, ce genre de solution (javascript) est un pis-aller... L'utilisateur n'est quand même pas si neuneu au point de ne pas raccourcir la largeur de la fenêtre de son navigateur quand les lignes de texte trop longues deviennent illisibles.

Patidou a écrit :

Tout à fait, ce genre de solution (javascript) est un pis-aller

Oui, d'autant qu'on y arrive très bien en css simples. Un peu dur dur avec IE comme souvent, mais avec IE7 tout rentre dans l'ordre... Donc vive la vie

Patidou a écrit :

L'utilisateur n'est quand même pas si neuneu au point de...

Cette phrase devrait être écrite en lettres d'or aux frontons de tous les forums de développement !!!

clb56 a écrit :


Oui, d'autant qu'on y arrive très bien en css simples. Un peu dur dur avec IE comme souvent, mais avec IE7 tout rentre dans l'ordre... Donc vive la vie

Tu penses au max-width?

Patidou a écrit :


Tu penses au max-width?

Oui, oui, évidemment.