Prolonger un menu jusqu'au footer...

Cooment faire ?

20 janvier 2006 à 15:12:16

Salut, j'utilise PHP pour includer mon menu, mais il s'arrête avant le footer, étant donné que c'est moi qui ai tout fait, c'est pas bon, donc, voici ma apge et mon CSS :
Ma page

CSS :

/* CSS Document */
/*Design créé et découpé par JaKhris - JAKPRO Network Webmaster - http://www.jakpro.free.fr pour son frère Philippe - http://www.pogona.free.fr*/
body
{
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #FF0000;
font-family: Verdana, Arial, serif;
font-size: 10px;
}

img { border:0; }

/* L'en-tête */

#header
{
width: 800px;
height: 150px;
background-repeat: no-repeat;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
list-style-type:none;
background-image: url("../images/menu.jpg");
background-repeat: repeat-y;
font-family: Verdana, Arial, serif;
}

.element_menu
{
list-style-type:none;
padding: 0px;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

h1
{
text-align: center; /* Pour centrer le titre */
font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en Arial Black c'est mieux :o;) */
font-size: 20px;
}

p
{
font-family: Verdana, Arial, serif;
}

#corps
{
margin-left: 116px;
margin-bottom: 0px;
padding: 30px;
font-family: Verdana, Arial, serif;
font-size: 10px;
color: #FFFFFF;
background-color: #0011FF;
border: 3px;
border-color: black;
}

#footer
{
margin-top: 0px;
padding-top: 5px;
padding: 6px;
text-align: center;
color: #000000;
background-image: url("../images/footer.jpg");

}

Et mon menu :

<div id="menu">
<br /><br />
<li class="rubrique"> <a href="../index.php"><img src="http://www.pogona.free.fr/images/news.jpg" alt="News" /></a> </li>
<li class="rubrique"> <a href="../groupe.php"><img src="http://www.pogona.free.fr/images/groupe.jpg" alt="Le Groupe" /></a> </li>
<li class="rubrique"> <a href="../photos.php"><img src="http://www.pogona.free.fr/images/photos.jpg" alt="Photos" /></a> </li>
<li class="rubrique"> <a href="../concerts.php"><img src="http://www.pogona.free.fr/images/concerts.jpg" alt="Concerts" /></a> </li>
<li class="rubrique"> <a href="../multimedia.php"><img src="http://www.pogona.free.fr/images/multimedia.jpg" alt="Multimédia" /></a> </li>
<li class="rubrique"> <a href="../livredor.php"><img src="http://www.pogona.free.fr/images/livredor.jpg" alt="Livre d'Or" /></a> </li>
<li class="rubrique"> <a href="../forum/"><img src="http://www.pogona.free.fr/images/forum.jpg" alt="Forum" /></a> </li>
<br />
<li class="rubrique"> <a href="../partenaires.php"><img src="http://www.pogona.free.fr/images/partenaires.jpg" alt="Partenaires" /></a> </li>
<center>
<li> Notre bouton :</li>
<li> <img src="../images/bouton.gif" /></li>
<br />
<li> Nos partenaires :</li>
<li> <a href="http://perso.wanadoo.fr/asfalt/" target="_blank"><img src="../images/bouton_asfalt.gif" alt="Asfalt - Rock" /></a></li>
</center>
</div>

kabuto_fr

20 janvier 2006 à 15:37:15

Salut,

1er chose ton html n'est pas valide:
http://validator.w3.org/check?verbose=1&uri=http://www.pogona.free.fr/
et pour resoudre ton probleme englobe menu et corp dans un <div>.

@+

chriskirknielsen

20 janvier 2006 à 15:39:30

C'est normal il est un peu en PHP

Je met les deux dans un Div ?
OK je test

EDIT : Bah eum, kézako qui change ?
http://www.pogona.free.fr/index.php

jp949

20 janvier 2006 à 15:52:30

dans le div que tu as rajoute mets background-image:url(imagedumenu); bagkground-position:left; background-repeat:repeat-y;

kabuto_fr

20 janvier 2006 à 15:53:33

Re,
Je vois pas en quoi le faite d'avoir fait ton site en PHP t'empeche de respecter les normes HTML!
apres avoir corriger le html, la solution que je t'est donner fonctionne chez moi. Alors un peut de courage et moins de movaise fois.

@+

chriskirknielsen

20 janvier 2006 à 15:54:54

C'est presque ç mais il doit manquer bien 100px avant que ça ne s'aligne o_O

Lien : ici

Bah en PHP, quand il voit les codes PHP ça bug toujours :-°

Et je suis pas de mauvaise foi

akrokan

20 janvier 2006 à 15:55:31

Le fait que le site soit en php n'empeche pas la validation xhtml, le miens contient aussi du php et il est parfaitement vadide

chriskirknielsen

20 janvier 2006 à 15:57:19

Chai pas ça me dit "There is no "Alt="value" bidule chouette"...pas besoin d'eux tout de même !

kabuto_fr

20 janvier 2006 à 16:02:06

Bon ca vaut dire que tu doit specifier le parametre alt=" " a la balise <img />.
cette valeur est utiliser si le navigateur n'est pas graphique (lynx sous linux) ou si l'image est inacessible.
@+

chriskirknielsen

20 janvier 2006 à 16:06:55

Voilà j'ai mis le alt="" de partout...
Mais pour me menu alors ?
Le background je veux bien mais je sais pas comment on utilise de façob cohérente cette technique...

kabuto_fr

20 janvier 2006 à 16:10:56

Allez courrage plus que 30 erreurs.
Tu peut en eliminer 8 d'un coup en rajoutant un <ul> </ul>.
allez allez courrage c'est bientot fini.

http://validator.w3.org/check?verbose=1&uri=http://www.pogona.free.fr/

chriskirknielsen

20 janvier 2006 à 16:21:10

Eum, j'ai corrigé ça : 32 erreurs :s

jp949

20 janvier 2006 à 16:23:42

tu n'as pas vu le code que je t'ai donné pour faire allonger ton menu?

chriskirknielsen

20 janvier 2006 à 16:25:19

Si mais le BG ne se met pas correctement

kabuto_fr

20 janvier 2006 à 16:32:10

Bon allez je vais t'aider, car tu a cherchez a faire qqchose.
code du debut deu body corriger:

<body>
<div id="header">
<a href="http://www.pogona.free.fr"><img src="./images/header.jpg" alt="Pogona, Le Site" /></a>
</div>

<div id="bg">
<div id="menu">
<ul>
<li class="rubrique">
<a href="../index.php"><img src="http://www.pogona.free.fr/images/news.jpg" alt="News" /></a></li>
<li class="rubrique">
<a href="../groupe.php"><img src="http://www.pogona.free.fr/images/groupe.jpg" alt="Le Groupe" /></a></li>
<li class="rubrique">
<a href="../photos.php"><img src="http://www.pogona.free.fr/images/photos.jpg" alt="Photos" /></a></li>
<li class="rubrique">
<a href="../concerts.php"><img src="http://www.pogona.free.fr/images/concerts.jpg" alt="Concerts" /></a></li>
<li class="rubrique">
<a href="../multimedia.php"><img src="http://www.pogona.free.fr/images/multimedia.jpg" alt="Multimédia" /></a></li>
<li class="rubrique">
<a href="../livredor.php"><img src="http://www.pogona.free.fr/images/livredor.jpg" alt="Livre d'Or" /></a></li>
<li class="rubrique">
<a href="../forum/"><img src="http://www.pogona.free.fr/images/forum.jpg" alt="Forum" /></a></li>
<li class="rubrique">
<a href="../partenaires.php"><img src="http://www.pogona.free.fr/images/partenaires.jpg" alt="Partenaires" /></a></li>
<li> Notre bouton :</li>
<li> <img src="../images/bouton.gif" alt="Bouton du site de Pogona" /></li>
<li> Nos partenaires :</li>
<li> <a href="http://perso.wanadoo.fr/asfalt/"><img src="../images/bouton_asfalt.gif" alt="Asfalt - Rock" /></a></li>
</ul>
</div>

un poile de CSS pour fair jolie.

li
{
list-style-type:none;
padding: 0px;
margin-bottom: 20px; /* Pour éviter que les elements du menu ne soient trop colles */
}

chriskirknielsen

20 janvier 2006 à 16:37:30

Merci, maintenant, y'a juste le menu en décalage

et qui va sur le footer

kabuto_fr

20 janvier 2006 à 16:42:40

C'est vrai mais maintenant tu n'as plus que 20 erreur donc 12 de corriger c'est pas mal.

vire .element_menu qui ne sert a rien.
dans le html la class rubrique ne sert a rien non plus.
vire la ligne list-style de #menu(#menu est un div donc une balise block et non list).
met :

ul
{margin: 0;
padding: 0;}

chriskirknielsen

20 janvier 2006 à 16:47:25

Merci bien de ton aide

Maintenant, ça s'arrête net au bouton vert du menu (en bas)

kabuto_fr

20 janvier 2006 à 16:52:19

dans #footer rajoute
clear: both;

chriskirknielsen

20 janvier 2006 à 17:00:17

Nan, toujours pas

EDIT : Dans le CSS j'ai viré #bg :euh:

kabuto_fr

20 janvier 2006 à 17:06:24

il y a encore des erreur dans ton html, corige les.

chriskirknielsen

20 janvier 2006 à 17:09:50

Je les corrigerai plus tard, car là lé découpe doit être finie avant ce soir !

Et un grand merci pour ton aide !

akrokan

20 janvier 2006 à 17:12:12

Focalises toi en premier à corriger les erreurs de ton code xhtml avant de t'ennerver sur ton soucis de menu / footer

chriskirknielsen

20 janvier 2006 à 17:34:28

Oui mais les bugs, c'est des balises non-fermées qui le sont

Bon pour le menu qui déscend je verrai...si j'y arrive :euh:

EDIT : J'ai mis des bordures, je pourrai faire mieux mais j'y arrive pas

Merci de votre aide quand même