Aller au contenu

Deux float juxtaposés


Blix

Sujets conseillés

Bonsoir tout le monde,

ce que je cherche à faire est simple et pourtant aucune des techniques que j'utilisais jusqu'ici ne semble fonctionner.

J'ai deux float alignés à gauche, juxtaposés donc.

Le premier est un menu et il fait 200px de largeur. Fixe donc.

Le deuxième est le corps de la page et il doit donc prendre tout l'espace restant.

Le problème c'est que si je ne donne pas la largeur du deuxième float, il ne remplit pas automatiquement toute la largeur disponible, il ne fait que s'adapter au texte. Si je donne 100% il dépasse la page (forcément parce que ça fait 100% + 200px).

J'ai déjà fait avec deux float en pourcentage et deux float en taille fixe mais ça c'est nouveau pour moi :)

Des idées ?

Lien vers le commentaire
Partager sur d’autres sites

Ca n'est pas possible à ma connaissance avec les float (ca m'embete bien d'ailleur ! )

Il faut que tu mettes ta premiere colone en absolute en largeur fixe et ensuite tu n'as plus qu'a donner une marge gauche (si la 1ere colone est à gauche) de la largeur de cette colone. Ta 2eme colone prendra 100% du conteneur, moins les XXpx de marge et tu arriveras au resultat souhaité.

@++

Lien vers le commentaire
Partager sur d’autres sites

Merci ElMoustiko, c'est bien la solution de repli que je suis en train d'utiliser.

Par contre je galère pour que les deux div aient la même longueur, celle de la div la plus remplie... Probleme classique ça aussi :) Tu as une parade ?

Lien vers le commentaire
Partager sur d’autres sites

Il y a Laurent Denis qui s'est penché sur le problème récement, mais il me semble que c'est avec les flottant (donc pas possible pour ton probleme) et qu'il persiste une legere degradation (comme il appelle ca) sur IE :

http://blog-and-blues.org/weblog/2004/09/2...hauteurs-en-css

Je n'ai lu qu'en diagonale donc je te laisse vérifier.

Sinon perso sur elmoustikoblog (voir signature) j'utilise un fond dans le conteneur pour "faire paraitre" 2 colonnes de même taille, peut etre que cette solution te suffirais.

Sinon il te reste la possibilité d'utiliser un simple tableau bien structuré qui te permettrais d'avoir ton systeme de colonnes, et les colones de même hauteur. Je ne suis pas fan de cette technique, même si c'est pour pallier a quelques insufisances du positionnement css.

@++

Lien vers le commentaire
Partager sur d’autres sites

Dommage, encore une technique que je connaissais déjà et qui n'est pas efficace dans ce cas là ! :( Ton site non plus ne m'est pas utile parce qu'il est fixe...

Je te remercie en tout cas. C'est fou je vais devoir me rabattre sur les tables, ça ne m'était jamais arrivé !

Dégouté...

Lien vers le commentaire
Partager sur d’autres sites

Pour la technique que j'utilise sur mon site, elle est a priori utilisable même pour des sites à largeur variable, tout dépend de l'image de fond.

Si tu fais une image ayant pour 1ere partie de largeur = largeur de ton menu et le reste d'une couleur unie (quitte à faire une image de 1280px, si elle fait 1px de haut c'est pas bien grave) ou même avec un motif adapté, ca doit fonctionner. Il faudrait que tu me montre un exemple du fond global que tu souhaites pour qu'on voit si c'est vraiment impossible ou non. J'ai dans l'idée que ca reste réalisable.

Pour ce qui est d'utiliser les tables... bon tant que c'est fait proprement sans multiple imbrication a la limite c'est pas non plus hyper grave, bien que decevant. Finalement si tu souhaites ne pas utiliser les tables tu as la possibilité de revoir légèrement le type de structure de ta page et de te demander si une solution moins technique ne conviendrait pas. Apres c'est au cas par cas et suivant ce que tu souhaites réaliser.

Il est vrai que certaines limitations (un petit mal pour un grand bien est parfois necessaire même si difficile à accepter) du positionnement css empeche de faire TOUT, il reste par ailleurs de bonnes alternatives ;p !

Sinon tu peux tenter de parcourir le css zen garden pour voir s'il n'y a pas une solution à ton problème. Tu as le jardinier fait par un bloggueur qui permet de choisir les thèmes du jardin selon différents critères : http://www.etiennedepaulis.com/jardinier.php

Voilà @++

Lien vers le commentaire
Partager sur d’autres sites

Merci beaucoup pour tes conseils ElMoustiko.

Malheureusement toutes les conditions sont là pour m'obliger à recourir aux tables (qui marchent bien ceci dit, je viens de tester sous firefox, ie6 et ie5).

- J'utilise dans ma page des motifs horizontaux et des motifs verticaux. Donc c'est à priori impossible à faire avec une seule image.

- Impossible de changer le design, c'est pour un client qui a déjà approuvé la maquette et risquerait de faire grave la moue si je lui disais que finalement c'était impossible parce que les tables c'est pas bien... En plus le design est vraiment pas mal je trouve et ça serait dommage de le laisser tomber.

Allez je retourne au travail... Quand le site sera public j'en ferai peut-être une étude de cas. Avec ton aide si tu le souhaites :)

Lien vers le commentaire
Partager sur d’autres sites

Ahh si c'est un projet déjà approuvé par le client en effet... !

J'imaginais un site "perso" c'est pour ça !

Le recours à la technique d'un simple tableau (il faut le faire proprement et qu'il n'emepeche pas la navigation sur certains navigateurs) sans imbrication, du style 2 colones est, pour des sites pros, tout à fait acceptable selon moi et selon d'autres.

Par contre pour un site ayant un but plus technique ou ayant plus atttrait au sujet du full css, il est vrai que c'est un peu plus dommage ;p

Content de voir qu'il est possible de faire des sites pro en utilisant le positionement css ;p

@++

Lien vers le commentaire
Partager sur d’autres sites

Par curiosité :

- pour quelle raison précise ce site ne peut-il pas utiliser une simple combinaison "float+flux" au lieu d'un double float qui empêche effectivement de générer une largeur dynamique à côté d'une fixe ?

- sinon, pour quelle raison n'utilise-t-il pas un double float mais uniquement en dynamique ? Pourquoi ce menu en largeur fixe ?

Lien vers le commentaire
Partager sur d’autres sites

Un float + flux avec le float en largeur fixe et le flux en variable ca deconne il me semble, enfin je n'en mettrais pas ma main à couper mais il me semble avoir tenté cette solution sans succes... Par ailleur, quand le contenu sera plus "long" que le menu, il passera sous le menu et l'effet colone (réalisable dans certains cas grace a un background) tomberait à l'eau.

Lien vers le commentaire
Partager sur d’autres sites

Un float + flux avec le float en largeur fixe et le flux en variable ca deconne il me semble

A quoi ça sert que Ducrot, y se décarcasse pour écrire des articles ?

http://blog-and-blues.org/weblog/2004/09/24/304 <edit>Voir dans IE pour le rôle des float; dans les autres navigateurs, c'est en table-cell</edit>

La technique des float est en fait la plus déroutante dans les schémas de positionnement CSS, et à ce titre souvent sous-employée parce que méconnue.

Ce n'est évidemment pas la panacée (celle-ci n'existe pas, à moins de repayer le prix imposé par les tableaux en terme de lourdeur du code et d'inaccessibilité). Mais elle est souvent écartée a priori après des essais trop rapides.

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites

Là, il faut revoir la notion de site "pro", et ouvrir les yeux des clients. C'est une des plus grosses illusions qui résiste à la pénétration des CSS.

Aucun site ne peut avoir le même rendu visuel dans tous les navigateurs, même en se limitant aux navigateurs graphiques récents, et surtout pas, je crois, en osant un pari sur les navigateurs graphiques de demain : l'utilisateur a gagné avec CSS la possibilité d'imposer ses préférences. Dès lors que celles-ci seront plus facilement exprimable grâce à une gestion plus transparente des styles utilisateurs, l'illusion d'un rendu maîtrisé par le concepteur éclatera.

Autre raison, immédiate : les coûts respectifs du "rendu identique" et de la "dégradation correcte"...

Troisième raison : comment gérez-vous ça quand il faut tenir compte du media handled, par exemple ?

N'importe-quel site, surtout "pro", devra, AMHA, en passer par cette notion de "dégradation correcte" (ou "dégradation admissible", ou "Tao" selon un article fameux traduit par pompage.net)

Lien vers le commentaire
Partager sur d’autres sites

Wé je partage ton avis, mais de ce que je lis, les gens qui commandent des sites pros s'en contre fichent, et le problème est bien là, faire accepter a ces gens là ce genre de considérations. Et dégradation acceptable sous entendant, sous IE, ils n'accepterons pas. Je dis ca par rapport aux différentes discussions que j'ai pu lire ici entre autre, je ne suis pas dans le monde professionel de la création web.

Et ces mêmes personnes se contre fichent des media handled à mon avis, ils se fichent deja parfois des non IE...

Lien vers le commentaire
Partager sur d’autres sites

  • 4 semaines plus tard...

Merci à LaurentDenis pour avoir apporté sa pierre à l'édifice.

J'avais déjà lu cet article mais je l'avais écarté car dans l'exemple il ne montrait pas que le menu pouvait être de largeur fixe. Mais si c'est le cas (je vais m'y pencher à nouveau) ça peut effectivement être bien.

Il faudra voir aussi ce que l'auteur appelle "dégradation acceptable sous IE", car à moins que ça ne soit vraiment minime, je doute fort que le client accepte. Dans l'état actuel des choses, la "degradation acceptable sous IE" est une hérésie que seuls quelques geek eclairés peuvent accepter ! Le client qui paye plusieurs milliers d'euros pour un site pro, n'accepte aucune "dégradation acceptable", encore moins sur un navigateur utilisé à 93%-95% !

Pour la petite histoire, ce client se promenait joyeusement sur internet avec un Internet Explorer 5.01 sur Mac OS 9.1 (pour information, il est sorti en Mars 2000!). Je l'ai appris quand il est allé voir son site en test et m'a dit "c'est moche, ça n'a rien à voir avec ce que tu m'avais montré!". Evidemment, la gestion du XHTML et CSS2 sur IE/Mac 5.01 était quelque chose de rigolo :)

Il a accepté d'arreter d'utiliser IE et je lui ai installé un Netscape 7.0, qui, bien qu'imparfait, utilise une version récente de Gecko.

J'ajoute aussi que, bien que ce site utilise finalement des tables (une seule!) pour la gestion du menu, il valide XHTML 1.0 Strict, ce qui n'est pas commun pour des sites pro orientés grand public ! Alors, je pense qu'il faut y aller par petites étapes et vouloir faire accepter une "dégradation acceptable sous IE" lorsque un leger compromis avec les tables existe, serait une erreur...

Allez, courage, encore quelques semaines et le mois de novembre 2004 risque d'apporter du changement dans cet univers moisi du web :) J'espere vraiment que ce 11/9 (comme diraient les américains sans pouvoir s'empecher de penser au 9/11) restera dans l'histoire d'internet !

Lien vers le commentaire
Partager sur d’autres sites

La dégradation proposée par Laurent est d'autant plus minime qu'elle suppose que vous ne sachiez pas quel bloc sera le plus long des deux.

Dans la pratique, il arrive fréquemment qu'on puisse déterminer quel bloc sera le plus long, et si vraiment on ne peut pas on peut essayer de mettre le même background, ce qui sera transparent sur tous les navigateurs :hypocrite:

Modifié par Sylvain Trovalet
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...