Salut,


Suite au topic "sites fluides = mort du webdesign ?" (qui part un peu en vrille et peine à recueillir témoignages/explications technologiques et méthodologiques au niveau de la conception/anticipation graphique, avant intégration; Bah faut bien le dire quand même ), je teste la création d'un menu fluide basé sur une img.

Ce menu doit pouvoir s'adapter à la fenêtre du navigateur quelqu'en soit sa taille.

(remarque :
je vous poste des schémas si le topic est dur à comprendre, je mets la page test en ligne au plus vite)
(rmq 2 :
il y a peut-etre deja des posts a ce sujet, mais comment retrouver un probleme dont on ne connait pas le nom ?)

SOLUTION N°1

En voici le code HTML, suivi du code de la CSS :

---HTML


---CSS


(rmq : il y a sans doute pleins d'attributs inutiles )

L'image faisant office de menu est un dégradé de 2 verts différents, et supporte bien l'étirement de la fenêtre du navigateur dans des proportions raisonnables pour un menu-gauche (la div contenant l'image est dimensionnée en proportionnel) >> c'est cette solution que je souhaite adopter

Questions annexes :
>>QA1 Cette solution implique un chevauchement de calques lorsque l'on viendra ajouter du texte sur ce menu. Mais si on met l'image en background, il est alors impossible de l'étirer. Votre vision des choses ?
>>QA2 Dans IE6, ce menu est vraiment proportionnel (la taille de l'image se réduit avec la celle de la fenetre-navigateur), mais sous Mozilla, au bout d'une certaine diminution, on ne voit plus la totalité de l'image, sans que des varres de defilement apparaissent pour autant .. Comprends pas !?

SOLUTION N°2

Mettre cette même image en taille fixe, et ajouter un calque mitoyen avec une image très petite portant l'attribut "background-repeat" et la valeur "repeat".

Cela permettrait d'allonger le menu aussi, et sans deformer l'image principale cette fois.


Voila, qu'en pensez-vous ? Avez-vous des liens precis pour ce theme ?
(ouais ouais c'est encore bien long, .. aïe nan ouille pas les pierres ! )

rock : je pense qu'il faut faire une div par zone, façon site en frame.

par exemple (découpage basique) : un bandeau de 100% sur 20% en haut, puis une colonne gauche de 20% sur 80% pour le menu, et le contenu de 80% sur 80%.
ensuite il ne te reste plus qu'à faire ta page (en 1600 x 1200 par exe) dans photoshop suivant ce découpage-type ; un bandeau de 1600 sur 240, des boutons de menu de 320 de large, etc.. et de poser les élèments dans le layout en %age (tes boutons de menu feraient 100% de large dans le div représentant 20% de la largeur de l'écran, par ex.)

pour les fonds, tu les pose dans un div plus bas que le texte (les fameux z-index) et voilà pour les grandes lignes, avant d'écrire tes feuilles css.

ceci dit sans une page de test tout cela reste virtuel...

Hum... si tu permets un petit dégrossissage de ta CSS, qui comporte en effet pas mal de choses inutiles :

div {
background-repeat: no-repeat;
background-position: 0% 0%;

Où est le contenu du background ? Tout ceci est inopérant sans un background-image: url("...")

background-color: #71FA6D;
Pourquoi ? L'image remplit toute la div. Sauf cas d'une image PNG et d'un jeu de transparence, la couleur d'arrière-plan ne risque pas d'être visible.

position: relative;
left: 0%;
top: 0%;

Pourquoi ce positionnement ? Puisque cette div n'est pas décalée, et qu'elle n'a pas de contenu positionné, ces règles sont inutiles.

height: 100%;
width: 100%;
Donc le contenu de ta div s'étendra à toute la zone d'affichage. C'est le but recherché ? Mais du coup ce qui suit est inopérant :

float: left;
Ce float n'a pas lieu d'être puisque la div utilise toute la largeur disponible et qu'aucun contenu ne pourra donc lui être adjacent.

margin: 0%;
padding: 0%;

Syntaxe incorrecte. Pour supprimer marges et remplissage, on écrit: margin: 0; padding: 0 (sans unité)

border: 0% #71FA6D;
syntaxe inopérante. s'il s'agit de spécifier "pas de bordure", c'est border: 0; S'il faut une bordure, c'est par exemple border: 1px solid #71FA6D;

}

body {
background-color: #71FA6D;
C'est tout la zone d'affichage qui doit être verte ?

margin: 0%;
padding: 0%;
border: 0% #71FA6D;

Voir ci-dessus pour la syntaxe

float: left;
Le body 'est le conteneur initial, il ne peut pas flotter. C'est inopérant.

width: 100%;
Pourquoi ?

height: 100%;
Pourquoi ? Ah ! Peut-être à cause d'IE. qui n'étend pas la div à toute la hauteur d'affichage ? ça échoue cependant dans d'autres navigateurs.

left: 0%;
top: 0%;
position: relative;

Le body ne peut pas être positionné. C'est le conteneur initial. (je laisse de côté un éventuel stylage de l'élément html en xhtml strict)

}

img {
background-color: #71FA6D;
background-position: left top;
background-attachment: scroll;

Même remarque que pour le background de ta div : inopérant sans un contenu d'arrière-plan.

margin: 0%;
padding: 0%;
border: 0% #000000;

Voir ci-dessus pour la syntaxe

float: left;

L'image flotte à gauche dans une div dont elle est le seul contenu et dont elle occupe toute la largeur: il n'y a donc rien qui soit supposé venir la flanquer à droite, ou qui puisse le faire. C'est inutile.

height: 100%;
width: 100%;
L'image sera étendue ou réduite de manière à remplir la totalité de la div. OK

position: relative;
left: 0%;
top: 0%;

Inutile et inopérant pour les mêmes raisons que ci-dessus.

clear: left;

L'image ne risque pas d'être adjacente à un contenu flottant et de devoir être repoussée en dessous de lui, vu qu'il n'y en a pas dans la page (son conteneur div ne compte pas ici). Donc inutile.
}

Là où je ne comprends plus du tout, c'est " dans des proportions raisonnables pour un menu-gauche". Rien n'est à gauche ici, puisque toute la largeur d'affichage est occupée. Où le menu est-il supposé se placer ? A gauche ? Et le contenu de la page doit le flanquer à droite ?

Je résume si c'est bien ce que tu cherches (avec un correctif du HTML pour l'accessibilité, et en laissant de côté cette histoire de hauteur trop mal gérée par les navigateurs pour que height soit exploitable au niveau des div conteneurs et du body) :

---HTML
<body>
<div><img src="images/image_02.jpg" alt=""></div>
</body>

---CSS
body {
background-color: #71FA6D; /* si tout doit avoir un arrière-plan vert */
margin: 0;
padding: 0;
}
div {
float: left;
width: 25%; /* (par exemple)*/
}
img {
border: 0;
height: 100%; /* l'image s'étend à toute la surface du menu */
width: 100%;
}

Si ça n'est pas l'effet recherché... Ta page-test sera sans doute plus explicite ?

Désolé pour tout ce foutoire, je suis presque gêné de susciter des réponses si structurées, alors que le post d'origine est tout foireux.

Beatnikk, merci pour le tuyau (z-index, connaissait pas).

LaurentDenis, en fait c'est ma première CSS, et j'ai rempli les champs CSS de DreamWeaver comme un americain remplirait son caddie de hamburgers bien gras Jamais plus je ne posterai de CSS aussi touffues et imbuvables, promis (j'espere que ca t'a permi de te defouler au moins et puis comme ca tu m'a bien eclairé sur le rôle de chacun des attributs )

Alors d'abord, voilà les liens vers cette page test"menu vertical fluide avec <img>" et sa CSS (l'<img> contenue dans la balise div du menu se trouve ici)

Le but de cette page est de tester une image qui va servir à réaliser un menu-gauche-vertical en fluide/proportionnel. Ainsi, on souhaite étendre l'image à la totalité du navigateur, pour voir comment elle se comporte lorsqu'étirée à fond (perte de qualité notamment); d'où le dimensionnement à 100% (que je ne vous avais pas expliqué, milles claques pour ma djeule tiens !) d'un menu qui sera bien à gauche au final, et qui ne sera jamais étiré au point de prendre 100% de la surface du navigateur

La finalité serait d'obtenir un menu vertical qui peut s'étirer indéfiniment en hauteur (l'image est alors tiraillée) sans que la qualité de l'image qui le constitue n'en soit altérée. C'est ainsi que je souhaite allier fluide et design graphique.


Solution 1 : (les liens ci-dessus) l'image s'étire en hauteur (100%) mais le degradé perd de la qualité.

Solution 2 : on laisse cette image en taille fixe, mais en vue de l'allongement du menu au-dela de la hauteur de l'image, on met en "background-repeat" une petite bandelette de 1px de haut et de la meme largeur que l'image du menu (decoupée sous photoshop) que l'on repete jusqu'en bas de la fenetre de navigateur. ---pas fini la page test pour cette solution


((>> apartée :
sur la page test, lorsque l'on diminue la fenetre du navigateur au maximum, il y a des differences notoires entre le traitement fait par IE, et celui fait par les differentes versions de Mozilla. Notamment, alors qu'IE conserve la totalité de l'image lorsqu'on ecrase a fond la taille de la fenetre, Mozilla conserve la totalité de l'image jusqu'a un point où il la passe en position absolute [diminution de la fenetre de navigateur mais pas de diminution de l'image, ni apparition de scrollbar non plus] <<)

Pour l'apartée, d'où viennent ces différences entre navigateurs ?

La qualité des images, c'est tout le problème en proportionnel... et je pense qu'il n'a pas encore été résolu.... Alors, pour l'heure, je ne vois qu'une soluce : faire sans....
(mais j'accepte les contradictions....)

Quant à la différence entre les navigateurs : j'insiste encore une fois : pour les images, opera est nettement au dessus du lot.... il zoome sur les images.... ce que ne font pas les autres.....
Ma préférence va encore a mozilla et firefox, mais pour les images, il faut bien reconnaitre qu'Opera est le meilleur.... puisque c'est le seul....

Imaginez que les navigateurs soient tous comme opera, et plus la peine de s'embêter, il suffit de faire proportionnel sur les textes.......

Dino

Rockz :


lol ! Je retiens l'américain et son caddie de hamburgers. Excellent !

En fait, c'est à peu près l'image que j'ai de DreamWeaver en général, et des bidouillettes à feuilles de style en particulier : CSS est un langage très simple et au vocabulaire très concis et assez intuitif (on est loin d'une horreur type Docbook) qu'on a tout avantages à écrire à la main. Alors n'hésitez pas, si vous voulez vous lancer dans CSS, à revenir au bon vieil éditeur texte.
Un bookmarklet avec l'index des propriétés de la spec CSS2 sous la main est sans doute le meilleur outil dans ce cas.

(Si un p'tit instit de campagne comme moi a pu le faire quand il n'y avait pas une seule ressource en français sur le sujet, ou presque... des "pro" comme vous devraient y arriver, non ? )

Sinon, désolé si ma réponse était un peu abrupte : c'était tout à fait involontaire, j'étais juste pressé, en fait.



Hum... Dans ce cas, un problème de méthode : est-ce que la dégradation "verticale" (ou du moins ce que l'oeil en perçoit) n'est pas affectée aussi par l'extension horizontale due au fameux 100% en largeur ?
Je marche sur des oeufs, mais il me semble que le test serait plus probant avec un comportement plus réaliste de l'image.
Et même, avec un contenu fictif dans le menu, et un contenu fictif à droite du menu, puisque l'oeil ne se fixera plus de la même manière sur les défauts éventuels de l'arrière-plan quand il aura quelque-chose à lire...

Bref, prendre la page globalement, puisque c'est ainsi qu'elle sera d'abord perçue ?



ça se passe très en dessous de toute largeur probable d'affichage... là où les moteurs de rendu des navigateurs ne sont plus supposés faire des choses cohérentes...

La raison est peut-être à cherche du côté de l'implémentation médiocre de l'overflow dans IE.

En tout cas, ce test est intéressant. Continue ! On te suit.

Dinostrate :



Le "zoom intégral d'Opera" est en effet imparable.

Mais la question était abordée par Daniel Glazman (http://glazman.org/weblog) à propos des possibilités dans Mozilla... La référence exacte dans son blog doit dater de quelques mois, mais je n'ai plus ça sous la main, désolé. En tout cas, c'est à lire sur le sujet, vu l'auteur

Bonjour,

Il s'agit sans doute de ce billet Opera plays it again with MSR; me too :-)

Merci Monique

Et oui et oui, tout ces champs à remplir dans Dreamweaver, c'est plutôt euphorisant Ca donne l'impression de configurer à mort, de bien huiler sa mécanique, mais en fait çà revient à brasser du vent lol

Pour en revenir à nos moutons, voici un premier résultat de la solution 2 (>> mettre <img> du menu en fixe, et mettre en background+"repeat y" du <div> contenant <img> une petite bandelette de la largeur de l'<img> avec 1px de hauteur).

C'est pas encore au point, le menu fait cette fois 20% de la largeur totale (plus réaliste que 100%) mais je n'ai pas encore réussi à y mettre du texte pour tester son "allongeabilité", ni à faire une seconde colonne (qui jouerait le rôle de zone "corps/contenu") : ba oui je commence tout juste CSS

Votre aide pour prolonger ce test, le compléter, le commenter, etc. serait plus que bénéfique (vous me le dites si ce test a déjà été fait hein ? je pense que oui mais j'ai rien trouvé sur le net. Que pensez-vous de la 2cde solution ?)

Voila le resultat : page HTML / CSS / image-menu / bandelette-etirement

Premier constat : ca marche sous IE6 mais pas sous Mozilla Firefox (la bandelette ne fait pas la largeur du menu, elle est bien moins large)

On continue, on continue !

Salut Dinostrate,

je te signale qu'il existe une extension pour Firefox, ImageZoomer, qui permet de faire des zooms. Effectivement, quand tu m'as dit que tu reprochais à Firefox de ne pas avoir cette fonction, j'ai enqueté

Maintenant, j'ai deux nouveaux boutons sur mon clic droit sur une image : Zoom In image et Zoom Out image !!!

Et re-voilà Firefox qui domine à 100%

++

Salut

...et cool loupilo, on peut pas tout savoirreeuuuu.... j'avais bien écrit que je préfèrais quand même la famille FireFox et Mozilla.....
Je crois bien que c'était prévu que la famille Mozilla fasse des efforts, vu la converse avec LaurentDenis et Monique....

Je vais tester... je ne l'ai pas encore fait....

Dommage que ce soit seulement en additif.... bon....

Si je comprends bien, mon site pourra aussi être sublime avec Firefox !!!!! sans prétention de ma part, mais faut rigoler....

Dino

Salut,

Alors, pas d'avis sur la solution qui consiste à rallonger le menu( donc l'image fixe) avec 1 bandelette de 1px de haut (voir les liens plus haut) ?


Sinon, voici une autre tentative de menu fluide, réalisée sur le modèle de Sibellius : dossier principal

Plusieurs pbs, et j'espère que vous avez des solutions à ce sujet :

1/ les 4 images "bords" (pas les angles) sont en background et donc en taille fixe. Je crois que cela explique l'ecartement entre le haut, milieu, et bas du menu lorsque l'on agrandit la fenetre. Comment boucher ces trous ?

2/ on remarque un trait noir au dessus de chaque angle "haut": je crois que c'est le "bord haut" qui dépasse sur les 2 angles. Faut-il mettre les angles en <img> et non plus en background pr eviter cela ?

Merki

Euuh oui, en fin de compte, mettre des images en background de DIVs lorsque l'on souhaite réaliser quelquechose d'étirable (menu ici), ca me semble pô bon du tout.

Wadooyoofinque abaout thiz ?

En regardant l'exemple d'Alsacréations, je m'aperçois que les images mises en background sont en fait "sur-dimensionnées" volontairement, pour éviter que l'image ne soit trop petite en cas de gros étirement du menu.

(>> la propriete background duplique/repete une image, mais ne peut pas l'agrandir : il vaut donc mieux reduire une "image trop grande au depart", que se retrouver bloqué en tentant d'agrandir une "image trop petite au depart"..je suis clair ?)

Allez, ca commence à virer au monologue, alors j'attends vos lumières sur le sujet.


En tombant dans des situations comme çà, je ressens vraiment l'integration CSS comme de la bidouille..

bah c'est sûr qu'il faut un max de bidouille rock, et tu as l'air de pas mal te démerder. ce qui est sûr aussi c'est que moi je n'utilise pas le css pour contrôler mes div, mais uniquement pour le texte. je ne suis donc pas certain d'être d'une grande aide pour toi, en dehors des élèments en %ages peut être...

Il existe plusieurs manières de traiter les coins arrondis en css, cette solution Doug's easyCorners me semble la plus simple et la plus facile à mettre en oeuvre.

Merci à tous les 2 (Monique, t'es vraiment la reine des liens ! Une super Cyberguidetouristicotechnique !!)

Je vais voir le lien, mais la solution de la "bandelette de 1px" me plait beaucoup aussi .. ca marche pas sous Moz, mais doit y avoir une solution. Siouplait, si vous avez 2 min (ou plutot 30 ) et que cette technique vous semble bonne, vs pouvez-vous pencher dessus ?

Beaucoup de tutos "cadres arrondis" présentent des cadres "simples" (juste une bordure, et une couleur unie) Y'a forcément un moyen (meme plusieurs) de pousser plus loin !

Bonjour,

C'est certainement possible d'aller plus loin en superposant des div... après tout, ce qu'on peut faire avec des angles droits, on peut aussi le faire avec des arrondis ou même en alternant.... avec ce principe, m'étonnerait que tu ne puisses pas faire une ou plusieurs bordures sophistiquées. La question, c'est qu'il faut peut être ne pas aller trop loin pour éviter trop de complexité... Je n'ai pas encore essayé, mais tes réflexions me donnent des idées....

Dino

Je peux risquer un avis brutal ?

Pour les coins arrondis, attendez CSS3 finalisés et implémentés dans les navigateurs...

Mesurez les gains (pas visuels) et le coût (accepter que l'outil mûrisse).

Salut,

LaurentDenis, je suis bien d'accord pour dire que CSS3 va faire des efforts du côté des cadres arrondis. Mais pour les bordures et cadres dont le design aura été réalisé sous Photoshop, il faudra toujours et encore découper ses ch'tites n'images et les metre dans des DIV Le pb ne sera qu'à moitié résolu je pense.

Le test avec la bandelette de 1px (qui permet l'allongement vertical du menu) est terminé, et fonctionne sous IE comme sous Mozilla , mais lé résultat ne donne pas satisfaction..

En effet, ce menu n'est étirable que verticalement; il ne s'étire pas horizontalement car l'image de base du menu se trouve en background (peut pô l'étirer , juste la répeter, ce qui ne sert en rien l'objectif de fluide/etirable) Rmq : Il s'etire verticalement grace a la bandelette de 1 px de haut mise en background-repeat y.


Ainsi, je reprends la route d'un menu dont l'image est en <img>, (et non plus en bckgrnd) : l'image est alors super bien proportionnée, bien fluide, mais bonjour la galère pour placer du texte dessus (>>z-index et chevauchement de calque..)


1 autre idée me trotte là-haut : je vous fais le schema ce soir


En attendant, est-il possible (lorsque l'internaute réduit la fenetre du navigateur dans le sens vertical) de reduire la fenetre du navigateur de maniere proportionnelle, dans le sens horizontal ? C'est dur à définir : lorsque l'internaute reduit la fenetre verticalement, comment "forcer" une reduction de fenetre horizontale proportionnelle (pour eviter toute deformation "des images/du contenu" qui se trouve dans la fenetre) ?

C'est possible, deja vu ca mais ne sais plus comment le faire. Soit c'est une proprieté CSS, soit un certain enboitement de calques J'espere que vs savez !! ouh oui ouh oui !

rock : non ce n'est pas possible de "piloter" la largeur d'une application en mode distant... si l'internaute veut voir un site en 16/9e, il a le droit. de même s'il veut le regarder dans une colonne de 2 cm de large sur l'écran tu ne peux pas l'en empêcher... sauf qu'il ne le fera pas car aucun site n'est lisible dans ce genre de format, que ce soit programmé en absolu ou en relatif.

mais pour ton histoire de coins arrondis, est-ce vraiment nécessaire ?

de même, méthodologiquement, as-tu "posé" le design complet de ta page en 1600x1200 avant de te demander comment découper quoi en quelle taille, et dans quoi le remettre en html/css pour "recomposer" la page en relatif ?
il me semble que c'est le chemin le plus logique B)

pardon une longueur de temps d'accès serveur m'a fait poster le même message 2 fois ...

Merci pour le dimensionnement de l'interface Beatnykk (heeu nan j'y avais pas pensé c'est là qu'on reconnait le vrai noob du faux arf !)

Sinon, on peut vraiment redimensionner comme sus-décrit : lorsque l'internaute réduit la fenetre en hauteur, le contenu ne se compresse pas seulement verticalement, mais aussi horizontalement, de manière proportionnelle . Qqqn a des infos là-dessus ?

Une autre question : peut-on dimensionner une boîte avec une largeur en % et une hauteur en px (ou est-on obligé d'utiliser la même unité) ? Je pense ici à un modèle de boîte fluide dont les bords verticaux par exemple auraient une hauteur fixe, et une largeur proportionnelle/étirable, mais dont les 4 coins garderaient des dimensions fixes.

((o>> Flash-News : 00h15 [23h27 ? "décalage horaire" est pô copain avec PHP ? ]-- Après une lutte acharnée pour l'obtention d'un menu CSS fluide basé sur une belle image, une solution salvatrice est venue à la rescousse de cette interrogation tirée par les cheveux (voire même, et n'ayons pas peur des mots, "capilo-tractée") :

le pb est d'obtenir une image etirable selon le contenu textuel du menu; contrainte=on souhaite eviter le chevauchement de calques et piloter la taille du menu a partir du texte qu'il contient.

solution ratée 1 : mettre l'image en background = pas de chevauchement de calques, mais etirement de l'image impossible (propriete repeat seulement, et pas de dimensionnement en %)

solution ratée 2 : mettre l'image en <img> = image etirable en %, mais chevauchement de calques quand on rajoute du texte par-dessus, et menu non-piloté par le texte


>>> solution consiliatrice >> émuler un background avec une <img>à laquelle on attribue un z-index : -1 !

C'est peut-être déjà bien connu des specialistes, mais me cassant la tête depuis 2 jours, je trouve cette solution "bidouille" (GRrrrr..RRrrr Salut Pierre !) bien pratique.

<<o))


Vous utilisez cette rustine là ?

Oh la la ... meme si mieux vaut tard que jamais, je crains quand meme du paté (c'est un alexandrin ? )

Pardon Dinostrate. Depuis ce fameux mois d'avril 2004, j'ai entrepri un DUT Info en 1 an, et donc bye bye le web (momentanément ;o) ) et bonjour la POO.

En recherchant des tutos pour faire du "fluide", je suis retombé sur le topic xD




Alors alors, de nouvelles techniques depuis 2004 ? Quelles sont les evolutions majeures ? Svp ca serait sympa de faire une petite synthese de tout ca

J'ai tout oublié (nan nan pas cette immonde chanson !) et je veux me remettre à flots pendant les vacan... . Etape n°1 : rechercher les sites de tutos sur le forum (Alsacreations, Mammouthland, je n'ai plus souvenir des autres)


A bientot

Bonjour,



Un petit tour sur le Top Sites

Welcome back Rockz,

Je me rappelle de cette discussion.
D'après moi, on est resté sur les mêmes positions qu'en Avril.

Comme LaurentDenis l'indique, il me semble que CSS3 devrait apporter des nouveautés bénéfiques et tu devrais creuser de ce côté là pour prendre de l'avance sur les autres