Menu

2 <div> sur la même ligne ? [Résolu/Fermé]

Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Dernière intervention
20 août 2016
- - Dernière réponse : kisscool387
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Dernière intervention
20 août 2016
- 26 janv. 2010 à 23:21
Bonjour,
Je voudrais aligner plusieur menu qui utilise la balise "<div>" , car cette balise saute par defaut une ligne, et du coup le menu suivant se retrouve forcément en dessous.

voici mon script :

  <head>
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
	$('ul.menu_body').slideToggle('medium');
    });
	$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
	$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
$(document).ready(function () {
	$("ul.menu_body2 li:even").addClass("alt");
    $('img.menu_head2').click(function () {
	$('ul.menu_body2').slideToggle('medium');
    });
	$('ul.menu_body2 li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
	$('ul.menu_body2 li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>
  </head>

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="container1">
<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">ttttttttt</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
<body>
<div class="container2">
<img src="images/navigate.png" width="184" height="32" class="menu_head2" />
<ul class="menu_body2">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>


et le contenu de mon CSS :

ul, li{margin:0; padding:0; list-style:none;}

.menu_head{border:1px solid #998675;}

.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

.menu_head2{border:1px solid #998675;}

.menu_body2 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body2 li{background:#493e3b;}
.menu_body2 li.alt{background:#362f2d;}
.menu_body2 li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body2 li a:hover{padding:15px 10px; font-weight:bold;}


Je vous remercie d'avance pour votre aide.
et si vous ne comprenez pas bien ma demande, merci de me demander plus d'explication.
Afficher la suite 

6 réponses

Meilleure réponse
Messages postés
12
Date d'inscription
mardi 5 mai 2009
Dernière intervention
17 février 2014
10
8
Merci
Il faut que dans ta css, tu définisses tes div comme flottant :
{float : left; width : 200px}
Tu appliques cette css aux deux div et ils seront cote à cote, de 200px de large, tu peux ensuite rajouter un margin pour les séparer

en dessous des deux div tu mets
<div style="clear:both"></div>
pour que ce qui est en dessous ne remonte pas se mettre à coté de tes div

Dire « Merci » 8

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 58233 internautes nous ont dit merci ce mois-ci

Messages postés
18261
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 février 2019
5016
4
Merci
display:inline-block ou float:left
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Dernière intervention
20 août 2016
16
1
Merci
Merci beaucoup pour vos réponses rapide.

j'ai testé les 2 solution proposé, ça ne fonctionne mais j'ai un autre probléme à la place.
mes menu sont des menu déroulant, et maintenant qu'ils sont cote à cote, le menu de gauche s'ouvre sur la droite juste au dessus de menu de droite, et le menu de droite s'ouvre en dessous du menu de gauche (là ou le menu de gauche devrais s'ouvrire normalement)
Y a t'il une solution ?
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Dernière intervention
20 août 2016
16
0
Merci
Je vien de trouver la solution :

j'ai dû rajouter "float:center" dans mon CSS et j'ai mis "<div style="float:left">" à la place de mes "div" et ça fonctionne super bien !

Merci beaucoup.
Messages postés
18261
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 février 2019
5016
0
Merci
Ton float:center ne sert à rien d'abord ...
Messages postés
260
Date d'inscription
jeudi 22 novembre 2007
Dernière intervention
20 août 2016
16
0
Merci
ben je pense que il sert à centrer le menu qui se déroule dans sous l'image, c'est pour ça que j'avais les menu qui se déroulé n'importe où, parceque je n'avais pas précisé leurs positions.

mais le principale c'est que tout fonctionne ;)