CODEWITHSUNDEEP
htmlcss
Nitish Kumar
Nitish Kumar

Reputation: 6276

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:

enter image description here

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.

Upvotes: 1

Views: 6444

Answers (2)

Pugazh
Pugazh

Reputation: 9561

Below example can help you get started. A CSS only solution

div.wrapper {
  position: relative;
  border: 2px solid cornflowerblue;
  margin-top: 20px;
  padding: 20px 10px 10px;
}
div.wrapper label {
  color: white;
  line-height: 20px;
  padding: 0 5px;
  position: absolute;
  background-color: cornflowerblue;
  /* Adjust these values to posiytion the title or label */
  top: -10px;
  left: 10px;
}
<div class="wrapper">
  <label>Menu 1</label>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna
  </div>
</div>
<div class="wrapper">
  <label>Menu 2</label>
  <div>
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  </div>
</div>
<div class="wrapper">
  <label>Menu 3</label>
  <div></div>
</div>
<div class="wrapper">
  <label>Menu 4</label>
  <div></div>
</div>
<div class="wrapper">
  <label>Menu 5</label>
  <div></div>
</div>
<div class="wrapper">
  <label>Menu 6</label>
  <div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</div>

Upvotes: 2

Mohammad Usman
Mohammad Usman

Reputation: 39362

You can use HTML5 data-* attribute to achieve this. It will save one div element:

body {
  font: 14px/20px Arial, sans-serif;
}
.menu {
  position: relative;
  border: 3px solid #8fdaf9;
  padding: 30px 10px;
}
.menu:before {
  content: attr(data-title);
  background: #8fdaf9;
  position: absolute;
  padding: 0 20px;
  color: #fff;
  left: 0;
  top: 0;
}
.menu ul {
  margin: 0;
}
<div class="menu" data-title="Menu">
  <ul class="mainmenu">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
  </ul>
</div>
<div>

Upvotes: 3

Related Questions