pb de chevachement de calques

pb de chevachement de calques - HTML/CSS - Programmation

Marsh Posté le 17-02-2005 à 09:44:01    

Bonjour
 
Ma page comprend 3 colonnes et quand j'écris dans les menus de gauche, droite et dans la partie centrale, j'aimerai que le pied de page descende. Je cherche depuis 1 semaine mais je trouve pa (je suis debutant en css).
 
je vous met un lien si vous voulez jeter un oeil
http://skyonline.free.fr/test

Reply

Marsh Posté le 17-02-2005 à 09:44:01   

Reply

Marsh Posté le 17-02-2005 à 09:48:56    

Ouch, ça va pas être facile, vu que les élément #gauche et #droite sont en position absolue, donc impossible d'aller après eux sans connaître leur taille :/

Reply

Marsh Posté le 17-02-2005 à 09:49:06    

Avec des floats, c'est possible par contre

Reply

Marsh Posté le 17-02-2005 à 10:03:45    

J'ai changé la position en float sauf que maintenant ils sont les uns sous les autres alignés sur la gauche. Il doit y avoir quelque chose d'autre à parametrer ?

Reply

Marsh Posté le 17-02-2005 à 10:06:05    

Tiens, vois chez Alsacréations les modèles de mise en page : http://www.alsacreations.com/articles/modeles/

Reply

Marsh Posté le 17-02-2005 à 10:32:24    

je métais dailleur inspiré des modeles de ce site pour faire ma page. J'ai les meme reglages ke chez eux, mé ça le fé pa. ça me saoule

Reply

Marsh Posté le 17-02-2005 à 10:47:29    

FlorentG a écrit :

Tiens, vois chez Alsacréations les modèles de mise en page : http://www.alsacreations.com/articles/modeles/


 
Ouai, ben il sont bien gentils ses modèles, mais aucun ne montre une mise en page avec deux colonnes qui poussent un footer.
 
En clair, le problème des deux colonnes pouvant grandir dynamiquement dans un site qui est le PRINCIPAL problème des mises en page avec div n'est même pas présent (et pour cause... C'est un problème sans véritable solution satisfaisante : bug des 3 pixels sur le contenu à droite, problème de marge incontrolable entre le menu et le contenu de droite etc...)
 
Il faut pas moins de 2 hacks CSS pour le réaliser.
 
J'attend toujours qu'on me montre une mise en page avec 2 colonnes pouvant pousser dynamiquement un footer proprement...

Reply

Marsh Posté le 17-02-2005 à 10:55:29    

Ok ça exsite pas, mé ya pa une astuce faire en sorte ke ce soit plus ou moins correcte à l'affichage ?
Sachant ke le contenu des menus de gauche est droite é censé etre dynamique dc variation plus ke probable en hauteur

Reply

Marsh Posté le 17-02-2005 à 10:58:48    

skynicko a écrit :

Ok ça exsite pas, mé ya pa une astuce faire en sorte ke ce soit plus ou moins correcte à l'affichage ?
Sachant ke le contenu des menus de gauche est droite é censé etre dynamique dc variation plus ke probable en hauteur


 
A partir du moment où tu as DYNAMIQUEMENT un contenu variable sur CHACUNE de tes trois colonnes et que la colonne du milieu PEUT être plus petite que les deux autres colonnes, tu as deux solutions :
 
1) Tu te passes du footer en bas.
 
2) Tu fais une mise en page basée sur une table de 3 colonnes.  
 
Aucune autre solution satisfaisante n'existe.  :o  

Reply

Marsh Posté le 17-02-2005 à 11:00:19    

Sinon y'aurait des solutions possibles, mais par rapport à IE, je ne suis pas sûr qu'elles fonctionnes :(

Reply

Marsh Posté le 17-02-2005 à 11:00:19   

Reply

Marsh Posté le 17-02-2005 à 11:02:11    

Merci hermes, mais je prefere pas utiliser les tableaux.
C koi ta soluce sinon flo ke jessaye

Reply

Marsh Posté le 17-02-2005 à 11:03:28    

FlorentG a écrit :

Sinon y'aurait des solutions possibles, mais par rapport à IE, je ne suis pas sûr qu'elles fonctionnes :(


 
Non. ça fait deux ans que je cherche, et sans plusieurs hack, c'est impossible. Point.  :o  je crois que ça se saurait si c'était possible.
 
Les mises en page CSS multi-colonnes qui poussent (chacune d'elle) le footer sont au mieux d'infames bidouillages.
 
Il faut savoir ce qu'on veut :
 
Pure mise en page CSS multi-colonne --> on renonce au footer.
 
Mise en page reposant sur UN SEUL tableau (c'est pas la mort et ça ne nuit aucunement à la lisibilité, même avec lynx, j'ai testé) et on peut mettre un footer.

Reply

Marsh Posté le 17-02-2005 à 11:04:10    

Oui, je vais chercher :D
 
Sinon ok pour les tableaux, si on se maintient à 3 lignes 3 colonnes :)

Reply

Marsh Posté le 17-02-2005 à 11:04:16    

skynicko a écrit :

Merci hermes, mais je prefere pas utiliser les tableaux.
C koi ta soluce sinon flo ke jessaye


 
Ya pas de soluce. Tu renonces au footer ou tu renonces au 100% css.

Reply

Marsh Posté le 17-02-2005 à 11:05:06    

FlorentG a écrit :

Oui, je vais chercher :D
 
Sinon ok pour les tableaux, si on se maintient à 3 lignes 3 colonnes :)


 
Même pas 3 lignes, 3 colonnes.  1 ligne et 3 colonnes.
 
Que ce soit pour l'entete ou le footer, on garde les divs. ;)
 

Reply

Marsh Posté le 17-02-2005 à 11:06:26    

Je vais trouver une parade pour le footer, meme s'il sagit de la plus infame des bidouilles. Tant qu'au niveau de l'apparence c'est correct c'est tout ce qui compte


Message édité par skynicko le 17-02-2005 à 11:14:14
Reply

Marsh Posté le 17-02-2005 à 11:09:31    

skynicko a écrit :

Je vé trouver une parade pour le footer, mm sil sagit de la plus infame ds bidouilles. Tant qu'au niveau de laparence cé correct cé tout ce ki compte


 
1) Ecrit correctement. T'es pénible à lire.
2) Justement, au niveau de l'apparence, tu auras des problèmes à un moment donné ou à un autre. Rien qu'avec IE, entre ceux qui sont encore avec IE5, 5.5 ou 6 et d'autre sur IE 5.2 sur MAC, ce sera une catastrophe. Quand on utilise une technologie, on prend ce qui marche réellement.
 
Si t'achète une voiture, tu vas pas rouler avec 18 réparations de fortune qui peuvent toutes lacher n'importe quand.

Reply

Marsh Posté le 17-02-2005 à 11:13:36    

Tu as tout à fait raison. Mais je vais trouver une solution. Merci encore pour ton aide

Reply

Marsh Posté le 17-02-2005 à 11:14:31    

skynicko a écrit :

Tu as tout à fait raison. Mais je vais trouver une solution. Merci encore pour ton aide


 
Mais bien sûr...  :sleep:  :sleep:  :sleep:  

Reply

Marsh Posté le 17-02-2005 à 11:23:16    

Non mais je dirais juste à mon patron qu'on peut pas mettre plus de x lignes ds chaque colonne. Puisque de solution technique y'en a pas, faut bien se rabattre sur autre chose :sleep:

Reply

Marsh Posté le 17-02-2005 à 11:28:34    

skynicko a écrit :

Non mais je dirais juste à mon patron qu'on peut pas mettre plus de x lignes ds chaque colonne. Puisque de solution technique y'en a pas, faut bien se rabattre sur autre chose :sleep:


 
Dans ce cas là, il est possible d'utiliser les modèles d'alsacréation.  

Reply

Marsh Posté le 17-02-2005 à 11:31:15    

http://www.pompage.net/pompe/colonnesfactices/
 
Cette méthode peut fonctionner sans hacks.
Inconvénient majeur: le layout n'est pas flexible horizontalement.
 
Bref, même avis qu'Hermès, après avoir galéré comme un malade pendant des heures à trouver un truc sans hack qui marche partout et qui donne l'affichage voulu, bah je me suis reporté sur les tableaux.


---------------
Loose Change Lies | Bars | Last.fm
Reply

Marsh Posté le 17-02-2005 à 11:33:25    

Bon, j'ai trouvé une solution, mais ça explose complètement sous IE

Reply

Marsh Posté le 17-02-2005 à 11:39:10    

FlorentG a écrit :

Bon, j'ai trouvé une solution, mais ça explose complètement sous IE


 
Donc ce n'est pas une solution.  :D  Et si on fait abstraction de IE, il est évident que bcp de problèmes disparaissent.  
 
C'est quand même l'hypocrisie des gens qui pronnent les divs + CSS à tout va. Ils oublient de dire que nombre de mise en page avec contenu dynamique sont irréalisables proprement. [:spamafote]
 
Il faut savoir tirer le meilleur partie des technos et utiliser les divs chaque fois que c'est possible, mais sans renoncer pour autant aux tables (enfin à UNE table) lorsque c'est nécessaire.

Reply

Marsh Posté le 17-02-2005 à 11:41:11    

C'est pas de l'hypocrisie [:spamafote] Le CSS 2.1 permet de faire de nombreuses choses. Le seul problème c'est que le navigateur utilisé par 90% des gens de les gère pas :(
 
Toutes les mises en page sont réalisable quand on prend les normes. Après comme dis c'est IE qui fait chier :cry:

Reply

Marsh Posté le 17-02-2005 à 11:41:59    

Sinon voici la solution :

Code :
  1. <body>
  2.  <div id="header">Header</div>
  3.  <div id="content">
  4.   <div id="cols">
  5.    <div id="c1">
  6.     Pouet<br />
  7.     Pouet<br />
  8.     Pouet<br />
  9.     Pouet<br />
  10.     Pouet<br />
  11.     Pouet
  12.    </div>
  13.    <div id="c2">
  14.     Main
  15.    </div>
  16.    <div id="c3">
  17.     Pouet<br />
  18.     Pouet<br />
  19.     Pouet
  20.    </div>
  21.   </div>
  22.  </div>
  23.  <div id="footer">Footer</div>
  24. </body>


Code :
  1. body {
  2. margin: 0px; padding: 0px;
  3. }
  5. #header, #footer {
  6. background: #f00;
  7. height: 75px;
  8. }
  10. #c1, #c2, #c3 {
  11. display: table-cell;
  12. }
  14. #c1, #c3 {
  15. background: #00f;
  16. width: 198px;
  17. }
  19. #c2 {
  20. background: #f0f;
  21. }
  23. #content {
  24. display: table;
  25. width: 100%;
  26. }
  27. #cols {
  28. display: table-row;
  29. table-layout: fixed;
  30. }

Reply

Marsh Posté le 17-02-2005 à 11:52:01    

FlorentG a écrit :

Sinon voici la solution :

Code :
  1. <body>
  2.  <div id="header">Header</div>
  3.  <div id="content">
  4.   <div id="cols">
  5.    <div id="c1">
  6.     Pouet<br />
  7.     Pouet<br />
  8.     Pouet<br />
  9.     Pouet<br />
  10.     Pouet<br />
  11.     Pouet
  12.    </div>
  13.    <div id="c2">
  14.     Main
  15.    </div>
  16.    <div id="c3">
  17.     Pouet<br />
  18.     Pouet<br />
  19.     Pouet
  20.    </div>
  21.   </div>
  22.  </div>
  23.  <div id="footer">Footer</div>
  24. </body>


Code :
  1. body {
  2. margin: 0px; padding: 0px;
  3. }
  5. #header, #footer {
  6. background: #f00;
  7. height: 75px;
  8. }
  10. #c1, #c2, #c3 {
  11. display: table-cell;
  12. }
  14. #c1, #c3 {
  15. background: #00f;
  16. width: 198px;
  17. }
  19. #c2 {
  20. background: #f0f;
  21. }
  23. #content {
  24. display: table;
  25. width: 100%;
  26. }
  27. #cols {
  28. display: table-row;
  29. table-layout: fixed;
  30. }



 
 
Ouai, ben même. Sémantiquement c'est pourri.
 
Ya au minimum un niveau de div en trop. (le content)
 
Je ne vois pas quelle fierté on pourrait avoir de mettre des divs si c'est pour bidouiller.
 
Sémantiquement, une mise en page deux colonnes c'est :
 

Code :
  1. <div id="entete"></div>
  3. <div id="contenu">
  4. <div id="colonne1"></div>
  5. <div id="colonne2"></div>
  6. </div>
  8. <div id="footer"></div>


 
Voilà...  :o  
 
Après si les CSS ne permettent pas de garder cet aspect sémantique, ben c'est raté.  :o


Message édité par Hermes le Messager le 17-02-2005 à 11:52:31
Reply

Marsh Posté le 17-02-2005 à 11:55:20    

Oui, j'en ai mis en trop, voilà la vraie de vraie :D :

Code :
  1. <body>
  2. <div id="header">Header</div>
  3. <div id="content">
  4.  <div id="c1">
  5.   Pouet<br />
  6.   Pouet<br />
  7.   Pouet<br />
  8.   Pouet<br />
  9.   Pouet<br />
  10.   Pouet
  11.  </div>
  12.  <div id="c2">
  13.   Main
  14.  </div>
  15.  <div id="c3">
  16.   Pouet<br />
  17.   Pouet<br />
  18.   Pouet
  19.  </div>
  20. </div>
  21. <div id="footer">Footer</div>
  22. </body>


Code :
  1. body {
  2. margin: 0px; padding: 0px;
  3. }
  5. #header, #footer {
  6. background: #f00;
  7. height: 75px;
  8. }
  10. #c1, #c2, #c3 {
  11. display: table-cell;
  12. }
  14. #c1, #c3 {
  15. background: #00f;
  16. width: 198px;
  17. }
  19. #c2 {
  20. background: #f0f;
  21. }
  23. #content {
  24. display: table;
  25. width: 100%;
  26. }


Message édité par FlorentG le 17-02-2005 à 11:56:21
Reply

Marsh Posté le 17-02-2005 à 16:37:30    

Hermes le Messager a écrit :

J'attend toujours qu'on me montre une mise en page avec 2 colonnes pouvant pousser dynamiquement un footer proprement...


 
 
et la ? http://www.stunicholls.myby.co.uk/layouts/body2.html
 

Reply

Marsh Posté le 17-02-2005 à 17:03:55    

sub1 a écrit :

et la ? http://www.stunicholls.myby.co.uk/layouts/body2.html


 
Ben non. Si le menu de gauche est plus long que le contenu de droite, il est coupé.
 
Alors avant de poster, vérifier déjà qu'on peut sans problème allonger tant la colonne de gauche que celle de droite.
 

Reply

Marsh Posté le 18-02-2005 à 10:06:36    

Bon, en conclusion de ce topic, comme l'a souligné HLM, un p'tit tableau parfois est nécéssaire si on que ça marche sur tous les navigateurs :(

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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