image ne se met pas oû je veux !!!

30 novembre 2005 à 12:44:45

Bonjour !
Je voudrais mettre une image en haut du <div> menu, et elle ne s'y met pas !
J'ai fait une bordure pour voir les limites du div, et je voudrais que mon image soit vraiment collée en haut, et elle se met à environ dix pixels en-dessous de la bordure. Comment ça se fait puisque je n'ai pas mis de padding ?
Merci d'avance !
L.V.

La page :

<!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>Essai PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body class="body">
<div id="entete"><img src="images/accueil-fr.gif"</div>
<div id="menu" class="menu"><img src="images/fongauch_haut.gif" />
<ul>
<li>Accessoires</li>
<li>Haute-couture</li>
<li>Joaillerie</li>
<li>Lingerie</li>
</ul>
</div>
<div id="corps">
<h1>fffffffffffffffff</h1>
<p>ggggggggggggg</p>
<p>Sgtr hjk</h1>

</div>
<div id="pied"></div>
</body>
</html>

le css:

body
{
width: 750px;
border: solid #666666 1px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: black;
}

p, h1, h2, li
{
color: white;
}

#menu
{
float: left;
width: 170px;
border: solid white 2px;
}

jp949

30 novembre 2005 à 12:52:26

salut.
peut-etre padding par default vu que c'est un float

fg63

30 novembre 2005 à 12:53:13

Ton image n'aurait pas une partie transparente au-dessus du contenu "réel" ?

Ca m'arrive souvent, et il suffit de rogner l'image dans un logiciel adéquat en général...

La vieille

30 novembre 2005 à 12:55:08

Pour l'image je suis sûre que non, j'ai bien vérifié, ça m'était déjà arrivé...
Il y aurait un padding par défaut pour float ?... Je vais essayer de trouver...

fg63

30 novembre 2005 à 12:58:33

Essaye tout bêtement en mettant un padding-top:0; à ton block menu...

jp949

30 novembre 2005 à 13:00:36

mets la en back-ground

fg63

30 novembre 2005 à 13:02:11

Citation : jp949

mets la en back-ground

Pas bête, en faisant attention qu'elle ne se répète pas bien entendu.

La vieille

30 novembre 2005 à 13:05:06

Tu veux dire ça ?

#menu
{
padding-top: 0px;
float: left;
width: 170px;
border: solid white 2px;

}

eh ben ça marche pas.
J'ai rien trouvé ds les tutos sur un padding par défaut

En background j'en ai déjà une, qui se répète sur toute la hauteur du div

jp949

30 novembre 2005 à 13:08:15

mets la en
background-image:url(omg.png);
background-repeat:no-repeat;
background-position: top center;
tu ajoutes un padding-top equivalent a la hauteur de ton image

La vieille

30 novembre 2005 à 13:10:13

Mais on peut pas mettre DEUX images en background !!! Si ?

jp949

30 novembre 2005 à 13:14:40

non mais la j'en vois pas dans ton #menu

La vieille

30 novembre 2005 à 13:18:29

C'est parce que je l'ai enlevé pour bien voir où se plaçait l'image du haut..
Je t'explique. J'ai découpé une image en trois parties, je veux que image_haut soit... en haut, image_bas soit en bas (si si !) et que image_milieu se répète sur toute la hauteur. Comment je dois m'y prendre ?

jp949

30 novembre 2005 à 13:21:47

alors dans ce cas fais 3 div un pour le haut 1 pour le bas et 1 pour centre le tout dans un global en float-left

La vieille

30 novembre 2005 à 13:25:47

"global" en float-left ? o_O

fg63

30 novembre 2005 à 13:27:39

<div>
image du haut
</div>

<div>
menu avec image de fond
</div>

<div>
image du bas
</div>

/!\ les 3 div ne doivent avoir ni margin ni padding en haut et en bas pour ê bien collées...

Anonyme

30 novembre 2005 à 13:33:54

Citation : La vieille

<div id="entete"><img src="images/accueil-fr.gif"</div>

Et la ? Il ne manquerais pas un ti kéke chose

La vieille

30 novembre 2005 à 13:44:47

J'ai honte....
Mais comme l'image s'affichait je ne l'avais pas vu... donc le div menu est remonté vers l'en-tête, mais ça ne change rien à mon problème : les images haut et bas ne se collent pas aux limites hautes et basses du div, et donc mon image du milieu se répète donc au-delà de ses deux copines... Je crois que je vais résoudre le problème en donnant une position à celles du haut et du bas.
En essayant la solution de fg63 (vive l'Auvergne ET la Bretagne !) j'ai le div de l'image_bas qui se met à droite de celui du centre... Je crois que c'est parce que je sais pas ce que c'est qu'un global

fg63

30 novembre 2005 à 13:48:03

euh... Tu entends quoi par global ????

Copie ton code ici, on pourra te dire comment mieux aligner tout ça...

La vieille

30 novembre 2005 à 13:51:32

Ben moi j'entends pas grand chose à vrai dire... c'est jp949 qui en parlait tout à l'heure...

<!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>Essai PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body class="body">
<div id="entete"><img src="images/accueil-fr.gif" /></div>

<div id="menu" class="menu"><img src="images/fongauch_haut.gif" />
<ul>
<li>Accessoires</li>
<li>Haute-couture</li>
<li>Joaillerie</li>
<li>Lingerie</li>
</ul><img src="images/fongauch_bas.gif" /></div>

<div id="corps">
<h1>fffffffffffffffff</h1>
<p>ggggggggggggg</p>
<p>Sgtr hjk</h1>

</div>
<div id="pied"></div>
</body>
</html>

le css

body
{
width: 750px;
border: solid #666666 1px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: black;
}

p, h1, h2, li
{
color: white;
}

#menu
{
background: url("images/fongauch_milieu.gif") repeat;
float: left;
width: 170px;

}

fg63

30 novembre 2005 à 13:54:52

Il voulait dire le tout dans une div globale !!

<div> <=========== float:left; pour elle !
<div>
haut
</div>

<div>
menu
</div>

<div>
bas
</div>
</div>

Anonyme

30 novembre 2005 à 13:59:08

<body class="body">
<div id="entete"><img src="images/accueil-fr.gif" /></div>
<div id="menu" class="menu"><img src="images/fongauch_haut.gif" />
<ul>
<li>Accessoires</li>
<li>Haute-couture</li>
<li>Joaillerie</li>
<li>Lingerie</li>
...

</body>
</html>

Bah il faut peu être penser à fermer ta balise <img /> non ?

La vieille

30 novembre 2005 à 14:04:50

Eh ben ça marche pas !

J'ai fait ça :

<div id="entete"><img src="images/accueil-fr.gif" /></div>
<div class="flottgauche">
<div><img src="images/fongauch_haut.gif" /></div>
<div id="menu" class="menu">
<ul>
<li>Accessoires</li>
<li>Haute-couture</li>
<li>Joaillerie</li>
<li>Lingerie</li>
</ul></div>
<div><img src="images/fongauch_bas.gif" /></div>
</div>

css:

.flottgauche
{
float: left;
}

image_bas est à droite du reste

et ds Firefox il y a un petit écart entre image_haut et image_milieu

EDIT : j'ai trouvé, il fallait que j'enlève float: left; de mon css #menu.
Le problème est donc résolu pour IE : l'affichage est impeccable.
Dans firefox c'est n'importe quoi : au moins 15px d'écart entre haut et milieu, et milieu et bas. Je croyais que c'était IE qui déconnait souvent

...