Bonjour, celà fait plusieurs jours que je m'arrache les cheveux sur ce problème.
le source php:
le css:
Ce ne sont que des parties de code, avec des restes de test...
Donc, le problème: je tiens à adapter le design du site à la taille du navigateur en fixant quelques propriétés (hauteur des div #header #footer #login et #menu, largeur des div #pannel et #info). Pour celà, je fixe les div en positions absolue (de deux à quatre propriétés). Le soucis vient de certaines div (#header, #footer mais surtout #main) qui, bien qu'affichées correctement (ou du moins dans l'esprit de la conception que je me fais de leur affichage) par FireFox, prennent les dimensions de leur contenu sous Internet Explorer.
Ainsi, les div #header et #footer sont restreintes à la taille des mots Header et Footer (alors que sur FireFox, elles s'étendent sur toute la largeur de la page) et la div #main est soit restreinte à la taille d'un mot (pour certaines div) soit élargie en occultant la div #info (lorsque la #div1 contenant un tableau de taille fixe est affichée). Je pensais que fixer les coordonnées des div et ajouter un overflow:auto permettrait d'avoir le design voulu, ça l'est sous FireFox, mais c'est loin de l'être sous Internet Explorer...
Si quelqu'un sait d'où peut venir ce problème ou quelle suggestion de design pourrait règler ce problème (sachant que j'ai déjà testé avec des flottants qui ne m'ont pas satisfait car posant des problèmes de marges).
Edit: pour les tableaux, j'aurai du faire des cellules, mais bon c'était au départ juste pour tester avec un contenu de taille fixe et c'est resté tel quel...
Modifié par asmo94 (09 Jul 2006 - 17:57)
le source php:
<?php //du code php ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Alpha test</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script type="text/javascript">
//<!--
window.onload = default_show;
function default_show(){
show("<?php if($user_login) echo 'div5'; else echo 'div1';?>");
}
function show(id){
var x = document.getElementById(id);
for(var i = 1; i <= 5; i++){
if(document.getElementById("div"+i)) {document.getElementById("div"+i).style.display="none";}
}
if(x) {x.style.display="block";}
}
//-->
</script>
<div id="frameset">
<div id="header">Header</div>
<div id="pannel">
<div id="login">
<?php //du code php ?>
</div>
<div id="menu">
<?php //du code php ?>
</div>
<div id="misc">Misc</div>
</div>
<div id="info">
<div height="400" width="160">Info
</div>
</div>
<div id="main">
<div id="div1">
<table width="800" height="600">Index
</table>
</div>
<div id="div2">
<table height="400" width="400">Register
</table>
</div>
<div id="div3">Background</div>
<div id="div4">FAQ</div>
<div id="div5">Index du jeu</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
le css:
* {
margin:0px;
padding:0px;
border:0px;
}
body {
background-color:black;
font-family:arial, sans-serif;
color:silver;
}
#frameset {
display:block;
color:silver;
overflow:auto;
}
#header {
display:block;
margin:5px;
background-color:#333333;
width:auto;
height:120px;
position:absolute;
right:0px;
top:0px;
left:0px;
}
#pannel {
display:inline;
margin:0px 0px 0px 5px;
color:silver;
width:160px;
position:absolute;
top:130px;
left:0px;
bottom:70px;
/*float:left;*/
}
#login {
background-color:#333333;
height:100px;
width:160px;
margin:0px;
padding:0px;
}
#menu {
margin:5px 0px;
padding:15px;
background-color:#333333;
width:130px;
height:250px;
}
#misc {
background-color:#333333;
margin:0px;
padding:0px;
}
#main {
border: 10px solid #FFFFFF;
display:block;
margin:0px;
padding:0px;
background-color:#333333;
overflow:auto;
position:absolute;
width:auto;
height:auto;
top:130px;
left:170px;
right:170px;
bottom:70px;
}
#div1 {
display:inline;
}
#div2 {
display:none;
}
#manage {
display:block;
}
#info {
display:inline;
margin:0px 5px 0px 0px;
padding:0px;
background-color:#333333;
width:160px;
position:absolute;
top:130px;
right:0px;
bottom:70px;
/*float:right;*/
}
#footer {
display:block;
margin:5px;
background-color:#333333;
height:60px;
position:absolute;
left:0px;
right:0px;
bottom:0px;
/*clear:both;*/
}
Ce ne sont que des parties de code, avec des restes de test...
Donc, le problème: je tiens à adapter le design du site à la taille du navigateur en fixant quelques propriétés (hauteur des div #header #footer #login et #menu, largeur des div #pannel et #info). Pour celà, je fixe les div en positions absolue (de deux à quatre propriétés). Le soucis vient de certaines div (#header, #footer mais surtout #main) qui, bien qu'affichées correctement (ou du moins dans l'esprit de la conception que je me fais de leur affichage) par FireFox, prennent les dimensions de leur contenu sous Internet Explorer.
Ainsi, les div #header et #footer sont restreintes à la taille des mots Header et Footer (alors que sur FireFox, elles s'étendent sur toute la largeur de la page) et la div #main est soit restreinte à la taille d'un mot (pour certaines div) soit élargie en occultant la div #info (lorsque la #div1 contenant un tableau de taille fixe est affichée). Je pensais que fixer les coordonnées des div et ajouter un overflow:auto permettrait d'avoir le design voulu, ça l'est sous FireFox, mais c'est loin de l'être sous Internet Explorer...
Si quelqu'un sait d'où peut venir ce problème ou quelle suggestion de design pourrait règler ce problème (sachant que j'ai déjà testé avec des flottants qui ne m'ont pas satisfait car posant des problèmes de marges).
Edit: pour les tableaux, j'aurai du faire des cellules, mais bon c'était au départ juste pour tester avec un contenu de taille fixe et c'est resté tel quel...
Modifié par asmo94 (09 Jul 2006 - 17:57)
