Bonjour,
Voila j'ai creer un site avec Css et Html/Xhtml, le site est bien sous Mozzilla, mais j'ai un probleme de positionnement sur IE
Adresse ICI
Voici le code Html
Voici le CSS :
Si qqun peut maide pour la mise en forme sous IE
Voila j'ai creer un site avec Css et Html/Xhtml, le site est bien sous Mozzilla, mais j'ai un probleme de positionnement sur IE
Adresse ICI
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" lang="fr" xml:lang="fr" >
<head>
<title>HKosmos Prototype 003</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tete">
<div class="options"><a href="#">Recherche</a> | <a href="#">Contact</a> | <a href="#">Aide</a> </div>
</div>
<div id="corps">
<!-- **************** CORPS GAUCHE ************* -->
<div id="corpsGauche">
<!-- **************** MENU ************* -->
<div id="menu">
<h1 class="actualite"><span class="icone" ></span>Actualité</h1>
<ul>
<li><a href="?go=news""&PHPSESSID=b3c7b462ba196f6e2b570343fddb8c9a>News</a></li>
<li><a href="#">Archives</a></li>
</ul>
<h1 class="dossiers"><span class="icone" ></span>Dossiers</h1>
<ul>
<li><a href="#">Films / Séries</a></li>
<li><a href="#">Biographies</a></li>
<li><a href="#">Zoom</a></li>
</ul>
<h1 class="communaute"><span class="icone" ></span>Communauté</h1>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="./chat.php?PHPSESSID=b3c7b462ba196f6e2b570343fddb8c9a">Chat</a></li>
<li><a href="#">PopChart</a></li>
<li><a href="#">Membres</a></li>
</ul> </div>
<!-- **************** MENU FIN ************* -->
<!-- **************** ONLINE ************* -->
<div id="online">
<h1><span class="icone" ></span>Online (0)</h1>
<ul>
</ul>
</div>
<!-- **************** ONLINE FIN ************* -->
<!-- **************** PARTENAIRES ************* -->
<div id="partenaire">
<h1><span class="icone" ></span>Partenaires</h1>
<a href="http://www.cinemasie.com/"><img src="./images/liens/bouton_cinemasie.jpg" alt="Cinemasie"></a>
<a href="http://www.moshi-fansub.be/"><img src="./images/liens/moshi.jpg" alt="Fansub Drama Asiatique"></a> </div>
<!-- **************** PARTENAIRES************* -->
<!-- **************** Paypal ************* -->
<div id="paypal">
<h1><span class="icone" ></span>Donation</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="PHPSESSID" value="b3c7b462ba196f6e2b570343fddb8c9a" />
<input type="hidden" name="cmd" value="_s-xclick" >
<input type="image" class="img" src="https://www.paypal.com/fr_FR/i/btn/x-click-but04.gif" border="0" name="submit" alt="Effectuez vos paiements via PayPal : une solution rapide, gratuite et sécurisée !">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form> </div>
<!-- **************** PARTENAIRES************* -->
<!-- **************** VALIDATOR ************* -->
<div id="validator">
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> </div>
<!-- **************** VALIDATOR FIN ************* -->
</div>
<!-- **************** CORPS GAUCHE FIN ************* -->
<!-- **************** CORPS DROIT ************* -->
<div id="corpsDroit">
<div id="login">
<form action="/~hkosmos/test/index.php" method="POST"><input type="hidden" name="PHPSESSID" value="b3c7b462ba196f6e2b570343fddb8c9a" />
<h1>Se Connecter</h1>
<p>Pseudo
<input type="text" size="10" maxlength="20" name="pseudo" /></p>
<p>Password
<input type="password" size="10" maxlength="20" name="password" /></p>
<p><input type="submit" name="submit" value="Ok?" class="bouton"></p>
</form>
</div>
</div>
<!-- **************** CORPS MILIEU ************* -->
<div id="corpsMilieu">
<div id="accroche">
<object data="images/accroche.swf" width="100%" height="100%" type="application/x-shockwave-flash">
<param name="movie" value="images/accroche.swf" />
<param name="quality" value="high" />
</object>
</div>
<div id="news">
<div class="article">
<h1 class="cinema">
<span class="icone" ></span>
En solde, le coffret DVD Zhang Ziyi
</h1>
<p>
<img src="images/news_cinema.jpg" alt="image" />
Sur le site de cinéstore, le coffret contenant "the road home" avec zhang ziyi et "pas un de moins" est en promotion au prix de 20 euros.<br/><br/><a href="#">Lire la suite ...</a>
</p>
<hr class="fin"/>
</div>
<div class="article">
<h1 class="musique">
<span class="icone"></span>
En exclusivité new song of Jay Chou 4th album...
</h1>
<p>
La première chanson du dernier album de Jay Chou diffusée partout en Asie depuis le 16 juillet est " au nom du Père" et annonce la sortie prochaine de son album le 31 juillet.
C'est pas une ballade, elle a un style propre a Jay Chou et j'ai meme l'impression que ça sera très dur à chanter en Karaoké...
Je vous propose de télécharger la version courte de la radio qui dure 2 minutes tout de meme...
</p>
<hr class="fin"/>
</div>
<div class="article">
<h1 class="cinema">
<span class="icone"></span>
Better Luck Tomorrow
</h1>
<p>
<img src="images/news_cinema2.jpg" alt="image" />
"Better Luck Tomorrow" est un film de Justin Lin et est les premier film américain qui traite de la décadence d'une génération asiatique sur le sol du pays continent le plus riche du monde mais qui connait aussi l'un des plus hauts taux de criminalité. Si le film passe pour l'instant inaperçu en France et même dans les communautés asiatiques, il n'est pas de même aux Etats-Unis. En effet, "Better Luck Tomorrow" a été entre autre, une sélection Officielle du Festival 2002 de "Toronto International Film" et du Festival de "Sundance Film" dans la même année. De plus, les critiques sont très positives, cela en provenance de journaux et magazines comme Chicago Sun Times, San Francisco Weekly, Los Angeles Daily News, USA Today, New York Times, CNN.com ou Rolling Stone et bien encore!
</p>
<hr class="fin"/>
</div>
</div>
</div>
<!-- **************** CORPS MILIEU FIN ************* -->
</div>
<hr class="fin" />
<!-- **************** PIED ************* -->
<div id="pied">
Mars 2006- webmaster@hkosmos.com
</div>
<!-- **************** PIED FIN ************* -->
</body>
</html>
Voici le CSS :
/*************** GLOBAL */
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
body {
background-color: #6E7F99;
margin: 0px 0px 0px 0px;
background-image: url(images/fond.jpg);
background-repeat: no-repeat;
}
img {
border-style: none none none none;
padding: 2px 2px 2px 2px;
}
hr {
border: thin dotted Black;
}
hr.fin {
clear: both;
visibility: hidden;
}
/*************** STRUCTURE */
#tete {
background-color: #DDDDDD;
height: 80px;
background-image: url(images/bandeau.jpg);
}
#corps {
position: relative;
width: 725px;
/*width: 650px;*/
/*margin: 0px auto;*/
left:25%;
padding: 5px 0px 0px 0px;
}
#corpsGauche {
float: left;
width: 120px;
margin: 0px 5px 0px 0px;
}
#corpsMilieu {
width: 475px;
margin: 0px 0px 0px 125px;
}
#corpsDroit{
float: right;
width: 120px;
margin: 0px 0px 0px 0px;
}
#pied {
color: #888888;
position: relative;
background-color: #EFEFEF;
height: 20px;
width: 100%;
border: 1px dotted #999999;
border-style: dotted none none none;
text-align: center;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
/*************** TETE */
#tete .options {
color: #999999;
margin: 50px 0px 0px 0px;
padding: 2px 2px 0px 2px;
border: 1px solid #666666;
border-style: dotted none solid none;
height: 15px;
background-color: #FFFFFF;
text-align: right;
}
#tete .options a {
color: #999999;
padding: 0px 2px 0px 2px;
border: 1px solid #FFFFFF;
text-decoration: none
}
#tete .options a:hover {
color: #000000;
border: 1px dotted #666666;
padding: 0px 2px 0px 2px;
}
/*************** MENU */
#menu {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 5px 5px 5px 5px;
}
#menu h1 {
color: #000000;
font-weight : bold;
margin: 0px 0px 0px 0px;
border: 1px solid #999999;
border-style: dotted none dotted none;
}
#menu h1 .icone {
position: relative;
float: left;
margin: -2px 2px 0px -16px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 16px;
height: 16px;
}
#menu h1.actualite{
background-image: url(images/fond_actualite.gif);
background-position : right;
}
#menu h1.actualite .icone {
background-image: url(images/icone_actualite.gif);
}
#menu h1.dossiers{
background-image: url(images/fond_dossiers.gif);
background-position : right;
}
#menu h1.dossiers .icone {
background-image: url(images/icone_dossiers.gif);
}
#menu h1.communaute{
background-image: url(images/fond_communaute.gif);
background-position : right;
}
#menu h1.communaute .icone {
background-image: url(images/icone_communaute.gif);
}
#menu ul {
margin: 0px 0px 5px 10px;
padding: 0px 0px 0px 0px;
list-style-image : url(images/puce_menu.gif);
}
#menu ul li {
color: #666666;
margin: 0px 0px 0px 10px;
}
#menu ul li:hover {
list-style-image : url(images/puce_menu_hover.gif);
}
#menu ul li a {
text-decoration: none;
display: block;
width: 99%;
color: #666666;
}
#menu ul li a:hover {
background-color: #F6F6F6;
}
/*************** ONLINE */
#online {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin-top: 5px;
}
#online h1 {
color: #000000;
font-weight : bold;
margin: 0px 0px 0px 0px;
border: 1px solid #999999;
border-style: dotted none dotted none;
background-image: url(images/fond_online.gif);
background-position : right;
}
#online h1 .icone {
position: relative;
float: left;
margin: -5px 2px 0px -16px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 18px;
height: 18px;
background-image: url(images/online.gif);
}
#online ul {
margin: 0px 0px 5px 10px;
padding: 0px 0px 0px 0px;
}
#online ul li {
margin: 0px 0px 0px 10px;
}
#online ul li.guy {
color: #6666AA;
list-style-image: url(images/online_guy.gif);
}
#online ul li.girl {
color: #AA6666;
list-style-image: url(images/online_girl.gif);
}
#online ul li.invite {
color: #888888;
list-style-image: url(images/online_invite.gif);
}
#online ul li a.guy {
color: #6666AA;
font-weight : bold;
text-decoration: none;
font-size: 10px;
}
#online ul li a.guy:hover{
background-color: #DDDDDD;
}
#online ul li a.girl {
color: #AA6666;
font-weight : bold;
text-decoration: none;
font-size: 10px;
}
#online ul li a.girl:hover{
background-color: #FFCCCC;
}
/*************** Partenaires******** */
#partenaire {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin-top: 5px;
}
#partenaire h1 {
color: #000000;
font-weight : bold;
margin: 0px 0px 0px 0px;
border: 1px solid #999999;
border-style: dotted none dotted none;
background-image: url(images/fond_partenaires.gif);
background-position : right;
}
#partenaire h1 .icone {
position: relative;
float: left;
margin: -5px 2px 0px -16px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 18px;
height: 18px;
background-image: url(images/partenaires.gif);
}
#partenaire a img {
margin: 6px 0px 5px 5px;
padding: 0px 0px 0px 0px;
height:30px;
width: 80px;
}
#partenaire a img:hover {
margin: 4px 0px 3px 3px;
padding: 0px 0px 0px 0px;
border-style:dashed;
border-color:#c2c2c0;
border-width:2px;
}
#partenaire ul li {
margin: 0px 0px 0px 10px;
}
/*************** Donation******** */
#paypal {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin-top: 5px;
}
#paypal h1 {
color: #000000;
font-weight : bold;
margin: 0px 0px 0px 0px;
border: 1px solid #999999;
border-style: dotted none dotted none;
background-image: url(images/fond_partenaires.gif);
background-position : right;
}
#paypal h1 .icone {
position: relative;
float: left;
margin: -2px 2px 0px -16px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 16px;
height: 16px;
background-image: url(images/paypal.gif);
}
#paypal input.img {
margin: 5px 0px 0px 5px;
padding: 0px 0px 0px 0px;
height:30px;
width: 80px;
}
#paypal ul li {
margin: 0px 0px 0px 10px;
}
/*************** ACCROCHE */
#accroche {
border: 1px solid #000000;
background-color: #FFFFFF;
height: 200px;
padding: 2px 2px 2px 2px;
}
/*************** NEWS */
#news {
padding: 0px 0px 0px 0px;
}
#news .article {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 10px;
padding: 0px 0px 0px 0px;
}
#news .article h1 {
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
border: 1px dotted #666666;
border-style: none none dotted none;
color: #FFFFFF;
}
#news .article h1.cinema {
background-color: #EEAAAA;
background-image: url(images/fond_cinema.jpg);
}
#news .article h1.cinema .icone {
position: relative;
float: left;
height: 32px;
width: 32px;
margin: -15px 0px -13px -10px;
background-image: url(images/icone_cinema.gif);
}
#news .article h1.musique {
background-color: #AAAAEE;
background-image: url(images/fond_musique.jpg);
}
#news .article h1.musique .icone {
position: relative;
float: left;
height: 32px;
width: 32px;
margin: -15px 0px -13px -10px;
background-image: url(images/icone_musique.gif);
}
#news .article p {
color: #666666;
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}
#news .article p img {
position: relative;
float: left;
}
#news .article p a {
color: #6666AA;
text-decoration: underline;
}
#news .article p a:hover {
color: #0000FF;
text-decoration: none;
}
/*************** CHAT */
#chat {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top:0px;
margin-left: 0px;
width: 100%;
padding: 0px 0px 0px 0px;
}
#chat h1 {
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
border: 1px dotted #666666;
background-image: url(images/fond_chat.gif);
border-style: none none dotted none;
color:white;
}
#chat h1 .icone {
position: relative;
float: left;
margin: -15px 2px 0px -5px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 20px;
height: 30px;
background-image: url(images/chat.gif);
}
#chat .corps {
margin: 0px 0px 0px 0px;
padding: 10px 0px 5px 12px;
}
#chat .corps a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
#chat .login {
margin: 0px auto auto 40px;
}
#chat .corps .image{
position: relative;
float:right;
margin: 40px 50px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 75px;
height: 141px;
background-image: url(images/gong.gif);
}
#chat .bouton1 {
margin: 10px 10px 0px 0px;
border-style : none;
border: 1px dotted #000000;
background-color:#ededed;
}
#chat .online {
margin: 10px 30px 0px 10px;
}
/*************** VALIDATOR */
#validator {
margin-top: 10px;
text-align: center;
}
/*************** login */
#login{
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 5px 5px 5px 5px;
}
#login .image{
position:relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px none #000000;
width: 110px;
height: 110px;
background-image: url(images/Garu.gif);
}
#login .spacer{
padding: 0px 0px 100px 0px;
margin: 0px 0px 20px 0px;
}
#login h1 {
margin: 0px -5px 0px -5px;
padding: 0px 0px 0px 0px;
border: 1px dotted #666666;
border-style: dotted none dotted none;
text-align:center;
background-image: url(images/fond_connect.gif);
}
#login p{
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#login .input p{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/*text-align:center;*/
}
#login input{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid #000000;
background-color:#ededed;
}
#login input.bouton{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px dotted #000000;
background-color:#ededed;
}
/******************************************************************************/
Si qqun peut maide pour la mise en forme sous IE
