Problème de positionnement

24 mai 2006 à 12:46:04

Salut à tous

!
Alors en fait j'ai un léger ....problème. Une image vaut mieux que de longues explications alors voyez ici ce que je voudrait obtenir: http://fenix.bw.free.fr/test3/index.jpg
Et voyez ici ce que j'ai :
http://fenix.bw.free.fr/test3

Et enfin voila 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" lang="fr">
<head>
<title>FeNiX :: Starcraft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="FeNiX" href="design/rose-ghost/css.css" />
</head>
<body>
<div id="ban">
<div id="ban_gauche"></div>
   <div id="ban_droite"></div>
</div>
<div id="menu_gauche">
<div id="menu_haut_g1">
   <div class="titre_menu_g">
   Menu gauche
   </div>
   </div>
</div>
<div id="menu_droite">
<div id="menu_haut_d1">
   <div class="titre_menu_d">
   Menu droite
   </div>
   </div>
</div>
</body>
</html>

body
{
margin: auto;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: justify;
font-size: 12px;
}

#ban
{
height: 187px;
background: url("ban.jpg");
}

#ban_gauche
{
float: left;
width: 480px;
height: 187px;
background: url("ban_gauche.jpg") no-repeat;
}

#ban_droite
{
float: right;
width: 233px;
height: 187px;
background: url("ban_droite.jpg") no-repeat;
}

#menu_gauche
{
float: left;
top: 187px;
width: 131px;
background: url("menu_fondg.jpg");
}

#menu_droite
{
top: 187px;
float: right;
width: 131px;
background: url("menu_fondd.jpg");
}

#menu_titre_g1
{
float: left;
position: absolute;
top: 187px;
width: 131px;
height: 27px;
background: url("menu_titre.jpg");
background-repeat: no-repeat;
}

.titre_menu_g
{
position: absolute;
}

#menu_titre_d1
{
float: right;
position: absolute;
top: 187px;
width: 131px;
height: 27px;
background: url("menu_titre.jpg");
background-repeat: no-repeat;
}

.titre_menu_d
{
position: absolute;
}

En résumé le problème est que les images des menus ne s'affichent pas jusqu'en bas de la page (d'ailleurs elles ne s'affichent pas du tout :euh:

) et que les images de titre de menu ne s'affichent pas non plus.

Merci d'avance

Sitevolution

24 mai 2006 à 13:10:36

background-image !

TimPetricola

24 mai 2006 à 21:11:06

Merci mais c'est quoi la différence entre background et background-image ? j'ai essayé de mettre background-image a la place de background dans le #menu_titre_g1 et ca ne marche pas mieux

annex@l

24 mai 2006 à 21:12:48

excuse moi d'interrompre votre discussion,mais ce que tu veux faire,c'est insérer une image en fond de page ?

Sitevolution

24 mai 2006 à 21:38:15

c'est normal puisque ton id ne s'appelle pas menu_titre_g1 mais titre_menu_g1 !

TimPetricola

25 mai 2006 à 11:17:35

C'est pas bete ce que tu dit la :lol:

et en plus ca marche

!
Mais il me reste le problème d l'image du menu qui ne s'affiche pas jusqu'en bas de la page

Sitevolution

25 mai 2006 à 11:32:45

c'est sûr que si tu mets background-repeat : no-repeat; ça ne risque pas de se répéter !

TimPetricola

25 mai 2006 à 15:21:25

Bah euh c'est l'image du men uqui doit se repeter et il y a pas de no-repeat :

#menu_gauche
{
float: left;
top: 187px;
width: 131px;
background: url("menu_fondg.jpg");
}

#menu_droite
{
top: 187px;
float: right;
width: 131px;
background: url("menu_fondd.jpg");
}

Sitevolution

25 mai 2006 à 15:26:15

tu as laissé background !
c'est background-image je te l'ai déjà dit !

TimPetricola

27 mai 2006 à 12:13:31

J'ai changé pour mettre un background-image sur mes 2 menus mais on ne les voit toujours pas jusqu'en bas de la page (d'ailleurs on ne les voit pas du tout

).
Voici les morceaux de codes concernant ces menus :

<div id="menu_gauche">
<div id="menu_haut_g1">
   <div class="menu_titre_g">
   Menu gauche
   </div>
   </div>
</div>
<div id="menu_droite">
<div id="menu_haut_d1">
   <div class="menu_titre_d">
   Menu droite
   </div>
   </div>
</div>

#menu_gauche
{
float: left;
top: 187px;
width: 131px;
background-image: url("menu_fondg.jpg");
}

#menu_droite
{
top: 187px;
float: right;
width: 131px;
background-image: url("menu_fondd.jpg");
}

Sitevolution

27 mai 2006 à 13:23:53

à mon avis, le problème vient tout simplement du fait que il n'y rien d'écrit dans ton menu, donc il ne peut pas y avoir de fond !

tu peux essayer de remédier à cela avec height : 80%; par exemple !

TimPetricola

27 mai 2006 à 14:50:59

J'ai ecrit dans le menu et ca ne m'affiche pas le fond.

Mais j'ai une autre question : ne devrais-je pas plutot mettre tout mon menu avec une liste a puces ? En mettant les titres de menus avec une propriété dans le CSS pour qu'il yh a i l'aimge de fond. Ca éviterait de devoir mettre à chaque nouvelle section de menu un top: xxx px

Sitevolution

27 mai 2006 à 16:10:35

tu peux faire comme tu veux, mais je ne vois pas qu'elle problème il y aurait si tu donnais la même class à tous les blocs de ton menu !