Affichage IE & FF

oh encore un pb comme c'est bizarre ^^

Sujet résolu

16 mars 2006 à 10:04:22

Bonjour

Encore besoin d'un petit coup de main, je comprend pas tout ...

Voilà le site en question http://perso.wanadoo.fr/montduplan/version3/index001.htm

/* Page CSS */
body{
margin: auto; /* Pour centrer la page */
margin-top: 20px; /* pour ne pas que ça colle en haut de page */
margin-bottom: 20px; /* idem */
margin-left: 50px;
margin-right: 50px;
background-image: url("img/fond_degrade_001.png");
background-repeat: repeat-y;

font-family: Verdana, Arial, serif;
text-align: justify;
font-size: 14px;
}

#m1{
float: left; /* Le menu flottera sur la gauche */
width: 150px; /* Taille du menu */
margin-top:35px;

text-align:center;
}

#m2{
float: right;
width: 150px;
margin-top:35px;

text-align:center;
}

#corps{
margin-left: 60px;
margin-top: 80px;
margin-bottom: 20px;
margin-right:60px;
padding: 10px;
padding-right: 110px;
padding-left: 90px;

color: black;
border: 1px dashed black;
background-image: url("img/fond_degrade.png");
background-repeat: repeat-y;
}

.menu1{
margin-top: 80px;
background-image: url("img/fond_degrade_001.png");
border: 1px dashed black;
margin-right: 5px;

text-align: center;
}

.menu2{
margin-top: 10px;
background-image: url("img/fond_degrade_001.png");
border: 1px dashed black;
margin-right: 5px;
}

.menu3{
margin-top: 10px;
background-image: url("img/fond_degrade_001.png");
border: 1px dashed black;
margin-right: 5px;
}

.menu4{
margin-top: 10px;
background-image: url("img/fond_degrade_001.png");
border: 1px dashed black;
margin-right: 5px
}

.menu5{
margin-top: 80px;
background-image: url("img/fond_degrade_002.png");
border: 1px dashed black;
margin-left: 5px;
}

.menu6{
margin-top: 10px;
background-image: url("img/fond_degrade_002.png");
border: 1px dashed black;
margin-left: 5px;
}

.menu7{
margin-top: 10px;
background-image: url("img/fond_degrade_002.png");
border: 1px dashed black;
margin-left: 5px;
}

.menu8{
margin-top: 10px;
background-image: url("img/fond_degrade_002.png");
border: 1px dashed black;
margin-left: 5px;
}

h3{
font-size: 15px;
}

h1{
font-size: 17px;
}

<body>
<div id="entete">


</div>

<div id="m1">

<div class="menu1">
<h3>Actualité</h3>
</div>

<div class="menu2">
<h3>Le Collège</h3>
</div>

<div class="menu3">
<h3>C.D.I.</h3>
</div>

<div class="menu4">
<h3>Les Projets</h3>
</div>

</div>

<div id="m2">

<div class="menu5">
<h3>Activités</h3>
</div>

<div class="menu6">
<h3>Manifestations</h3>
</div>

<div class="menu7">
<h3>S.E.G.P.A.</h3>
</div>

<div class="menu8">
<h3>C.R.O.P.S.</h3>
</div>

</div>

<div id="corps">


<h1>Bienvenue sur le site

du Collège Mont Duplan à Nîmes.</h1>

<p>De nombreuses pages de ce site sont encore en construction,
son évolution est permanente.</p>
<p>Bientôt, découvrez sur ce site :</p>
<p>Les informations Administratives<br>
L'ensemble des activités du Collège<br>
Des articles rédigés par les élèves</p>

<p>Si vous désirez reçevoir les nouvelles informations administratives,
pédagogiques du Collège Mont Duplan, directement par e-mail,
n'hésitez pas à remplir ce formulaire.</p>
<p>L'ancien site est toujours en ligne, vous pouvez vous y rendre en cliquant
<a href="http://perso.wanadoo.fr/montduplan/site/premiere.htm" target="_blank">ici</a>.</p>
<p>La navigation de ce site est optimisé avec les navigateurs Firefox Mozilla et Netscape.</p>

</div>

Maintenant je vous explique le soucis ... Sous IE, les menus des chaque coté sont a 10px de la bordure du corps du site, mais sous FF on dirait qu'ils sont à 80px au moins !
Je n'arrive pas a trouver ce qui cloche...
En fait je voudrais trouver le juste millieu entre les deux.

Et par la même occasion si vous pouviez me donner votre avis sur le site

soyez pas trop méchant quand même lol

Merci beaucoup !!!

Anonyme

16 mars 2006 à 10:11:06

je trouve que le dégradé du cadre centrale ne rend pas très bien autrement bonne idée de présentation juste les couleurs a revoir.

lydnos

16 mars 2006 à 10:13:43

Pourquoi n'utilises-tu pas les listes pour ton menu, car c'est pas très beau pour un codage en xhtml/css et de plus ceci allègerais ta feuille de style et ton code source en même temps :-)

AnSoFy

16 mars 2006 à 10:18:15

Oki pour les puces je vais voir ça !!

Pour le dégradé de couleur... c'est ma patronne qui veut un site avec beaucoup de couleur !!! perso j'aurais fait autrement MAIS je suis payé pour faire leur site ! Donc je suis les consignes mdr

Edit : Oki j'ai mis des puces mais le pb reste le même sous IE les menus sont hyper haut alors que sous FF ils sont a la bonne hauteur ... J'ai fait la mise a jour sur le serveur vous pouvez retourner voir le site

albundy

16 mars 2006 à 14:10:22

commence par donner des taille a tes blocs
une taille a ton body
une a ton corps

AnSoFy

16 mars 2006 à 15:15:03

En fait, quand je donne une taille au corps et au body, ça change pas grand chose sauf que sous IE le corps se retruve totalemetn en dessous des menus :s

/* Page CSS */

body

{
width: 950px;
margin-top: 20px; /* pour ne pas que ça colle en haut de page */
margin-bottom: 20px; /* idem */
margin-left: 10px;
margin-right: 10px;

background-image: url("img/fond_degrade_001.png");
background-repeat: repeat-y;

font-family: Verdana, Arial, serif;
text-align: justify;
font-size: 14px;

}

#m1
{
float: left; /* Le menu flottera sur la gauche */
margin-top:35px;

text-align:center;
}

#m1 ul li
{
width: 150px;
margin-top: 10px;
background-image: url("img/fond_degrade_001.png");
border: 1px dashed black;
margin-right: 5px;

text-align: center;
}

#m2

{
float: right;
margin:auto;
margin-top:35px;

text-align:center;
}

#m2 ul li
{
width: 150px;
margin-top: 10px;
background-image: url("img/fond_degrade_002.png");
border: 1px dashed black;
margin-left: 5px;

}

#corps
{
width: 520px;
margin-left: 90px;
margin-top: 80px;
margin-bottom: 20px;
margin-right:90px;

padding: 10px;
padding-right: 110px;
padding-left: 120px;

color: black;
border: 1px dashed black;
background-image: url("img/fond_degrade.png");
background-repeat: repeat-y;
}

h3
{
font-size: 15px;
}

h1
{
font-size: 17px;
}

ul
{
list-style-type: none;
}

strucky

16 mars 2006 à 19:57:16

Salut,

J'aurais procédé comme ceci,

- une position-relative sur ton corps
- 2 listes comme dis ci-dessus placées dans le corps, position absolute pour les deux avec left et right négatif.

AnSoFy

16 mars 2006 à 20:45:41

Oui mais si je mets les listes dans le corps, le menu ne ressortira pas comme cela se passe sous IE ... si ?

Edit : Je vais essayé ... mais comment ça en position absolute negative ?

AnSoFy

17 mars 2006 à 13:09:03

Personne n'a une idée ?

AnSoFy

18 mars 2006 à 12:30:41

Vous m'avez oublié ?

Riko

18 mars 2006 à 15:23:02

Salut pour faire ton design voici ce que j'aurais fait :
(ok sur IE et FF)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
body {
background-color: #CCFFFF;
width: 90%;/*pour décoller la page des bords*/
margin: auto;/*pour centrer la page*/
}

#menu_gauche {
width: 100px;/*largueur à définir selon la longueur du texte de li*/
float: left;
margin-top: 10px;
}

#global {
background-color: #FFCCCC;/*sert juste a voir ou est le bloc*/ /*tu peux enlever*/
padding: 10px;/*sert juste a voir ou est le bloc*/ /*tu peux enlever*/
}

#menu_droite {
width: 100px;
float: right;
margin-top: 10px;
}

#corps{
color: black;
border: 1px dashed black;
background-color: #CCCCFF;
margin-left: 50px;/*la moitié de width de menu_droite et menu_gauche*/
margin-right: 50px;/*idem*/
padding-left: 60px;/*pour que le texte dans le corps soit aligné dans tout le bloc*/
padding-right: 60px;/*idem*/
}

li {
list-style-type: none;/*suppression des puces*/
background-color: #FFFFCC;
width: 100%;/*pour occuper toute la largueur du bloc*/
margin-top: 20px;/*pour écarter les uns des autres*/
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
border: 1px dashed #000099;
}

ul {
margin: 0px;/*suppression des marges par défaut*/
padding: 0px;
}
</style>

</head>

<body>

<div id="global">
<div id="menu_gauche">
<ul>
<li>Actualités</li>
<li>Manifestations</li>
<li>Lien </li>
<li>Lien</li>
</ul>
</div>

<div id="menu_droite">
<ul>
<li>Actualités</li>
<li>Manifestations</li>
<li>Lien </li>
<li>Lien</li>
</ul>
</div>

<div id="corps">

<h1>Bienvenue sur le site du Collège Mont Duplan à Nîmes.</h1>

      <p>De nombreuses pages de ce site sont encore en construction, son évolution est permanente.</p>
<p>Bientôt, découvrez sur ce site :</p>
<p>Les informations Administratives. <br /> L'ensemble des activités du Collège <br /> Des articles rédigés par les élèves</p>
<p>Si vous désirez reçevoir les nouvelles informations administratives, pédagogiques du Collège
Mont Duplan, directement par e-mail, n'hésitez pas à remplir ce formulaire.</p>
      <p>L'ancien site est toujours en ligne, vous pouvez vous y rendre en cliquant ici</p>
<p>La navigation de ce site est optimisé avec les navigateurs Firefox Mozilla et Netscape.</p>
</div>
</div>

</body>
</html>

AnSoFy

18 mars 2006 à 15:39:38

Merci beaucoup !!! Trop bien

Affichage IE & FF

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Affichage IE & FF

oh encore un pb comme c'est bizarre ^^

Affichage IE & FF

Supprimer

Modérer

Signaler le message aux modérateurs