Problème de design css

pas pareil sous IE et Firefox ...

3 mai 2006 à 9:59:53

Voilà, alors j'ai commencé le design de mon site sur un ordinateur n'ayant pas firefox, donc je regardais le résultat sous IE, et quel suprise je n'ai pas en rentrant chez moi et en voyant quelque truc tout moche sous Firefox ?
Le contraire ne m'eut pas surpris mais dans ce sens je comprend plus rien surtout que j'ai utilisé des instructions css simple (pas de choses clignotant, de float relatif ni rien) !
Alors je vous mets les deux screen shots :
IE
Image utilisateur

Firefox

Donc le défaut se situe au niveau du menu !
Si quelqu'un peut m'aider !!!
Je poste mon code css :

/*Le 'body' : fond, etc.*/
body
{
background-image : url("img/fond.jpg");
background-repeat : repeat;
}

/*le 'header' : logo, bannière, etc.*/
#header
{
height : 160px;
width : 95%;
margin : 10px 2.5%;
margin-top : 40px;
padding : 0px 20px;
background-image : url("img/fond_header.jpg");
background-repeat : no-repeat;
border : 5px #660000 outset;
}

#header .logo
{
float : left;
margin : 5px 0px;
}

/*le corps*/
#corps
{
width : 95%;
padding : 30px 20px;
margin : 20px 2.5%;
background-color : #f7fbce;
border : 3px #660000 solid;
font-family : "Comic sans MS", "Times new roman", serif;
}
#corps h2
{
font-weight : bold;
text-decoration : underline;
font-family : Arial, serif;
text-align : center;
}
#corps h3
{
font-family : "Arial black", serif;
font-style : italic;
border-bottom : 1px #d5ea4b solid;
border-left : 1px #d5ea4b solid;
}
#corps h4
{
font-family : "Times new roman", serif;
}
.souligné
{
text-decoration : underline;
}
.légende
{
font-size : 0.7em;
font-style : italic;
font-family : Arial;
text-align : center;
}
.img_centrée
{
text-align : center;
}

/*le menu*/
#menu ul
{
list-style-type : none;
}
#menu li
{
float : left;
padding : 0px 20px;
margin : 5px 2px;
font-variant : small-caps;
border : 1px black dashed;
}
#menu
{
width : 95%;
height : 30px;
margin : 5px 2.5%;
margin-bottom : 50px;
background-image : url("img/fond_menu.jpg");
background-repeat : no-repeat;
padding : 0px 20px;
border : 2px #686a00 solid;
}
#menu a
{
text-decoration : none;
color : #d6a400;
}

/*le 'footer'*/
#footer
{
height : 50px;
width : 40%;
margin : 20px 30%;
margin-top : 50px;
background-color : #f7fbce;
font-size : 0.7em;
border : 1px black solid;
text-align : center;
}

jp949

3 mai 2006 à 10:05:56

il aurait fallu aussi le code html .
Mais dans 1er temps a vue d'oeil tu as utilisé un <p> ou <ul> pour faire ton menu , il faut mettre les margin:0; de ce bloc

Pierre89

3 mai 2006 à 10:11:29

Ah merci nikel ça marche enfin ya encore pas exactement la même apparences mais sinon c'est bon je vais pas faire du chichi ! Une autre question : j'ai fais un design extensible en suivant les conseils d'un tuto de ce site, mais comment ça se fait que j'ai une barre horizontale alors en bas (cf screenshots) ?
Voici mon code htlml :

<!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="chess.css" />
</head>
<body>
<div id="header">
<img src="img/logo.jpeg" alt="Logo du site" class="logo" />

</div>

<div id="menu">
<ul>
<li><a href="index.html" class="menu_bout_ligne_gauche">Accueil</a></li>
<li><a href="cours.html">Cours</a></li>
</ul>
</div>

<div id="corps">
<h2>Apprendre à jouer aux échecs, c'est pas voué à l'échec !</h2>
<p><br /></p>
<p>
Vous vous dites que les échecs, ça à l'air vraiment bien et même passionnant ? Oui mais pour
que Kasparov deviennent votre idole, faudrait que vous sachiez jouer ... Ah oui mais c'est
compliqué les échecs, j'y arriverais jamais ! Et bien chers internautes laissez moi vous dire
que vous vous trompez royalement <span class=":p"></span> ! Mais ne vous inquiétez, pas vous êtes
tombés sur le bon site <span class="^^"></span> !!!<br />
Bienvenue sur ... Ce site se propose de vous apprendre à joueur aux échecs en vous considérant
comme quelqu'un qui n'a jamais vu un échiquier de sa vie ! On part des bases, pour arriver à
élaborer une stratégie ... et plus si affinités <span class="^^"></span> !<br />
Vous êtes prêts ? Alors rendez-vous à la section <a href="cours.html">Cours</a>.
</p>
</div>

<div id="footer">
<p>Ici c'est la fin de la page, il faut remonter !</p>
</div>
</body>
</html>

strucky

3 mai 2006 à 11:01:57

Slt,

Une petite addition :

#header
{
height : 160px;
width : 95%;
margin : 10px 2.5%;
margin-top : 40px;
padding : 0px 20px;
background-image : url("img/fond_header.jpg");
background-repeat : no-repeat;
border : 5px #660000 outset;
}

width + margin + padding + border
95% + ( 2.5% * 2 ) + ( 20px * 2 ) + ( 5px * 2 ) = + de 100%

Pierre89

3 mai 2006 à 11:12:07

hum oui bon d'accord vive les questions cons !
Merci

Pierre89

4 mai 2006 à 10:01:33

euh encore un léger problème (le dernier j'espère

)

Bon alor voilà, je vous met mon code CSS (enfin un bout) :

p .legende
{
font-size : 0.7em;
font-style : italic;
font-family : Arial;
text-align : center;
}

un bout de mon code html :

<span class="legende">Ceci est un ... échiquier ! Impressionant non <span class=":p"></span>?</span>

Pour infos, mon span se trouve dans un p, donc pas d'erreur de block et inline.

et enfin une capture d'écran (enfin un bout encore une fois) :
Image utilisateur

Alors comment ça se fait que c'est pas centré ?

jp949

4 mai 2006 à 10:21:28

est-ce que dans ton <p>le texte est aligné centré?
sinon Pour aligner ton span centré il faur faire
margin:0 50%;

Pierre89

4 mai 2006 à 10:32:32

Nan il ne l'est pas je voudrait que ça soit que cette parti là, oui j'avais pensé au margin aussi (car faut que je centre l'image aussi) mais ça aurait été plus simple avec text-align !
Merci

jp949

4 mai 2006 à 11:00:52

tu peux pas ou alors avec display:block; mais pas sur