Bonjour !
Je suis en grande difficulté sur un problème que je n'arrive toujours pas à résoudre après une journée complète de test, modif et j'en passe là je touche le fond...
Sous firefox mon design s'affiche impeccable ! Sous ie c'est autre chose : le corps étudié pour recevoir des cadres en trois morceaux : haut, milieu répétable et bas se retrouve complètement en vrac... alors que firefox m'affiche tout parfaitement...
Si vous pouviez m'aider s'il vous plait...
Ci joint l'adresse :
http://pikafr.free.fr/eternam-khaz-modan/template/index.html
puis le code html
et enfin le code css
Soyez indulgent ça ne fait que 3 semaines max que je pratique le code, j'en suis encore à modifier des gabarits existant donc question sémantique c'est pas encore gagné... Mais si vous pouviez m'aider je suis à court d'idées...
Modifié par pikachu (05 Jun 2006 - 22:29)
Je suis en grande difficulté sur un problème que je n'arrive toujours pas à résoudre après une journée complète de test, modif et j'en passe là je touche le fond...
Sous firefox mon design s'affiche impeccable ! Sous ie c'est autre chose : le corps étudié pour recevoir des cadres en trois morceaux : haut, milieu répétable et bas se retrouve complètement en vrac... alors que firefox m'affiche tout parfaitement...
Si vous pouviez m'aider s'il vous plait...
Ci joint l'adresse :
http://pikafr.free.fr/eternam-khaz-modan/template/index.html
puis 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>
<title>Bienvenue sur le site de la guilde Eternam - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<link rel="stylesheet" media="screen" type="text/css" href="index.css"></link>
</head>
<body>
<!-- conteneur de la page -->
<div id="global">
<h1 id="header"><span>Eternam, Guilde world of warcraft, Serveur khaz modan </span></h1>
<!-- le blockmenu de gauche -->
<div id="block_gauche">
<h2 class="menu_gauche">
<span>Menu</span>
<a href="#contenu" >aller au contenu.</a>
<a href="#menuh" >aller au second menu.</a>
</h2>
<ul >
<li><a href="index.html">-Home</a></li>
<li><a href="archives.html">-Archives News</a></li>
<li><a href="notre_histoire.html">-Notre Histoire</a></li>
<li><a href="charte.html">-La charte Eternam</a></li>
<li><a href="recrutement_eternam.html">-Recrutement Eternam</a></li>
<li><a href="tableau_de_chasse.html">-Tableau de chasse</a></li>
<li><a href="strategie.html">-Stratégies instances VHL</a></li>
<li><a href="galerie.html">-Galerie</a></li>
<li><a href="http://eternam-fr.forumactif.com/">-Forum</a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/news.asp">-Bdd Eternam</a></li>
<li><a href="liens.html">-Les liens</a></li>
<li><a href="contact.html">-Nous contacter</a></li>
<li><a href="membres/index.html">-Zone Membre</a></li>
</ul>
<span class="bas"></span>
</div>
<!-- fin du block menu de gauche -->
<!-- menu horizontal -->
<!-- fin du menu horizontal -->
<!-- block pour contenu de droite -->
<div class="center">
<h3 class="titre_article">Bienvenue sur le site de la guilde Eternam</h3>
<h2 class="titre"> <!--ne rien saisir--> </h2>
<p class="toumy">
Bienvenue sur le site de la guilde Eternam installée sur le serveur Khaz modan, serveur européen à <br>
tendance dites normale ( no pvp, no rp). Vous pourrez via ce site apprendre à mieux nous connaitre<br>
et découvrir notre avancée au sein du contenu end game du jeu. Un forum est à votre disposition<br>
pour prendre contact avec nous ainsi qu'une page dédiée au recrutement au sein de notre guilde pour<br>
vous permettre de connaitre les places ouvertes. </p>
<h5 class="basol"></h5>
</div>
<div class="center">
<h3 class="titre_article">Samedi 3 Juin 2006</h3>
<h2 class="titre"> <!--ne rien saisir--> </h2>
<p class="toumy">
Ce samedi un Molten Core quasi complet a été rasé grâce à la motivation et à la maitrise de MC par<br>
les joueurs de la guilde, nous espérons qu'un jour il soit possible de down MC au complet. Majordomo<br>
et Ragnaros sont donc restés debout jusqu'à demain où nous nous occuperons de leurs cas. <br>
En espérant bien sûr repartir avec une victoire !<br>
</p>
<h5 class="basol"></h5>
</div>
<div class="center">
<h3 class="titre_article">Mercredi 31 Mai 2006</h3>
<h2 class="titre"> <!--ne rien saisir--> </h2>
<p class="toumy">
Aujourd'hui une nouvelle tentative à BwL avec un nouveau paladin dédié au kitting de razorgore.<br>
La tactique à utiliser n'est certes pas facile mais il faudra un peu de temps pour former tout ce <br>
petit monde comme il faut! Mais la maitrise de razorgore est proche, reste vael qui nous résiste<br>
encore et toujours. Mais BwL reste un défi assez complexe !
</p>
<h5 class="basol"></h5>
</div>
<div id="margepied"><!-- garder toujours cette marge juste avant le pied --> </div>
<div id="pied"><p class="pied_page">Copyright © Eternam - Design by Pikachu - Toute reproduction totale ou partielle de ce site est interdite sans l'accord des auteurs - </p>
</div>
</div>
<!-- fermeture conteneur global , ne pas inserer de script ou autre balises aprés, si script de stat(ou autre ) et non visible , alors les placer
dans la marge ou le pied -->
</body>
</html>
et enfin le code css
html, body {
margin:0;
padding:0;
height:100%;
background-image:url("texture_page.gif");
font-family:verdana;
}
* {
margin:0;
padding:0;
}
#global
{
width:1000px;
margin: auto ;
height:auto!important;
height:100%;
min-height:100%;
position:relative;
}
#header /* se raccroche avec la première partie du menu gauche*/
{
height: 183px;
background: url("header.gif") center no-repeat;
margin:0 auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#block_gauche { /* image du menu gauche partie du milieu*/
width:239px;
background-image: url("menu_milieu.gif");
background-repeat:repeat-y;
float:left;
margin-right:0px;
margin-top:0;
padding:0;
font-family: verdana;
font-size : 12px;
text-align:left;
}
.menu_gauche /* image de jonction du personnage entre le haut du menu et le header*/
{
width: 239px;
height:106px;
background-image: url("menu_haut.gif");
background-position:top 0;
background-repeat: no-repeat;
margin: 0;
line-height:30px;
font-family: verdana;
font-size : 12px;
color: black;
}
.menu_gauche a, .menu_gauche span, #header span { /* ici on cache le contenu de h2 et h1, contenu justifiant la
presence du h2 [smile] */
position:absolute;
height:0;
width:0;
overflow:hidden;
}
.bas /* image concernant le bas du menu de gauche*/
{
margin:0;
background-image: url("menu_bas.gif");
background-position:0px bottom;
background-repeat: no-repeat;
height: 81px;
display:block;
}
#block_gauche ul {
list-style-type:none;
line-height:15px;
padding-left:30px;
}
#block_gauche ul li {
}
a {
text-decoration:none;
color: #f68913;
font-size:12px;
}
a:hover {
color:black;
}
#menuh li {
float:left;
display:block;
}
#menuh li a {
color:white;
text-decoration:none;
float:left;
margin:0px ;
height:31px;
}
.titre
{
background-image: url("corps_haut.gif");
background-repeat: no-repeat;
background-position:1px;
height: 20px;
font-family:verdana;
font-size: 10px;
width: 706px;
margin-left: 260px;
margin-top: 20px;
}
.titre_article
{
margin-top: 20px;
margin-left:300px;
font-family: verdana;
font-size:14px;
color:#f68913;
margin-bottom: 20px;
}
.toumy
{
background-image: url("corps_milieu.gif");
background-repeat:repeat-y;
margin:0 auto;
background-position:1px;
padding:0 30px;
width:706px;
margin-left: 260px;
color:#f68913;
font-size: 12px;
font-family: verdana;
}
.basol
{
margin:0;
background-image: url("corps_bas.gif");
background-position:1px bottom;
background-repeat: no-repeat;
height: 29px;
padding:0 30px;
margin-left: 260px;
margin-bottom: 20px;
width: 706px;
}
#margepied {
height: 80px;/* même hauteur que le pied ou superieur */
clear:both;/* pour glisser sous le dernier element flottant */
margin-top: 40px;
}
#pied
{
background-image: url("pied.gif");
background-repeat: repeat-y;
width: 100%;
height: 72px;
position:absolute; /* on le fixe au bas de #global qui doit-etre lui meme en position:relative; */
bottom:0;
left:0;
}
.pied_page
{
color: #f68913;
font-size: 10px;
margin-top: 30px;
text-align: center;
}Soyez indulgent ça ne fait que 3 semaines max que je pratique le code, j'en suis encore à modifier des gabarits existant donc question sémantique c'est pas encore gagné... Mais si vous pouviez m'aider je suis à court d'idées...
Modifié par pikachu (05 Jun 2006 - 22:29)
