Menus

A droite et à gauche

28 août 2006 à 14:21:16

Bonjour,

j'ai voulu créer dans mon site un menu à gauche et autre à droite, mais lorsque je visualise le contenu j'ai le corps et le menu de droite qui sont en-dessous le menu de gauche, que faire

(ci-dessous code css)
Merci et à bientôt.

body
{
width: 800px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #FFFFFF;
}

.imageflottante
{
float: right;
margin: 10px;
}

p
{
font-size: 14px;
}

h3
{
font-size: 14px;
color: #5493B4;
}

h4
{
font-size: 12px;
color: #006699;
text-decoration: underline;
}

a img
{
border: none;
margin-left: 5px;
margin-bottom: 5px;
}

#en_tete
{
width: 760px;
height: 120px;
background-image: url("images/accueil/titremooviscale.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menugauche
{
position: absolute;
right: 10px;
font-family: Tahoma, "Times New Roman", serif;
width: 120px;
margin-left:5px;
margin-right:5px;
}

#menugauche h5
{
height: 20px;
margin: 0;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 0px;
text-align: center;
vertical-align: center;
font-size: 14px;
color: white;
background-color:#5493B4;
border:2px solid #006699;
}

#menugauche ul
{
list-style-type: ;
list-style-position: inside;
font-size: 12px;
padding: 0;
margin-left: 5px;
}

#menugauche .corpsmenugauche
{
background-color:#D1D7DC;
padding: 0;
margin: 0;
margin-bottom: 5px;
border: 2px solid #006699;
border-top:1px solid #006699;
}

#menugauche .corpsmenugauche a
{
text-decoration: none;
color: #5493B4;
}

#menugauche .corpsmenugauche a:hover
{
text-decoration: underline;
color: #FFA34F;
}

#menudroit
{
position: absolute;
right: 10px;
font-family: Tahoma, "Times New Roman", serif;
width: 120px;
margin-left:5px;
margin-right:5px;
}

#menudroit h5
{
height: 20px;
margin: 0;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 0px;
text-align: center;
vertical-align: bottom;
font-size: 14px;
color: white;
background-color:#5493B4;
border:2px solid #006699;
}

#menudroit ul
{
list-style-type: ;
list-style-position: inside;
font-size: 12px;
padding: 0;
margin-left: 5px;
}

#menudroit .corpsmenudroit
{
background-color:#D1D7DC;
padding: 0;
margin: 0;
margin-bottom: 5px;
border: 2px solid #006699;
border-top:1px solid #006699;
}

#menudroit .corpsmenudroit a
{
text-decoration: none;
color: #5493B4;
}

#menudroit .corpsmenudroit a:hover
{
text-decoration: underline;
color: #FFA34F;
}

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
font-family: "Comic Sans MS", "Times New Roman", serif;
text-align: justify;
color: black;
background-color: #EFEFEF;
width: 515px;
border: 2px solid #006699; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

Gregoo

28 août 2006 à 14:24:56

Salut,
voici une solution à ton problème concernant la structure :

.corps {
margin-left:140px;
margin-right:140px;
}
.droite {
float:right;
width:120px;
}
.gauche {
float:left;
width:120px;
}

<div class="gauche">Menu de gauche</div>
<div class="droite">Menu de droite</div>
<div class="corps">Corps de la page</div>

Cordialement,
Gregoo

Kanish

28 août 2006 à 14:30:32

Si tu utilises IE, c'est normal que tu ne voit pas les menus à gauche. Ce logiciel ne prend pas en compte l'attribut css float

Gregoo

28 août 2006 à 15:15:03

Citation : Kanish

Si tu utilises IE, c'est normal que tu ne voit pas les menus à gauche. Ce logiciel ne prend pas en compte l'attribut css float

Doh ! Depuis quand

Kanish

28 août 2006 à 22:20:36

bah je sais pas. j'aiavais fait ça au bahut sur IE 6 e ça avait pas pris en compte les float

C0c0

28 août 2006 à 22:33:09

Bien sur que si qu'il prend en compte les float :lol:

Par contre, clear: both bug un peu (pas rien que sous IE)

Bix

28 août 2006 à 22:34:48

Si IE prend tres bien en compte le float !!!
Si il n'a pas fonctionné c'est tout simplement que tu as mal codé ton css ou ton html...

Kanish

28 août 2006 à 23:25:17

bah j'ai pas compri pour quoi ça a planté ! j'ai copié-collé l'exemple de mateo ... donc euh

okens

28 août 2006 à 23:57:49

Omg,

Tu quoi ? hein ? o_O

Tu as fais copier/coller. :colere2:

C'est bien dit moi, c'est très simple le html pour toi, hop un petit copier/coller et après :

"Regardez ce que j'ai fais c'est beau, hein c'est MOI qu'il a fait

"

Ce genre de truc me dit qu'on ne devrait même t'aider.. :-°

http://www.encheres-cents.com - http://www.checkmycomposer.com

Kanish

29 août 2006 à 1:31:46

c'était juste un exo pour le collège... Si tu veux voir, mon site ressemble pas du tout à ça

et au passage, c'est pas moi qui demande de l'aide

ito25

29 août 2006 à 9:42:07

Bonjour,
Vous êtes bien gentil, mais pour en revenir à ma question, j'ai essayé ùais cela ne fonctionne toujours pas.... Au-secours.

Y'aurait-il une âme charitable pour me sortir de cette mélasse!!!!
En me corrigeant directement sur le code ci-dessus par exemple.... J'abuse. :-°

Riko

29 août 2006 à 10:14:57

Salut,
Tes deux menus doivent se suppersposés avec le css que tu as mis
car tu les as mis tous les deux a droite:

#menugauche
{
position: absolute;
/*right: 10px; */ /*ne serais pas plus logique de mettre left*/
left:10px;
font-family: Tahoma, "Times New Roman", serif;
width: 120px;
margin-left:5px;
margin-right:5px;
background-color: #FFCCCC;
}

cela devrait fonctionner si ton code html ressemble à :

<div id="menudroit">
<ul>
<li>lien</li>
</ul>
</div>

<div id="menugauche">
<ul>
<li>lien</li>
</ul>
</div>

<div id="corps">
<p>le texte</p>
</div>

Menus

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Menus

A droite et à gauche

Menus

Supprimer

Modérer

Signaler le message aux modérateurs