Des blocs div étirables l'un par rapport à l'autre - HTML/CSS - Programmation
Marsh Posté le 24-02-2004 à 19:03:10
Je dois en conclure que je suis le seul à avoir ce problème ?
Marsh Posté le 24-02-2004 à 23:19:44
Ok, merci quand-même. Vais essayer de trouver mon bonheur ailleurs
Marsh Posté le 24-02-2004 à 23:47:24
je regarderai quand j'aurai le temps (vraissemblablement la semaine prochaine)
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). |
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. |
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 ? |
Elle ne disparaît pas chez moi
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
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 |
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.
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 !
Marsh Posté le 25-02-2004 à 09:32:37
Chez moi avec IE -6.0.2800.1106xpsp2.030422.1633
le texte ne disparait pas
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 !
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
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/)
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 ?
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 |
Marsh Posté le 26-02-2004 à 19:13:28
Bon, ça passe bien sur Firebird 0.7 aussi et sur Safari
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é.
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 |
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
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.
Marsh Posté le 27-02-2004 à 11:13:35
SIBELIUS a écrit : |
La technique du "spacer" ne peut pas marcher dans ce cas là?
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
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 |
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"...
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)
Marsh Posté le 27-02-2004 à 11:33:43
"décorélée" > Gné ?
Marsh Posté le 27-02-2004 à 11:43:01
ReplyMarsh Posté le 27-02-2004 à 11:48:04
Ah ok, ben d'une certaine façon si
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"...
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 !
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. |
OK, en tout cas ca marche bien!
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.
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