pb avec float

pb avec float - HTML/CSS - Programmation

Marsh Posté le 23-04-2007 à 12:14:27    

Bonjour,
J'ai une page d'un intranet composée de plusieurs blocs comme suit :

Code :
  1. ...
  2. <body>
  3. <div id="webpage">
  4.     <div id="header">
  5.     ...
  6.     </div>
  7.     <ul id="mainmenu">
  8.     ...
  9.     </ul>
  10.     <div id="content">
  11.         <div id="contextualmenu">
  12.         ...
  13.        </div>
  14.        <div id="page">
  15.        ...
  16.        </div>
  17.     </div> 
  18.     <div id="footer">
  19.     ...
  20.     </div>
  21. </div>
  22. </body>
  23. </html>


 
la div "content" contient le menu contextuel placé sur la gauche en float: left et la div "page" également en float:left. La div "footer" est en-dessous de ces 2 div (clear: both). Pourtant, dans le cas où la largeur de bloc "page" dépasse un peu la place restante en largeur de la page, celui-ci passe sous le menu contextuel dans IE uniquement :(
 
Connaissez-vous un moyen pour forcer le bloc "page" à rester à côté du bloc "contextualmenu" qq soit sa largeur? Merci :)

Reply

Marsh Posté le 23-04-2007 à 12:14:27   

Reply

Marsh Posté le 24-04-2007 à 09:47:54    

à "content" tu appliques "overflow-x: auto;"


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 24-04-2007 à 10:25:03    

ouaih, enfin, là, je vais me retrouver avec une barre de défilement horizontale plus ou moins au milieu de mon écran là :/ Pas terrible comme truc...

Reply

Marsh Posté le 24-04-2007 à 12:41:08    

attends mon vieux, tu veux que ton content fasse plus de la largeur de ton écran mais tu veux pas d'ascenseur ??? t'es pas net comme gars !
déjà, pour des raison de commodité et de simplicité, et surtout d'esthetisme, on fait toujours en sorte que le contenu ne soit pas plus grand que le contenant. Donc soit tu mets un ascenseur, soit tu diminues la largeur de "page", ok ?
et fais péter un lien que je vois de quoi ça a l'air ! ;)


Message édité par dartyduck le 24-04-2007 à 12:41:35

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 24-04-2007 à 13:01:40    

c'est un intranet, donc pas de lien.
Pour le coup de la barre de défilement horizontale, bien sûr qu'il va y en avoir une mais je veux celle du navigateur (qui va se trouver en bas de la page) et pas une autre barre qui va se trouver en plein milieu de ma page, en plus de celle du navigateur. Tu vois? Par ailleurs, sous Firefox, j'ai pas ce pb : même si je réduit la taille de ma fenêtre, mes 2 div restent positionnées correctement alors que pas sous IE :(

Reply

Marsh Posté le 24-04-2007 à 15:15:34    

sur ton intranet, y'en a qui vont consulter via FF? bizarre.
Alors si tu veux que ce soit ta fenetre qui ait un sroll tu appliques overflow-x:auto; à body{} et non pas à content{}
et pour ton pb d'alignement des blocs, au div de ton contextualmenu tu appliques un float:left;

Message cité 1 fois
Message édité par dartyduck le 24-04-2007 à 15:16:06

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 24-04-2007 à 15:57:50    

dartyduck a écrit :

sur ton intranet, y'en a qui vont consulter via FF? bizarre.
Alors si tu veux que ce soit ta fenetre qui ait un sroll tu appliques overflow-x:auto; à body{} et non pas à content{}
et pour ton pb d'alignement des blocs, au div de ton contextualmenu tu appliques un float:left;


 
mon div "contextualmenu" a déjà un float: left. Je vais voir ce que ça donne pour le overflow dans le body. Et oui, y'en a qui consulte mon intranet avec FF. En faisant mon intranet plus beau sous FF (genre les cadres arrondis), j'insite mes utilisateurs à utiliser FF ;)

Reply

Marsh Posté le 24-04-2007 à 19:22:45    

ton div "page" mets lui un float:right; pendant que tu y es.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 26-04-2007 à 16:02:19    

bon, comme paliatif, j'ai mis overflow-x: auto; sur mon <div id="page">...</div> avec un hack pour qu'il n'y ait que IE qui applique cette règle ( //overflow-x: auto; ).


Message édité par rufo le 26-04-2007 à 16:02:30
Reply

Marsh Posté le 26-04-2007 à 21:44:54    

évite les hacks. Créé une feuille css spécifique à IE avec une ligne dans ton head:

Code :
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="/style-ie.css" />
  3. <![endif]-->


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 26-04-2007 à 21:44:54   

Reply

Marsh Posté le 27-04-2007 à 11:22:07    

je sais mais j'ai pas envie de me trainer 2 feuilles de styles...
 
Sinon, j'ai fait un test en prenant exemple sur ce modèle : http://css.alsacreations.com/modeles/modele4.htm
 
Ca marche sauf dans un cas : si le menu contextuel est plus long que le contenu de la partie droite, c'est le drame : le pied de page vient se coller sous la zone de droite et le menu contextuel passe par-dessus le pied de page. Une idée pour arriver à faire en sorte que le pied de page se mette toujours sous la div la plus longue? J'ai bien tenté un position: absolute; combiné à un bottom: 0; mais ça ne va pas :(

Reply

Marsh Posté le 27-04-2007 à 13:18:54    

alors soit tu englobe ton menu et ta partie de droite dans un bloc, soit tu appliques un height à ta partie de droite de sorte qu'elle soit au moins aussi longue que ton menu... mais je te conseille le bloc englobant.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 27-04-2007 à 13:53:03    

dartyduck a écrit :

alors soit tu englobe ton menu et ta partie de droite dans un bloc, soit tu appliques un height à ta partie de droite de sorte qu'elle soit au moins aussi longue que ton menu... mais je te conseille le bloc englobant.


 
j'ai un div englobant mon menu contextuel et mon bloc page, c'est le div "content", mais après qq tests, je n'ai pas réussi à trouver la bonne conbinaison entre les div en position: absolute et ceux en relative :/

Reply

Marsh Posté le 27-04-2007 à 22:06:12    

mets tous tes div en relative, ca t'évitera de mettre des margin 140px à ton bloc page. en plus, avec des absolute, si tu modifies les dimensions de la fenetre, tu plombes la mise en page.
tu mets pas de float lesft à ton "content" c'est pas la peine, ni à ton pied de page. mais je comprends pas pourquoi ton pied de page remonte. Ou alors, tu as oublié de fermer ton div "content"


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 30-04-2007 à 10:14:35    

dartyduck a écrit :

mets tous tes div en relative, ca t'évitera de mettre des margin 140px à ton bloc page. en plus, avec des absolute, si tu modifies les dimensions de la fenetre, tu plombes la mise en page.
tu mets pas de float lesft à ton "content" c'est pas la peine, ni à ton pied de page. mais je comprends pas pourquoi ton pied de page remonte. Ou alors, tu as oublié de fermer ton div "content"


 
là, je ne peux pas tester ta solution car je suis chez moi, mais j'essaierai mercredi. Sinon, non, c'est sûr, j'ai pas oublié de fermer un div. La preuve, c'est qu'en utilisant le modèle 4 de mise en page d'alsacreations (celui que je veux mettre en oeuvre), y'a le même pb si le bloc de contenu est moins haut que celui du menu contextuel. Et pourtant, l'auteur de ce site est une référence en france pour la mise en page css ; j'ai même acheté son bouquin (tiens, ça serait bien que j'y rejette un coup d'oeil du reste :)...

Reply

Marsh Posté le 30-04-2007 à 13:30:22    

ton pied de page doit etre en relative


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Sujets relatifs:

Leave a Replay

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