Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

#1 28/02/2008 00:46:04

rebel
Membre
Inscription : 31/01/2008
Messages : 62
Site Web

Demande de template

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

#2 28/02/2008 17:01:57

rebel
Membre
Inscription : 31/01/2008
Messages : 62
Site Web

Re : Demande de template

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

#3 28/02/2008 18:06:42

mapaje
Membre
Inscription : 09/06/2007
Messages : 81

Re : Demande de template

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

#4 28/02/2008 18:57:26

rebel
Membre
Inscription : 31/01/2008
Messages : 62
Site Web

Re : Demande de template

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

#5 28/02/2008 19:31:02

mapaje
Membre
Inscription : 09/06/2007
Messages : 81

Re : Demande de template

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

#6 28/02/2008 22:34:22

rebel
Membre
Inscription : 31/01/2008
Messages : 62
Site Web

Re : Demande de template

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

Pied de page des forums