[Résolu] CSS : je voudrais une width (100%-largeur menu)

CSS : je voudrais une width (100%-largeur menu) [Résolu] - HTML/CSS - Programmation

Marsh Posté le 21-05-2007 à 15:47:22    

Bonjour à tous
 
Je suis à la recherche d'une solution élégante pour obtenir un style tout simple sur un site :  
 

Citation :

................................... Top banner .....................................
--------------------------------------------------------------------------
Menu gauche largeur fixe  |  ....................... Content.................
--------------------------------------------------------------------------
................................... Bottom banner ................................


 
J'utilise bien entendu des DIVs pour tout cela, mais j'ai un souci :
 
Option n°1 : J'utilise un float:left pour ma div menu et ma div content, suivi d'un clear:both qui me permet d'affiche ma bottom banner:
Je me retrouve alors dans ce cas de figure :  

Citation :

................................... Top banner .....................................
--------------------------------------------------------------------------
Menu gauche largeur fixe  |  Content
--------------------------------------------------------------------------
................................... Bottom banner ................................

C'est-à-dire que la largeur de la div content est directement dépendante de son contenu.  
 
Deux solutions pour remédier à ce problème en gardant les floats :  
1. Mettre dans le content une <hr> invisible ou autre élément, dont la largeur correspond à la largeur minimum souhaitée de cette div (bourrin!)
2. Donner une  "width" à ma div content. Que je définisse cette largeur en valeur fixe (px) ou en pourcentages, le problème est que si l'utilisateur a une fenêtre de navigateur plus petite et/ou qu'il redimensionne celle qu'il utilise, la div content va très vite se retrouver au-dessous de la div menu...  

Citation :

Menu gauche largeur fixe  
|  Content

Aucune de ces solutions ne me plaît dans ce cas de figure.
 
 
Option n°2 : Utiliser un float uniquement pour le menu, et augmenter la margin-left de mon content en conséquence :  

Code :
  1. <html><head>
  2. <style>
  3.       #divtop { background-color:#0000FF;   }
  4.       #divmenu { background-color:#A00000; width:200px; height: 500px; float:left; }
  5.       #divcontent {background-color:#00FF00; margin-left:200px;}
  6.       #divbottom {background-color:#FFFF00;}
  7.       .clair {clear:both;}
  8. </style></head>
  9. <body>
  10. <div id="divtop">top</div>
  11. <div id="divmenu"> menu<br><br><br><br><br><br><br><br>menu</div>
  12. <div id="divcontent"> content<br>ligne<br>ligne<br>ligne<br>ligne<br> </div>
  13. <div class="clair"></div>
  14. <div id="divbottom">bottom</div>
  15. </body></html>

Cette solution donne le résultat que je veux (la largeur de la div content fait bien tout l'écran), mais je n'en suis pas encore totalement satisfait.  
 
En effet, il me semble que les DIVs doivent être des entités séparées, que je décide d'accommoder comme il me semble les unes par rapport aux autres. Or, ici la "margin-left" du content est directement dépendante de la largeur (fixe, celle-là) du menu.
Si je décide de changer cette valeur, par exemple avec un menu moins large, ou même de mettre le menu sur la droite et plus sur la gauche, il faut que je retouche la valeur de cette margin, qui n'est normalement pas concernée puisqu'elle ne fait pas partie du menu ...
 
Ma question est donc : quelqu'un aurait-il/elle une solution plus propre encore pour obtenir un layout comme je le désire  (c'est-à-dire comme la première des "citations" ci-dessus) : menu à largeur fixe, et largeur du content qui fait tout le reste de la fenêtre mais qui peut être variable  ?
 
Merci d'avance pour tout indice,


Message édité par ZeBix le 30-05-2007 à 16:58:15
Reply

Marsh Posté le 21-05-2007 à 15:47:22   

Reply

Marsh Posté le 21-05-2007 à 16:34:50    

tu peux éventuellement utiliser un tableau. Sinon il y a les frames

Reply

Marsh Posté le 21-05-2007 à 17:01:08    

Salut et merci pour ta réponse ...
 
Je ne veux pas relancer l'éternel débat divs vs tables, mais je suis clairement un partisan du premier camp, à savoir les divs. Je ne suis pas archi-anti-tables non plus, quand il s'agit d'afficher des données ... mais pour de la mise en pages, les tables ne sont pas faites pour ça à la base c'est mon opînion et je la partage :)
 
Quant aux frames, on est au XXIème siècle hein ;)

Reply

Marsh Posté le 21-05-2007 à 17:13:23    

Dans ton deuxième exemple, ton margin est inutile

 

Edit : Sinon t'as des layouts tous prêts sur alsacreations

Message cité 1 fois
Message édité par Shinuza le 21-05-2007 à 17:14:58

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 21-05-2007 à 17:49:16    

Shinuza a écrit :

Dans ton deuxième exemple, ton margin est inutile

Non. En fait si tu ne mets pas ce margin tu vas avoir ce genre de situation à mesure que le contenu de "content" augmente :

Citation :

................................... Top banner .....................................
--------------------------------------------------------------------------
Menu gauche largeur fixe |  ....................... Content.................
Suite Menu ___________ | ....................... Suite Content..........
Encore du menu _______ |  ....................... Encore Content.......
................................Content encore ...................................
.............................Content encore ......................................
--------------------------------------------------------------------------
................................... Bottom banner ................................

- ce que je ne veux pas.  
 
Mettre un margin permet d'avoir ce genre de situation qui est préférable :

Citation :

................................... Top banner .....................................
--------------------------------------------------------------------------
Menu gauche largeur fixe |  ....................... Content.................
Suite Menu ___________ | ....................... Suite Content..........
Encore du menu _______ | ....................... Encore Content.......
~~~~~~~~~~~~~~~~~~~ |..............Content encore ................
~~~~~~~~~~~~~~~~~~~ |...............Content encore ...............
--------------------------------------------------------------------------
................................... Bottom banner ................................

, où les tildes (~) représentent du vide et non pas un "overlap" de la div content au-dessous du menu, ce qui n'est pas très joli-joli ...  
 
 

Shinuza a écrit :

Sinon t'as des layouts tous prêts sur alsacreations


Merci, j'irai jeter un oeil ... Mais je voudrais surtout mieux comprendre les CSS et savoir comment, au niveau du code, je peux obtenir le résultat que je veux, mais sans passer par la voie détournée que j'ai trouvée ici et qui ne me semble pas la plus heureuse ...

Reply

Marsh Posté le 21-05-2007 à 21:30:15    

tente un float:right; pour ton content, en plus du float:left; de ton menu, et si je peux me permettre un conseil, pour éviter des surprises désagréables avec ton bottom banner, englobe menu et content dans un div corps, main, nomme le comme tu voudras. ;)


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

Marsh Posté le 22-05-2007 à 10:32:42    

Bonne idée pour la div "main" ;)
 
En revanche, le problème persiste pour le reste ... si on met un float:right et un float:left en même temps, le deuxième "écrase" le premier et le browser ne considère donc que celui-là.
 
 

Reply

Marsh Posté le 22-05-2007 à 10:40:46    

moi je rusais en foutant deux float left: a condition qu'il y ai la palce de foutre les deux cote a cote, les deux div vont être collé l'un contre l'autre vers la gauche (normal) mais celui le plus a droite n'emmerde pas celui qui se trouve sur sa gauche... et ça marche plutot pas mal


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 22-05-2007 à 16:11:08    

zecrazytux a écrit :

moi je rusais en foutant deux float left: a condition qu'il y ai la palce de foutre les deux cote a cote, les deux div vont être collé l'un contre l'autre vers la gauche (normal) mais celui le plus a droite n'emmerde pas celui qui se trouve sur sa gauche... et ça marche plutot pas mal


+1


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

Marsh Posté le 22-05-2007 à 16:29:51    

Si tu parles de mettre le menu et le content tous les deux en float:left , il s'agit de l'"Option n°1" dans mon premier topic ci-dessus... qui n'est pas bien car la largeur de la DIV est dépendante de son contenu ...

Reply

Marsh Posté le 22-05-2007 à 16:29:51   

Reply

Marsh Posté le 23-05-2007 à 19:27:34    

ZeBix a écrit :

Non. En fait si tu ne mets pas ce margin tu vas avoir ce genre de situation à mesure que le contenu de "content" augmente :

Citation :

................................... Top banner .....................................
--------------------------------------------------------------------------
Menu gauche largeur fixe |  ....................... Content.................
Suite Menu ___________ | ....................... Suite Content..........
Encore du menu _______ |  ....................... Encore Content.......
................................Content encore ...................................
.............................Content encore ......................................
--------------------------------------------------------------------------
................................... Bottom banner ................................

- ce que je ne veux pas.  


Pas en utilisant le contexte de formatage (genre : overflow:hidden; _overflow:visible; zoom:1) et bien sur tu applique une marge de droite (margin-right) de 10px sur l'élément flotté à gauche et rulez \o/

Reply

Marsh Posté le 24-05-2007 à 12:00:38    

Cool merci pour le tuyau ..

 

Je suis allé voir la doc sur l'overflow  (W3.org et W3Schools.com) mais je ne vois pas comment cela peut remplir le même effet qu'avec ma margin-left de la div content .

 

De plus , je ne comprends pas ce qu'est la propriété qui commence par un Underscore ("_overflow" )... La seule info que je trouve ce sont les Vendor-specific extensions mais je ne vois pas le domaine d'application ici ...

Message cité 1 fois
Message édité par ZeBix le 24-05-2007 à 12:02:01
Reply

Marsh Posté le 28-05-2007 à 13:17:01    

J'ai un layout comme ça sur une appli, j'utilise le float également, et j'ai simplement mis une marge sur le contenu principal :

#main_menu { margin:0px; width:150px; float:left; }
#content { margin:5px; margin-left:155px; }

 

Reply

Marsh Posté le 30-05-2007 à 10:32:26    

PunkRod a écrit :

J'ai un layout comme ça sur une appli, j'utilise le float également, et j'ai simplement mis une marge sur le contenu principal :

#main_menu { margin:0px; width:150px; float:left; }
#content { margin:5px; margin-left:155px; }



 
Hehe merci pour ta réponse mais tu n'as pas dû bien lire le topic car c'est exactement ce que je fais ("option numéro 2" dans le tout premier message), et que je voudrais éviter :)

Reply

Marsh Posté le 30-05-2007 à 12:41:56    

ZeBix a écrit :


Je suis allé voir la doc sur l'overflow  (W3.org et W3Schools.com) mais je ne vois pas comment cela peut remplir le même effet qu'avec ma margin-left de la div content .


As-tu testé ?
 
En établissant un nouveau contexte de formatage, le bord de ton contenu ne va plus être considéré comme le bord de la page, mais va débuter après ton flottant. Tu devrais donc avoir l'effet que tu souhaites.
 

ZeBix a écrit :


De plus , je ne comprends pas ce qu'est la propriété qui commence par un Underscore ("_overflow" )... La seule info que je trouve ce sont les Vendor-specific extensions mais je ne vois pas le domaine d'application ici ...


Dans l'exemple de gatsu, je suppose que le _overflow est un hack à l'usage de IE6, l'overflow ne créant pas un nouveau contexte de formatage sur ce dernier. Par contre, sur IE; un nouveau contexte de formatage est établi lorsqu'on dote un élément du layout, ce que permet de faire l'utilisation de la propriété zoom sur les version d'IE à partir de la 5.5 (sauf erreur).
 
Perso je préfère réserver l'utlilisation de la propriété microsoft zoom à des tests de débugage et utiliser des hack qui permette à la feuille de style de passer la validation du genre le holly hack pour donner le layout:
 

Code :
  1. #content {
  2.   overflow:hidden;
  3. }
  4. /* \*/
  5. * html #content { height: 1%; } /*donne le layout à IE6-  mais ignoré volontairement par IE mac */
  6. /* */

Reply

Marsh Posté le 30-05-2007 à 13:28:39    

Pitsy a écrit :

As-tu testé ?
En établissant un nouveau contexte de formatage, le bord de ton contenu ne va plus être considéré comme le bord de la page, mais va débuter après ton flottant. Tu devrais donc avoir l'effet que tu souhaites.

 

Quand je disais que je voyais pas comment ça peut remplir le même effet, je voulais impliquer que malheureusement je ne vois pas comment le mettre en place...

 

Je lis le lien que tu m'indiques ici et vas voir quoi :)

 


Pitsy a écrit :

Dans l'exemple de gatsu, je suppose que le _overflow est un hack à l'usage de IE6, l'overflow ne créant pas un nouveau contexte de formatage sur ce dernier. Par contre, sur IE; un nouveau contexte de formatage est établi lorsqu'on dote un élément du layout, ce que permet de faire l'utilisation de la propriété zoom sur les version d'IE à partir de la 5.5 (sauf erreur).

 

Merci, j'en prends bonne note :)

Message cité 1 fois
Message édité par ZeBix le 30-05-2007 à 13:29:37
Reply

Marsh Posté le 30-05-2007 à 14:37:28    

ZeBix a écrit :

malheureusement je ne vois pas comment le mettre en place...


Tu prends ton code de l'option2, tu vire le margin-left de 200 et, à la place, tu mets un overflow:hidden. Là, tu regardes le résultat, tu fais quelqes tests sur les différents navigateurs et tu comprendras pourquoi Gatsu te propose de mettre le margin pour séparer les 2 éléments au menu et non au content ;)
 
En passant, tu devrais renseigner un doctype valide en haut de ta page, que les navigateurs passent en mode standard.

Reply

Marsh Posté le 30-05-2007 à 14:58:58    

ZeBix a écrit :

Hehe merci pour ta réponse mais tu n'as pas dû bien lire le topic car c'est exactement ce que je fais ("option numéro 2" dans le tout premier message), et que je voudrais éviter  :)


Flagrant délit de lecture en travers !

 

Reply

Marsh Posté le 30-05-2007 à 16:57:46    

Pitsy a écrit :

Tu prends ton code de l'option2, tu vire le margin-left de 200 et, à la place, tu mets un overflow:hidden. Là, tu regardes le résultat, tu fais quelqes tests sur les différents navigateurs et tu comprendras pourquoi Gatsu te propose de mettre le margin pour séparer les 2 éléments au menu et non au content ;)


 
Ah ben voilà, y'a pas plus simple. A noter sur sur FF le résultat est nickel sans margin, et que sur IE il me met automatiquement un mini espace entre les divs, que je peux régler facilement.
 
Merci beaucoup à toi et à Gatsu donc, problem solved, c'est nickel !
 
 :jap:  
 
 

Pitsy a écrit :

En passant, tu devrais renseigner un doctype valide en haut de ta page, que les navigateurs passent en mode standard.


Bien sûr, j'aurais cru que tout le monde comprenait que ce n'était pas le code d'une vraie page ici mais juste un exemple simplifié au max pour synthétiser mon problème ;)  

Reply

Sujets relatifs:

Leave a Replay

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