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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1563020
ZeBix
edit > preview
Posté le 21-05-2007 à 15:47:22  profilanswer
 

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
mood
Publicité
Posté le 21-05-2007 à 15:47:22  profilanswer
 

n°1563054
_v1ru5_
Posté le 21-05-2007 à 16:34:50  profilanswer
 

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

n°1563083
ZeBix
edit &gt; preview
Posté le 21-05-2007 à 17:01:08  profilanswer
 

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

n°1563093
Shinuza
This is unexecpected
Posté le 21-05-2007 à 17:13:23  profilanswer
 

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.
n°1563115
ZeBix
edit &gt; preview
Posté le 21-05-2007 à 17:49:16  profilanswer
 

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

n°1563193
dartyduck
n00b AttitudE
Posté le 21-05-2007 à 21:30:15  profilanswer
 

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
n°1563315
ZeBix
edit &gt; preview
Posté le 22-05-2007 à 10:32:42  profilanswer
 

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

n°1563323
zecrazytux
Posté le 22-05-2007 à 10:40:46  profilanswer
 

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
n°1563570
dartyduck
n00b AttitudE
Posté le 22-05-2007 à 16:11:08  profilanswer
 

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
n°1563592
ZeBix
edit &gt; preview
Posté le 22-05-2007 à 16:29:51  profilanswer
 

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

mood
Publicité
Posté le 22-05-2007 à 16:29:51  profilanswer
 

n°1564250
gatsu35
Posté le 23-05-2007 à 19:27:34  profilanswer
 

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/

n°1564497
ZeBix
edit &gt; preview
Posté le 24-05-2007 à 12:00:38  profilanswer
 

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
n°1566123
PunkRod
Digital Mohawk
Posté le 28-05-2007 à 13:17:01  profilanswer
 

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

 

n°1567091
ZeBix
edit &gt; preview
Posté le 30-05-2007 à 10:32:26  profilanswer
 

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

n°1567180
Pitsy
Posté le 30-05-2007 à 12:41:56  profilanswer
 

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

n°1567208
ZeBix
edit &gt; preview
Posté le 30-05-2007 à 13:28:39  profilanswer
 

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
n°1567267
Pitsy
Posté le 30-05-2007 à 14:37:28  profilanswer
 

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.

n°1567290
PunkRod
Digital Mohawk
Posté le 30-05-2007 à 14:58:58  profilanswer
 

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 !

 

n°1567396
ZeBix
edit &gt; preview
Posté le 30-05-2007 à 16:57:46  profilanswer
 

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


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

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

 

Sujets relatifs
tikiwiki (resolu)[RESOLU] <span> sur anime Flash ?? Div flotante sous IE ??
[Résolu] Executer un BACTH en VB (Visual Basic 2005 Express)[Resolu] VB 2005 Express -> demande code pour écrire ds le Registre
tableau de chaines en mémoire partagé (Linux/POSIX) [RESOLU]menu php
[EXCEL] Menu déroulant et variable ?[Résolu] Problème polymorphisme et sous typage
[Ocaml] lecture d'un fichier texte de > 50 Mo (resolu) 
Plus de sujets relatifs à : [Résolu] CSS : je voudrais une width (100%-largeur menu)


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR