Partage

Inserer un menu à droite

1 2 >>

24 novembre 2005 à 20:42:17

Voilà c'est un peu le meme cas que dans un des topics ci-dessous ,j'ai 2 menus à gauche et j'aimerais en mettre un à droite ,je ne sais pas du tout comment proceder ,

Mon site

(Clic droit et afficher la source pour avoir mon code Html...)

Mon code Css

Je cherche juste à mettre un troisème menu à droite ,si vous pouvez faire une petite explication de comment proceder avec des codes Css et Html qui vont avec ce serait pas mal...

J'en profite pour tester les options du forum ,le SDZ m'épate ,j'aimerais tellement avoir un tel forum

</span>

Exca

24 novembre 2005 à 20:46:45

L'id menu2 tu dois le mettre au div du menu que tu veux mettre à droite.

Keumar

24 novembre 2005 à 20:49:00

Tu a juste a mettre ton menu dans un div "menu_droit" par exemple
et dans ton css tu fait float right et ca roule tout seul
A bientot
Keumar

VincentPierreK

24 novembre 2005 à 21:02:55

#menu
{
float: right;
width: 150px;
}

et le menu2 ne sert à rien dans le code de ton menu

Exca

24 novembre 2005 à 21:07:17

Il a mis l'id menu pour placer son menu à gauche.
C'est pour ça que l'id menu2 dans dans le css qu'il n'a pas exprimé sur son fichier html il doit le placer au div qu'il veut placer à droite(car il veut un menu à gauche et un autre à droite).

crazydips

24 novembre 2005 à 22:09:23

En meme temps je me demande ce que ça fait si je met:

#menu
{
float: left;
width: 150px;
}

#menu
{
float: right;
width: 150px;
}

Mais je n'ai pas compris le cheminement à faire... Pour Keumar ,je ne sais pas où mettre le float left ,bon El Greek c'est faux et Exca tu a réctifié El Greek donc ça va

Keumar

24 novembre 2005 à 22:23:43

Si tu fait comme ca je sais pas mais surement un beug
mais le menu que tu veut a droite dans un div avec un id="menu_droit" et dans ton css #menu_droit { float:right; }
A bientot
Keumar

dworkin

25 novembre 2005 à 2:08:38

Bonjour,
tant qu'on y est, tu devrais ajouter une marge entre le bas de ton menu de gauche (celui du bas) et ton footer ...

crazydips

25 novembre 2005 à 15:35:08

andre ça je ne peux pas ,vu que pour les menus il y a une seule margin-top attribuée ,donc forcement le dernier menu est accolé au pied de page...

Chez moi j'ai :

<div class="element_menu2">
<div class="element_titre">
<h5>Titre menu</h5>
</div>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

Mais pourtant ça déforme plus ce que je souhaite qu'autre chose ,regardez pour vous meme mon site...

Hypolythe

25 novembre 2005 à 15:49:04

T'as essayé (je suis pas sur) dans ton code html :

et dans ton CSS :

#menu {float:left;}
#corps {float:left;}
#menu2 {float:left;}

Je pense que ça peut marcher.
Sinon tant pis.

dworkin

25 novembre 2005 à 15:49:38

Tu sais, il suffit que tu ajoute un margin-top à ton footer

Exca

25 novembre 2005 à 16:36:23

Pour les menus remplace par ceci dans ton html :

<div id="menu">
<div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>

   </div>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>

   <li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>
   </div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>

</ul>
</div>
</div>
<div id="menu2">
   <div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>
   </div>
<ul>
<li><a href="page4.html">Lien</a></li>

<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
</ul>

</div>
</div>

Pour le css c'est bon puisque tu as déjà :

#menu2
{
float: right;
width: 150px;
}

Enfin, si tu souhaites que ton footer soit détaché du reste il suffit d'appliquer :

#pied_de_page
{
clear: both;
}

crazydips

25 novembre 2005 à 19:09:52

Exca ça fait tout déconner quand je fait ce que tu me propose ,j'ai vite réctifié car là je me suis retrouvé avec un corps vertical d'epaisseur ~20 pixels xD

Exca

25 novembre 2005 à 20:57:31

Oui en effet, j'ai pas fait gaffe à certain paramètre désolé ^^".
Essaie ça :

<!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>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Css" href="CSS.css" />
</head>
<body>



<div id="en_tete">

</div>



<div id="menu">
<div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>

   </div>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>

   <li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>
   </div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>

</ul>
</div>
</div>
<div id="menu2">
   <div class="element_menu">
   <div class="element_titre">
   <h5>Titre menu</h5>
   </div>

<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>



<div id="corps">
   <div class="element_titre">
   <h1>Titre</h1>
   </div>

<p>

Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>

L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
   
<div id="pied_de_page">
<p>Copyright "Hoalox" 2005, tous droits réservés</p>

</div>

</body>

Avec ça :

/*
Texte.css
*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
/*background-image: url("Presentation/Fond.png"); <===== à utiliser au besoin*/
}

a:hover
{
text-decoration : overline underline;
}

/* L'en-tête */

#en_tete
{
width: 700px;
height: 100px;
background-image: url("Presentation/Hoalox.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 125px;
}

#menu2
{
float: right;
width: 125px;
}

.element_menu
{
background-color: #ffff00;
background-image: url("Presentation/FondTitre.png");
background-repeat: repeat-x;

border: 1px solid black;

margin-bottom: 10px;
margin-top: 0px;
}

/* Quelques effets sur les menus */

.element_menu h5
{
color: #ff8800;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
border-bottom: 1px solid black;
margin-top: 0px;
}

.element_menu ul
{
list-style-image: url("Images/Puce.png");
padding: 0px;
margin-left: 30px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
margin-left: 140px;
margin-bottom: 40px;
width: 460px;
color: #000000;
background-color: #ffff00;
border: 1px solid black;
padding-left: 10px;
padding-right: 10px;
}

#corps h1 /* Tous les titres h1 du corps */
{
color: #ff0000;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-weight: bold;
margin-top: 0px;

background-image: url("Presentation/FondTitre.png");
background-repeat: repeat-x;

border-bottom: 1px solid black;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 20px;

padding-left: 30px;
color: #ffaa00;
text-align: left;
font-weight: bold;
}

#pied_de_page
{
width: 700px;
text-align: center;
clear: both;

color: #000000;
background-color: #ffff00;
background-repeat: repeat-x;

border: 1px solid black;
margin-top: 20px;
}

Normalement c'est bon, après c'est à toi de manipuler les width et margin pour faire ce qui te convient.

crazydips

25 novembre 2005 à 21:02:26

C'est tjrs pareil ,là j'ai laissé le changement ,regardes mon site ,il est terriblement bien

Exca

25 novembre 2005 à 21:20:28

Tu as copié collé ?
Parce qu'il manque la largeur de ton corps, et tu n'as pas fermé la balise div du menu2 dans le html...

crazydips

25 novembre 2005 à 21:29:11

Citation : Exca

Tu as copié collé ?
Parce qu'il manque la largeur de ton corps, et tu n'as pas fermé la balise div du menu2 dans le html...

j'ai pas copié-collé ,ça aurai tt modifié ,là j'ai fermé le Div ,et c'est encore pareil ,quand je me un "width" au corps il n'y a pas de menu qui apparait à droite...

Exca

25 novembre 2005 à 21:36:58

T'as aussi oublié de fermer ton div menu... u_u"

crazydips

25 novembre 2005 à 21:44:41

Il est fermé le div menu non?

Exca

25 novembre 2005 à 21:48:14

<div id="menu">
<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>

</div>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>
</div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</ul>
</div>
<div id="menu2">
<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>
</div>
<ul>
<li><a href="page4.html">Lien</a></li>

<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>

</div>
</div>

Euh, j'vois pas bien où t'as fermé le div menu, il faut la fermé au dessus du div menu2 hein...

Edit : Je précise que menu et menu2 son deux div dissociés. L'un ne rentre pas dans l'autre...

Edit² :

Pour schématiser tu as :

<div id"menu"> ==> Ton menu de gauche
<div class="element_menu"> ==> Le premier élément de ton menu de gauche
</div>
<div class="element_menu"> ==> Le second élément de ton menu de gauche
</div>
</div>

<div id="menu2"> ==> Ton menu de droite
<div class="element_menu> ==> L'élément de ton menu de droite
</div>
</div>

crazydips

25 novembre 2005 à 23:57:51

<div class="element_menu"> ==> Le premier élément de ton menu de gauche
</div>
<div class="element_menu"> ==> Le second élément de ton menu de gauche
</div>

Pk deux fois "element_menu"?

J'ai EXACTEMENT copié et collé ce que tu a écrit ,et ca revient au meme...

Keumar

26 novembre 2005 à 1:17:30

Salut,

Pour le css tu fait :

#menu_gauche
{float:left; }

#menu_droit
{float:right;}

Voila ainsi tu pourra avoir ton menu a gauche et a droite
Maintenant tout fonctionne c'est obligatoire
A++

kabuto_fr

26 novembre 2005 à 2:51:26

Bonjour a tous,

ou plutot bonne nuit. Je viens de lire tous les post de ce topic et j'ais pas tout compris!
si je resume on a un menu gauche de 150px et un menu droite de meme taille.
le plus simple c'est de faire comme ca non?

le tout dans cette ordre.
pour le css ca donne ca:

#menu_gauche
{float: left;
width: 150px;}
#menu_droite
{float: right;
width: 150px}
#corps
{margin-left: 155px;
margin-right: 155px;}

j'editerais mon post si je suis pas assez claire.

PS: quel est l'utiliter de se code :
<div class="element_titre">
<h5>Titre menu</h5>
</div>
sachant que la class element_title n'est jamais utilise dans ton css?

jp949

26 novembre 2005 à 8:22:44

Dans les cas comme celui la le corps doit etre en margin-right left:auto;

Anonyme

26 novembre 2005 à 9:24:01

Pour ce genre de site, je fais toujours des tableaux, facile à faire et à manier, pas à se faire *** avec des float qui marchent pas toujours :

<table>
<tr>
<td colspan="3">Ta banniere</td>
</tr>

<tr>
<td style="width: kkchose;">menu gauche</td>

<td style"width: kkchose">Corps</td>

<td style="width: kkchose;">menu droit</td>
</tr>
</table>

Après tu peux rajouter des collone et des lignes pour les espace entre tes blocs :

<table>
<tr>
<td colspan="5">Ta banniere</td>
</tr>

<tr><td style="height: kkchose">espace entre la banniere et le reste</td></tr>

<tr>
<td style="width: kkchose;">menu gauche</td>

<td style="width: kkchose">espace entre le menu gauche et le corps</td>

<td style"width: kkchose">Corps</td>

<td style="width: kkchose">espace entre le menu droit et le corps</td>

<td style="width: kkchose;">menu droit</td>
</tr>

</table>

Et puis pour l'espace entre chaque bloc de menu, tu fait des margin-top :

<table>
<tr>
<td colspan="5">Ta banniere</td>
</tr>

<tr><td style="height: kkchose">espace entre la banniere et le reste</td></tr>

<tr>
<td style="width: kkchose;">
<div>1er menu</div>
<div style="margin-top: kkchose">2eme menu</div>
</td>

<td style="width: kkchose">espace entre le menu gauche et le corps</td>

<td style"width: kkchose">Corps</td>

<td style="width: kkchose">espace entre le menu droit et le corps</td>


<td style="width: kkchose;">
<div>1er menu</div>
<div style="margin-top: kkchose">2eme menu</div>
</td>
</tr>

</table>

Et puis en modifiant ce que j'ai fait au dessus, t'arrive à un truc plus ou moins comme ça :

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {font-size: 10px; font-family: verdana;}
.banniere {background-image: url("tabenniere.exemple";); height: 150px; border: 1px solid black;}
.menug {width: 150px;}
.menud {width: 150px;}
.corps {width: 459px; height: 500px; border: 1px solid black;}
.div {height: 100px; border: 1px solid black;}
td {vertical-align: top;}
</style>
</head>
<body>

<table style="width: 779px; border-collapse: collapse; margin: auto;">
<tr>
<td colspan="5" class="banniere"></td>
</tr>

<tr><td style="height: 10px;"></td>

<tr>
<td class="menug">
<div class="div"></div>
<div class="div" style="margin-top: 10px;"></div>
<div class="div" style="margin-top: 10px;"></div>
<div class="div" style="margin-top: 10px;"></div>
</td>

<td style="width: 10px;"></td>

<td>
<div class="corps"></div>
</td>

<td style="width: 10px;"></td>

<td class="menud">
<div class="div"></div>
<div class="div" style="margin-top: 10px;"></div>
<div class="div" style="margin-top: 10px;"></div>
<div class="div" style="margin-top: 10px;"></div>
</td>
</tr>

</table>

</body>
</html>

Je te montre ce que ça donne : Screenshot

Et tu refais ce code à ta façon, avec tes images, et c'est bien moins compliqué sous forme de tableau non ?

Bon courage à toi et bonne continuation

jp949

26 novembre 2005 à 9:48:38

tableaux=lourdeur chargement lent consommation de bande passante.
css facile a manier faut juste se donner la peine de saisir le fonctionnement plutot que rester sur des techniques de 1990

Anonyme

26 novembre 2005 à 9:51:36

Tu as sans doute raison, mais c'est le plus simple à faire dans tout ça, et donc je lui conseille de au moins jeter un oeil sur ce que j'ai fait, et si ça lui convient tant mieux, sinon tampi ^^.

Exca

26 novembre 2005 à 10:13:52

Tu n'as toujours pas refermé le div de ton premier menu...
Si tu as copié le code de mon dernier post c'est normal que ça marche pas, puisque je voulais te montrer que ton code était incorrect...
Bon, recopie ça :

<div id="menu">
<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>

</div>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>
</div>
<ul>

<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</ul>
</div>
</div>
<div id="menu2">
<div class="element_menu">
<div class="element_titre">
<h5>Titre menu</h5>
</div>

<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>

Si là t'y arrives pas, j'cours me pendre...

Edit : Moi perso j'y arrive beaucoup mieux avec les div, j'arrive mieux à imaginer la mise en page qu'avec les tableaux ^^"

crazydips

26 novembre 2005 à 13:02:51

Moi je dit : "Bravo" ,allez va enlever la corde et démolit ta potence :-°

Maintenant je vais essayer d'arranger le design etc ,et... si je souhaite mettre une espece de menu entre la tete et le corps ainsi que les menus comment dois-je faire?

Anonyme

26 novembre 2005 à 13:11:07

Bah tu rajoute une div sous ta banniere, et tu met des margin-top et bottom pour les espace, ensuite bah voilà tu l'arrange pour que ça te donne uen barre de liens

Sous forme de tableau (jsuis chiant avec mes tableau, mais bon) et bein tu rajoute deux lignes, un pour la barre de liens et l'autre pour l'espace !!!

1 2 >>