CODEWITHSUNDEEP
htmlcss
arukiri123
arukiri123

Reputation: 141

HTML inserting text in the upper border of a box in css

I'm trying to insert a text with the upper side of a box using CSS, but I can't come up with anything to make it happen. this is my code so far:

.boxed{
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}

and this is what I want to do: enter image description here

how do i insert a text in the upper border of a box?

*im already done with this thanks guys. but my problem now is putting pagination on tabs. can u help me? the rest of the code is in here:

http://jsfiddle.net/3y539gvq/

Upvotes: 0

Views: 1287

Answers (3)

Florin Pop
Florin Pop

Reputation: 5135

You can put a text within the div you have like so:

<div> 
    <p> Some text </p> 
</div>

CSS:

.boxed{
    border: 1px solid grey;
    width: 300px;
    height: 180px;
    position:absolute;
}

.boxed p{
    position:relative;
    top:-28px;
    left:5px;
    z-index:1;
    background-color:white;
    width:80px;
}
}

Example here.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

You can use:

.boxed {
    ... your existing styles ...
    position:relative;
}


.boxed:after {
   position:absolute;
   top:-5px;
   left:15px;
   padding:3px;
   content: "your label text";
   background-color: (something to cover up the border underneath)
}

Upvotes: 1

Adam Fratino
Adam Fratino

Reputation: 1251

Set your box to relative positioning and position the label using absolute positioning. Also, I'd recommend setting the background of your container, and inheriting the background in the label CSS to keep the two consistent.

.boxed {
    position: relative;
    background: white;
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}
.label {
    background: inherit;
    padding: 0 5px;
    position: absolute;
    left: 5px;
    top: -10px;
}

<div class="boxed">
    <span class="label">General Information</span>
</div>

DEMO: http://jsfiddle.net/b7a29fsd/1/

Upvotes: 3

Related Questions