Problème avec un design

Je voudrais que le menu soit aussi haut que le corps

Anonyme

5 octobre 2006 à 18:45:55

Bonjour,

Je suis en train d'adapter un design en xHTML/CSS.
Design avec tableaux
Design xHTML/CSS
J'aimerais que la barre marron du menu de gauche continue jusqu'à la fin du corps. Sur le design avec tableaux, la barre va jusqu'en bas mais pas avec le design xHTML/CSS.

Voici le code xHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <link media="all" href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">


<div id="menu">
<a href="index.html"><img src="images/accueil_menu.jpg" alt="Accueil" /></a>
   <a href="presentation.html"><img src="images/presentation_menu.jpg" alt="Présentation" /></a>
   <a href="galerie.html"><img src="images/galerie_menu.jpg" alt="Galerie" /></a>
   <a href="projets.html"><img src="images/projets_menu.jpg" alt="Projets" /></a>
   <a href="contact.html"><img src="images/contact_menu.jpg" alt="contact" /></a>
</div>



<div id="corps">
<img src="images/index.jpg" alt="index" />
</div>
</div>

</body>
</html>

Et le CSS :

body
{
width: 632px;
margin: auto;
background-color: #FFFFFF;
}
#conteneur
{
width: 632px;
background-color: #FFFFFF;
}
#corps
{
width: 500px;
margin-left: 134px !important;
margin-left: 0px;
position: absolute;
top: 0px;
}
#menu
{
width: 132px;
background-color: #FFFFFF;
background-image: url("images/fond_menu.jpg");
background-repeat: repeat-y;
float: left;
margin: 0px;
}
img
{
border: 0px;
}

Auriez-vous une solution?

Merci.

zeunyton

5 octobre 2006 à 18:56:00

si ces pour ton menu il faut que tu donne un heigth d'une hauteur fixe que tu donne toi même je ne vois pas beaucoup d'autre solution a ton
a moins que donner la longeur fixe a une fine image de 1px sur la longueur a toi de vois la meilleur solution a ton probléme.

Obli

5 octobre 2006 à 19:06:58

On peut faire des tableaux en xHTML :-°

der_shadow

5 octobre 2006 à 19:23:07

Salut,
Je confirme pour la Height de ton menu.
Soit :

#menu
{
width: 132px;
height: 576px;
background-color: #ffffff;
background-image: url("images/fond_menu.jpg");
background-repeat: repeat-y;
float: left;
margin: 0px;
}

Anonyme

5 octobre 2006 à 19:24:10

Citation : Oblivion

On peut faire des tableaux en xHTML

Je n'ai pas dit le contraire.

Pour la hauteur fixe, justement j'aimerais qu'elle ne le soit pas...

Car le corps est extensible. La solution aurait été trop simple...

har1bo

5 octobre 2006 à 19:48:01

Salut!

Mets un div conteneur,qui englobe du menu au pied de page,et à ce div tu appliques l'image de fond,qui va se repeter jusqu'en bas

Bonne continuation

Anonyme

5 octobre 2006 à 20:05:18

Citation : .#har1bo`

Salut!

Mets un div conteneur,qui englobe du menu au pied de page,et à ce div tu appliques l'image de fond,qui va se repeter jusqu'en bas

Bonne continuation

J'ai déjà essayé.

J'ajoute ça au div conteneur et ça donne rien :

background-image: url("images/fond_menu.jpg");
background-repeat: repeat-y;
height: 100%;

har1bo

5 octobre 2006 à 20:09:29

Re!

Pas besoin de height pour ça: il prend aautomatiquement tout la hauteur.J'avais fais ça pour un site et ça aavait marché

Anonyme

5 octobre 2006 à 20:11:07

Toujours pas...

har1bo

5 octobre 2006 à 20:14:50

Et si tu enleves la largeur?

Anonyme

5 octobre 2006 à 21:00:30

Citation : .#har1bo`

Et si tu enleves la largeur?

Non.

YoyoS

5 octobre 2006 à 21:07:50

background-repeat: repeat; et si tu mets juste ca ?

Anonyme

5 octobre 2006 à 21:11:25

Citation : YoyoS

background-repeat: repeat; et si tu mets juste ca ?

Non.

Candygirl

5 octobre 2006 à 23:04:26

L'idée de Haribo est effectivement bonne.

Pourquoi mettre un position:absolute à ton #corps ?

C'est à cause de lui que cela ne fonctionne pas; ton corps en absolu est hors du flux et donc ton conteneur ne contient plus que ton menu lui-même en float, donc autant dire qu'il n'a pas de hauteur

Anonyme

8 octobre 2006 à 17:24:58

Effectivement, cela marche maintenant.
Mais si j'avais mis un position: absolute au #corps c'est car sous IE, le corps se met en-dessous du menu : regardez par vous même.

body
{
width: 632px;
margin: auto;
background-color: #FFFFFF;
}
#conteneur
{
width: 632px;
background-color: #FFFFFF;
background-image: url("images/fond_menu.jpg");
background-repeat: repeat-y;
}
#corps
{
width: 500px;
margin-left: 132px;
}
#menu
{
width: 132px;
background-color: #FFFFFF;
background-image: url("images/fond_menu.jpg");
background-repeat: repeat-y;
float: left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="conteneur">


<div id="menu">
<a href="index.html"><img src="images/accueil_menu.jpg" alt="Accueil" /></a>
   <a href="presentation.html"><img src="images/presentation_menu.jpg" alt="Présentation" /></a>
   <a href="galerie.html"><img src="images/galerie_menu.jpg" alt="Galerie" /></a>
   <a href="projets.html"><img src="images/projets_menu.jpg" alt="Projets" /></a>
   <a href="contact.html"><img src="images/contact_menu.jpg" alt="contact" /></a>
</div>



<div id="corps">
<img src="images/index.jpg" alt="index" />
</div>
</div>

</body>
</html>

Auriez-vous une solution pour régler ce nouveau problème?

Merci.

zeunyton

8 octobre 2006 à 17:35:04

oui tu dois mettre ton corps en

float:right;

est normalement il va se placer tout seul.

Anonyme

8 octobre 2006 à 18:31:41

Citation : Gnomyphore

oui tu dois mettre ton corps en
float:right;

est normalement il va se placer tout seul.

Non, déjà essayé, ça ne marche pas. Merci quand même.
Une autre idée?