BorderLayout avec css sur IE7
Le
1 connu
Bonjour,
J'essaie de faire une mise en page (Nord,Centre,Sud etc), Bref un BorderLayout pour les javanais.
J'utilise pour cela une css trouvée sur internet.
Ca marche bien sur tous les browsers y compris avec IE 8 mais sur IE7 la boite Nord et Sud sont décaller vers l'est de 50 %
Connaisez vous un parade à ce probleme ?
D'avance merci
L e code html/css :
<!doctype html>
<html>
<head>
<title>Test BorderLayout</title>
<style type="text/css">
body {margin:0; padding:0; height0%; width:100%;
overflow-y: hidden ; /* fonction microsoft supprimant les ascenseurs sous IE */
overflow-x: hidden ; /* fonction microsoft supprimant les ascenseurs sous IE */
background-color:transparent; /*encart transparent*/
text-align:center ;
}
div { border:1px solid; position:fixed; }
#top { top:0; width:100%; height:5% }
#bottom { bottom:0; width:100%; height:5% }
#middle { height:90%; width:90%; top:5%; left:5%; bottom:5%; right:5px; overflow: auto; }
#left { top:5%; width:5%; height:90%;right:0px; }
#right { top:5%; left:0px; height:90%; width:5%}
</style>
</head>
<body>
<div class="container">
<div id="top">
haut <br />
haut<br />
</div>
<div id="left">
left<br />
left<br />
</div>
<div id="middle">
centre <br />
centre <br />
centre <br />
centre <br />
centre <br />
ascenceur si trop long
</div>
<div id="right">
right<br />
right<br />
</div>
<div id="bottom">
bottom<br />
bottom<br />
</div
</div>
</body>
</html>
J'essaie de faire une mise en page (Nord,Centre,Sud etc), Bref un BorderLayout pour les javanais.
J'utilise pour cela une css trouvée sur internet.
Ca marche bien sur tous les browsers y compris avec IE 8 mais sur IE7 la boite Nord et Sud sont décaller vers l'est de 50 %
Connaisez vous un parade à ce probleme ?
D'avance merci
L e code html/css :
<!doctype html>
<html>
<head>
<title>Test BorderLayout</title>
<style type="text/css">
body {margin:0; padding:0; height0%; width:100%;
overflow-y: hidden ; /* fonction microsoft supprimant les ascenseurs sous IE */
overflow-x: hidden ; /* fonction microsoft supprimant les ascenseurs sous IE */
background-color:transparent; /*encart transparent*/
text-align:center ;
}
div { border:1px solid; position:fixed; }
#top { top:0; width:100%; height:5% }
#bottom { bottom:0; width:100%; height:5% }
#middle { height:90%; width:90%; top:5%; left:5%; bottom:5%; right:5px; overflow: auto; }
#left { top:5%; width:5%; height:90%;right:0px; }
#right { top:5%; left:0px; height:90%; width:5%}
</style>
</head>
<body>
<div class="container">
<div id="top">
haut <br />
haut<br />
</div>
<div id="left">
left<br />
left<br />
</div>
<div id="middle">
centre <br />
centre <br />
centre <br />
centre <br />
centre <br />
ascenceur si trop long
</div>
<div id="right">
right<br />
right<br />
</div>
<div id="bottom">
bottom<br />
bottom<br />
</div
</div>
</body>
</html>
Pour poster votre exemple je vous recommande d'utiliser des sites comme
http://jsfiddle.net
Sinon sur Alsacréations il y a un gabarit qui correspond assez à ce que
vous voulez faire je crois ; c'est le dernier sur cette page :
http://www.alsacreations.com/static/gabarits/liste.html. Je suppose
qu'il fonctionnera de partout ?
Je vais regarder ...
Merci mais je n'ai pas été assez precis.
J'aimerais reproduire un vrai BorderLayout : seul le centre scolle pour s'adapter à differents contenus mais le reste (Nord,
Sud,Est,Ouest) doit rester fixe.
C'est pas le cas des ces exemples.
et j'ai reussi à le faire marcher aussi sur IE7 !
Question subsiliaire :
Le centre prend 90 %, chaque autre partie Nord Sud est à 5%.
Est il possible de fixer la taille de ces parties en pixel et que le centre s'adapte en prenant tout l'espace restant ?
Merci
"1 connu"
Quelle solution avez-vous trouvé pour IE7 ?
Au passage, je vois que vous avez un doctype HTML5, je ne suis pas sûr
que IE ne bascule pas en mode quirks avec un tel doctype ??
En conservant ce que vous avez mis en place, ça n'est pas possible sans
ruse de sioux : css ne prévoit pas de définir une dimension (sur votre
boite #middle) à 100% moins quelques px. Je parlais de ruse, car
certains moyens le permettent... Sur IE < 8 vous avez expression
(http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx).
Vous pouvez également utiliser JS... Ou je crois que LESS
(http://lesscss.org/) répond à ce genre de besoins.
La derniere version a base de #top, #middle
90 % pour le centre marche aussi sur IE7
Merci, mais je vais laisser tomber. J'ai pas les compétences pour pouvoir appliquer ces ruses de sioux ...
Je reste avec des %