Bonjour.
je suis en train de reprendre du code d'une appli existante dans laquel on a un bug dû à IE6 et les petits écrans.
Dans ma page j'ai :
1 - header
2 - un contenu
3 - un footer
Dans mon contenu j'ai :
1 - menu a gauche
2 - contenu central
3 - box a droite (optionnel sur les pages)
Mon menu à gauche (et ma boxe de droite) a un positionnement float.
Donc pour le menu ca donne float: left;
Mon contenu central lui a un margin-left qui vaut la largeur du menu de gauche. Et une largeur de 100%
Tout va bien. Seulement si j'ai un tableau ou des données qui demande une largeur minimum et que je reduis la largeur de la fenêtre mon contenu va descendre sous le menu (tout en gardant le margin-left).
Je sais que c'est pas bien clair tout ca alors du coup j'ai fait vite fait du code HTML + CSS pour montrer ca.
il faut avoir le courage de copier le code suivant, de le coller dans un fichier HTML local et de l'executer avec IE6 en changeant la taille de la fentre tout en observant la partie "contenu central" de la page
J'ai essayé tout ce qui tourne autour des hack min-width... Sans succès. Là je suis en train de pleurer
je suis en train de reprendre du code d'une appli existante dans laquel on a un bug dû à IE6 et les petits écrans.
Dans ma page j'ai :
1 - header
2 - un contenu
3 - un footer
Dans mon contenu j'ai :
1 - menu a gauche
2 - contenu central
3 - box a droite (optionnel sur les pages)
Mon menu à gauche (et ma boxe de droite) a un positionnement float.
Donc pour le menu ca donne float: left;
Mon contenu central lui a un margin-left qui vaut la largeur du menu de gauche. Et une largeur de 100%
Tout va bien. Seulement si j'ai un tableau ou des données qui demande une largeur minimum et que je reduis la largeur de la fenêtre mon contenu va descendre sous le menu (tout en gardant le margin-left).
Je sais que c'est pas bien clair tout ca alors du coup j'ai fait vite fait du code HTML + CSS pour montrer ca.
il faut avoir le courage de copier le code suivant, de le coller dans un fichier HTML local et de l'executer avec IE6 en changeant la taille de la fentre tout en observant la partie "contenu central" de la page
<html>
<head>
<style>
#header{
width: 100%;
height: 50px;
border: 1px solid green;
}
#left{
float: left;
width: 250px;
border: 1px solid yellow;
}
#center{
width: 100%;
margin-left: 250px;
border: 1px solid blue;
}
#right{
width: 250px
border: 1px solid red;
}
#footer{
width: 100%;
height: 40px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="header">Ici c'est le header</div>
<div id="middle">
<div id="left">
<h3>menu de gauche</h3>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
<li>menu 9</li>
</ul>
</div>
<div id="center">
<h1>ici on a le contenu</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rhoncus pharetra nulla. Integer nisl neque, congue eu, sodales id, lobortis at, tellus. Vestibulum ac sem vel mi sodales accumsan. Cras rhoncus turpis a libero. Maecenas faucibus. Vestibulum luctus consectetuer justo. Proin vestibulum consectetuer metus. Nullam placerat ipsum nec nisl. Suspendisse vitae leo ac tortor suscipit feugiat. Nulla dolor. Nullam aliquam, leo id auctor porta, ligula elit vehicula nunc, vel accumsan ante quam quis metus. Sed et dui quis est suscipit ullamcorper. Donec dictum enim. Phasellus et nibh non enim elementum cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rhoncus pharetra nulla. Integer nisl neque, congue eu, sodales id, lobortis at, tellus. Vestibulum ac sem vel mi sodales accumsan. Cras rhoncus turpis a libero. Maecenas faucibus. Vestibulum luctus consectetuer justo. Proin vestibulum consectetuer metus. Nullam placerat ipsum nec nisl. Suspendisse vitae leo ac tortor suscipit feugiat. Nulla dolor. Nullam aliquam, leo id auctor porta, ligula elit vehicula nunc, vel accumsan ante quam quis metus. Sed et dui quis est suscipit ullamcorper. Donec dictum enim. Phasellus et nibh non enim elementum cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rhoncus pharetra nulla. Integer nisl neque, congue eu, sodales id, lobortis at, tellus. Vestibulum ac sem vel mi sodales accumsan. Cras rhoncus turpis a libero. Maecenas faucibus. Vestibulum luctus consectetuer justo. Proin vestibulum consectetuer metus. Nullam placerat ipsum nec nisl. Suspendisse vitae leo ac tortor suscipit feugiat. Nulla dolor. Nullam aliquam, leo id auctor porta, ligula elit vehicula nunc, vel accumsan ante quam quis metus. Sed et dui quis est suscipit ullamcorper. Donec dictum enim. Phasellus et nibh non enim elementum cursus.</p>
<table>
<tr>
<th>premierement</th>
<th>deuxiemement</th>
<th>troisiemement</th>
<th>quatriemement</th>
<th>cinquiemement</th>
</tr>
<tr>
<td>1 - Lorem</td>
<td>2 - Ipsum</td>
<td>3 - Dolor</td>
<td>4 - Sit</td>
<td>5 - Amet</td>
</tr>
</table>
</div>
<div id="rigth"><!-- on peut avoir une box a doite --></div>
</div>
<div id="footer"></div>
</body>
</html>J'ai essayé tout ce qui tourne autour des hack min-width... Sans succès. Là je suis en train de pleurer
