28172 sujets

CSS et mise en forme, CSS3

Problème CSS et affichage IE, FireFox, Chrome ...

Bonjour,

Je travaille à la mise en place d'un petit site web; l'affichage est ok sous IE (oui, bon je sais, c'est pas une référence ... Smiley cligne ), mais sous FireFox, Chrome et autres ... C'est la cata !

Je vous livre ci-dessous le code CSS, en vous remerciant par avance, pour votre aide ...


/* CSS Document */

/* mise en forme de la présentation générale */

#leftbar {
	float: left;
	width: 200px;
	height: 600px;
	margin-right: 10px;
	background-image:url(Images/bandeau.gif);
	background-repeat: no-repeat ; 
}

#rightbar {
	float: right;
	width: 200px;
	height : 600px;
	margin-left: 10px;
	background: lightblue;
}

#body {
	overflow: hidden;
	background: khaki;
	height : 600px;
	/*vertical-align : middle;*/
	font-family: verdana, arial, sans-serif;
	font:small;
	color: #000;
}

#menubar {
	float: left;
	width: 100%;
	height : 40px;
	margin-bottom: 10px;
	background: lightblue;
}


Et le code HTML (expurgé ) :


<!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" />
<link rel="stylesheet" type="text/css" media="screen" title="style" href="general.css" />
<link rel="stylesheet" type="text/css" media="screen" title="style" href="menu_h.css" />
<script type="text/javascript" src="menu_h.js"></script>
<script type="text/javascript" src="viewmenu.js"></script>
<title>Accueil</title>
</head>



<body>
<div id="menubar">
	<?php if($loginOK) {
		$menu = $_SESSION['menu'];
  	 include $menu; 
	}
	?>
</div>

<div id="leftbar"></div>
<div id="rightbar"></div>


<div id="body">

<br />


</div>


  	
</body>

</html>



Merci pour votre aide !
Salut pols77,

a écrit :
C'est la cata !
Tu pourrais probablement être un peu plus précis dans ta description du problème Smiley cligne

Pour ce qui est de ton code, le PHP n'a rien à voir avec l'affichage de ta page, il est donc inutile de le donner ici. Plutôt que "include $menu;", c'est le code HTML de ce menu qui est intéressant.

La meilleure solution pour obtenir de l'aide de manière rapide et efficace reste quand même de mettre ta page en ligne et de nous donner l'url. De cette manière on a tout sous la main en un clic.
Oui, effectivement ... Le nez dans le guidon, tout semble si évident Smiley confused ...

Je ne voulais pas non plus surcharger le post avec trop de code.

Alors donc :

https://support.lse.fr:4443/
(attention problème de certificat "révoqué" sous opéra; il me faudra voir ce problème dès demain !)

EDIT : Grumph ! le lien ne fonctionne pas ... Mais il est ok dans un navigateur !

L'affichage sous IE est exactement tel que je le souhaite.

Sous FireFox, Chrome et autre, la div #body ne s'affiche pas ...

Merci encore ...

EDIT : Bon, il semble que 
<div id="body">
passe sous IE, et pas dans les autres navigateurs. Mais, si je renomme "body" par "centerbar", dans le html et le css, l'affichage semble correct sous firefox, mas plus sous IE ...
Modifié par pols77 (01 Jun 2009 - 10:21)
pols77 a écrit :
(attention problème de certificat "révoqué" sous opéra; il me faudra voir ce problème dès demain !)

Idem pour Firefox 3.

Une page de test hébergée sur un serveur en HTTP (et pas HTTPS), ce serait plus simple. Il doit y avoir moyen de placer une copie de la page sur un serveur de test?

pols77 a écrit :
L'affichage sous IE est exactement tel que je le souhaite.

Pour toutes les versions (6 à 8)?

pols77 a écrit :
Bon, il semble que 
<div id="body">
passe sous IE, et pas dans les autres navigateurs. Mais, si je renomme "body" par "centerbar", dans le html et le css, l'affichage semble correct sous firefox, mas plus sous IE ...

Ça me semble extrêmement étrange. Tu peux tout à fait utiliser <div id="body"> si tu le souhaites, et renommer l'identifiant côté HTML et CSS ne devrait pas changer quoi que ce soit.
Bonjour Florent, et merci pour ton aide.

Effecitvement, je n'avais pas les yeux en face des trous, ce matin ! L'affichage est inchangé sous firefox, que la balise soit "body" ou autre ... (je m'étais trompé de page ce matin)

En revanche, si je commente la propriété "overflow: hidden;", l'affichage est déjà mieux sous firefox; mais moins bien sous IE ...

L'affichage est bon sous IE des versions 6 à 8 si je ne touche à rien .

Le but de mon css, est d'avoir un affichage fluide; 2 colonnes fixes, et un centre qui s'adapte à la résolution de l'écran...

Quant à copier le site sur un serveur de test, je ne pense pas pouvoir le faire avant demain.
Modifié par pols77 (01 Jun 2009 - 13:00)
Florent V. a écrit :
Idem pour Firefox 3.
Idem partout.

pols77 a écrit :
L'affichage est bon sous IE des versions 6 à 8 si je ne touche à rien .
Sous IE8, chez moi, j'ai le même affichage que sous firefox, avec en plus ton formulaire qui sort de la div#bodybar (se place au dessous), contrairement à IE6/7.

Par rapport à ton problème, tu peux essayer cette structure HTML (les CSS que je te donne ne sont que les modifs que tu dois apporter, le reste n'a pas à changer, a priori) :
<div id="menubar" style="float:none">
</div>

<div id="main" style="position:relative">

    <div id="leftbar" style="float:none; position:absolute; left:0; top:0;">
    </div>

    <div id="bodybar" style="margin: 0 210px;">
    </div>

    <div id="rightbar" style="float:none; position:absolute; right:0; top:0;">
    </div>

</div>

Modifié par marcv (01 Jun 2009 - 13:44)
Note en passant: IE8 peut adopter le même rendu qu'IE7 pour un site qu'il considère comme un site «local» (fichiers locaux ou nom de domaine propre à un réseau de type intranet). Si le site est destiné à un intranet, on aura intérêt à utiliser un en-tête HTTP ou une balise META X-UA-Compatible pour forcer le mode de rendu «IE8». Pour un site destiné à un nom de domaine web, ça n'est pas indispensable, et on pourra se contenter de configurer IE8 pour ne pas utiliser le mode de compatibilité pour les sites «locaux».
Bonjour,

Merci à tous pour vos infos et vos pistes; Ma réponse est tardives, mais difficile de jongler avec tous les impératifs !

Pour MarcV : En modifiant mon css avec tes infos, l'affichage des div est parfait, sous ie8, opéra, chrome et firefox ... Je n'ai plus d'ie 6/7 sous la main pour tester ... En revanche, mon menu déroulant se glisse sous les div (leftbar, body et rightbar). Ce qui est fort peu pratique. Je travaille donc à un nouveau css ... à tâtons ! Smiley biggol l'idée : des leftbar et rightbar fixes; un body pouvant scroller sous le menu fixe, en haut ...
voilà voilà ! Smiley ravi

Pour Florent V : Le contenu de ce site sera essentiellement extranet ...

Quant à SSL et ses certificats, pour l'instant, j'ai tout basculé en http classique ... Vous pouvez donc voir ce que ça donne pour l'instant sur http://support.lse.fr

Pour info, le css actuel : 
/* CSS Document */

/* mise en forme de la présentation générale */

#main {
	position:relative;
}

#leftbar {
	float: left;
	width: 200px;
	height: 600px;
	margin-right: 10px;
	background-image:url(Images/bandeau.gif);
	background-repeat: no-repeat ; 
}

#rightbar {
	float: right;
	width: 200px;
	height : 600px;
	margin-left: 10px;
	background: lightblue;
}

#bodybar {
	overflow: hidden;
	background: khaki;
	height : 600px;
	margin: 0 210px;
	font-family: verdana, arial, sans-serif;
	font:small;
	color: #000;
}

#menubar {
	float: left;
	width: 100%;
	height : 40px;
	margin-bottom: 10px;
	background: lightblue;
}


Merci Encore ...
Modifié par pols77 (08 Jun 2009 - 19:13)
Salut,

Vite fait

#menubar {
background:lightblue none repeat scroll 0 0;
height:40px;
margin-bottom:10px;
position:relative;
width:100%;
z-index:100;
}

Modifié par ghost (08 Jun 2009 - 19:38)
Merci Ghost, pour ton aide vite fait (bien fait ! ) ...

Il me manquait la propriété z-index ... Qui a règlé mon problème de positionnement du menu.

J'ai donc, pour l'instant, le squelette que je souhaitais pour le site. Il fonctionne désormais sous ie8, chrome, opéra, et firefox. Je n'ai plus d'ie6/7 pour tester, et je n'ai pas encore installé safari (ne serait-ce que par pure curiosité).

Cela dit, j'aimerais vos avis, sur le choix de la présentation de ce (très modeste) site ...

J'ai opté pour des colonnes gauches et droites fixes (celle de droite contiendra quelques infos de base, et parfois quelques boutons). Le contenu "utile", lui sera affiché dans la colonne centrale, scrollable. Le menu, quant à lui, est fixe en haut de l'écrann, de telle manière qu'il soit toujours visible ....

Qu'en pensez-vous ? Cela pose-t'il, à vos yeux (ou selon votre expérience) des problèmes auxquels je n'ai pas pensé ?

Merci encore, pour votre aide et vos retours .
GRUMPH !

Bon, alors l'affichage passe partout sauf sous ie6 (ie7 pas encore testé), ou le div est affiché sous le div main ...

Argh ....

Voici le code css ... et le lien vers le site http://support.lse.fr ...


#menubar {
background:green none repeat scroll 0 0;
height:22px;
margin-bottom:10px;
position:fixed;
top: 0px;
left: 0px;
width:100%;
z-index:100;
}

#main {
	position:relative;
}

#leftbar {
	position: fixed;
	top: 50px;
	left: 0px;
	width: 200px;
	height: 700px;
	margin-right: 10px;
	background-image:url(Images/bandeau.gif);
	background-repeat: no-repeat ; 
}

#rightbar {
	position: fixed;
	right: 0px;
	top: 50px;
	width: 200px;
	height : 700px;
	margin-left: 10px;
	/*background: lightblue;*/
}

#body {
	position: relative;
	background: khaki;
	top: 50px;
	height : 100%;
	margin: 0 210px;
	/*vertical-align : middle;*/
	font-family: verdana, arial, sans-serif;
	font:small;
	color: #000;
}

#nom {
	position: fixed;
	right: 0px;
	top: 0px;
	width: auto;
	height : 22px;
	margin-right: 10px;
	font-weight:bold;
	text-align:right;
	z-index:100;
}

#date {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 100%;
	height : 20px;
	margin-left: 10px;
	font-weight:bold;
	text-align:center;
}

#heure {
	position: absolute;
	right: 0px;
	top: 20px;
	width: 100%;
	height : 20px;
	margin-left: 10px;
	font-weight:bold;
	text-align:center;
}

#contentRbar {
	position: absolute;
	right: 0px;
	top: 40px;
	width: 100%;
	height : 100%;
	margin-left: 10px;
	font-weight:bold;
	text-align:center;
}


Merci pour vos pistes, et votre patience ! Smiley biggol
Sujet clos
Aller à