Bonjour,
voici mon problème : j'ai une page mise en page (sous spip, mais c'est sans importance) en CSS, jolie et tout.
Mais la partie principale doit de préférence être de taille à entrer dans un écran 800x600. Or, certaines pages dépassent cette taille en largeur. C'est pas grave, la barre de scroll est là pour ça ; mais, pour cet *** d'IE, ça me fait un truc bizarre avec le contenu qui se met en dessous du menu.
Si quelqu'un pouvait m'aider...
Mon code :
HTML :
et CSS :
voici mon problème : j'ai une page mise en page (sous spip, mais c'est sans importance) en CSS, jolie et tout.
Mais la partie principale doit de préférence être de taille à entrer dans un écran 800x600. Or, certaines pages dépassent cette taille en largeur. C'est pas grave, la barre de scroll est là pour ça ; mais, pour cet *** d'IE, ça me fait un truc bizarre avec le contenu qui se met en dessous du menu.
Si quelqu'un pouvait m'aider...
Mon code :
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css" type="text/css">
<title>TITRE</title>
</head>
<body>
<!-- begin PAGE -->
<div class="page">
<!-- begin PAGE.TOP -->...<!-- end PAGE.TOP -->
<!-- begin PAGE.MIDDLE -->
<div class="middle">
<!-- begin PAGE.MIDDLE.MENU -->
<div class="menu">
<dl>
<dt id="accueil"><a href="article.php3?id_article=9">Home</a></dt>
<dt>lalz</dt>
<dd>
<ul>
<li><a href="article.php3?id_article=10">boum</a></li>
<li><a href="article.php3?id_article=11">Internet</a></li>
</ul>
</dd>
</dl>
</div>
<!-- end PAGE.MIDDLE.MENU -->
<!-- begin PAGE.MIDDLE.MAIN -->
<div class="main">
<div class="content">
<p class="spip" dir="ltr"><div style="text-align: center;"><div class="spip_images" style="margin-left: auto; margin-right: auto;"><img src="IMG/jpg/clients-titre01.jpg" border="0" width="500" height="40" alt=" " title="" /></div></div> <br /> <br /></p><table class="spip" summary="Tableau de données"> <tr class="row_odd"><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/jpg/AREVA_Logo.jpg" border="0" width="100" height="68" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/castorama.gif" border="0" width="185" height="29" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/deutsche.gif" border="0" width="137" height="45" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/jpg/gefanuc.jpg" border="0" width="136" height="66" alt=" " title="" /></p></div></div>
</td></tr><tr class="row_even"><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/jpg/laposte.jpg" border="0" width="131" height="69" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/logo_atos.gif" border="0" width="136" height="67" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/orsay.gif" border="0" width="254" height="57" alt=" " title="" /></p></div></div>
</td><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/stratagene.gif" border="0" width="132" height="31" alt=" " title="" /></p></div></div>
</td></tr><tr class="row_odd"><td> <div style="text-align: center;"><div class="spip_documents" style="margin-left: auto; margin-right: auto;"></p>
<p class="spip_vignette"><img src="IMG/gif/think3_logo_text_r.gif" border="0" width="135" height="31" alt=" " title="" /></p></div></div>
</td></tr></table></p></div>
</div>
<!-- end PAGE.MIDDLE.MAIN -->
</div>
<!-- end PAGE.MIDDLE -->
<!-- begin PAGE.BOTTOM -->
<div class="bottom">
Copyright © <span class="orange">Machin</span>. Tutti i Diritti Riservati.
</div>
<!-- end PAGE.BOTTOM -->
</div>
<!-- end PAGE -->
</body>
</html>
et CSS :
body
{
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0px;
width:100%;
}
p
{
margin:4px 3px 6px 3px;
}
.page
{
width:100%;
}
.middle
{
width:800px;
}
.top
{
height:76px;
width:100%;
border-bottom: #EEEEEE solid 2px;
}
.top .container
{
width:800px;
}
.top .container *
{
vertical-align:middle;
}
.menu
{
font-family: Arial, Helvetica, sans-serif;
text-align:right;
line-height:19px;
width:265px;
border-right:#FF6600 solid 4px;
margin-bottom:3px;
float:left;
}
.main
{
width:490px;
margin:3px 5px 3px -4px;
padding:10px 5px 10px 10px;
border-left:#FF6600 solid 4px;
text-align:justify;
float:left;
}
.bottom
{
text-align:center;
font-size:9px;
color:#777777;
border-top: #FF6600 solid 3px;
margin:0px 3px 5px 3px;
clear:left;
width:99%;
}
h3
{
font-size:11px;
font-weight:bold;
color:#FF6600;
}
h4
{
font-size:10px;
font-weight:bold;
}
h5.spip
{
text-decoration:underline;
}
.infos
{
margin-top:30px;
font-size:9px;
color:#777777;
}
a
{
color:#000000;
}
a:hover
{
color:#FF6600;
}
a.spip_note
{
text-decoration:none;
}
.orange
{
color:#FF6600;
}
.menu #accueil
{
margin-top:14px;
margin-right:4px;
}
.menu #accueil a
{
font-size:13px;
font-weight:bold;
text-decoration:none;
color:#FF6600;
padding-right:9px;
}
.menu #accueil a:hover
{
color:#FF6600;
background:center right no-repeat url(hover.gif);
}
.menu dd
{
margin-left:0px;
}
.menu dt
{
font-size:13px;
font-weight:bold;
color:#202020;
margin-top:18px;
margin-right:13px;
}
.menu li a
{
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#909090;
padding-right:9px;
margin-right:4px;
padding-left:0px;
}
.menu ul
{
margin-left:0px;
padding-left:0px;
}
.menu li
{
list-style-type:none;
}
.menu li a:hover
{
color:#959595;
background:center right no-repeat url(hover.gif);
}
.menu strong
{
color:#606060;
}
.caractencadre-spip
{
font-weight:bold;
color:#FF6600;
}
.texteencadre-spip
{
font-weight:bold;
text-align:center;
width:70%;
padding:2px 2px 2px 2px;
margin:10px 0px 10px 0px;
background-color:#FFE0CC;
}
.main ul li
{
list-style:square;
list-style-image:url(puce.gif);
}
.main ul ul li
{
list-style-type:disc;
list-style-image:none;
}
.main img
{
margin:5px;
}