2 <div> sur la même ligne ?
Résolu
kisscool387
Messages postés
260
Date d'inscription
Statut
Membre
Dernière intervention
-
kisscool387 Messages postés 260 Date d'inscription Statut Membre Dernière intervention -
kisscool387 Messages postés 260 Date d'inscription Statut Membre Dernière intervention -
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
- Pourquoi mon casque bluetooth ne marche que d'un coté ✓ - Forum Casque et écouteurs
- 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
- Point vert a cote de la batterie - Accueil - Protection
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