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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] problème de mise en page

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] problème de mise en page

n°2003772
stef_dober​mann
Personne n'est parfait ...
Posté le 22-06-2010 à 16:23:10  profilanswer
 

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...
mood
Publicité
Posté le 22-06-2010 à 16:23:10  profilanswer
 

n°2003777
aspirateur
Posté le 22-06-2010 à 16:28:30  profilanswer
 

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

n°2003841
stef_dober​mann
Personne n'est parfait ...
Posté le 22-06-2010 à 18:12:54  profilanswer
 

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...
n°2004812
stef_dober​mann
Personne n'est parfait ...
Posté le 25-06-2010 à 15:25:32  profilanswer
 

UP
voici le lien demandé


---------------
Tout à commencé par un rêve...
n°2004850
aspirateur
Posté le 25-06-2010 à 16:54:58  profilanswer
 

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

n°2004946
stef_dober​mann
Personne n'est parfait ...
Posté le 26-06-2010 à 14:16:34  profilanswer
 

je vais tester les 2 solutions merci :)


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

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

  [CSS] problème de mise en page

 

Sujets relatifs
aide modification CSSProblème de syntaxe. Mettre 2 classes pour une page
Probleme avec requete sql NOT EXISTS et NOT INproblème de zero binaire dans un enregistrement
Problème d'authentification en JAVA/J2EEProbleme Mise en page HTML et CSS
[CSS] problème de mise en page à l'impressionProblème de mise en page avec CSS
mise en page css-->probleme son flash[CSS] Probleme de mise en page
Plus de sujets relatifs à : [CSS] problème de mise en page

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.059 secondes

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