28172 sujets

CSS et mise en forme, CSS3

Que pensez vous de la mise en page en grilles

Salut,
J'ai dernière appris qu'on pouvait créer une mise en page d'un site en utilisant des grilles, à l'image de ce qui se fait en impression papier. J'ai trouvé deux articles de référence sur le domaine (du moins en francophone) c'est :

Nombre d'or, suite de fibonacci et autres grilles de mise en page pour design web de de Bruno Bichet

Utiliser une grille de Gilles Vauvarin

Personnellement, je ne sais quoi penser et j'aimerais bien savoir ce que vous en pensez.

Merci d'avance
le nombre d'or est utilisé dans les différents arts depuis très très longtemps (peinture : De Vinci, Rembrant, van gogh, Botticelli... sculptures...) ainsi qu'en architecture( la plupart des cathédrale, Gaudi, le corbusier...) et design et plein d'autres domaines (y compris la musique).
Il y a pas mal de bouquins là dessus, une des "références" étant Le nombre d'or de Matila c. Ghyka
Il faut envisager le nombre d'or comme une fréquence, une rythmique que l'on retrouve dans la struture même des éléments naturels et qui donc apporte une sensation visuelle d'harmonie.
Un site qui s'appuie sur le nombre d'or paraitra toujours plus agréable visuellement. Mais il ne faut pas non plus que cela devienne une contrainte...

bonne soirée
Salut,
Merci de ta réponse, je commençais à croire que personne n'allait me répondre xD

En fait, est ce qu'en utilisant les grilles on ne reviendrait pas en arrière quand à la Séparation du fond et de la forme ? Je m'explique, l'utilisation des tableaux pour la mise en page est désormais très fortement déconseillée et à juste titre car ça rend la mise à jour des styles d'une page web laborieuse, car à chaque fois faut toujours retourner à la page html et ça prends un temps fou.

Bah dans le même principe, retourner à chaque fois vers la page html pour changer les classes si l'on veut repositionner un élément (car c'est ce qu'il faut faire pour la mise en page en grilles) est assez laborieux non ?

Mais la bonne nouvelle, c'est que ce problème risque de très vite(ça c'est vite dit) être réglé grâce à la proposition de microsoft, la spec du grid positionning.

ça permettre de créer des colonnes très facilement avec css. Voici un lien vers la page de la proposition : CSS Grid Positioning Module Level 3
Kadus a écrit :
En fait, est ce qu'en utilisant les grilles on ne reviendrait pas en arrière quand à la Séparation du fond et de la forme ?

Non.

Kadus a écrit :
l'utilisation des tableaux pour la mise en page est désormais très fortement déconseillée

Disons plutôt: relativement déconseillée.

Kadus a écrit :
car à chaque fois faut toujours retourner à la page html et ça prends un temps fou

En pratique, pour un redesign complet, on retouchera fortement le code HTML, que l'on ait utilisé les CSS pour la structure ou pas. Cette retouche du code HTML sera peut-être facilitée s'il s'agit de manipuler quelques DIV plutôt que plusieurs tableaux imbriqués.

Kadus a écrit :
Bah dans le même principe, retourner à chaque fois vers la page html pour changer les classes si l'on veut repositionner un élément (car c'est ce qu'il faut faire pour la mise en page en grilles) est assez laborieux non ?

Il faut voir quels sont les objectifs. Si tu veux te fermer des possibilités de webdesign parce que ça ne facilite pas la maintenance du code HTML, pourquoi pas.

Kadus a écrit :
Mais la bonne nouvelle, c'est que ce problème risque de très vite (ça c'est vite dit) être réglé grâce à la proposition de microsoft, la spec du grid positionning.

Ce module CSS 3, qui permet d'associer un contenu à un emplacement dans une grille définie préalablement (quelle que soit la position de l'élément dans le code HTML), est effectivement très intéressant. À dans cinq ans pour commencer à expérimenter, et dans dix ans pour commencer à l'utiliser. Smiley smile
Merci pour ta réponse Florent ^^

Florent V. a écrit :

Il faut voir quels sont les objectifs. Si tu veux te fermer des possibilités de webdesign parce que ça ne facilite pas la maintenance du code HTML, pourquoi pas.


C'est vrai que j'ai une vision assez manichéenne sur la séparation du fond et de la forme Smiley sweatdrop

J'évite même les classes de type left (avec un float:left en css) je préfère directement appliquer les styles aux éléments. Et c'est vrai que c'est dommage de laisser passer des possibilités de webdesign à cause de ça.

Florent V. a écrit :

Ce module CSS 3, qui permet d'associer un contenu à un emplacement dans une grille définie préalablement (quelle que soit la position de l'élément dans le code HTML), est effectivement très intéressant. À dans cinq ans pour commencer à expérimenter, et dans dix ans pour commencer à l'utiliser. Smiley smile


D'où le "c'est vite dit" Smiley lol et c'est assez dommage.

Sinon, est il possible de créer un gabarit fluide avec les colonnes, par exemple peut on donner une largeur en em ?
il faut s'appuyer sur le nombre d'or mais ne pas en faire une contrainte...

a écrit :
Bah dans le même principe, retourner à chaque fois vers la page html pour changer les classes si l'on veut repositionner un élément (car c'est ce qu'il faut faire pour la mise en page en grilles) est assez laborieux non ?


c'est pour ça qu'il faut bien nommer ses class ou id au départ et ne pas chercher à appliquer la grille de façon rigide, mais juste l'avoir en tête (ou le principe du nombre d'or) pour obtenir un visuel le plus harmonieux et agréable possible...
ça peut simplement jouer sur comment positionner une image par rapport au texte, ou bien où positionner l'info importante de la page...

bonne soirée
Kadus a écrit :

retourner à chaque fois vers la page html pour changer les classes si l'on veut repositionner un élément (car c'est ce qu'il faut faire pour la mise en page en grilles) est assez laborieux non ?


Bonjour,

Il est important de ne pas confondre l'utilisation d'une grille pour la mise en page et l'utilisation d'un framework CSS. Ce sont deux choses totalement différentes : on peut très bien utiliser une grille sans framework !
Modifié par br1o (25 Mar 2009 - 01:48)
Sujet clos
Aller à