Problème de SIDE à gauche

bmael · 28/12/2007 17:40:03

Bonjour à tous !
Je suis sur le site d'un ami. Je veux lui faire un menu à gauche. Mais problème classique : ça se chevauche sur IE...
J'ai regardé les templates de Kréasite, mais je ne vois pas la différence. Je sui pas très doué encore en CSS, mais j'essaye de comprendre.
Merci pour votre aide.

Oups, voila : http://www.librelec.fr/ZITE/

Dernière modification par bmael (28/12/2007 17:40:44)

mapaje · 28/12/2007 18:32:05

Bonsoir,

Effectivement ça se chevauche .... Mais pour voir, il faudrait que tu donnes le code CSS et Template dont tu te sers.
A priori avec ceux d'origine, après vérif, no problème. Reste à voir si tu as effectué des retouches dans ceux-ci

A plus

Jean Pierre

bmael · 28/12/2007 18:36:28

Voici le CSS :

html { overflow-x: hidden;}
body { background-image: url(deco/fond2.png); background-position: center top; background-repeat: repeat-y; margin: 0; padding: 0; text-align:center; z-index: 1;}
body, td { font-family: Arial, helvetica, sans-serif; font-size: 10pt;}
img {border: none;}
h1 {font-size: 150%; color: #336699;}
h2 {font-size: 100%; font-weight: bold; color: #777777;}
h3 {font-size: 120%; color: #336699;}
h4 {font-size: 110%;}
h5 {font-size: 80%; font-weight: normal; color: #777777;}
p {font-size: 100%; color: #777777; text-align: justify;}
a { color: #666; text-decoration: none;}
a:hover { color: #8BA9CD;}
#page { background-image: url();    background-position: center top;    background-repeat: repeat-y; border: solid 0px #CCC; border-top: none; width: 820px; margin: 7px auto 16px auto; border-left: 0px solid #777; border-right: 0px solid #777; padding: 0; text-align: left;}
/*TOP ANNULÉ*/
/*#top { width: 820px; height: 180px; background-image: url(deco/image2.png);    background-position: center top;    background-repeat: no-repeat; border-bottom: none; margin:0; padding: 10px 0 0 0; z-index: 4;}*/
#mid { width: 820px; height: 100%; border-bottom: 0px solid #CCC; background-image: url(); margin: 0; padding: 0; overflow: visible;}
#side { position: absolute;
z-index: 4;
background-color: #EEE;
width: 160px; float: left; margin-left: 0px; margin-top: -43px; padding: 45px 10px 5px 10px;}
#main { width: 620px; margin: 0px 0px 0px 190px; padding: 0px; text-align: left;}
#break { clear: both;}
#bot { width: 820px; border-bottom: 0px solid #777; background-position: center top;    background-repeat: no-repeat; font-size: 70%; text-align: center; margin: 0; padding: 0; color: #777777;}

.lkbot { color: #999999;}
.lkbot:hover { color: #cccccc;}
#top h1 { margin: 0; padding: 0 0 0 10px; color: #336699; font-size: 24px;}
#top h2 { margin: 0; padding: 4px 0 5px 10px; color: #999999; font-size: 80%;}
/* Menu */
.zul { font-size: 90%; 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 { padding-bottom: 5px; margin-left: 0px;}.zli2 { padding-bottom: 5px;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 :

<!DOCTYPE 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 style=""><img src="deco/image2.png"></div>
<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><br />
<div id="mid">
<div id="side"><div style=" text-align: center;">MENU</div>
<?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 id="bot" style="color: #999999;"><br /><br /><br /><a class="lkbot" href="http://zite.prositif.com">ZITE CMS</a> - Graphisme <a class="lkbot" href="http://www.eikona.fr/">EIKONA</a> - <a class="lkbot" href="index.php?z=login">login</a></div>
</div>
</body>
</html>

J'ai beaucoup d'émotions pour tous les développeurs de sites web dans le monde. Vivent les standards !

mapaje · 29/12/2007 00:47:33

Bonsoir

En passant ton code ne passait pas sur Firefox non plus.
Bref dans ton side tu as rajouté un position: absolute sans supprimer le float: left; Pas bon dans ce style de boite et en général: dualité! donc tu remets ta ligne de code en float:left; et tu baisse ton margin-top à ton gout; ça passe, je l'ai testé sur les deux navigateurs avec un margin-top à -33.
Autre chose en forme de conseil, pense à travailler sous Firefox qui est conforme aux normes (sans zapper IE) et tu t'épargneras quelques déconvenues largement compensées par les adaptations à faire sous IE ( en plus sur la toile, tu trouveras souvent les hacks nécessaires d'adaptation)
Bonne continuation dans ton site qui semble prometteur
Jean Pierre

bmael · 29/12/2007 17:42:54

Ah exacte ! Bon je découvre le CSS et c'est pas encore très clair. Il
Je suis sur mac. Sur Safari et Firefox mac, ça fonctionnait bien (même sur ur IE mac mais on s'en fout un peu).
Je n'avais pas pensé à vérifier sur Firefox PC.

Forum ZitePLUS

#1 28/12/2007 17:40:03

Problème de SIDE à gauche

#2 28/12/2007 18:32:05

Re : Problème de SIDE à gauche

#3 28/12/2007 18:36:28

Re : Problème de SIDE à gauche

#4 29/12/2007 00:47:33

Re : Problème de SIDE à gauche

#5 29/12/2007 17:42:54

Re : Problème de SIDE à gauche

Pied de page des forums