mercredi 29 juin 2016

How to place a text inside the top-left corner border of div


I've been going through lot of articles about placing a label/legend/text on the border of a div. I've a lot of div where I want to show the different labels exactly like the image shown below: As I can see in the w3school they say to have a field set and get declare legend to display the texts, but its not working out for me. I have a set of jquery codes which appends the html with the labels : $('.menu').hover(function () { $(this).css('border', 'solid 2px #8080ff'); $(this).find('.divlabel').show(); }, function () { $(this).css('border', 'none'); $(this).find('.divlabel').hide(); }); .divlabel { float: left; top: 5px; right: 10px; padding: 0px; background: #fff; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <div class="divlabel">Menu</div> <ul class="mainmenu"> <li>...</li> <li>...</li> </ul> </div> <div> Its not working as desired, please help out guys with this css.

Aucun commentaire:

Enregistrer un commentaire