Tweet
Bonsoir à tous,
J'ai créé un template d'après le tutoriel de Cédric Keiflin. Voici mon index.php du template:
mon template.css est le suivant en m'inspirant du CSS de Cédric KEIFLIN:
J'ai essayé d'appliquer ce template sur l'exemple Joomla 1.6, mais l'affichage ne se fait pas comme il se doit (modules affichés les uns en dessous des autres). Où se trouve le problème?
Merci d'avance pour vos réponses.
J'ai créé un template d'après le tutoriel de Cédric Keiflin. Voici mon index.php du template:
Code PHP:
<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;
?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>_
/css/template.css" type="text/css" />
<?php
$centreclass = 'large';
if ($this->countModules('position-6')) :$centreclass = 'normal';
endif;
?>
</head>
<body>
<div id="wrapper">
<div class="ombre_cote">
<div id="conteneur">
<div id="topmenu">
<jdoc:include type="modules" name="position-1" />
</div>
<div id="fond">
<div id="logo"><a href="index.php"></a></div>
<!-- <div id="news">
<jdoc:include type="modules" name="news" />
</div> -->
<div id="papG"></div>
<div id="sturz"></div>
<div id="papD"></div>
<div id="cherche">
<jdoc:include type="modules" name="position-0" />
</div>
<div class="clr"></div>
</div>
<!-- <div id="slideshow">
<jdoc:include type="modules" name="position-12" />
</div> -->
<div id="breadcrumbs">
<jdoc:include type="modules" name="position-2" />
</div>
<div id="gauche">
<jdoc:include type="modules" name="position-7" style="xhtml" />
</div>
<div id="centre" class="<?php echo $centreclass; ?>">
<div class="interne">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<?php if ($this->countModules('position-6')) : ?>
<div id="droite">
<jdoc:include type="modules" name="position-6" style="xhtml" />
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
<div class="ombre_bas"></div>
<div class="ombre_haut"></div>
<div class="ombre_cote">
<div id="footer">
<jdoc:include type="modules" name="position-14" style="xhtml" />
</div>
</div>
<div class="ombre_bas"></div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
Code PHP:
html {
height: 101%;
}
body {
color : #333;
background : #87eb91;
font-family: Times New Roman, sans-serif;
font-size : 12px;
padding : 0;
margin : 0;
}
img {
border : none;
}
a {
color : #9e9e9e;
}
a:hover {
text-decoration : none;
}
a:focus {
outline: none;
}
.clr {
clear : both;
}
li {
list-style : none;
}
p {
padding : 4px 0 4px 0;
}
* {
margin : 0;
padding : 0;
}
h1, h2, h3, h4, h5 {
font-size : 14px;
font-weight : normal;
}
#wrapper {
background : #87eb91;
width: 1010px;
margin: 0 auto;
}
div.ombre_cote {
background: url(../images/ombre_cote.png) top center repeat-y;
width: 1010px;
margin: 0;
padding: 0;
}
div.ombre_bas {
background: url(../images/ombre_bas.png) top center no-repeat;
height: 10px;
width: 1010px;
margin: 0;
padding: 0;
}
div.ombre_haut {
background: url(../images/ombre_haut.png) bottom center no-repeat;
height: 10px;
width: 1010px;
margin: 0;
margin-top: 20px;
padding: 0;
}
#logo {
height: 50px;
width: 250px;
float: left;
background: url(../images/logosturz.png) top left no-repeat;
}
#fond {
/* height: 100px;
width: 490px;
float: left; */
background: url(../images/bann.jpg) top no-repeat;
}
#papG {
position: absolute;
left: 250px;
background: url(../images/papillon.gif);
}
#papD {
position: absolute;
left: 750px;
background: url(../images/papillon.gif);
}
#sturz {
position: absolute;
left: 350px;
background: url(../images/commune1jpg);
}
#recherche {
position: absolute;
right: 50px;
}
/* #logo a {
width: 450px;
height: 90px;
display: block;
} */
/*#news {
height: 100px;
width: 500px;
float: left;
}*/
#topmenu {
height: 50px;
}
#conteneur {
background : #87eb91;
padding : 10px;
}
/*#slideshow {
height: 235px;
clear: both;
margin: 10px 0 10px 0;
}*/
#breadcrumbs {
height: 20px;
}
#footer {
padding: 10px;
text-align: center;
}
#gauche {
width: 200px;
float: left;
}
#centre.normal{
float: left;
width: 590px;
}
#centre.large {
float: left;
width: 790px;
}
#centre div.interne {
padding: 10px;
}
#droite {
width: 200px;
float: left;
}
/*** modules bas ***/
div.entier {
width: 100%;
}
div.moitie {
width: 50%;
}
div.tiers {
width: 33%;
}
div.modules_bas {
float: left;
}
div.modules_bas div.interne {
padding: 10px;
}
div.modules_bas ul li {
line-height: 20px;
margin-left: 10px;
}
div.modules_bas h3 {
line-height: 35px;
}
/*** topmenu ***/
#topmenu li {
background: #000;
height: 50px;
padding: 0 10px;
float: left;
margin: 0 2px;
width: auto;
line-height: 45px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
#topmenu li a {
color: #fff;
padding: 0;
margin: 0;
line-height: 45px;
}
#topmenu li a:hover, #topmenu li.current {
color: #9e9e9e;
}
/*** menu colonne ***/
h3 {
color: #9e9e9e;
font-size: 14px;
font-weight: bold;
padding-left: 20px;
}
ul.menu li {
background: #9e9e9e;
border-bottom: 1px solid #fff;
line-height: 30px;
margin: 0 5px;
}
ul.menu li ul li{
margin-left: 10px;
background: #666;
}
ul.menu li a {
color: #fff;
text-decoration: none;
line-height: 25px;
padding-left: 10px;
}
ul.menu li a:hover {
color: #000;
}
/*** module gris ***/
div.moduletable_gris h3 {
height: 36px;
background: url(../images/titre_modulegris.png) left top repeat-x;
line-height: 30px;
color: #fff;
font-weight: normal;
}
div.moduletable_gris {
background: #9e9e9e url(../images/bas_modulegris.png) left bottom repeatx;
padding-bottom: 35px;
color: #fff;
margin-top: 10px;
}
div.moduletable_gris a {
color: #fff;
padding-left : 10px;
line-height: 20px;
}
/*** formulaires ***/
input#modlgn-username, input#modlgn-passwd {
width: 153px;
height: 28px;
line-height: 25px;
background: url(../images/login_form.png) left top no-repeat;
border: none;
margin: 0;
padding: 0px 0 5px 10px;
}
#login-form fieldset{
border: none;
}
#login-form li{
line-height: 20px;
}
input.button {
background: #333;
color: #fff;
border: none;
padding: 7px;
cursor: pointer;
}
Merci d'avance pour vos réponses.
