[CSS] problème de mise en page

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 :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN" « http://www.w3.org/TR/xhtml1/DTD/xh [...] ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jdoc:include type="head" />
<link href="/residencetelmoV2/templates/test/css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Partie1">Zone d‘en-tete / header<br /><br />
<div id="Section1">Section1
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div id="Section2">Section2
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="Partie2">Zone principale / main<br /><br />
<div id="Section3">Miettes de pain / breadcrumbs
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
</div>
<div id="Section6">Colonne droite
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="Section4">Colonne gauche
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="Section5">Contenu
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<div id="Partie3">Pied de page /footer<br /><br />
<div id="Section7">Section7
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
</body>
</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 :

/*{margin:0; padding:0;}*/
body{
font-size: 12px;
font-family: Helvetica,Arial,sans-serif; }
img {
/*background-color: transparent;*/
border:none;}
#Partie1{ /* header */
border: 2px dotted green; }
#Partie2{ /* main */
float: left;
border: 2px dotted yellow; }
#Partie3{ /* Pied */
clear:left;
border: 2px dotted red; }
#Section1{ /* A droite en haut */
width: 18em;
margin: 0 0 1.2em;
border: 1px dashed silver;
background-color: #eee; }
#Section2{ /* A gauche en haut */
float: right;
width: 12em;
margin: 0 0 1.1em;
background-color: #eee;
border: 1px dashed silver; }
#Section3{ /* Breadcrumbs */
border: 1px dashed silver;
background-color: #eee; }
#Section4{ /* Colonne gauche */
float: left; width: 15em;
margin: 0 0 1.2em;
border: 1px dashed silver; }
#Section5{ /* Contenu */
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver; }
#Section6{ /* Colonne droite */
float: right;
width: 12em;
margin: 0 0 1.1em;
background-color: #eee;
border: 1px dashed silver; }
#Section7{ /* Pied */
margin: 0 0 1.1em;
background-color: #eee;
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

[CSS] problème de mise en page

Sujets relatifs:

Leave a Replay