Bonjour ...
J'ai fait ce tutoriel simple :
Design XHTML/CSS complet avec 2 colonnes de même hauteur
En j'ai adapter mon forum pour qu'il réagisse comme le tutoriel.
Tout marche nickel dans FF (évidemment !), mais j'ai un bug de 1 pixel dans IE.
Résultat avec FF
Résultat avec IE
Ce n'est pas super évident à voir, mais le footer est un pixel plus haut dans IE ce qui fait que l'on voit l'image de fond du container sous le footer.
Voici la partie du code qui nous intéresse :
Et voici la partie du CSS qui nous intéresse :
Merci de votre aide ...
Modifié par Theberge43 (16 Nov 2006 - 15:02)
J'ai fait ce tutoriel simple :
Design XHTML/CSS complet avec 2 colonnes de même hauteur
En j'ai adapter mon forum pour qu'il réagisse comme le tutoriel.
Tout marche nickel dans FF (évidemment !), mais j'ai un bug de 1 pixel dans IE.
Résultat avec FF
Résultat avec IE
Ce n'est pas super évident à voir, mais le footer est un pixel plus haut dans IE ce qui fait que l'on voit l'image de fond du container sous le footer.
Voici la partie du code qui nous intéresse :
<!-- HEADER -->
<a name="top" id="top"></a>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/famfamfam/zoom.png" alt="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/famfamfam/group.png" alt="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/famfamfam/calendar.png" alt="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/famfamfam/help.png" alt="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<div id="panel">
{$welcomeblock}
</div>
</div>
<div id="content">
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<!-- FOOTER -->
</div> <!-- Close content -->
<div id="copyright">
<div class="bottommenu">
<span class="smalltext">
<a href="{$mybb->settings['contactlink']}">{$lang->bottomlinks_contactus}</a> |
<a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a> |
<a href="#top">{$lang->bottomlinks_returntop}</a> |
<a href="#content">{$lang->bottomlinks_returncontent}</a> |
<a href="<archive_url>">{$lang->bottomlinks_litemode}</a> |
<a href="{$mybb->settings['bburl']}/misc.php?action=syndication">{$lang->bottomlinks_syndication}</a>
</span>
</div>
<br />
<div class="bottommenu">
{$lang->powered_by} <a href="http://www.mybboard.com" target="_blank">MyBB</a> {$mybbversion}<br />
{$lang->copyright} © 2002-{$copy_year} <strong><a href="http://www.mybboard.com" target="_blank">MyBB Group</a></strong>
</div>
</div>
</div> <!-- Close Container -->
Et voici la partie du CSS qui nous intéresse :
html, body {
height: 100%;
margin: 0;
}
body {
color: #000;
font-family: Verdana;
font-size: 13px;
text-align: center; /* IE 5 fix */
line-height: 1.4 ;
}
#container {
min-height: 100%;
color: #000000;
margin: 0;
padding: 0;
position: relative;
background-image: url(../images/20_joueur.png);
background-position: 100% 180px;
background-repeat: no-repeat;
text-align: left; /* IE 5 fix */
}
#header {
background-image: url(../images/20_bg.png);
background-position: top left;
background-repeat: repeat;
padding: 0 0 10px 0;
}
#content {
margin: 5px 180px 5px 20px;
padding: 0 0 85px 0;
overflow: auto;
/* FIX: Make internet explorer wrap correctly */
width: auto !important;
}
#copyright {
position: absolute;
bottom: 0;
width: 100%;
font: 11px Verdana, Arial, Sans-Serif;
font-weight: bold;
color: #FFFFFF;
padding: 0;
margin: 0;
background-image: url(../images/20_bg.png);
background-position: top left;
background-repeat: repeat;
}
Merci de votre aide ...
Modifié par Theberge43 (16 Nov 2006 - 15:02)