Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
4411 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb avec float

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

pb avec float

n°1547011
rufo
Pas me confondre avec Lycos!
Posté le 23-04-2007 à 12:14:27  profilanswer
 

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 :)

mood
Publicité
Posté le 23-04-2007 à 12:14:27  profilanswer
 

n°1547828
dartyduck
n00b AttitudE
Posté le 24-04-2007 à 09:47:54  profilanswer
 

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


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1547868
rufo
Pas me confondre avec Lycos!
Posté le 24-04-2007 à 10:25:03  profilanswer
 

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...

n°1547966
dartyduck
n00b AttitudE
Posté le 24-04-2007 à 12:41:08  profilanswer
 

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
n°1547980
rufo
Pas me confondre avec Lycos!
Posté le 24-04-2007 à 13:01:40  profilanswer
 

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 :(

n°1548169
dartyduck
n00b AttitudE
Posté le 24-04-2007 à 15:15:34  profilanswer
 

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
n°1548210
rufo
Pas me confondre avec Lycos!
Posté le 24-04-2007 à 15:57:50  profilanswer
 

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 ;)

n°1548338
dartyduck
n00b AttitudE
Posté le 24-04-2007 à 19:22:45  profilanswer
 

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


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1550108
rufo
Pas me confondre avec Lycos!
Posté le 26-04-2007 à 16:02:19  profilanswer
 

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
n°1550294
dartyduck
n00b AttitudE
Posté le 26-04-2007 à 21:44:54  profilanswer
 

é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
mood
Publicité
Posté le 26-04-2007 à 21:44:54  profilanswer
 

n°1550447
rufo
Pas me confondre avec Lycos!
Posté le 27-04-2007 à 11:22:07  profilanswer
 

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 :(

n°1550509
dartyduck
n00b AttitudE
Posté le 27-04-2007 à 13:18:54  profilanswer
 

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
n°1550525
rufo
Pas me confondre avec Lycos!
Posté le 27-04-2007 à 13:53:03  profilanswer
 

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 :/

n°1550839
dartyduck
n00b AttitudE
Posté le 27-04-2007 à 22:06:12  profilanswer
 

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
n°1551343
rufo
Pas me confondre avec Lycos!
Posté le 30-04-2007 à 10:14:35  profilanswer
 

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 :)...

n°1551425
dartyduck
n00b AttitudE
Posté le 30-04-2007 à 13:30:22  profilanswer
 

ton pied de page doit etre en relative


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb avec float

 

Sujets relatifs
memset : copier des floatprobleme de Float
[Resolu] Tableau de byte -> floatProblème IDIOT de conversion string->float [RESOLU]
Conversion de int et float en string en CBug sur ie - div en absolue dans une div en float
rendre un float positif (de la maniere la plus tordue)[CSS] Décalage IE/FF pour des float
Conversion d'un hh:mm:ss en un FLOATFloat et allongement - pb sous Firefox
Plus de sujets relatifs à : pb avec float


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)