0
Bonjour, J'ai un code css qui me rend fou parce que je ne peux pas le corriger! Voici le code:problème de position css
<div id="main_body">
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
<div class="left_panel round">
<div class="sub_left_panel round">
<table id="menu" width="100%" cellspacing="0" cellpadding="1">
<tr class="header"><td colspan="2">Main Menu</td></tr>
<tr class="sub_header"><td colspan="2">Links</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
<tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
<tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
<tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
<tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
<tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
<tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
</table>
</div>
</div>
</div>
C'est le code du corps principal. Ceci est le principal code css corps
/* Start Mian Body */
div#main_body
{
width: 900px;
position: absolute;
padding-top: 100px;
z-index: -1;
}
div.left_panel
{
position: relative;
left: -10px;
width: 200px;
background: #0099CC;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 7px;
padding-left: 5px;
border-radius: 5px;
margin-left: -5px;
margin-top: 10px;
}
div.sub_left_panel
{
position: relative;
width: 100%;
background: #ffffff;
border-radius: 5px;
border: 1px solid #c0c0c0;
padding: 0;
font-size: 8pt;
}
div.sub_left_panel table#menu
{
padding: 2px;
}
div.sub_left_panel table#menu tr.header td
{
text-align: center;
vertical-align: center;
background: #0099CC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: bold;
}
div.sub_left_panel table#menu tr.sub_header td
{
font-weight: bold;
padding-left: 5px;
background: #E2E2E2;
}
div.sub_left_panel table#menu tr.options td
{
border-bottom: 1px solid #c0c0c0;
padding-left: 15px;
}
div.sub_left_panel table#menu tr.options:hover td
{
background: #0099cc;
color: #ffffff;
cursor: pointer;
}
div.sub_left_panel table#menu tr.thelast td
{
border: none;
}
/* End Mian Body */
Le problème est: le corps principal s'étendent le long la page verticale, mais le pied de page principale DIV ne se trouve pas sur sa position qui devrait être, c'est le pied de page principal code html
<div id="main_footer" class="round">
<center>
<a href="#">Home</a> -
<a href="#">About Developer</a> -
<a href="#">Follow me on Facebook</a> -
<a href="#">For programming orders : [email protected]</a>
</center>
</div>
ce pied de page principale code css:
/* Start Mian Footer */
div#main_footer
{
color: #ffffff;
background:#3B5998;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
width: 900px;
height: 5px;
position: absolute;
top: 100%;
bottom: 0;
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
font-size: 8pt;
}
div#main_footer a
{
color: #ffffff;
text-decoration: none;
}
/* End Main Footer */
Pouvez-vous créer un jsfiddle.net? – diagonalbatman
Avoir une [démonstration JS Fiddle] (http://jsfiddle.net/davidThomas/JVrf5/). –
Essayez-vous de créer un pied de page collant? Si oui, vous pouvez jeter un oeil à http://www.cssstickyfooter.com – Sivakumar