[CSS] Imbrication de structures [Résolu]

Imbrication de structures [Résolu] [CSS] - HTML/CSS - Programmation

Marsh Posté le 12-02-2004 à 12:08:59    

Hello, :hello:
 
Voici mon problème !
 
J'ai 2 structures qui fonctionnent parfaitement sous IE6 et Firefox :
 
- n°1 : un menu gauche fixe, un menu droit fixe et un corps en %

Code :
  1. <html>
  2.  <head>
  3.   <title>Structure 1</title>
  4.   <style>
  5.    #menu_gauche
  6.    {
  7.     float:left;
  8.     width:160px;
  9.     background-color:#EEEEEE;
  10.    }
  11.    #menu_droit
  12.    {
  13.     float:right;
  14.     width:160px;
  15.     background-color:#DDDDDD;
  16.    }
  17.    #corps
  18.    {
  19.     width:100%;
  20.     background-color:#CCCCCC;
  21.    }
  22.   </style>
  23.  </head>
  24.  <body>
  25.   <div id="menu_gauche">menu gauche</div>
  26.   <div id="menu_droit">menu droit</div>
  27.   <div id="corps">corps</div>
  28.  </body>
  29. </html>


- n°2 : plusieurs encarts

Code :
  1. <html>
  2.  <head>
  3.   <title>Structure 2</title>
  4.   <style>
  5.    #encart_gauche
  6.    {
  7.     float:left;
  8.     width:50%;
  9.     background-color:#EEEEEE;
  10.    }
  11.    #encart_droit
  12.    {
  13.     float:right;
  14.     width:50%;
  15.     background-color:#DDDDDD;
  16.    }
  17.    #encart
  18.    {
  19.     float:left;
  20.     width:100%;
  21.     background-color:#CCCCCC;
  22.    }
  23.   </style>
  24.  </head>
  25.  <body>
  26.   <div id="encart_gauche">1</div>
  27.   <div id="encart_droit">2</div>
  28.   <div id="encart">3</div>
  29.   <div id="encart_gauche">4</div>
  30.   <div id="encart_droit">5</div>
  31.   <div id="encart">6</div>
  32.  </body>
  33. </html>


Je souhaiterais simplement inclure la structure n°2 dans la n°1 (au niveau du corps bien sûr).
Or, si cela fonctionne sous IE6, impossible d'afficher quelque chose de correct sous Firefox. :(
 
Can you help me ? (pleaaaaaaaase !)


Message édité par $weblook le 13-02-2004 à 09:21:08
Reply

Marsh Posté le 12-02-2004 à 12:08:59   

Reply

Marsh Posté le 12-02-2004 à 12:30:12    

C'est parce que IE est buggé et qu'il gère mal les floats, le problème n'est pas lié à firefox.

Reply

Marsh Posté le 12-02-2004 à 14:07:38    

arf ! Oui, il m'avait semblé voir ça.
C'est plutôt une solution que je cherche. ;)
 
Personne n'a d'idée ?
Je vois mal comment faire tout ça sans float.

Reply

Marsh Posté le 12-02-2004 à 14:23:57    

bah commence par expliquer en mot ce que tu veux, on trouvera ensuite une solution en code pour y arriver.

Reply

Marsh Posté le 12-02-2004 à 14:41:38    

Je suis pas clair ? zut !
Désolé, désolé. :)
 
J'aimerais une structure comme celle-çi, simplement.
http://www.20cent.net/structure.gif
 
Un menu gauche, un menu droit, et le centre en proportionnel qui contient les 6 encarts.
Ca doit bien être possible ? Je débute en CSS, j'avoue que je suis un peu refroidi : c'est dur dur ! :sweat:  
 
Merci pour ton aide en tout cas ! ;)


Message édité par $weblook le 12-02-2004 à 14:43:17
Reply

Marsh Posté le 12-02-2004 à 14:43:28    

ok, et les encarts du milieu qui sont côte à côte, ils ont toujours la même hauteurs?

Reply

Marsh Posté le 12-02-2004 à 14:45:50    

L'idéal serait qu'ils le soient, mais ce n'est pas essentiel, loin de là.
 
Comme tu veux donc. :)

Reply

Marsh Posté le 12-02-2004 à 15:45:12    

Ok, alors voici une solution, ce n'est pas la seule: mets tes deux menus en positionnement absolu en fin de code. L'un que tu colles à gauche (avec left:0) l'autre à droite (avec right:0). Ensuite, pour le milieu, tu pourrais reprendre ton code en présent en rajoutant les marges de gauche et de droite pour laisser l'espace nécessaire aux menus.
 
A priori, ça devrait fonctionner.

Reply

Marsh Posté le 12-02-2004 à 16:26:45    

Ca fonctionne en effet ! :sol:  
 
Mais c'est sous IE que ça foire maintenant. :sweat:  
 

Code :
  1. <html>
  2.    <head>
  3.     <title>Structure 1 + 2</title>
  4.      <style>
  5.       #menu_gauche
  6.       {
  7.          position:absolute;
  8.          width:160px;
  9.          height:500px;
  10.          left:0px;
  11.          top:0px;
  12.          background-color:#EEEEEE;
  13.       }
  14.       #menu_droit
  15.       {
  16.          position:absolute;
  17.          width:160px;
  18.          height:500px;
  19.          right:0px;
  20.          top:0px;
  21.          background-color:#DDDDDD;
  22.       }
  23.       #corps
  24.       {
  25.          margin-left:160px;
  26.          margin-right:160px;
  27.       }
  28.       #encart_gauche
  29.       {
  30.            float:left;
  31.            width:50%;
  32.            background-color:#EEEEEE;
  33.       }
  34.       #encart_droit
  35.       {
  36.            float:right;
  37.            width:50%;
  38.            background-color:#DDDDDD;
  39.       }
  40.       #encart
  41.       {
  42.            float:left;
  43.            width:100%;
  44.            background-color:#CCCCCC;
  45.       }
  46.      </style>
  47.    </head>
  48.    <body>
  49.     <div id="corps">
  50.      <div id="encart_gauche">1</div>
  51.      <div id="encart_droit">2</div>
  52.      <div id="encart">3</div>
  53.      <div id="encart_gauche">4</div>
  54.      <div id="encart_droit">5</div>
  55.      <div id="encart">6</div> 
  56.     </div>
  57.     <div id="menu_gauche">menu gauche</div>
  58.     <div id="menu_droit">menu droit</div>
  59.    </body>
  60.   </html>


 
Encore les float si je comprend bien...
Ca arrive souvent ce genre de galères ou c'est moi qui m'y prends comme un manche ?
 
Je vais retourner à mes tableaux chteumeuleu rapido moi, je le sens. Dommage. :(
 
Bref, si vous voyez une solution à ce nouveau pb...
Merci du coup de main gizmo ! :)


Message édité par $weblook le 12-02-2004 à 16:28:01
Reply

Marsh Posté le 12-02-2004 à 16:31:00    

bon, j'ai pas IE ici, donc si tu ne me décris pas le problème, je ne sais pas t'aidere plus :/

Reply

Marsh Posté le 12-02-2004 à 16:31:00   

Reply

Marsh Posté le 12-02-2004 à 16:34:00    

Une capture, ça te va ?
 
http://www.20cent.net/capture.gif
 
Un souci avec les % peut-être ?


Message édité par $weblook le 12-02-2004 à 16:34:40
Reply

Marsh Posté le 12-02-2004 à 16:40:51    

ok, bon, plusieurs choses:
 
- dans le code que tu mets, je ne vois pas de trace d'un doctype, essaye de rajouter au moins celui du HTML 4 strict
 
- un id est unique, remplace tes id=... par des class=...
 
- si cela ne fonctionne toujours pas, tu peux toujours imbriquer encart gauche dans encart droit si ton fond est uni. Dans ce cas, n'oublie pas de rajouter un clear:both dans encart


Message édité par gizmo le 12-02-2004 à 16:41:03
Reply

Marsh Posté le 12-02-2004 à 17:09:10    

J'essaye tout ça et je reposte. :)
Encore merci !


Message édité par $weblook le 12-02-2004 à 17:46:24
Reply

Marsh Posté le 12-02-2004 à 17:57:31    

La fin de journée approche ! Et je n'ai rien trouvé de convenable malheureusement.
 
A demain donc. ;)
 
...vous serez encore là ? :D


Message édité par $weblook le 12-02-2004 à 17:57:50
Reply

Marsh Posté le 12-02-2004 à 20:38:14    

Ie se plante dans la taille du div avec une marge. J'ai rajouté un div à l'intérieur de corps, en spécifiant 'width = 100%', et giclé un float sur une des cellules, rajouté un clear sur l'encart.
 
<html>  
    <head>  
    <title>Structure 1 + 2</title>  
    <style>  
    #menu_gauche  
    {  
            position:absolute;  
            width:160px;  
            height:500px;  
            left:0px;  
            top:0px;  
            background-color:#EEEEEE;  
    }  
    #menu_droit  
    {  
            position:absolute;  
            width:160px;  
            height:500px;  
            right:0px;  
            top:0px;  
            background-color:#DDDDDD;  
    }  
    #corps  
    {  
            margin-left:160px;  
            margin-right:160px;  
   border: solid 1px blue;
    }  
    #encart_gauche  
    {  
            float:left;  
            width:50%;  
            background-color:#EEEEEE;  
            border: solid 1px red;
    }  
    #encart_droit  
    {  
   efloat:right;  
            background-color:#DDDDDD;  
            border: solid 1px green;
            width: 100%;
    }  
    #encart  
    {  
   clear: both;
            float:left;  
            width:100%;  
            background-color:#CCCCCC;  
    }  
    </style>  
    </head>  
    <body>  
    <div id="corps">  
  <div style='width: 100%'>
  <div id="encart_gauche">1 rze r zer ezr ze r zer ze rez r ezr ez r ezr ez re zr ze rze r ze rze rze r e aze az eaz e aze az eza e aze za e </div>  
  <div id="encart_droit">2 rez rlmze krezrml ermzel rkzelm rkzemlr zemlr kzemlr kzemlkr zemlr kzemlkr</div>  
  <div id="encart">3</div>  
  <div id="encart_gauche">4</div>  
  <div id="encart_droit">5</div>  
  <div id="encart">6</div>    
  </div>
    </div>  
    <div id="menu_gauche">menu gauche</div>  
    <div id="menu_droit">menu droit</div>  
    </body>  
</html>  
 

Reply

Marsh Posté le 13-02-2004 à 09:11:54    

Mon dieu ! Ca marche !!! :sol:  
Un grand grand merci youdontcare !
 
Me voilà rassuré ! Je commençais à me dire que ce n'était pas si bien que ça les feuilles de style.
 
Je vais regarder le code en détail de ce pas.
 
Génial ! La journée commence bien. :)
Encore merci.
 
Je m'attaque au reste du code, en espérant que se sera plus simple maintenant. ;)


Message édité par $weblook le 13-02-2004 à 09:20:34
Reply

Sujets relatifs:

Leave a Replay

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