problème d'affichage

Sujet résolu

29 avril 2006 à 15:49:44

Bonjour.
Une image ne s'affiche pas correctement et je ne comprend pas pourquoi.
voici les codes:

<!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>
<link rel="stylesheet" media="screen" type="text/css" title="desing-ftp" href="style/desing-ftp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site Gekido - Conseil des ombre -</title>
</head>
<body>
<div class="banniere">
</div>
<div class="boutonforum">
</div>
<div class="menu">
<ul>
<li><a href="/news.php">News</a><br/></li>
<li><a href="/galerie">Galerie</a><br/></li>
<li><a href="/forum.php">Forum</a><br/></li>
<div class="gekido">
<li><a href="/membres.php">Membres</a><br/></li>
<li><a href="/téléchargement.php">Download</a><br/></li>
<li><a href="/inscription.php">Instances</a><br/></li>
<li><a href="/document.php">Docs importants</a> </li>
</div>
</ul>
</div>
<div class="Shoutbox">
<h4>Shoutbox</h4>
</div>
</body>
</html>

/* CSS Document */
* {
margin: 0px; /*pour enlever les marges par défaut qui posent beaucoup de problème*/
padding: 0px;/*pour enlever les marges par défaut qui posent beaucoup de problème*/
}
body
{
margin: auto;
color: #FFFFFF;
background-color: #000000;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
}
.boutonforum
{
display: block;
background-image: url(/style/image/forumchaine2.gif);
margin-left: 250px;
width: 125px;
height: 100px;
}
.banniere
{
display: block;
margin: auto;
width: 1000px;
height: 250px;
background-image: url(/style/image/banniere.gif);
}
.Shoutbox
{
display: block;
width: 150px;
height: 300px;
border: 3px outset white;
margin: 25px;
margin-left: 0px;
padding: 5px;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
a:visited , a
{
text-decoration: none;
color: #ff0000;
}
ul
{
list-style-type: none;
}
.menu
{
display: block;
width: 150px;
height: 300px;
border: 3px outset white;
margin: 25px;
margin-left: 0px;
text-align: center;
padding: 5px;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
background-image:url(/style/image/img_menu.gif);
padding-top: 75px;
}
.gekido
{
padding-top: 55px;
}

et voici le lien de mon site

mon image fait bien 150 en alrgeur et 300 en hauteur pourtant avec toshop.
j'ai rajouter un cadre et pas mit le no repeat exprés car normalement il n en aurait pas besoin.

Merci d'avance.

matchab

29 avril 2006 à 16:11:44

En fait tes marges (margin et padding) s'ajoutent aux dimentions de ton menu, donc il est normal que le bloc soit finalement plus grand que l'image de fond.

Deux solutions :
1/ tu modifie les dimentions de ton bloc pour que, en tenant compte des marges, il fasse finalement la bonne taille. Ici à vue de nez *calculcalcul*, tu devrais essayer width: 140px; et height: 225px;

2/ la solution que je te conseille, car plus claire, c'est de répartir tes propriétés sur tes différents blocs. Par exemple ici je ferais :

.menu {
width: 150px;
height: 300px;
margin: 25px;
margin-left: 0px;
background-image: url(/style/image/img_menu.gif);
border: 3px outset white;
}

.menu ul {
padding: 5px;
padding-top: 75px;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

Note que je n'ai pas testé, cependant cette technique marche assez bien en général...

Petit conseil aussi : essaye de classer tes propiétés CSS, et saute des lignes aussi parce que là, fiuu, c'est un peu le bordel sans vouloir te vexer

Taediosus

29 avril 2006 à 16:14:07

boh

oki je vais essayer cela, merci.