[CSS] problème de mise en page

problème de mise en page [CSS] - HTML/CSS - Programmation

Marsh Posté le 22-06-2010 à 16:23:10    

je voudrais créer un template Joomla! pour le site de mon père mais je bloc à la mise en page :

Code :
  1. <!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN" « http://www.w3.org/TR/xhtml1/DTD/xh [...] &#034;&gt;
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <jdoc:include type="head" />
  5. <link href="/residencetelmoV2/templates/test/css/template.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8.  <div id="Partie1">Zone d‘en-tete / header<br /><br />
  9.   <div id="Section1">Section1
  10.   <jdoc:include type="modules" name="user3" style="xhtml" />
  11.   </div>
  12.   <div id="Section2">Section2
  13.   <jdoc:include type="modules" name="top" style="xhtml" />
  14.   </div>
  15.  </div>
  16.  <div id="Partie2">Zone principale / main<br /><br />
  17.   <div id="Section3">Miettes de pain / breadcrumbs
  18.   <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
  19.   </div>
  20.   <div id="Section6">Colonne droite
  21.   <jdoc:include type="modules" name="right" style="xhtml" />
  22.   </div>
  23.   <div id="Section4">Colonne gauche
  24.   <jdoc:include type="modules" name="left" style="xhtml" />
  25.   </div>
  26.   <div id="Section5">Contenu
  27.   <jdoc:include type="component" style="xhtml" />
  28.   </div>
  29.  </div>
  30.  <div id="Partie3">Pied de page /footer<br /><br />
  31.   <div id="Section7">Section7
  32.   <jdoc:include type="modules" name="footer" style="xhtml" />
  33.   </div>
  34.  </div>
  35.  </body>
  36. </html>


je voudrais avoir les id Section 1 et 2 sur la même ligne, section1 ce place correctement mais la section2 se positionne sous Partie1 mais au bonne endroit.
 
voici la CSS rattaché :

Code :
  1. /*{margin:0; padding:0;}*/
  2. body{
  3.    font-size: 12px;
  4.    font-family: Helvetica,Arial,sans-serif; }
  5. img {
  6. /*background-color: transparent;*/
  7. border:none;}
  8. #Partie1{ /* header */
  9.    border: 2px dotted green; }
  10. #Partie2{ /* main */
  11.    float: left;
  12.    border: 2px dotted yellow; }
  13. #Partie3{ /* Pied */
  14.    clear:left;
  15.    border: 2px dotted red; }
  16. #Section1{ /* A droite en haut */
  17.    width: 18em;
  18.    margin: 0 0 1.2em;
  19.    border: 1px dashed silver;
  20.    background-color: #eee; }
  21. #Section2{ /* A gauche en haut */
  22.    float: right;
  23.    width: 12em;
  24.    margin: 0 0 1.1em;
  25.    background-color: #eee;
  26.    border: 1px dashed silver; }
  27. #Section3{ /* Breadcrumbs */
  28.    border: 1px dashed silver;
  29.    background-color: #eee; }
  30. #Section4{ /* Colonne gauche */
  31.    float: left; width: 15em;
  32.    margin: 0 0 1.2em;
  33.    border: 1px dashed silver; }
  34. #Section5{ /* Contenu */
  35.    margin: 0 12em 1em 16em;
  36.    padding: 0 1em;
  37.    border: 1px dashed silver; }
  38. #Section6{ /* Colonne droite */
  39.    float: right;
  40.    width: 12em;
  41.    margin: 0 0 1.1em;
  42.    background-color: #eee;
  43.    border: 1px dashed silver; }
  44. #Section7{ /* Pied */
  45.    margin: 0 0 1.1em;
  46.    background-color: #eee;
  47.    border: 1px dashed silver; }


 
j'ai testé beaucoup de paramétré, mais rien n'y fait.
Comment faire ?


Message édité par stef_dobermann le 25-06-2010 à 15:26:30

---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 22-06-2010 à 16:23:10   

Reply

Marsh Posté le 22-06-2010 à 16:28:30    

Tu peux nous mettre un lien pour qu'on se rende mieux compte et qu'on puisse faire des tests ?

Reply

Marsh Posté le 22-06-2010 à 18:12:54    

non désolé, je bosse en local pour l'instant
Edit : mais je vais faire une version simple sur mon serveur.


Message édité par stef_dobermann le 22-06-2010 à 18:18:19

---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 25-06-2010 à 15:25:32    

UP
voici le lien demandé


---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 25-06-2010 à 16:54:58    

Tu as 2 solutions:
 
Soit tu mets ta section 2 en float: left; avec une marge à gauche. (attention dans ce cas la div section sera avant la div section 1 dans ton html)
Soit tu passe section 2 en position:relative; et tu joue sur les paramètres top et left pour la placer

Reply

Marsh Posté le 26-06-2010 à 14:16:34    

je vais tester les 2 solutions merci :)


---------------
Tout à commencé par un rêve...
Reply

Sujets relatifs:

Leave a Replay

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