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>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pierre Goiffon
Le #23932881
Le 03/11/2011 10:10, 1 connu a écrit :
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 ?



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 ?
1 connu
Le #23934351
"Pierre Goiffon"
Le 03/11/2011 10:10, 1 connu a écrit :
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 ?



Pour poster votre exemple je vous recommande d'utiliser des sites comme http://jsfiddle.net



Je vais regarder ...

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 ?



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.
1 connu
Le #23934501
J'ai mis mon exemple dans jsfiddle http://jsfiddle.net/totoheros/puBq5/3/
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"

"Pierre Goiffon"
Le 03/11/2011 10:10, 1 connu a écrit :
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 ?



Pour poster votre exemple je vous recommande d'utiliser des sites comme http://jsfiddle.net



Je vais regarder ...

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 ?



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.

Pierre Goiffon
Le #23934921
Le 04/11/2011 09:51, 1 connu a écrit :
J'ai mis mon exemple dans jsfiddle http://jsfiddle.net/totoheros/puBq5/3/
et j'ai reussi à le faire marcher aussi sur IE7 !



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 ??

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 ?



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.
1 connu
Le #23942681
"Pierre Goiffon"
Le 04/11/2011 09:51, 1 connu a écrit :
J'ai mis mon exemple dans jsfiddle http://jsfiddle.net/totoheros/puBq5/3/
et j'ai reussi à le faire marcher aussi sur IE7 !



Quelle solution avez-vous trouvé pour IE7 ?



La derniere version a base de #top, #middle
90 % pour le centre marche aussi sur 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 ??

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 ?



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.



Merci, mais je vais laisser tomber. J'ai pas les compétences pour pouvoir appliquer ces ruses de sioux ...
Je reste avec des %
Publicité
Poster une réponse
Anonyme