Salut,
En tentant d'intégrer un design non extensible, je tombe sur un problème au niveau du footer sur IE7 et une personne m'a signalé qu'il y a un bug également au footer sur résolution de plus de 1600.
le bug en question est un espace vide entre le contenue et le footer.
J'ai d'abord tenté de régler le problème en me fiant à un article parlant du layout d'IE mais j'en'ai pas trouve d'élément bloc possédant une taille de texte au dessus de la hauteur de l'élément.
Donc je ne vois pas où est le problème, j'aurais bien besoin d'une petite aide.
Voici le code :
html:
CSS : Là je ne sais pas quelle partie exactement mettre, car ça peut venir de n'importe où ^^;
voici un visuel : http://netdream.olympe-network.com/folio/kg3/
Merci d'avance
Modifié par Kadus (30 Jan 2009 - 23:35)
En tentant d'intégrer un design non extensible, je tombe sur un problème au niveau du footer sur IE7 et une personne m'a signalé qu'il y a un bug également au footer sur résolution de plus de 1600.
le bug en question est un espace vide entre le contenue et le footer.
J'ai d'abord tenté de régler le problème en me fiant à un article parlant du layout d'IE mais j'en'ai pas trouve d'élément bloc possédant une taille de texte au dessus de la hauteur de l'élément.
Donc je ne vois pas où est le problème, j'aurais bien besoin d'une petite aide.
Voici le code :
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inj3xtion ' Folio</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="global">
<div id="header">
<a href="#"><img src="img/logo.jpg" alt="" /></a>
</div>
<div id="wrapper">
<div id="content">
<div id="news">
<h1>Nouveautés du site</h1>
<p>
Curabitur nulla urna, auctor ac, sollicitudin quis, blandit ac, augue. Nulla aliquet, lacus et commodo vestibulum, neque mi pretium orci, in viverra lacus eros pretium neque. Suspendisse non mi. Fusce id enim et risus interdum pharetra. Quisque sit amet nisl. Aenean ligula enim, commodo ut, pretium sit amet, posuere eu, diam. Aliquam id enim. In id purus vel nibh condimentum dignissim. Etiam eu erat. Vestibulum imperdiet suscipit turpis. Etiam risus.
</p>
<div class="postdata">
<p class="alignleft">Le 30 janv 2009</p><p> Par Inj3xti0n </p>
</div>
<h1>Nouveautés du site</h1>
<p>
Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.
</p>
<div class="postdata">
<p class="alignleft">Le 30 janv 2009</p><p> Par Inj3xti0n </p>
</div>
</div>
<div id="nav">
<h1>Navigation</h1>
<ul>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
</ul>
<h1>Navigation</h1>
<ul>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
<li><a href="#" title="">menu</a></li>
</ul>
</div>
<br class="clear" />
</div>
</div>
<div id="footer">
<!-- Copyright de la découpe faite par decoupe-fr.net, à ne surtout pas enlever -->
<p>Copyright 2009 Inj3xti0n. Intégration <a href="http://validator.w3.org/check?uri=referer" title="valid xhtml 1.0 strict">xhtml</a> et <a href="http://jigsaw.w3.org/css-validator/check/referer/" title="valid CSS2.1">Css</a> par <a href="http://www.decoupe-fr.net" title="découpe-fr">Decoupe-fr.net</a></p>
</div>
</div>
<div id="copyright"> </div>CSS : Là je ne sais pas quelle partie exactement mettre, car ça peut venir de n'importe où ^^;
/*///////////////////////////////////////////////////////////
CSS 2.1 MADE BY KADUS POUR DECOUPE-FR.NET
1. GLOBAL
////////////////////////////////////////////////////////////*/
* {
border: none;
padding: 0;
margin: 0;
}
#copyright{
background: url('img/copyright.jpg') no-repeat bottom;
height: 42px;
width: 161px;
float: right;
}
body {
background: url('img/fond.jpg') repeat-y top right #44fae4;
width: 100%;
height: 100%;
font-size: 10px;
}
a{
color:#0fafcf;
text-decoration:none;
}
a:hover{
color:#000;
}
.clear {
clear: both;
line-height: 0px;
margin: 0px;
padding: 0px;
}
#global {
width: 539px;
margin: 40px auto 0 auto;
}
/*/////////////////////////////////////
2.HEADER
/////////////////////////////////////*/
#header {
background: url('img/header.png') no-repeat top left;
height: 118px;
margin: 0 auto;
overflow: auto;
line-height: 0px;
}
#header img {
padding: 15px 0 0 0;
margin-left: 25px;
}
/*/////////////////////////////////////
3.CONTENEUR (WRAPPER)
/////////////////////////////////////*/
#wrapper {
background: url(img/bloc_top.png) no-repeat top left;
height: 388px;
font-size: 13px;
padding-bottom: 20px;
}
/*/////////////////////////////////////
4.CONTENU
/////////////////////////////////////*/
#content {
background: url(img/bloc_bg.png) repeat-y top center;
width: 526px;
margin: 0 auto;
}
/*/////////////////////////////////////
5.NEWS
/////////////////////////////////////*/
#news {
width: 299px;
padding-left: 20px;
float: left;
}
#news h1 {
background: url(img/news_h1.jpg) no-repeat top left;
display: block;
height: 32px;
width: 299px;
font-size: 14px;
font-weight: normal;
color: #000;
line-height: 30px;
padding-left: 10px;
}
#news p {
padding: 0 10px 15px 10px;
}
.alignleft {
float:left;
width: 190px;
}
.postdata {
}
/*/////////////////////////////////////
6.NAVIGATION
/////////////////////////////////////*/
#nav {
width: 129px;
border: 1px solid #000;
height: 380px;
float: right;
margin-right: 20px;
}
#nav h1 {
display: block;
width: 112px;
height: 26px;
line-height: 26px;
background: url(img/nav_h1.png) no-repeat top center;
font-size: 14px;
font-weight: normal;
color: #000;
margin: 1px auto;
padding-left: 15px;
}
#nav ul {
list-style-image: url(img/nav_li.jpg);
margin-top: 0;
margin-bottom: 10px;
padding-left: 25px;
}
#nav ul li a{
text-decoration: none;
padding: 5px 0;
color: #000000;
}
#nav ul li a:hover{
text-decoration: underline;
}
/*/////////////////////////////////////
7.FOOTER(BAS)
/////////////////////////////////////*/
#footer {
background: url(img/bloc_bottom.png) no-repeat bottom center;
height: 35px;
width: 526px;
margin: 0 auto;
padding-top: 20px;
}
#footer p {
font-size: 12px;
width: 539px;
margin: 0 auto;
text-align: center;
}
voici un visuel : http://netdream.olympe-network.com/folio/kg3/
Merci d'avance
Modifié par Kadus (30 Jan 2009 - 23:35)
