Bonjour,
Le gabarit fonctionne même si on met autre chose autour,
tu t'es un peu mélangé les pinceaux ... en voulant mélanger avec ton code.
Je n'avais pas regardé en détail, mais tu te compliques la vie ... Ta mise en page est statique, pourquoi ne pas partir avec une seule image de fond compléte sur le conteneur (a condition de placer un texte alternatif sur ton logo) et en suite il te reste un bloc en relatif sous ta banniere et ton menu en float left etc ...
Pour info et pas très proprement, je l'avoue ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!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>
<title>test</title>
<style type="text/css">
body {
margin-top: 10px;
text-align: center;
color: #000;
background: #FFF;
font: .8em Tahoma, Verdana, Geneva;
}
#acronym {
cursor: auto;
}
h1 {
font-size: 1.1em;
margin: 0 0 20px;
padding: 0 0 0 20px;
color: #9C3;
background: red;
}
h2 {
margin: 0;
padding: 0 0 0 20px;
color: #9C3;
background: transparent;
font: 1em Tahoma, Verdana, Geneva;
background: yellow;
}
ul {
display: inline;
list-style-type: none;
}
img {
display: block;
margin: 0;
padding: 0;
border-width: 0;
list-style-type: none;
}
#conteneur {
text-align: justify;
margin: 0 auto;
width: 900px;
height: 500px;
color: #000;
background: #62d058;
}
#logo {
margin: 0 auto;
width: 900px;
height: 164px;
background: #15ff1f;
color: #9C3;
}
#logo span {
float: left;
margin: 65px auto 30px 200px !important;
margin: 65px auto 30px 100px;
display: block;
font: 1em Tahoma, Verdana, Geneva;
text-align: center;
width: 250px;
color: #FFF;
background: transparent;
border-top: 1px ridge #FFF;
border-bottom: 1px ridge #FFF;
border-left: 2px ridge #FFF;
border-right: 2px ridge #FFF;
}
#liens1 {/* positionnement du menu1 pour contenir des �l�ments positionn�s */
float: left;
width: 100px;
margin: 25px auto auto 14px !important;
margin: 30px auto auto 14px;
font: 1.1em Tahoma, Verdana, Geneva;
position: relative;
}
#menu1 ul {
padding: 0;
margin: 0;
}
#menu1 li {
width: 120px;
}
#menu1 a { /* d�finition de chaque bouton du menu1 */
display: block;
width: 100px;
margin: 2px;
text-align: left;
text-decoration: none;
color: #fff;
background: green;
font-size: .8em;
border-bottom: 1px dotted #fff !important;
border-bottom: 1px solid #fff;
}
#menu1 #liensgris{
color: #E4E4E4;
background: orange;
}
#menu1 a:hover {
overflow: hidden; /* pour IE */
color: #194855;
background: blue;
}
#menu1 a span { /* d�finition de la balise span incluse dans le lien <a> */
position: absolute;
top: 100px;
left: -9999px;
text-align: center;
width: 220px;
color: #fff;
border-top: 1px ridge #FFF;
border-bottom: 1px ridge #FFF;
border-left: 2px ridge #FFF;
border-right: 2px ridge #FFF;
z-index: 500;
}
#menu1 a:hover span { /* d�finition de la balise span lors du survol */
left: 300px;
}
#site1 {
margin: -202px auto auto -50px;
padding: 5px;
}
#site2 {
margin: -214px auto auto -50px;
padding: 5px;
width: 100%; /* correction pour Opera */
}
#plugin {
margin: -202px auto auto -50px;
padding: 5px;
}
#liens2 {
position: fixed;
margin: 25px auto auto 14px !important;
margin-left: -4px;
font: 1em Tahoma, Verdana, Geneva;
}
.menu2 ul { /* positionnement du menu2 pour contenir des �l�ments positionn�s */
width: 350px;
}
.menu2 li {
}
.menu2 a { /* d�finition de chaque bouton du menu2 */
width: 115px !important; /* largeur du bouton */
width: 95px;
height: 13px;
display: block;
margin: 2px 0 0 0;
padding: 0 0 0 20px;
text-align: left;
text-decoration: none;
margin: 2px 0 0 0;
padding: 0 0 0 5px;
border-bottom: 1px dotted #FFF !important;
border-bottom: 1px solid #FFF;
font-size: 100%;
color: #FFF;
background: transparent url(../images/puces/puce_blanche.gif) 0% no-repeat;
font-size: .9em;
}
.menu2 a:hover {
color: #194855;
background: url(../images/puces/puce_bleu.gif) 0% no-repeat;
text-decoration: none;
height: 13px;
}
.menu2 a span { /* d�finition de la balise span incluse dans le lien <a> */
display: none;
}
.menu2 a:hover span { /* d�finition de la balise span lors du survol */
display: block;
text-align: center;
width: 220px;
color: #FFF;
background: transparent;
border-top: 1px ridge #FFF;
border-bottom: 1px ridge #FFF;
border-left: 2px ridge #FFF;
border-right: 2px ridge #FFF;
z-index: 1;
}
#time {
position: absolute;
width: 70px;
top: 200;
left: 180px;
}
#dateJour {
color: #FFF;
font-size: 100%;
font-family: Dustismo, Tahoma, Verdana;
vertical-align: text-top;
}
#dateNum {
color: #9C3;
font-size: 280%;
font-family: Dustismo, Tahoma, Verdana;
font-weight: bold;
letter-spacing: -3px;
vertical-align: text-top;
position: relative;
top: 0;
}
#logotest {
display: block;
float: right;
width: 100px;
height: 100px;
margin: -100px 0px auto auto;
border-top: 1px ridge #FFF;
border-bottom: 1px ridge #FFF;
border-left: 2px ridge #FFF;
border-right: 2px ridge #FFF;
padding: 0;
background: #194855;
z-index: 2;
}
.ptesta {
margin: 20px 0 0 0;
padding: 0;
text-align: right;
font-size: .9em;
color: #9C3;
background: transparent;
}
.ptestb {
margin: 0;
padding: 0;
text-align: right;
font-size: .8em;
color: #9C3;
background: transparent;
}
.et_tomato {
color: #FF6347;
}
.et_tomato a {
color: #FF6347;
text-decoration: underline;
}
.et_tomato a:hover {
color: #FF6347;
text-decoration: none;
}
#description1 {
position: absolute;
margin: 0px 0 auto 380px !important;
margin: 0px 0 auto 210px;
padding: 10px;
width: 450px;
height: 270px;
text-align: justify;
color: #FFF;
background: transparent;
border-top: 1px solid #fff;
border-bottom: 10px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
/* OPACITE
filter: alpha(opacity=80); filtre propri�taire d�IE
-moz-opacity: 0.8; filtre propri�taire de Mozilla/Firefox
opacity: 0.8; CSS3 */
font: .9em Tahoma, Verdana, Geneva;
z-index: 2;
}
#description1 ul {
display: block;
margin: 0;
padding-right: 115px;
text-align: right;
}
#description1 a {
margin: 0;
padding: 0;
color: #fff;
text-decoration: underline;
}
#description1 a:hover {
margin: 0;
padding: 0;
color: #FF6347;
text-decoration: none;
}
#corp2 {
position: relative;
margin: auto;
width: 900px;
height: auto;
background: #FFF url(../images/tranches/corp2.gif) repeat-y;
color: #000;
}
#description2 {
margin: 0 0 auto 150px !important;
margin: -220px 0 auto 150px;
padding: 40px;
width: 660px;
height: auto;
text-align: justify;
color: #FFF;
background: transparent;
line-height: 1.5em;
clear: both;
}
#description2 ul {
display: block;
margin: 0;
padding: 0;
}
#description2 a {
margin: 0;
padding: 0;
color: #fff;
}
#description2 a:hover {
margin: 0;
padding: 0;
color: #FF6347;
text-decoration: none;
}
#description3 {
float: left;
margin: 0 0 auto 380px !important;
margin: -265px 0 auto 190px;
padding: 10px;
width: 450px;
height: 270px;
text-align: justify;
color: #FFF;
background: transparent;
border-top: 1px solid #fff;
border-bottom: 10px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
font: .9em Tahoma, Verdana, Geneva;
z-index: 2;
}
#description3 a {
margin: 0;
padding: 0;
color: #fff;
text-decoration: underline;
}
#description3 a:hover {
margin: 0;
padding: 0;
color: #FF6347;
text-decoration: none;
}
#pied {
margin: 0 0 auto auto;
width: 900px;
height: 26px;
text-align: right;
color: #999;
background: transparent url(../images/tranches/pied.gif) no-repeat;
font-family: Tahoma, Verdana, Geneva;
}
#pied ul {
float: right;
margin: 23px 25px auto auto;
background: transparent;
}
#pied ul li {
display: inline;
list-style-type: none;
font-size: .7em;
color: #999;
background: transparent;
}
#pied ul li a {
text-decoration: none;
color: #999;
background: transparent;
}
#pied ul li a:hover {
text-decoration: underline;
color: #000;
background: transparent;
}
#pied ul .valid a {
text-decoration: none;
color: #9C3;
background: transparent;
}
#pied ul .valid a:hover {
text-decoration: underline;
color: #9C3;
background: transparent;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="logo">
</div><!--FIN logo-->
<div id="time">
<span id='dateJour'>Mar.</span><span id='dateNum'>24</span> </div>
<div id="liens1">
<ul id="menu1">
<li><a href="htmaccueil.php" title="Découvrez le site html">Site html <span id="site1">Découvrez le site sans animation</span></a></li>
<li><a id="liensgris" href="#" title="Site en phase de conception">Site Flash <span id="site2">Cette version du site requière le plug'in Flash.<br />Nous vous invitons à le télécharger gratuitement en cliquant sur "Plug'in Flash"</span></a></li>
<li><a href="http://fpdownload.macromedia.com/get/flashplayer/current/install_flash_player.exe" title="Téléchargez le plug'in (gratuit)">Plug'in Flash <span id="plugin" >Téléchargez le plug'in</span></a></li>
</ul>
</div><!--FIN liens1-->
<div id="description1">
<h1><span class="et_tomato">[</span> Webdesign <span class="et_tomato">&</span> Multimedia <span class="et_tomato">]</span></h1>
<p>Vous avez un projet de création de site web... Votre site doit être <strong>unique</strong> et <strong>original</strong>... Il doit donc posséder un style graphique <strong>pertinent</strong>, <strong>soigné</strong> et une mise en page originale !<br />
<br /><strong>ideas generator</strong> (générateur d'idées) mènera à bien votre projet en s'appuyant sur les recommandations du <acronym title="World Wide Web Consortium">W3C</acronym>, garantissant ainsi l'accessibilité à tous vos visiteurs.</p><br />
<ul>
<li>Conception de sites web accessibles</li>
<li>Technologies <acronym title="eXtensible Hyper Text Markup Language">xhtml</acronym>, <acronym title="Cascading Style Sheet">CSS</acronym>, Flash</li>
<li>CD-Roms - Print - Animations Flash - 3D</li>
<li>Création de logos - Référencement</li>
<li class="ptesta">Si vous ne voyez pas le logo ci-contre,</li>
<li class="ptestb">veuillez télécharger le <span class="et_tomato"><a href="http://fpdownload.macromedia.com/get/flashplayer/current/install_flash_player.exe" title="Téléchargez le plug'in (gratuit)">plug'in Flash.</a></span></li>
</ul>
<div id="logotest">
<object type="application/x-shockwave-flash" data="animations/logo_test.swf" title="logo ig" width="100" height="100">
<param name="movie" value="animations/logo_test.swf" />
<param name="wmode" value="transparent" />
<p>Le plug'in Flash n'est pas installé.</p>
</object>
</div><!--FIN logotest-->
</div><!--FIN description -->
</div><!--FIN corp -->
<div id="pied">
<ul>
<li><a href="mailto:info%40id-generator.com">© ig 2006</a> - Tous droits réservés |</li>
<li class="valid"><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.id-generator.com%2Findex.php" title="site valide xhtml 1.0 Strict">xhtml</a> -</li>
<li class="valid"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.id-generator.com/index.php" title="site valide CSS2">css</a></li>
</ul>
</div><!--FIN pied -->
</div><!--FIN conteneur -->
</body>
</html>
Ca doit te lever le bug sous IE
Bon courage
Modifié par ghost (24 Oct 2006 - 01:49)
