Zangalou | Bonjour,
Après avoir tenté de régler les problèmes en petites résolutions, je me rend compte que la page s'affiche mal en grande résolution. Ne disposant que de 1600x900, j'ai demandé à une personne de tester avec du 1920 et voilà le résultat.
La page n'est pas encore accessible par moteurs, donc je vous l'indique via un lien a modifier http://jeuxonline.ca/ index2.php
Il y a surement des erreurs mais je cherche à apprendre alors merci de votre aide.
(J'ai aussi un problème avec le menu, avec un souhait qu'il reste toujours collé en bas de page)
Merci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jeux Vidéo Online : Consoles de jeux et PC</title>
<link rel="stylesheet" type="text/css" href="style_div2.css">
</head>
<body background="images/fond.png" bgproperties="fixed">
<div id="top"><span class="sitemap">Jeux Vidéo > Accueil</span></div>
<div id="logo"><img src="images/logosoon.png" /></div>
<div id="twitter"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 2000,
width: 350,
height: 50,
theme: {
shell: {
background: 'none',
color: '#000000'
},
tweets: {
background: 'none',
color: '#386b85',
links: '#998768'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}
}).render().setUser('JeuxOnlineCa').start();
</script></div>
<div id="dossiers"><div id="image1"><img src="images/mario.png" /></div> <div id="image2"><img src="images/f3ar.png" /></div><div id="image3"><img src="images/gears-of-war-3.png" /></div></div><div id="logos"><div id="image1bis"><img src="images/830px-Super_Mario_3D_logo.png" /></div><div id="image2bis"><img src="images/Fear-_3_logo.png" /></div><div id="image3bis"><img src="images/gears-of-war-3-logo.png" /></div></div>
</div><div style="clear:both;"></div>
<div id="autres"><img src="images/1up.png" align="left" /><p><span class="gauche">À ne pas manquer :</span> <span class="droite"><img src="images/discu.png" align="left" style="margin-right:15px;" />Dossier de la semaine :</span></p></div>
<div style="clear:both;"></div>
<div id="articles"><img src="images/starfox-64-3D.png" onmouseout="javascript:this.src='images/starfox-64-3D.png';" onmouseover="javascript:this.src='images/starfox-64-3Dbis.png';" /> <img src="images/forza-4.png" onmouseout="javascript:this.src='images/forza-4.png';" onmouseover="javascript:this.src='images/forza-4bis.png';" /> <img src="images/fleche.png" onmouseout="javascript:this.src='images/fleche.png';" onmouseover="javascript:this.src='images/flechebis.png';" /> <img src="images/noel.png" style="margin-left:50px;" onmouseout="javascript:this.src='images/noel.png';" onmouseover="javascript:this.src='images/noel2.png';" /><img src="images/fleche.png" onmouseout="javascript:this.src='images/fleche.png';" onmouseover="javascript:this.src='images/flechebis.png';" /></div>
<div id="menu" style="padding-left:15px;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FJeuxOnlineCanada&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height="30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe><img src="images/menu.png" align="right" style="padding-right:15px;" /></div>
</body>
</html> |
Et le css :
body {
margin:0px;
padding:0px;
width:100%;
background-attachment:fixed;
}
.twtr-ft {
display:none;
}
/* pour IE */
div#top {
background : #D7DBC8;
filter : alpha(opacity=70);
}
/* pour IE */
div#menu {
background : #D7DBC8;
filter : alpha(opacity=70);
}
div.middle {
position:absolute;
left: 40%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px; /* Cette valeur doit être la moitié négative de la valeur du width */
margin-top: -100px; /* Cette valeur doit être la moitié négative de la valeur du height */
}
div#logo {
margin-left:38%;
width:auto;
margin-top: 30px;
float:left;
}
div#dossiers {
margin-top: 10px; /* moitié de la hauteur de l'image */
margin-left: auto;
margin-right: auto; /* moitié de la largeur de l'image */
width:720px;
}
div#image1 {
float:left;
}
div#image2 {
float:left;
margin-left:30px;
}
div#image3 {
float:left;
margin-left:30px;
}
div#logos {
margin-top: 70px; /* moitié de la hauteur de l'image */
margin-left: auto;
margin-right: auto;
width:720px;
}
div#image1bis {
float:left;
margin-left:10px;
}
div#image2bis {
float:left;
margin-left:51px;
margin-top:5px;
}
div#image3bis {
float:left;
margin-left:48px;
margin-top:5px;
}
div#autres {
margin-top:20px;
width:800px;
margin-left: auto;
margin-right: auto;
}
div#articles {
width:800px;
margin-left: 28%;
margin-right: 72%;
margin-top:10px;
}
div#twitter {
margin-top: 33px;
}
p span.gauche {
font-size:20px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
color:#9FAB29;
margin-left:15px;
padding-top:5px;
}
p span.droite {
font-size:20px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:200px;
color:#DC3535;
padding-top:5px;
}
span.sitemap {
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; }
div#menu {
position:absolute;
padding-top:8px;
margin-top: 89px; /* moitié de la hauteur de l'image */
background-color: rgba(215,219,200,0.6);
clear: both;
width:99%;
}
div#top {
width:auto;
height:20px;
margin:auto;
background-color: rgba(215,219,200,0.3);
border-bottom: 3px solid #4B4B4B;
padding-left:10px;
padding-top:5px;
}
.cliquez {
font-size:25px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:210px;
text-decoration: none;
color:#000;
} |
|
ça change pas