Forum ZitePLUS

ced101

Membre

Inscription : 29/12/2007

Messages : 48

fixer la hauteur des pages

bonjour,

queluq'un peut-il m'indiquer comme donner une hauteur fixe aux pages ?

ce qui permettrais que le menu et la page principale ne soient pas decalé en fonction de la hauteur des pages

merci

mapaje

Membre

Inscription : 09/06/2007

Messages : 81

Re : fixer la hauteur des pages

Bonjour:

Pour side et main avec la même valeur

height: ... px;

Attention donner une hauteur suppose d'adapter tout à cette hauteur. Ce n'est pas insurmontable et ce peut être une bonne solution suivant la charte choisie.

A+
JP

ced101

Membre

Inscription : 29/12/2007

Messages : 48

Re : fixer la hauteur des pages

merci je teste des que possible

en fait je souhaite adapter main à la hauteur de mon menu (side)
apres si la page depasse ca mettra un ascenceur non ?

ced101

Membre

Inscription : 29/12/2007

Messages : 48

Re : fixer la hauteur des pages

arf non si je fixe la hauteur et que le texte est plus long que la page ca ne met pas d'ascenceur

en plus le pied de page (Site motorisé par ZITE CMS 0.6.2beta) reste au milieu de la page quand la page est vide

comment je peux corriger ça ?

merci

mapaje

Membre

Inscription : 09/06/2007

Messages : 81

Re : fixer la hauteur des pages

bonsoir,

Va falloir modifier ton template, autrement dit mettre ton pied de page après la balise fermante de #page et pour les ascenceurs, pas comprendre que la navigateur ne le fasse pas automatiquement. Sinon il reste le css et le scroll à mettre dans le main. C'est dit au jugé pour ce dernier point mais ça doit approcher de la solution. Ah si, essaie de mettre une plus grande hauteur. En tâtonnant, tu finiras par y arriver mais le menu sera grand. L'avantage est que tu pourras inclure d'autres boites dans la boite menu soit par <div id="ll"> soit par <div class="ll">; ce dernier reprenant le css de son élément mère sans empêcher d'y mettre des valeurs particulières.

A+
JP

ced101

Membre

Inscription : 29/12/2007

Messages : 48

Re : fixer la hauteur des pages

bon j'ai reussi a mettre un ascenceur avec overflow: scroll dans le main

mais quand je répare quelquechose c'est autres chose qui cloche

actuellement sous Firefox et Opera le site est completement décalé à gauche

et sous IE il est bien centré mais le texte du menu est centré aussi et les images n'apparaissent pas (y compris ma bannière dans le top)

je donne l'adresse du site pour que vous puissiez vous rendre compte : http://ced101.consoles.free.fr/site

je mets aussi mon css j'ai du merder quelque part...

body {
  background-color: #000000;
  background-image: url(deco/fond.jpg);
  background-repeat: no-repeat;
  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: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
}

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

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

#mid {
	width: 900px;
        
	'background-image: url(deco/bg.png);
	margin:0;
	madding: 0;
}

#side {
	width: 180px;
        height: 800px;	
        float: left;
	margin:0;
	padding: 5px 10px 5px 10px;
}

#main {
	width: 676px;
        height: 800px;
	overflow: scroll;
      	border: 1px solid #000;
        float: right;
	margin:0;
	padding: 7px;
	text-align: justify;
}

#break {
	clear: both;
}

#bot {
	width: 900px;
	border-bottom: 1px solid #777;
	font-size: 75%;
	text-align: center;
	margin:0;
	mapping: 0;
	color: #000000;
}

#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;
}

merci d'avance

mapaje

Membre

Inscription : 09/06/2007

Messages : 81

Re : fixer la hauteur des pages

Bonjour,

Parfois, un CSS, ça tient à pas grand-chose. Pour le tien, 2 petites apostrophes mal séantes...

- Dans #page => enlève celle avant le height
- Dans #mid => enlève celle avant le background-image

Ton décalage vient de là. J'ai testé ton css corrigé, il fonctionne sous Fx

Je ne sais pas avec quoi tu bosses mais je ne saurais, une fois de plus, conseiller à tout le monde de le faire avec un du style notepad++. Comme il colore la syntaxe, les erreurs se voient très vite.

Bonne continuation
JP

mapaje

Membre

Inscription : 09/06/2007

Messages : 81

Re : fixer la hauteur des pages

Re

Tant qu'à faire, je te joins un css (un poil épuré et indenté) et un template, modifiés, avec des couleurs de bordure et de fond pour que tu puisses te rendre compte. Ils seront simple à adapter:

/*CSS*/
body {
  background: black url(deco/fond.jpg)no-repeat;
  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: #000000;
    text-decoration: none;
}
a:hover {
    color: #000000;
}

#page {
    background-color:#FFF;
    border: solid 1px #CCC;
    border-top: none;
    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: 390px;
    background: transparent url(deco/baniere.jpg);
    border-bottom: none;
    margin:0;
    padding: 10px 0 0 0;
	color:black;
}

#mid {
    width: 900px;
	height:800px;
	border: 1px solid red;
    background: transparent url(deco/bg.png);
    margin:0;
    padding: 0;
}

#side {
    width: 180px;
    height: 790px;    
    float: left;
	border: 1px solid blue;
    margin:0;
    padding: 5px 10px 5px 10px;
}

#main {
    width: 676px;
    height: 786px;
    border: 1px solid blue;
    float: left;
    margin:0;
    padding: 7px;
    text-align: justify;
	overflow:scroll;
}

#break {
    clear: both;
}

#bot {
	background-color:#fff;
    border-bottom: 1px solid #fff;
    font-size: 75%;
    text-align: center;
    margin:0;
    color: #f8f8ef;
}

#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: url(deco/pge0.png) no-repeat;
    background-repeat: ;
    padding-left: 14px;
}
.zon {
    background: 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;
}

Et le 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>
			<h3>L'est un peu grand le fond de logo, non?</h3>
			<h2><?php echo $zite->get_data('site_subtitle') ?></h2>
		</div>
		<div id="mid">
			<div id="side">
				<?php echo $zite->content['menu'] ?>
				<?php echo $zite->get_content(1156957918, true) ?>
			</div>
			<div id="main">
				<?php echo $zite->content['main'] ?>
			</div>
			<div id="break"></div>
		</div>
	</div>	
		<div id="bot">
			Site motorisé par <a href="http://zite.prositif.com">ZITE CMS <?php echo ZITEVER ?></a>
		</div>
</body>
</html>

A+
Jp

ced101

Membre

Inscription : 29/12/2007

Messages : 48

Re : fixer la hauteur des pages

merci beaucoup

en fait j'ai enlevé ces deux lignes, les apostrophes c'était pour les mettre en commentaires, mais apparement en css c'est /* pour mettre une ligne en commentaire

je vais tester ton css et ton template pour voir ce que ca change

sinon une idée du pourquoi ca deconne sous IE ?

mapaje

Membre

Inscription : 09/06/2007

Messages : 81

Re : fixer la hauteur des pages

Re

Celui que je t'ai transmis ne déconne pas sous Ie; Il n'interprète pas tout à fait comme sous Fx mais bon ça passe. Perso, je ne me prends pas trop la tête avec. C'est un parti pris quitte à ce que le rendu ne corresponde pas tout à fait. Micromachin finira bien par se conformer aux standards....

A+
JP

ced101

Membre

Inscription : 29/12/2007

Messages : 48

Re : fixer la hauteur des pages

merci encore, je vais pouvoir commencer a remplir