Bonjour à tous,
J'ai fait un site la semaine dernière en le codant pour firefox. Lorsque je l'ai essayé sous ie bien sur c'était catastrophique. J'ai donc corrigé le css vendredi pour qu'il s'affiche de la même façon sur les 2 browsers.
J'ai fini le site samedi et j'ai donc retesté sous ie pour voir si ça marchait toujours. Et là surprise tout est décalé, coupé alors que j'ai rien touché au css à part l'ajout de style pour une classe de table. J'ai donc à nouveau refait le css pour essayer de corriger ça mais quelques pb que j'arrive pas à corriger restent donc jdemande votre aide :o
Le design du site sur firefox est celui-là : http://img522.imageshack.us/my.php?image=57452326.jpg
Le design auquel jsuis arrivé en corrigeant le max : http://img19.imageshack.us/my.php?image=93539726.jpg
Les problèmes sont marqués avec des flèches (seul le menu qui doit apparaitre est important le reste on peut osef cpas génant). Comme vous pouvez le voir le menu est littéralement coupé par la border du container
Le code d'une page basique minimale est :
Et le CSS :
Jsuis assez désespéré là, aucune idée d'où ca peut venir, j'ai testé des z-index, des position:absolute et relative, rien de ce que j'ai fait n'a marché
Si vous voyez ce qui cloche merci d'avance de m'aider
Modifié par datenshi (23 Feb 2009 - 19:39)
J'ai fait un site la semaine dernière en le codant pour firefox. Lorsque je l'ai essayé sous ie bien sur c'était catastrophique. J'ai donc corrigé le css vendredi pour qu'il s'affiche de la même façon sur les 2 browsers.
J'ai fini le site samedi et j'ai donc retesté sous ie pour voir si ça marchait toujours. Et là surprise tout est décalé, coupé alors que j'ai rien touché au css à part l'ajout de style pour une classe de table. J'ai donc à nouveau refait le css pour essayer de corriger ça mais quelques pb que j'arrive pas à corriger restent donc jdemande votre aide :o
Le design du site sur firefox est celui-là : http://img522.imageshack.us/my.php?image=57452326.jpg
Le design auquel jsuis arrivé en corrigeant le max : http://img19.imageshack.us/my.php?image=93539726.jpg
Les problèmes sont marqués avec des flèches (seul le menu qui doit apparaitre est important le reste on peut osef cpas génant). Comme vous pouvez le voir le menu est littéralement coupé par la border du container
Le code d'une page basique minimale est :
<!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" >
<head>
<title>Made my day !</title>
<meta name="robots" content="index, follow" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
</head>
<body>
<div id="conteneur">
<div id="en_tete">
<h1> Made My Day </h1>
</div>
<div id="speedbarre">
<ul class="barre">
<li><a href="index.php">Accueil </a><span>-</span></li>
<li><a href="puns_last.php">Derniers ajoutés </a><span>-</span></li>
<li><a href="puns_random.php">Aléatoires </a><span>-</span></li>
<li><a href="puns_top.php">Top 50 </a><span>-</span></li>
<li><a href="puns_flop.php">Flop 50 </a><span>-</span></li>
<li><a href="image_galerie.php">Galerie d'images </a><span>-</span></li>
<li><a href="tosee_actual.php">"Ce qu'on aimerait voir" actuel</a></li>
</ul>
</div>
<div id="menu">
<div class="categories">
<h4> Jeux de mots </h4>
<ul>
<li><a href="puns_last.php">Derniers ajoutés</a></li>
<li><a href="puns_submit.php">Ajouter un jeu de mot</a></li>
<li><a href="puns_random.php">Aléatoire</a></li>
</ul>
</div>
<div class="categories">
<h4> Images </h4>
<ul>
<li><a href="image_galerie.php">Galerie</a></li>
<li><a href="image_submit.php">Ajouter une image</a></li>
</ul>
</div>
<div class="categories">
<h4> Ce qu'on aimerait voir </h4>
<ul>
<li><a href="tosee_actual.php">Participer</a></li>
<li><a href="tosee_old.php">Voir les archives</a></li>
<li><a href="tosee_rules.php">Règles</a></li>
</ul>
</div>
<div class="categories">
<h4> Recherche </h4>
<form method="post" action="result_search.php">
<p><input type="text" name="search"/>
<select name="choice" id="choice">
<option value="pun">Jeux de mot</option>
<option value="scene">Ce qu'on aimerait voir</option>
</select>
<input type="submit" value="Go!" />
</p>
</form>
</div>
<div class="categories">
<h4> Publicité </h4>
</div>
</div>
<div id="corps">
<h1>Accueil</h1>
<p>Site en BETA !</p>
<p> Me signaler tous les bugs, fautes, pb d'ergonomie (genre à quelle page vous aimeriez revenir après tel action), design, etc svp</p>
</div>
</div>
</body>
</html>
Et le CSS :
body
{
margin: 10px 0;
text-align: center ;
background-image: url("img/fond2.jpg"); /* dégradé */
background-repeat: repeat-x;
background-color: #d8edca; /* Couleur de fin du dégradé */
}
#conteneur
{
width: 990px;
min-height: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
border : 2px dotted #57B1e5;
padding: 5px;
text-align: left;
}
a /* CSS des liens */
{
color: #2C485C;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
#en_tete h1 /* Titre du site*/
{
float: left;
width: auto;
height: 45px;
font-size: 2.4em;
font-weight: bold;
color: #2C485C;
border: 2px dotted #57B1e5;
-moz-border-radius: 5px; /* Arrondir les angles (CSS3) */
margin-left: 445px;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#speedbarre /* Speedbarre générale */
{
clear: left;
width: 930px;
height: 30px;
background-color: #ffffff;
border: 1px solid #4fabe1;
-moz-border-radius: 5px; /* Arrondir les angles (CSS3) */
margin-bottom: 15px;
margin-left:110px;
}
#speedbarre .barre /* Le texte de la speedbarre */
{
font-weight: bold;
list-style-type: none;
color: #2C485C;
margin: 0;
padding-top: 5px;
text-align: center;
}
#speedbarre ul li /* Afficher la liste en lignes */
{
display: inline;
}
#speedbarre span /* Pour les tirets séparateurs */
{
padding-left: 10px;
padding-right: 5px;
}
#menu /* Menus */
{
float: left;
width: 100px;
}
#menu .categories /* CSS du menu en lui-même (positionnement, aspect, ...)*/
{
border: 1px solid #4fabe1;
background-color: #FFFFFF;
-moz-border-radius: 5px; /* Arrondir les angles (CSS3) */
margin-bottom: 10px;
margin-left: -100px;
margin-right: 10px;
padding-bottom: 10px;
}
#menu h4 /* Titre des menus */
{
margin: 0;
padding-top: 5px;
text-align: center;
color: #2C485C;
font-size: 1.1em;
}
.categories ul /* Aspect des sous-titres ds les menus */
{
list-style-type: none;
padding: 0;
margin: 0px;
color:#2C485C;
text-align: center;
}
.categories li /* Espacement entre les sous titres */
{
margin-bottom: 5px;
margin-top: 5px;
}
form p
{
text-align: center;
}
#corps /* Positionnement du corps du site */
{
background-color: #ffffff;
border: 1px solid #4fabe1;
-moz-border-radius: 5px; /* Arrondir les angles (CSS3) */
padding: 5px;
margin-left: 111px;
margin-bottom: 20px;
margin-right: -50px;
text-align: center;
}
#corps h1 /* Titre de chaque page */
{
color: #2C485C;
font-weight: bold;
}
#galerie table /* Tableau de la galerie */
{
margin: auto;
}
#galerie td
{
width: 140px;
height: 110px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
text-align: center;
}
#galerie tr
{
height: 110px;
margin: 5px;
}
.bot /* Anti-bots */
{
visibility:hidden;
}
#pun table /* Tableau des jeux de mot */
{
border-collapse: collapse;
margin: auto;
}
#pun td
{
width: 800px;
border: 1px solid #cccccc;
text-align: left;
padding-left: 5px;
}
#comment table /* Tableau des comments des jeux de mot */
{
border-collapse: collapse;
margin: auto;
}
#comment td
{
width: 800px;
border: 1px solid #3c1265;
text-align: left;
padding-left: 5px;
}
Jsuis assez désespéré là, aucune idée d'où ca peut venir, j'ai testé des z-index, des position:absolute et relative, rien de ce que j'ai fait n'a marché
Si vous voyez ce qui cloche merci d'avance de m'aider
Modifié par datenshi (23 Feb 2009 - 19:39)