Des blocs div étirables l'un par rapport à l'autre

Des blocs div étirables l'un par rapport à l'autre - HTML/CSS - Programmation

Marsh Posté le 24-02-2004 à 16:20:00    

Je suis en-train d'étudier la possibilité d'avoir 2 cellules qui s'adapteraient l'une à l'autre (lorsque l'une s'allonge, l'autre suit le mouvement).
 
Je ne veux pas utiliser d'image de fond comme sur les sites # http://www.alistapart.com/articles/fauxcolumns/ et http://www.pixy.cz/blogg/clanky/css-3col-layout/
 
J'ai donc pondu ceci : http://www.alsacreations.com/articles/cellules/
 
Je suis ensuite allé faire un tour sur OpenWeb pour voir comment faire de même avec les clear both.
 
Apparemment, la méthode est plus simple : http://openweb.eu.org/articles/ini [...] 1.html#ex3
 
Par contre, en ayant testé le code fourni sur IE6 et Firebird, je n'ai pas du tout le résultat visuel proposé par Openweb.
 
Comment se fait-il ?
 
Autre question : comment réaliser l'équivalent de mon tuto (lien ci-dessus) avec les clear both ?
J'ai essayé mais sans succès car la partie gauche... disparaît sur IE6 !!!  
Aperçu : http://www.alsacreations.com/artic [...] lules2.htm


Message édité par sibelius le 24-02-2004 à 16:21:20

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 24-02-2004 à 16:20:00   

Reply

Marsh Posté le 24-02-2004 à 19:03:10    

Je dois en conclure que je suis le seul à avoir ce problème ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 24-02-2004 à 23:19:44    

Ok, merci quand-même. Vais essayer de trouver mon bonheur ailleurs ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 24-02-2004 à 23:47:24    

[:drapo] je regarderai quand j'aurai le temps (vraissemblablement la semaine prochaine)

Reply

Marsh Posté le 24-02-2004 à 23:57:41    

SIBELIUS a écrit :

Je suis en-train d'étudier la possibilité d'avoir 2 cellules qui s'adapteraient l'une à l'autre (lorsque l'une s'allonge, l'autre suit le mouvement).
 
Je ne veux pas utiliser d'image de fond comme sur les sites # http://www.alistapart.com/articles/fauxcolumns/ et http://www.pixy.cz/blogg/clanky/css-3col-layout/
 
J'ai donc pondu ceci : http://www.alsacreations.com/articles/cellules/


Sur http://www.alsacreations.com/artic [...] llules.htm tu noteras qu'avec IE le texte de droite2 qui est en face de menu2 est légèrement décalé par rapport au reste. C'est du à ce bug : http://www.positioniseverything.ne [...] xtest.html
 

SIBELIUS a écrit :

Je suis ensuite allé faire un tour sur OpenWeb pour voir comment faire de même avec les clear both.
 
Apparemment, la méthode est plus simple : http://openweb.eu.org/articles/ini [...] 1.html#ex3
 
Par contre, en ayant testé le code fourni sur IE6 et Firebird, je n'ai pas du tout le résultat visuel proposé par Openweb.
 
Comment se fait-il ?


Faudrait demander à OpenWeb... Mais est-ce qu'en mettant la hauteur du <hr> à 1px (ou 0) ça résout le problème ?

SIBELIUS a écrit :

Autre question : comment réaliser l'équivalent de mon tuto (lien ci-dessus) avec les clear both ?
J'ai essayé mais sans succès car la partie gauche... disparaît sur IE6 !!!  
Aperçu : http://www.alsacreations.com/artic [...] lules2.htm


Elle ne disparaît pas chez moi [:spamafote]

SIBELIUS a écrit :

Ok, merci quand-même. Vais essayer de trouver mon bonheur ailleurs ;)


On est pas non plus collé 24h/24 sur le forum. Faut être un peu plus patient que quelques heures hein ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-02-2004 à 00:04:35    

Citation :

Sur tu noteras qu'avec IE le texte de droite2 qui est en face de menu2 est légèrement décalé par rapport au reste. C'est du à ce bug : http://www.positioniseverything.ne [...] xtest.html

C'est vrai et j'avais déjà vu cette rubrique sur positioniseverything. J'ai essayé de la résoudre, mais si j'ai bien compris l'astuce, il faudrait que je donne une hauteur de 1% à mon bloc de droite, or ça ne change rien chez moi :(
 

Citation :

Mais est-ce qu'en mettant la hauteur du <hr> à 1px (ou 0) ça résout le problème ?

Non, ni un line-height de 0
 

Citation :

Elle ne disparaît pas chez moi [:spamafote]


Curieux : apparemment, tous les utilisateurs sous IE6 m'ont confirmé que le texte disparaissait  :??:  
 

Citation :

On est pas non plus collé 24h/24 sur le forum. Faut être un peu plus patient que quelques heures hein ;)


Désolé, j'ai connu ce forum bien plus actif alors je m'étonnais que personne n'était passé dans la journée... mais tu as raison, il n'y a aucune urgence.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 25-02-2004 à 00:15:24    

Après quelques tests : j'ai essayé d'autres balises que le <hr /> pour faire le clear both...
Conclusion : TOUTES les balises bloc utilisées (div, p,...) font disparaître le texte.
Lorsque j'utilise une balise inline (span), ça marche alors à merveille sur IE... mais plus sur les autres ! :(


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 25-02-2004 à 09:32:37    

Chez moi avec IE -6.0.2800.1106xpsp2.030422.1633
 
le texte ne disparait pas  ;)

Reply

Marsh Posté le 25-02-2004 à 10:28:30    

Alors là c'est très fort parce que j'ai la même version que toi !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 25-02-2004 à 10:32:34    

Chez moi IE -6.0.2800.1106, le texte n'apparait pas lorsque je charge la page... Mais si je resize la fenêtre, il apparait :)

Reply

Marsh Posté le 25-02-2004 à 10:32:34   

Reply

Marsh Posté le 25-02-2004 à 16:06:21    

Bref, la question reste toujours d'actualité... pour avoir deux blocs qui s'étirent l'un par rapport à l'autre :
- clear both : ne fonctionne pas correctement sur IE6
- mettre les blocs à 100% de hauteur dans un conteneur vide : ne fonctionne pas
- tricher en utilisant le background du conteneur : ça me semble être la meilleure solution à l'heure actuelle (http://www.alsacreations.com/articles/cellules/)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 26-02-2004 à 15:53:37    

J'ai trouvé une solution qui semble être la bonne, en utilisant des positions absolues : http://www.alsacreations.com/artic [...] lules3.htm
Est-ce que c'est ok sur toutes les configs ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 26-02-2004 à 19:10:47    

SIBELIUS a écrit :

J'ai trouvé une solution qui semble être la bonne, en utilisant des positions absolues : http://www.alsacreations.com/artic [...] lules3.htm
Est-ce que c'est ok sur toutes les configs ?


 
 

  • IE6 ok
  • Mozilla 1.6 OK
  • Opéra 7.11 OK


Message édité par Flyman30 le 26-02-2004 à 19:11:10
Reply

Marsh Posté le 26-02-2004 à 19:13:28    

Bon, ça passe bien sur Firebird 0.7 aussi et sur Safari


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 26-02-2004 à 19:34:01    

sympa ton truc ;)

Reply

Marsh Posté le 26-02-2004 à 19:34:06    

Chez moi, si je rétrécie la fenêtre, la barre de défilement en bas n'apparait pas et donc une partie du contenu est masqué. :/

Reply

Marsh Posté le 26-02-2004 à 22:23:51    

SIBELIUS a écrit :

J'ai trouvé une solution qui semble être la bonne, en utilisant des positions absolues : http://www.alsacreations.com/artic [...] lules3.htm
Est-ce que c'est ok sur toutes les configs ?


Pas mal du tout. Par contre on est obligé d'avoir le même couleur de fond pour les colonnes de droite et de gauche ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-02-2004 à 22:36:08    

Hermes > ah oui ça c'est gênant en effet. C'est sans doute parce que j'ai mis mon conteneur en 100%. Il faudrait que je voie si ça change quelque chose en spécifiant d'autres dimensions..
 
GM > oui en effet... sauf si on utilise la bidouille de l'image de fond que l'on placerait d'un côté ou de l'autre.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 11:13:35    

SIBELIUS a écrit :


GM > oui en effet... sauf si on utilise la bidouille de l'image de fond que l'on placerait d'un côté ou de l'autre.


 
La technique du "spacer" ne peut pas marcher dans ce cas là?

Reply

Marsh Posté le 27-02-2004 à 11:19:59    

"spacer" : je ne connais pas en CSS, mais rien que le nom, ça m'évoque les bidouilles infâmes à l'époque des tableaux :D


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 11:30:39    

SIBELIUS a écrit :

"spacer" : je ne connais pas en CSS, mais rien que le nom, ça m'évoque les bidouilles infâmes à l'époque des tableaux :D


 
C'est pas un mot clé du w3c, c'est une technique que j'ai vu ici(cf:  
http://openweb.eu.org/articles/initiation_float/ ). Actuellement j'essais de me remettre à niveau question HTML/XHTML et CSS2 et j'ai vu ce tutos, donc je me suis dit que ca le ferait p'tête. Mais je pense finalement que non, car la hauteur de ton "conteneur" est décorélée de celle des blocs "menu" et "droite", enfin si j'ai bien compris le W3C. Si je me trompe, n'hésitez pas.
 
Punaise c'est pas facile à comprendre ces histoires de dans le flux pas dans le flux si il y a "position:absolute" ou "float:machintruc"...

Reply

Marsh Posté le 27-02-2004 à 11:33:06    

Ah ok mais j'ai testé la technique du "spacer" (clear both), mais ça ne fonctionne pas correctement (cf début du sujet)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 11:33:43    

"décorélée" > Gné ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 11:43:01    

SIBELIUS a écrit :

"décorélée" > Gné ?


 
Heu..., non corrélée, quoi...  ;)

Reply

Marsh Posté le 27-02-2004 à 11:48:04    

Ah ok, ben d'une certaine façon si ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 11:54:09    

SIBELIUS a écrit :

Ah ok, ben d'une certaine façon si ;)


Comment çà? Si on applique une couleur de fond différente au bloc "droite", on voit que sa hauteur n'est pas celle du bloc "conteneur"...

Reply

Marsh Posté le 27-02-2004 à 11:58:42    

oui en effet. Mais le gabarit que je veux faire ne fonctionne pas correctement avec un clear.
 
Donc :
- soit droite et gauche doivent être de la même couleur (celle du conteneur)
- soit tu mets une image de fond dans le conteneur (à droite ou à gauche)
- soit tu te débrouilles pour n'avoir qu'un menu ! ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-02-2004 à 12:01:38    

SIBELIUS a écrit :

oui en effet. Mais le gabarit que je veux faire ne fonctionne pas correctement avec un clear.
 
Donc :
- soit droite et gauche doivent être de la même couleur (celle du conteneur)
- soit tu mets une image de fond dans le conteneur (à droite ou à gauche)
- soit tu te débrouilles pour n'avoir qu'un menu ! ;)


 
OK, en tout cas ca marche bien!

Reply

Marsh Posté le 27-02-2004 à 21:28:27    

Vinceg a écrit :

La technique du "spacer" ne peut pas marcher dans ce cas là?


Non, la propriété "clear" est liée à la présence de flottants, or dans la solution de Sibelius, il n'y a pas de flottants, juste des blocs positionnés en absolu.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed