Sujet Précédent Sujet Suivant

2 <div> sur la même ligne ?

Résolu/Fermé
kisscool387 Messages postés 260 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 20 août 2016 - 26 janv. 2010 à 18:52
kisscool387 Messages postés 260 Date d'inscription jeudi 22 novembre 2007 Statut Membre 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.

6 réponses

Réponse 1 / 6
Alphatrion Messages postés 12 Date d'inscription mardi 5 mai 2009 Statut Membre Dernière intervention 17 février 2014 10
26 janv. 2010 à 18:58
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
8

Discussions similaires

aligner deux div
twiiiix -
Dinath -

9 réponses
mettre en bas une div en bas d'une autre
tipi75 -
tipi75 -

2 réponses
inserer une image avec un div
kaizen17 -
kaizen17 -

9 réponses
Comment mettre 2 <div> cotes a cotes ?
Gariig -
Gariig -

2 réponses
Comment centrer une div à droite ?
petit bibi -
Eastchild -

9 réponses
2 div cote a cote dans une div
Pascal_22 -
arthezius -

5 réponses