Un design à se tirer les cheveux.

Design extensible

Sujet résolu

22 mars 2006 à 18:42:17

Bonjour,
Je voudrai créer un design extensible pour mon site mais le problème vient encore de IE. :colere:

Je vous laisse regarder la page de mon site sous IE. (Bannière coupée, cadres des menus tout petits)
Et regardez le aussi avec Firefox avec le design tout comme je le voudrai.

Pouvez-vous m'éclairer pour pouvoir un design marchant sur tous les naviguateurs.

Voici mon code source :

Citation : Code Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css"
title="Pes-Modifier" href="design_mecanique.css">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<style type="text/css">body
{
width: auto;
margin: auto;
margin-top: 20px;
margin-bottom: 20px; background-color: rgb(232, 240, 244);
}
#en_tete
{
width: 71.5%;
height: 120px;
margin-left: 15%;
background-image: url("http://img452.imageshack.us/img452/9934/banniere1gt.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 1px solid black;
}
#bande
{
width: 71.5%;
margin-left: 15%;
background-image: url("http://img79.imageshack.us/img79/6113/bande6qx.gif");
background-repeat: no-repeat;
background-color: rgb(187, 225, 243);
margin-bottom: 10px;
border: 1px solid black;
}
#menu
{
float: left;
width: 10%;
}
.element_menu
{
background-color: rgb(255, 255, 255);
background-image: url("http://img128.imageshack.us/img128/134/haut3cx.gif");
background-repeat: repeat-x;
border: 1px solid black;
margin-bottom: 20px;
margin-left: 28.5%;
width: 100%;
}
.element_menu ul
{
padding: 0px;
padding-left: 10px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: rgb(0, 0, 0);
}
.element_menu a:hover
{
background-color: rgb(255, 255, 255);
color: black;
}
#corps
{
width: 71%;
margin-left: 15%;
margin-bottom: 20px;
padding: 3px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
background-image: url("http://img128.imageshack.us/img128/134/haut3cx.gif");
background-repeat: repeat-x;
border: 1px solid black;
}
#corps h1
{
color: rgb(0, 0, 0);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
padding-left: 30px;
color: rgb(0, 0, 0);
text-align: left;
}
#pied_de_page
{
padding: 5px;
text-align: center;
color: rgb(0, 0, 0);
width: 100%;
height: 15px;
}
.element_copyright
{
background-color: rgb(232, 240, 244);
margin-bottom: 20px;
}
.element_copyright a
{
color: rgb(0, 0, 0);
}
.element_menu a:hover
{
color: black;
}
</style>
<title>Pes-Mode-Modifier</title>
</head>
<body>
<div id="en_tete"><br>
</div>
<div id="bande">
<div style="padding: 6px; text-align: center;">Accueil
| Forum | Contacts | Devenir
Partenaire</div>
</div>
<div id="menu">
<div class="element_menu">   
Categorie 1<br>
<ul>
<a href="page1.html">Lien</a><br>
<a href="page2.html">Lien</a><br>
<a href="page3.html">Lien</a><br>
</ul>
</div>
<div class="element_menu">   
Catégorie 2<br>
<ul>
<a href="page4.html">Lien</a><br>
<a href="page5.html">Lien</a><br>
<a href="page6.html">Lien</a><br>
</ul>
</div>
</div>
<div id="corps"><br>
Içi se trouvera notre texte ! Non sans blague ???<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="pied_de_page">
<div class="element_copyright">Copyright © 2005 <a
href="http://www.pes-modifier.c.la/">Pes-Modifier</a> -
Tout droits réservés -
Design by <a href="mailto:scanari85@hotmail.fr">Scanari85</a></div>
</div>
</body>
</html>

PS : J'ai déjà regardé le tuto sur ce site.

PS2 : J'oublai, voici le lien de ma page => http://www.pesmodifier.rf.lv/

strucky

22 mars 2006 à 19:46:42

Salut,

Abandonnes les pourcentages, sinon tu va avoir de gros problèmes...

D'ailleurs, regardes avec une petite résolution avec FF, et tu verras que le problème n'est pas spécifique à IE.

pascall

22 mars 2006 à 19:53:27

salut
tiens essaies comme ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" media="screen" type="text/css" title="Pes-Modifier" href=".css">

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<style type="text/css">
body
{
width: 98%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px; background-color: rgb(232, 240, 244);
}
#en_tete
{
width: 800px;
height: 120px;
margin-left:;
background-image: url("http://img452.imageshack.us/img452/9934/banniere1gt.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 1px solid black;

}
#bande
{

margin-left: 150px;
background-image: url("http://img79.imageshack.us/img79/6113/bande6qx.gif");
background-repeat: no-repeat;
background-color: rgb(187, 225, 243);
margin-bottom: 10px;
border: 1px solid black;
}
#menu
{
float: left;
width: 110px;
margin-left: 10px;
}
.element_menu
{
background-color: rgb(255, 255, 255);
background-image: url("http://img128.imageshack.us/img128/134/haut3cx.gif");
background-repeat: repeat-x;
border: 1px solid black;
margin-bottom: 20px;

width: 100%;
}
.element_menu ul
{
padding: 0px;
padding-left: 10px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: rgb(0, 0, 0);
}
.element_menu a:hover
{
background-color: rgb(255, 255, 255);
color: black;
}
#corps
{

margin-left: 150px;
margin-bottom: 20px;
padding: 3px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
background-image: url("http://img128.imageshack.us/img128/134/haut3cx.gif");
background-repeat: repeat-x;
border: 1px solid black;
}
#corps h1
{
color: rgb(0, 0, 0);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
padding-left: 30px;
color: rgb(0, 0, 0);
text-align: left;
}
#pied_de_page
{
padding: 5px;
text-align: center;
color: rgb(0, 0, 0);
width: 100%;
height: 15px;
}
.element_copyright
{
background-color: rgb(232, 240, 244);
margin-bottom: 20px;
}
.element_copyright a
{
color: rgb(0, 0, 0);
}
.element_menu a:hover
{
color: black;
}
</style>
<title>Pes-Mode-Modifier</title>

</head>

<body>
<script type="text/javascript" src="http://publicite.webzzanine.net/showpubnetavenir.php"></script>

<div id="en_tete"><br>

</div>

<div id="bande">
<div style="padding: 6px; text-align: center;">Accueil
| Forum | Contacts | Devenir
Partenaire</div>

</div>

<div id="menu">
<div class="element_menu">   
Categorie 1<br>

<ul>

<a href="page1.html">Lien</a><br>

<a href="page2.html">Lien</a><br>

<a href="page3.html">Lien</a><br>

</ul>

</div>

<div class="element_menu">   
Catégorie 2<br>

<ul>

<a href="page4.html">Lien</a><br>

<a href="page5.html">Lien</a><br>

<a href="page6.html">Lien</a><br>

</ul>

</div>

</div>

<div id="corps"><br>

Içi se trouvera notre texte ! Non sans blague ???<br>

<br>

<br>

<br>

<br>

<br>

<br>

</div>

<div id="pied_de_page">
<div class="element_copyright">Copyright © 2005 <a href="http://www.pes-modifier.c.la/">Pes-Modifier</a> -
Tout droits réservés -
Design by <a href="mailto:scanari85@hotmail.fr">Scanari85</a></div>

</div>

</body>
</html>

d'autre part je ne comprend pas pourquoi tu utilise une feuille de style et un style incorporé. les 2 reprenant les memes choses;

de plus ta banniere fait 800px de large.
en 800x600, ca va à peu près mais dans d'autres definitions elle sera sur la gauche et fera toujours 800px.
j'ai essayé avec une longueur en % mais c'est pas terrible
à plus.

noodles

22 mars 2006 à 20:15:40

bon, écoute, ton code n'est pas faux.

Maintenant, je veux juste te donner un bon conseil. Plutôt que de partir directement vers ton code quand tu azs une idée, réfléchisz d'abord à celle-là. J'entends par là qu'il faut prendre du recul par rapport à ce qu'on fait.

Ici, tu utilises des % parce que tu veux faire un design extensible. c'est une erreur

faut juste remarquer que par défaut, ton bloc est extensible. il vaut mieux jouer sur çà. Tu n'as alors plus qu'à donner des marges extérieures à ton bloc.
Pour çà, tu peux prendre exmeple su lrs mises en page de fblog : http://www.fblog.fr

réfléchis comme çà, tu y arrivers bien mieux.
hf gl