Mise en page : table nécessaire ?

bonjour

tout simplement : comment faire ca : www.zelphis.com en css ?
les table ne sont-ils pas nécessaires dans ce type de mise en page, bien qu'il ne s'agisse pas de données tabulaires.

merci pour votre aide

Hello,

zelphis a écrit :
tout simplement : comment faire ca : www.zelphis.com en css ?

Pour commencer, je ne suis pas sûr que la page donnée en exemple donne un résultat correspondant aux attentes. Pour ma part, j'obtiens ceci (capture d'écran):



Le titre «Zelphis» semble un peu trop large. Sans doute parce qu'il est affiché chez moi en Verdana, et pas en Century Gothic (je n'ai pas cette fonte). Conseil: pour ce genre de titre/logo, si on doit garantir un rendu graphique donné, utiliser une image (avec texte alternatif qui va bien).

Et en agrandissant un peu la taille du texte, j'obtiens ceci:



Même en ne prenant que le premier cas en compte, on n'obtient pas d'alignement parfait (ce qui serait intéressant d'un point de vue esthétique).

En partant du principe qu'on recherche ce type d'alignement exact (ou du moins qu'on fait le maximum pour s'en approcher), on peut procéder ainsi en CSS:

Solution simple mais limitée

On peut utiliser le positionnement absolu et des dimensions fixes (hauteurs largeurs figées) pour les cinq éléments de la page (on utiliser à priori des div pour ces éléments). On peut ainsi obtenir des alignements au pixel près, et un très bon rendu. MAIS: ça ne sera pas extensible en hauteur, et lors de l'agrandissement du texte celui-ci risque tout simplement de déborder.

Pour ce dernier point, on pourrait trouver un compromis en figeant les quatre blocs de gauche, et en laissant s'étendre en hauteur uniquement le bloc de droite. Travailler avec la propriété min-height pour obtenir pile la bonne hauteur avec une taille de texte «standard».

Solution un poil plus compliquée

En utilisant le positionnement flottant, on peut construire la même mise en page, mais en gardant la possibilité d'une extensibilité en hauteur.

Solution encore un peu plus compliquée

Toujours en utilisant le positionnement flottant, on laisse possible l'extensibilité en hauteur... mais pour garder des alignements parfaits pour les bordures des différents éléments, en plus de figer les largeurs, on jouera avec la technique dite des «colonnes factices». Ça n'est pas très compliqué, mais si on n'a pas l'habitude de cette petite gymnastique intellectuelle ça peut être assez peu évident...


Pour le reste...

zelphis a écrit :
les table ne sont-ils pas nécessaires dans ce type de mise en page, bien qu'il ne s'agisse pas de données tabulaires.

On vient de voir qu'ils ne sont pas ici nécessaires. Ceci dit, dans certains contextes ça peut faciliter la vie et faire gagner du temps, ce qui n'est pas négligeable.
Par exemple, l'utilisation d'un tableau simple dans la page suivante (et les autres pages du site sur le même modèle) me semble très correcte.

Pour améliorer la qualité de ce site, en dehors de l'aspect communication et rédactionnel sur lequel je ne m'étend pas (surtout vu l'heure et la longueur déjà conséquente de ce message), on peut affirmer qu'il faut:

- prendre un hébergement professionnel et s'arranger techniquement pour que le nom de domaine zelphis.com reste toujours visible, au lieu d'une bascule sur un hébergement en .free.fr;
- modifier le code des pages pour travailler en mode Standard et non pas en mode Quirks;
- corriger l'intégration de la mise en page afin d'obtenir des alignements corrects (vu qu'apparemment ce design est basé sur ces alignements);
- travailler absolument le texte alternatif des images!

Il me semble que Zelphis propose la création de sites web. Si ces problèmes de technique d'intégration que je cite pour le site zelphis.com se retrouvent également sur les réalisations du studio, c'est tout de même regrettable. Ou bien on peut voir ça façon verre à moitié plein: il y a une bonne marge de progression sur ces questions.
Modifié par Florent V. (25 Nov 2007 - 00:33)

Bonsoir Florent,

J'étais sur le sujet et j'avais cette adresse http://zelphis.free.fr/webdesign.html comme sujet c'est curieux, non ?

J'allais proposer les boites flottantes... je te laisse poursuivre

merci pour les réponses.
j'avais pensé à "float" en effet, mais je n'ai pas réussi : j'arrive avec float left à aligner 3 boites, mais pas les 2 du dessous (webdesign et sceno).
un petit bout de code me serait bien utile !
merci

Bonsoir zelphis,

Il me semble primordiale de prendre en haute considération les pertinantes remarques de Florent ( pfff et dire que je ne suis même pas payé pour dire cela... )

Ce que tu peux faire par exemple :
Dans une feuille de style :

.boite flottante{
	 float:left;[#blue];/*Ou right*/[/#]
	 background-color: [#blue]To be define[/#];
	 border: [#blue]If you want[/#];
	 margin:[#blue]X[/#]px;[#blue]/*Pour espacer tes boites*/[/#]
	 height:[#blue]To be define[/#];
	 width:[#blue]To be define[/#];
	 etcaetera...
	}

hr {
  clear: both; [#blue]/*Tu peux cacher ou styliser ta barre d'espacement*/[/#]
}

Puis dans ton html :

<div>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p class="boite flottante">boîte flottante</p>
<p etcaetera...</p>
<hr/>
</div>

Voili, voilou

Apres si tu souhaites avoir un nombre de boite limité par ligne à toi d'ajouter un conteneur a udessus qui limitera la taille max, et donc permettra au boite un retour à la ligne.

A chaque besoin son CSS !

zelphis a écrit :
j'avais pensé à "float" en effet, mais je n'ai pas réussi : j'arrive avec float left à aligner 3 boites, mais pas les 2 du dessous (webdesign et sceno).
un petit bout de code me serait bien utile !

En l'occurrence, je pense qu'un petit bout de code ne serait pas si utile que ça. Ce qui serait vraiment utile, c'est de se familiariser un peu plus avec le positionnement CSS, et les subtilités du positionnement flottant.

Avec un peu d'expérience, on peut faire mentalement un «découpage» de la page en zones que l'on groupera ensemble afin de les positionner. Ici, on peut voir deux «colonnes», une première qui contient les quatre carrés, et une deuxième qui contient le rectangle de droite.

Mais je reviens à ma première réponse: est-ce que le positionnement absolu ne conviendrait pas à ce que tu veux faire pour cette page? Auquel cas, pas la peine de rentrer dans les subtilités des flottants, si le but est uniquement de réaliser cette page.

Si tu veux utiliser une solution à bases de flottants, il faudra tâcher de bien en comprendre le fonctionnement, ce qui implique de savoir:
- comment fonctionne exactement le positionnement flottant;
- comment gérer les dépassements de flottants;
- ce qu'est un contexte de formatage et comment l'utiliser avec des flottants.

On pourra lire:
http://openweb.eu.org/articles/initiation_float/
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Et en complément:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

Dans le cas d'une utilisation du positionnement flottant, la structure HTML que j'utiliserais serait la suivante:

<div id="global">

<div id="bloc_gauche">
	<div class="ligne">
		<div id="zelphis">...</div>
		<div id="graphisme">...</div>
	</div>
	<div class="ligne">
		<div id="webdesign">...</div>
		<div id="scenographie">...</div>
	</div>
</div><!-- #bloc_gauche -->
<div id="bloc_droite">
	...
</div><!-- #bloc_droite -->

</div><!-- #global -->

Avec cette base, on devrait avoir une base propre pour une utilisation correcte du positionnement flottant, et on a même la possibilité d'utiliser la technique des colonnes factices assez simplement (pour peu qu'on la connaisse et qu'on soit capable de visualiser une utilisation pertinente de cette technique dans le cadre d'un design donné).
Modifié par Florent V. (25 Nov 2007 - 03:07)

Hum...

Curieuse approche.

Si on posait d'abord les contenus et leur structure ?

<h1>Ici, l'image à faire, réunissant en image-texte tout ce qui est dans le premier bloc avec le logo</h1>
<h2>titre non affiché, nos prestations</h2>
<ul>
<li>image-lien vers graphisme</li>
<li>image-lien vers web design</li>
<li>image-lien vers scénographie etc</li>
</ul>
<h2>titre non affiché, notre équipe</h2>
<ul>
<li>texte et lien vers X</li>
<li>texte et lien vers Y</li>
<li>etc</li>
</ul>

La question pourrait être alors:
- alourdir cette structure pour le plaisir de passer par des flottants ou par un tableau ?
- ou bien ajouter quelqiues id, deux-trois balises dans le détail de la dernière liste, et positionner ?

Laurent Denis a écrit :

Si on posait d'abord les contenus et leur structure ?
- ajouter quelqiues id, deux-trois balises dans le détail de la dernière liste, et positionner ?

+1


…a-t-on idée de se prendre un chevreuil la veille d'une conférence? Franchement?

+1 pour les titres non affichés (c'est à dire cachés pour le média "screen" essentiellement).

La structure que propose Laurent est plus logique (plus organisée) que celle du code que j'ai collé ci-dessus. Si on ne souhaite pas utiliser les flottants, elle est parfaite. Si on veut passer par les flottants, on pourra hybrider sa proposition avec la mienne.

Personnellement, dans ce cas précis, je passerais par du positionnement absolu et des dimensions fixes (sauf pour la hauteur du bloc de droite (l'équipe), pour lequel j'utiliserais un min-height).

OK, merci à tous pour vos réponses. je vais essayer ces différentes pistes.