Bonjour à tous,
j'ai effectué une recherche sur les termes float, décalage et tableau mais rien ne semble répondre à ma question.
Tout d'abord, le problème survient uniquement sur IE6. FF, IE7, Opera et Netscape sont très gentils, eux.
Le stut survient quand je crée un template avec un menu flottant à gauche et un tableau dans la zone de contenu de droite. Si le tableau a une largeur définie à 100%, il se placera systématiquement sous le menu flottant.
Voici le code d'une page de test que j'ai faite pour exemple :
Je suppose que c'est un problème de "marge" en quelque sorte, mais je ne vois pas vraiment la subtilité pour y remédier.
Chose importante : j'essaie de trouver une solution du côté du template car je ne peux pas modifier le contenu (et donc je ne peux pas toucher à WIDTH: 100% en fait...). Les seules modifications que je puisse faire sont au niveau des CSS et de la structure du template.
D'avance, merci pour votre aide.
j'ai effectué une recherche sur les termes float, décalage et tableau mais rien ne semble répondre à ma question.
Tout d'abord, le problème survient uniquement sur IE6. FF, IE7, Opera et Netscape sont très gentils, eux.
Le stut survient quand je crée un template avec un menu flottant à gauche et un tableau dans la zone de contenu de droite. Si le tableau a une largeur définie à 100%, il se placera systématiquement sous le menu flottant.
Voici le code d'une page de test que j'ai faite pour exemple :
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #151515;
}
body #container {
background-color: #10100f;
}
#container #top {
background-color: #92c800;
padding: 35px;
}
#top h1 {
font: 28pt Georgia, Serif;
color: #fff;
}
#container #left {
float: left;
width: 250px;
border-right: 1px solid #030303;
}
#left a {
display: block;
padding: 7px;
font: 10pt Georgia, Serif;
color: #fff;
text-decoration: none;
}
#container #content {
font: 10pt Georgia, Serif;
color: #fff;
padding-left: 310px;
}
#container #footer {
clear: both;
background: #151515 none;
text-align: center;
padding-top: 15px;
font: 10pt Georgia, Serif;
color: #fff;
}
#footer a {
font: italic 10pt Georgia, Serif;
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Mon beau site de test</h1>
</div>
<div id="left">
<a href="#">Lien du site 1</a>
<a href="#">Lien du site 2</a>
<a href="#">Lien du site 3</a>
<a href="#">Lien du site 4</a>
<a href="#">Lien du site 5</a>
<a href="#">Lien du site 6</a>
<a href="#">Lien du site 7</a>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean arcu enim, ullamcorper a, interdum sit amet, lacinia eu, diam. Vivamus leo. Fusce in massa non leo luctus fermentum. In varius egestas tortor. Fusce facilisis metus sed mi. Nullam et massa a nisl dignissim dictum. Curabitur luctus, tellus nec adipiscing fringilla, augue pede hendrerit est, quis eleifend sem purus et enim. Nam sapien pede, ullamcorper nec, tristique id, blandit non, nisi. Vivamus tortor urna, pharetra sit amet, suscipit sit amet, ornare nec, justo. Sed posuere tristique mi. Phasellus euismod, sapien ac vulputate cursus, lacus diam gravida nisl, ut bibendum odio lectus sit amet justo. Phasellus iaculis ultricies lectus. Nulla quis erat adipiscing purus consequat pretium. Morbi et ante ut risus vulputate luctus. Donec in mi. Vivamus vulputate sapien sit amet felis. Curabitur porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam egestas massa non enim. Sed orci.
<table cellpadding="0" cellspacing="0" style="WIDTH: 100%;">
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
</table>
</div>
<div id="footer">
<a href="#">Lien 1</a> - <a href="#">Lien 2</a> - <a href="#">Lien 3</a>
</div>
</div>
</body>
</html>
Je suppose que c'est un problème de "marge" en quelque sorte, mais je ne vois pas vraiment la subtilité pour y remédier.
Chose importante : j'essaie de trouver une solution du côté du template car je ne peux pas modifier le contenu (et donc je ne peux pas toucher à WIDTH: 100% en fait...). Les seules modifications que je puisse faire sont au niveau des CSS et de la structure du template.
D'avance, merci pour votre aide.
