2 <div> sur la même ligne ?
Résolu
kisscool387
Messages postés
269
Statut
Membre
-
kisscool387 Messages postés 269 Statut Membre -
kisscool387 Messages postés 269 Statut Membre -
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 :
et le contenu de mon CSS :
Je vous remercie d'avance pour votre aide.
et si vous ne comprenez pas bien ma demande, merci de me demander plus d'explication.
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.
A voir également:
- Div cote a cote
- Double cote ✓ - Forum Perl
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Croix a cote contact snap - Forum Snapchat
- Pourquoi mon casque bluetooth ne marche que d'un coté ✓ - Forum Casque et écouteurs
- Configuration cote à cote incorrecte chrome ✓ - Forum Google Chrome
6 réponses
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
{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
