Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

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

Pages : 1

#1 07/01/2008 19:37:49

The-Squad
Membre
Inscription : 07/01/2008
Messages : 8

Problème de mise en page

Bonjour,

Je souhaite faire un design pour zite et j'ai quelques petits problème:
-Le côté gauche de "mid" se reproduit à l'extrème droite de l'écran;
-(Moindre) le padding ne marche pas pour descendre "site motorisé par Zite"


Et la je bloque :'( La preuve sur le blog: www.the-squad.be.ma

Merci d'avance de votre réponse, The Squad

Dernière modification par The-Squad (07/01/2008 19:38:34)

Mon site web sous Zite: www.the-squad.be.ma

Hors ligne

#2 11/01/2008 13:50:17

Renaud
Membre
Inscription : 30/01/2007
Messages : 306

Re : Problème de mise en page

ben... malheureusement je manque de temps pour donner des cours de CSS (pour lesquels je ne serai d'ailleurs pas le plus qualifié). Reporte toi à des sites/forums tels que ceux de l'excellent alsacréation, ou pompage.

Bon courage... mais tu en seras récompensé !

Ubuntu Rocks

Hors ligne

#3 11/01/2008 19:25:18

The-Squad
Membre
Inscription : 07/01/2008
Messages : 8

Re : Problème de mise en page

Non mais enfait le design est déjà fait !

C'est jsute que tout est cohérent dans le CSS:

body {
  background-color: #CCC;
  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: #35B;
	text-decoration: none;
}
a:hover {
	color: #B53;
}

#page {
	background-color:#FFF;
	border: solid 1px #CCC;
	border-top: none;
	background-color: #FFF;
	width: 900px;
	margin: 0 auto 16px auto;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	padding: 0;
	text-align: left;
}

#top {
	width: 900px;
	height: 69px;
	background-color: #FFF;
	background-image: url(deco/topbg.png);
	border-bottom: none;
	margin:0;
	padding: 10px 0 0 0;
}

#mid {
	width: 1000px;
	border-bottom: 1px solid #CCC;
	background-image: url(deco/background-mid.jpg);
	margin:0;
	madding: 0;
}

#side {
	width: 180px;
	float: right;
	margin:0;
	padding: 5px 10px 5px 10px;
}

#main {
	width: 676px;
	float: left;
	margin:0;
	padding: 7px;
	text-align: justify;
}

#break {
	clear: both;
}

#bot {
	width: 900px;
	border-bottom: 1px solid #777;
	background-image: url(deco/topbg.png);
	font-size: 75%;
	text-align: center;
	margin:0;
	mapping: 0;
	color: #225;
}

#top h1 {
	margin: 0;
	padding: 0 0 0 10px;
	color: #FFF;
	font-size: 24px;
}
#top h2 {
	margin: 0;
	padding: 4px 0 5px 10px;
	color: #EEF;
	font-size: 90%;
}

/* Menu */
.zul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
	background-image: url(deco/pge0.png);
	background-repeat: no-repeat;
	padding-left: 14px;
}
.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;
}

C'est ça qui me perturbe sad

The Squad

Mon site web sous Zite: www.the-squad.be.ma

Hors ligne

#4 12/01/2008 00:26:15

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

Re : Problème de mise en page

Bonsoir

Pas sur d'avoir compris mais si c'est pour mettre à droite le menu tu changes la ligne float: right; en float: left;
Le système de boite en CSS étant ce qu'il est, tu ne pourras pas descendre plus le bot, à moins de passer en boite position fixe mais tu génèreras d'autres problèmes. Donc la boite "bot" se cale sous le mid qu'elle que soit le contenu.
Si c'est point celà les blèmes, tu te relances dans des explications dit amicalement pour atténuer l'apparence sécheresse (qui n'est pas le but recherché)

JP

Hors ligne

#5 12/01/2008 00:27:40

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

Re : Problème de mise en page

RE
Correction: si c'est pour mettre le menu à gauche (pas à droite, il y est déjà....)

JP

Hors ligne

#6 12/01/2008 14:55:15

The-Squad
Membre
Inscription : 07/01/2008
Messages : 8

Re : Problème de mise en page

Euh merci de ta réponse et désoler de paraitre "sec" smile

Enfait tout dans la page est à l'endroit que je veut mais si tu regardes à l'extrème droite tu verras une bande: la répétition du bord gauche à l'extrème droite (si tu n'es pas en grande résolution déplace toi vers la droite tongue)

Et je vois pas du tout pourquoi ça me fait ça... sad

ça me gène surtout pour les visiteurs en grande résolution car c'est vraiment très visible alors:

Un screen shot: ici

Merci, The Squad

Mon site web sous Zite: www.the-squad.be.ma

Hors ligne

#7 12/01/2008 16:36:29

Kreasite
Membre
Inscription : 14/09/2007
Messages : 62

Re : Problème de mise en page

Je vais t'aider un peu histoire de ne pas te laisser avec ce graphisme déborder.

Le code est bon, ce sont certaines valeurs qui ne sont pas bonnes ou du moins à changer.
Voici un code qui devrait être meilleur :

body {
  background-color: #575757;
  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%;
        color: #fa8729;
}
h3 {
        font-size: 120%;
        color: #fa8729;
}
h4 {
        font-size: 110%;
        color: #575757;
}
h5 {
        font-size: 100%; 
        color: #fa8729;
}

a {
	color: #fa8729;
	
}
a:hover {
	color: #B53;
        
}

#page {
	background-color:#575757;
	border-top: none;
	width: 1000px;
	margin: 0 auto 16px auto;
	padding: 0;
	text-align: left;
}

#top {
	width: 1000px;
	height: 200px;
	background-color: #575757;
	background-image: url(deco/top.jpg);
	border-bottom: none;
	margin:0;
	padding:0;
}

#mid {
	width: 1000px;
	background-image: url(deco/background-mid.jpg);
        background-color: #575757;
	margin:0;
        padding-left: 0;
        padding-top: 0;

}

#side {
	width: 180px;
	float: right;
	margin-right: 10px;
	padding-top: 0;
        padding-right: 50px;
}

#main {
	width: 660px;
	float: left;
	margin: 30;
	padding: 20px;
	text-align: justify;
}

#break {
        padding:10px;
	clear: both;
}

#bot {
	width: 1000px;
	background-image: url(deco/bottom.jpg);
	text-align: center;
	height:75px;
	background-color: #575757;
        font-size: 75%;
}

#top h1 {
	margin: 0;
	padding: 0 0 0 10px;
	color: #FFF;
	font-size: 24px;
        clear: both;
}
#top h2 {
	margin: 0;
	padding: 4px 0 5px 10px;
	color: #EEF;
	font-size: 90%;
}
#bot p {
        margin-top: 10px;
}
#bot a {
        margin-top:10px;
}

/* Menu */
.zul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
	background-image: url(deco/pge0.jpg);
	background-repeat: no-repeat;
	padding-left: 14px;
}
.zon {
	background-image: url(deco/pge1.gif);
}
.zli1 {
	margin-left: 0px;
}
.zli2 {
	margin-left: 16px;
}
.zli3 {
	margin-left: 32px;
}
.zli4 {
	margin-left: 48px;
}

/* styles zite */
#zadmin {
	border: 1px solid #fa8729;
	background-color: #EEE;
	padding: 0 2px;
	margin: 3px 0 0 0;
}
.ztable {
	border: 1px solid #fa8729;
	background-color: #EEE;
	padding: 0 2px;
	margin: 5px 0;
	width: 100%;
}
.zalert {
	border: 1px solid #fa8729;
	background-color: #eee;
	padding: 0 2px;
}

Dernière modification par Kreasite (12/01/2008 16:38:05)

Infographiste freelance
Création de site
Kréatif template for ZITE CMS

Hors ligne

#8 13/01/2008 11:24:05

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

Re : Problème de mise en page

Bonjour,

Je ne sais pas si Kréa a résolu ton problème mais ayant essayé ton CSS sur mon site, je n'ai pas de problème. Si tu patauges toujours, envoie ton template.php qui peut être la source du dysfonctionnement. Et ce sera plus facile pour se rendre compte réellement.
A plus
JP

Hors ligne

#9 13/01/2008 17:09:33

The-Squad
Membre
Inscription : 07/01/2008
Messages : 8

Re : Problème de mise en page

Merci à vous tous smile

Maintenant tout va bien donc pas de problème quoi ^^

J'ai fait passer "site motorisé par Zite CMS en dessous maimtenant wink Enfait j'ai juste mis des passages à la ligne tongue

Encore un big merci à Kreasite: T'as fait un travail de chef en épurant le design comme ça tongue

PS: Encore quelques petites questions juste pour vous ennuyer...
Comment faire pour qu'une page ne soit pas dans la liste de liens mais qu'elle soit accessible quand même ?
Et à quoi sert le la petite clé dans la gestion des pages ? ( Je l'ai mis puis enlever mais ça n'a rien chager ?)

Encore merci, The Squad

Mon site web sous Zite: www.the-squad.be.ma

Hors ligne

#10 14/01/2008 00:51:48

ced101
Membre
Inscription : 29/12/2007
Messages : 48

Re : Problème de mise en page

la petite clé ca masque les pages
toit tu vois pas la différence car tu est admin mais les visiteurs ne voient plus les pages

Hors ligne

#11 14/01/2008 11:10:49

Kreasite
Membre
Inscription : 14/09/2007
Messages : 62

Re : Problème de mise en page

Aussi, tu devrais voir à changer charset=windows-1252 par charset=iso-8859-1

Infographiste freelance
Création de site
Kréatif template for ZITE CMS

Hors ligne

Pages : 1

Pied de page des forums

Propulsé par FluxBB