Bien le bonjour, il y'a un moment déjà, j'avais créé un topic vous demandant votre avis sur mon site : www.toxicarea.net
Ecoutant vos conseil, j'ai décidé de remanier entièrement le code source.
Je suis parvenu à réduire considérablement le nombre de div cependant IE vient encore une fois perturber la fête.
Voici l'adresse de la nouvelle version : www.toxicarea.net/spread/tav6-3b/index.html
Voici deux images pour illustrer mon problème :
http://toxicarea.net/spread/tav6-3b/undermff.png
http://toxicarea.net/spread/tav6-3b/underie6.png
voici le code source :
et le css :
le bloc qui pose problème est le bloc #ad ..
J'ai tout essayé mais rien n'y fait : marges, bordures, positionnement,..
Merci d'avance
Modifié par Florent V. (13 Jul 2007 - 19:23)
Ecoutant vos conseil, j'ai décidé de remanier entièrement le code source.
Je suis parvenu à réduire considérablement le nombre de div cependant IE vient encore une fois perturber la fête.
Voici l'adresse de la nouvelle version : www.toxicarea.net/spread/tav6-3b/index.html
Voici deux images pour illustrer mon problème :
http://toxicarea.net/spread/tav6-3b/undermff.png
http://toxicarea.net/spread/tav6-3b/underie6.png
voici le code source :
<body>
<div id="header">
<a href="#" title="Aller à l'accueil">
<h1>ToxicArea</h1>
</a>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="subheader">
<form method="post" action="#">
<input type="text" name="search" id="searchfield" value="recherche" onfocus="this.value='';" />
<input type="submit" id="button" value="Go" />
</form>
</div>
<div id="global">
<div id="menu">
<h3 id="first">Tutoriels</h3>
<ul>
<li><a href="#">Créer un site Web</a></li>
<li><a href="#">PHP/MySQL</a></li>
<li><a href="#">Javascript</a></li>
<li class="whitespace"><a href="#">Photoshop</a></li>
<li><a href="#">3D Studio Max</a></li>
<li><a href="#">Flash</a></li>
<li class="whitespace"><a href="#">MAO</a></li>
<li class="whitespace"><a href="#">C/C++</a></li>
<li><a href="#">ASM</a></li>
</ul>
<h3>Informations</h3>
<img src="design/images/menu_illustration.png" style="padding-left: 6px" width="125px" height="61px" alt="" />
<ul>
<li><a href="#">Aide</a></li>
<li><a href="#">Contribuer</a></li>
<li><a href="#">Licence</a></li>
<li class="whitespace"><a href="#">Equipe</a></li>
<li><a href="#">A propos</a></li>
</ul>
<h3>Downloads</h3>
<ul>
<li><a href="#">Documentation</a></li>
<li class="whitespace"><a href="#">Musique</a></li>
<li><a href="#">Ressources</a></li>
<li><a href="#">Progammes</a></li>
</ul>
</div>
<div id="ad">
<h3>Publicité</h3>
<p>Une pub tellement géniale qu'elle est trop bien</p>
<p>Riche, complet et meilleur que jamais, WHISFISH ne contient que de bons aliments pour mon poisson rouge.</p>
<p>WHISFISH des boulettes de viande de chat pour votre poisson.</p>
<p>WHISFISH pour que votre poisson ait un beau poil.</p>
<div id="bottom"></div>
</div>
<div id="content">
<p>
Il s'agit de fournir la solution à un problème, la première étape consiste donc à analyser le problème,
c'est-à-dire en cerner les limites et le mettre en forme dans un langage descriptif, on parle généralement
d'analyse pour décrire le processus par lequel le problème est formalisé. Le langage de description
utilisé pour écrire le résultat de l'analyse est appelé algorithme. L'étape suivante consiste à traduire
l'algorithme dans un langage de programmation spécifique, il s'agit de la phase de programmation.
</p>
<p>
Le langage de programmation est l'intermédiaire entre l'humain et la machine, il permet d'écrire dans un
langage proche de la machine mais intelligible par l'humain les opérations que l'ordinateur doit effectuer.
Ainsi, étant donné que le langage de programmation est destiné à l'ordinateur, il doit donc respecter une
syntaxe stricte. Un algorithme peut toutefois aboutir à plusieurs programmes.
</p>
<p>
Le programme est ensuite transformé en langage machine lors d'une étape appelée compilation. La compilation
est une phase réalisée par l'ordinateur lui-même grâce à un autre programme appelé compilateur.
</p>
<p>
La phase suivante s'appelle l'édition de liens, elle consiste à lier le programme avec tous les éléments externes
(généralement des librairies auxquelles il fait référence).
</p>
</div>
</div>
</body>et le css :
/* Initialisation de toutes les propriétés */
* {
margin: 0px;
padding: 0px;
border: 0px;
font-family: Verdana, Arial, serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
/* Mise en page générale */
body {
background: url('../images/menu_background.png') #E4E9E3 repeat-y top left;
}
/* Header */
#header {
height: 122px;
background: url('../images/header_background.png') #202C38 repeat-x top left;
}
#header h1 {
float: left;
width: 166px;
height: 122px;
margin-left: -83px;
background: url('../images/header_toxicarea.png') no-repeat 83px 0px;
}
#header ul {
height: 122px;
margin-left: 26%;
background: url('../images/header_sphere.png') no-repeat top right;
}
#header ul li {
display: block;
float: left;
height: 122px;
width: 85px;
text-align: center;
list-style-type: none;
}
#header ul li a {
display: block;
float: left;
height: 45px;
width: 85px;
padding-top: 77px;
color: #FFFFFF;
background: url('../images/header_menubackground.png') no-repeat top left;
}
#header ul li a:hover {
background: url('../images/header_menubackground.png') #540508 no-repeat -85px 0px;
}
/* SubHeader */
#subheader {
clear: both;
height: 37px;
background: url('../images/subheader_background.png') #BFC4BE repeat-x top left;
}
#subheader form{
height: 37px;
background: url('../images/subheader_search.png') no-repeat top left;
}
#subheader #searchfield {
margin: 1px 0px 0px 129px;
padding: 2px 2px 2px 2px;
border: 1px solid #D1DBD2;
color: #151A1E;
font-size: 12px;
background: url('../images/subheader_searchfieldbackground.png') #D6D8D3 top left repeat-x;
}
#subheader #button {
height: 21px;
width: 30px;
border: 0px;
color: #FFFFFF;
font-size: 10px;
background: url('../images/subheader_searchfieldbutton.png') #202C38 top left no-repeat;
}
/* Global */
#global {
position: absolute;
top: 159px;
}
/* Glabal > Menu */
#menu {
float: left;
width: 138px;
background: url('../images/menu_background.png') #DBE0DA repeat-y top left;
}
#menu a {
color: #12151C;
}
#menu a:hover {
color: #611C17;
}
#menu h3 {
height: 18px;
margin: 0px 0px 6px 0px;
padding: 8px 0px 0px 20px;
color: #DEE3DC;
font-weight: bold;
background: url('../images/menu_title.png') #202D36 no-repeat top left;
}
#menu #first {
height: 18px;
padding: 4px 0px 0px 20px;
color: #DEE3DC;
font-weight: bold;
background: url('../images/menu_firsttitle.png') #202D36 no-repeat top left;
}
#menu ul {
margin: 0px 0px 0px 22px;
padding: 8px 0px 13px 0px;
}
#menu ul li {
list-style-image: url('../images/menu_centereddot.png');
}
#menu ul .whitespace {
margin: 13px 0px 0px 0px;
}
/* Glabal > Content */
#content {
margin: 0px 146px 10px 150px;
background: #CCD1CB;
}
/* Global > Ad */
#ad {
float: right;
width: 125px;
margin: 0px 10px 0px 10px;
background: url('../images/ad_background.png') #CCD1CB repeat-y top left;
}
#ad h3 {
height: 18px;
padding: 4px 0px 0px 10px;
color: #DEE3DC;
font-weight: bold;
background: url('../images/ad_title.png') #202D36 no-repeat top left;
}
#ad #bottom {
height: 2px;
background: url('../images/ad_bottom.png') #202D36 no-repeat top left;
}le bloc qui pose problème est le bloc #ad ..
J'ai tout essayé mais rien n'y fait : marges, bordures, positionnement,..
Merci d'avance
Modifié par Florent V. (13 Jul 2007 - 19:23)
