[W3C] Design liquide

**artotal** · 17/09/2006, 15h24

Bonjour,
je suis sur un design liquide, jusque là en utilisant le positionnement floatant sa allait, seulement le contenu (texte) est dynamique et donc doit impérativement s'adapter à la largeur et auteur.
http://creatif-web.be/assoc/index.php
mais le soucis c'est qu'un texte sur une image répéter en x ce qui est le cas pour la head (sa permet au design de s'adapter à toutes les résolutions). Mais le texte en arrière plan donc il est invisible.
J'ai pensé au tableau, qui comme phpbb s'adapte naturellement au contenu, mais je ne vois pas comment, si quelqu'un pouvait me metre sur la voix, avec un pseudo code.
Merci.

**<romain/>** · 17/09/2006, 15h43

bonjour,

je comprend pas vraiment ce que tu veux faire, tu peux être un peu plus explicit?

Par contre ce qui est sur c'est qu'utiliser un tableau pour faire de la mise en page (ce que tu veux faire a priori) c'est pas souhaité.

**Bisûnûrs** · 17/09/2006, 15h47

Je suis rassuré de savoir que je ne suis pas le seul à ne pas avoir compris.

**JackBeauregard** · 17/09/2006, 18h43

En lisant les réponses de BisounoursJos et de <romain/>, je me suis dit que j'allais épater la gallerie en apportant la solution.
Mais je dois reconnaître que ta grammaire, ton orthographe et la syntaxe de tes phrases ont eu raison de ma volonté.

Par exemple cette phrase m'intrigue :

mais le soucis c'est qu'un texte sur une image répéter en x ce qui est le cas pour la head (sa permet au design de s'adapter à toutes les résolutions).

Donc si j'ai bien compris, le soucis c'est qu'un texte sur une image répéter en x ce qui est le cas pour le head ? C'est ça ? Mais c'est parce que ça permet au design de s'adapter à toutes les résolutions alors ?

J'ai pensé au tableau, qui comme phpbb s'adapte naturellement au contenu, mais je ne vois pas comment, si quelqu'un pouvait me metre sur la voix, avec un pseudo code.

Donc là tu cherches quelqu'un dont le pseudo est "code" et qui puisse s'adapter naturellement à ta voix au moyen d'un tableau de type php mesurant un mètre ?

**artotal** · 17/09/2006, 19h04

Bon désolé, j'ai fait court, en effet une image répété dans un bloc ne me permet pas d'afficher du texte.
Mon design est fait de deux images positionné en float, right et left.
Avec au milieu une image troisième image répété se qui permet d'avoir un design liquide avec "image" et donc d'avoir une résolution adaptable, ainsi qu'une grosse économie de poids, puisque je pèse en image 30 ko pour tout le site.
Le problème est effectivement le texte qui doit être adaptable dans la largeur en fonction de la résolution de l'utilisateur.
http://creatif-web.be/assoc/index.php
Donc je vais voir du coté du js, parceque là j'y vois rien.

**JackBeauregard** · 17/09/2006, 19h09

Y'a pas besoin d'aller voir javascript, t'as mal codé c'est tout.

Donne plutot ton code html épuré avec le fichier css, on verra si on peut faire quelque chose pour toi.

Si tu veux avoir un background-repeat plus du texte le tout avec des pages qui s'adaptent à la résolution de l'écran, c'est bateau normalement.

**<romain/>** · 17/09/2006, 19h10

Bon c'est peut-être moi mais c'est quoi exactement un desing liquide?

Bon pour ce que j'ai compris tu veux en fait avoir une image a droite une autre a gauche et au milieu u bloc qui contient le texte avec une image de fond c'est bien ca?

Dans ce cas tu place tes deux images en float left, ton bloc en float left également, et dans ton code xhtml tu place les 3 blocs (2 images+texte)dans l'ordre( de gauche a droite).
Apres pour que ca s'adapte en fonction de la resolution il faut que tu leur donne des taille en pourcentage.

Voila si j'ai pas compris redit le...

**artotal** · 17/09/2006, 20h43

un design liquide c'est un design qui s'adapte à la résolution comme celui là :
http://creatif-web.be/developpeur/index.php
et donc si tu passes dans une autre résolution tu constate le même affichage.
Mais, bon là j'expérimentait.

**<romain/>** · 17/09/2006, 20h45

ok donc si tu fais ce que je t'ai dit au dessus ca devrait être bon.

Tu as essayé?

**artotal** · 17/09/2006, 20h50

Cest un petit peu plus complexe que sa.
j'en suis plus a essayer des certitudes...
L'ennui c'est que tu ne connait pas cette technique, que j'ai prise sur le csszengarden.
Merci quand même.

**MasterOfChakhaL** · 17/09/2006, 22h27

Je connaissais le terme design fluide plutôt que liquide (mais j'imagine qu'on parle de la même chose...)
Si on parle bien de la même chose, il faut que tu saches qu'un design fluide n'utilise pas comme unité les pixels ou les points.
L'unité utilisée doit être relative le em fait très bien l'affaire (ca correspond à la taille d'un M)

Je te conseille, quand tu dévloppes de tester sur différents navigateurs.
Je sais pas si tu as essayé, mais quand j'ai ouvert ton lien, je ne comprenais pas ce que tu voulais, jusqu'à ce que j'ouvre avec IE.

un petit apercu?
Pièce jointe 4841

Pièce jointe 4842

Pièce jointe 4843

**artotal** · 17/09/2006, 22h47

je développe pour ie puis je me sert de la notation du w3c pour ff :
#ttttt>#toto {
etc...
}
puis je masque l'autre règle pour FF
pepe {
dislplay:none;
}
je fais comme sa à cause des marges, sa évite les hacks, je pourrai même pousser le jeux jusqu'a faire une version diferrente pour chaque navigateur.
Je pense qu'on parle de la même chose.
Liquide veux peut être dire avec des images, et fluide sans ?