Vous n'êtes pas identifié(e).
Bonjour a tous comme je suis pas expert en template CSS
je me demande si il a pas quelqun qui peut me rendre se service
je souhaite un template style.css comme si dessous mais ajouté un colonne a droite
pour inclure mon calendrier est mais modules
style.css de mon zite http://bbs-qc.infos.st/
merci d'avance
body {
background-image: url(deco/bbs_fond.jpg);
margin: 0;
padding: 0;
text-align:center;
}
body, td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10pt;
}
img {border: none;}
h1 {font-size: 150%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #999999;
}
#page {
background-color: #D3D3D3;
border: solid 1px #999;
border-top: none;
width: 1000px;
margin: 0 auto 16px auto;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding: 0;
text-align: left;
}
#top {
width: 100%;
height: 50px;
background-color: #FFF;
background-color: #D3D3D3;
border-bottom: none;
margin:0;
padding: 2px 0 0 0;
}
#mid {
width: 1000px;
border-bottom: 1px solid #CCC;
background-image: url(deco/bg.png);
margin:0;
madding: 0;
}
#side {
width: 200px;
background-color: #D3D3D3;
float: left;
margin:0;
padding: 5px 5px 5px 5px;
}
#main {
width: 760px;
float: right;
margin:5;
padding: 4px;
text-align: justify;
}
#break {
clear: both;
}
#bot {
width: 100#;
border-bottom: 1px solid #777;
background:#D3D3D3;
font-size: 75%;
text-align: center;
margin:0;
mapping: 0;
color: #;
}
#top h1 {
margin: 0;
padding: 0 0 0 10px;
color: #000;
font-size: 24px;
}
#top h2 {
margin: 0;
padding: 4px 0 5px 10px;
color: #696969;
font-size: 90%;
}
/* Menu */
.zul {
padding: 0;
margin: 5px 0 0 0;
list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
background-image: url(deco/pge0.png);
background-repeat: no-repeat;
padding-left: 12px;
}
.zon {
background-image: url(deco/pge1.png);
}
.zli1 {
margin-left: 0px;
}
.zli2 {
margin-left: 16px;
}
.zli3 {
margin-left: 32px;
}
.zli4 {
margin-left: 48px;
}
/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 0;
width: 100%;
}
.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}
Hors ligne
Ou si on peut me dire ou et comment inséré cette balise
car après quelque essaie la module test que je veut faire apparaitre en colonne de droit est finalement soit en bas du cadre principal, ou juste en sous de la colonne de gauche ????
S.V.P j'ai besoin d'être je suis nul en css
Hors ligne
Bonjour,
Ci-desous un template et un css pour avoir des colonnes à droite, à gauche avec en prime des sous colonnes à droite et à gauche.
//Template//
<!DOCT YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="top">
<h1><?php echo $zite->get_data('site_title') ?></h1>
<h2><?php echo $zite->get_data('site_subtitle') ?></h2>
</div>
<div id="mid">
<div id="sideg">
<hr />
<?= "Aujourd'hui :<br />" .date("d/m/Y H:i:s") ?>
<h3>Partie I</h3>
<?php echo $zite->content['menu']?>
<hr />
<div class="sidegdessous">
<h3>Partie I <em> en dessous</em></h3>
Je peux servir à installer un module
</div>
</div>
<div id="sided">
<hr />
<h3>Partie II</h3>
<?php echo $zite->get_content(1156957918, true) ?>
<hr />
<div class="sideddessous">
<h3>Partie II <em> en dessous</em></h3>
Je peux servir à installer un module
</div>
</div>
</div>
<div id="main">
<?php echo $zite->content['main'] ?>
</div>
<div id="break"></div>
</div>
<div id="bot">Site motorisé par <a href="http://zite.prositif.com">ZITE CMS <?php echo ZITEVER ?></a></div>
</div>
</body>
</html>
//CSS//
body {
background-image: url(deco/bbs_fond.jpg);
margin: 0;
padding: 0;
text-align:center;
}
body, td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10pt;
}
img {border: none;}
h1 {font-size: 150%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #999999;
}
#page {
background-color: #D3D3D3;
border: solid 1px #999;
border-top: none;
width: 1000px;
margin: 0 auto 16px auto;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding: 0;
text-align: left;
}
#top {
width: 100%;
height: 50px;
background-color: #FFF;
background-color: #D3D3D3;
border-bottom: none;
margin:0;
padding: 2px 0 0 0;
}
#mid {
width: 99%;
border-bottom: 1px solid #CCC;
background-image: url(deco/bg.png);
margin:0;
padding: 0;
}
#sideg{
width: 21%;
background-color: #D3D3D3;
float: left;
margin:0;
padding: 5px 5px 5px 5px;
}
#sided {
width: 21%;
background-color: #D3D3D3;
float:right;
margin:0;
padding: 5px 5px 5px 5px;
}
#main {
width: 50%;
float: left;
margin:5;
padding: 4px;
text-align: justify;
}
#break {
clear: both;
}
#bot {
width: 100#;
border-bottom: 1px solid #777;
background:#D3D3D3;
font-size: 75%;
text-align: center;
margin:0;
mapping: 0;
color: #;
}
#top h1 {
margin: 0;
padding: 0 0 0 10px;
color: #000;
font-size: 24px;
}
#top h2 {
margin: 0;
padding: 4px 0 5px 10px;
color: #696969;
font-size: 90%;
}
/* Menu */
.zul {
padding: 0;
margin: 5px 0 0 0;
list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
background-image: url(deco/pge0.png);
background-repeat: no-repeat;
padding-left: 12px;
}
.zon {
background-image: url(deco/pge1.png);
}
.zli1 {
margin-left: 0px;
}
.zli2 {
margin-left: 16px;
}
.zli3 {
margin-left: 32px;
}
.zli4 {
margin-left: 48px;
}
/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 0;
width: 100%;
}
.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}
COMMENTAIRES:
- basé sur Zite sans modif et ton css
- Les sous-colonnes s'enlèvent facilement en effaçant dans le template les div class sans oublier la balise div de fin
- En style les sous colonnes sont dépendantes de la colonne du dessous mais tu peux leur donner leur propre style par le biais du CSS
- Tu peux jouer sur les largeurs que je t'ai mis en pourcentage , tout est question de ce que tu veux et de quelques tatonnements sans oublier que ce sont des boites flottantes qui se bougent au gré de leur contenu.
- Elles peuvent devenir fixe mais c'est un peu plus complexe ... donc long!
En attendant, amuse toi bien et tiens nous au courant de tes avancées
Jean Pierre
Hors ligne
bien en gros merci a toi.
jai copier test 2 source pour l'instant cela est un peut en d'sous sous mais je vais m'amuser avec ca sa me donne une bonne idée de la procédure de la structure
j'ai la colonne gauche en haut et la main page en bas avec la colonne droite qui s'enligne bien a celle si.
Hors ligne
Re
De rien. Si tu as d'autres soucis, vas-y mais je te garantis pas une réponse aussi rapide qu'aujourd'hui ... T'es bien tombé! Je te répondrais si c'est dans mes compétences.
A+
JP
Hors ligne
pour l'instant j'ai du enlever mon template des 3 colonne car il affiche plus le fond'écran
body {
background-image: url(deco/bbs_fond.jpg);
donc les colonnes gauche droit on plus de ligne qui les sépare ???
------
ok problème résolu
---)
#page {
background-image: url(deco/bg.png);
Dernière modification par rebel (29/02/2008 00:16:43)
Hors ligne