I'm having trouble figuring out how to position text at the top of a box using CSS. Here is my current code:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
}
My goal is to place text at the top border of the box. Can anyone help me achieve this?
I've managed to solve the text positioning issue, thank you everyone. However, I am now facing a new challenge - adding pagination to tabs. Can anyone provide guidance on this? You can find the rest of my code here:
To properly position your label within the box, set the box to relative positioning and the label to absolute positioning. It's also a good idea to define the background of the container and inherit that background in the label CSS to maintain consistency between the two.
.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>
See the demonstration here: http://jsfiddle.net/b7a29fsd/1/
Here's a suggestion:
.container {
... your current styles ...
position:relative;
}
.container:after {
position:absolute;
top:-10px;
left:20px;
padding:5px;
content: "text for your label";
background-color: (a color to hide the border below)
}
To display text within a div element, you can use the following structure:
<div>
<p> Your text here </p>
</div>
Here is the CSS styling for the text:
.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;
}
}
You can view an example here.
I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work. .box { font-size: 2.5rem; width: 100px; line-height: 100px; text-align: center; } .front .box { margin: ...
Attempting to resize an image on the client side before sending it to the server has been challenging for me. Sometimes, the image does not align correctly with the canvas used for resizing. I have noticed that I need to send the resized image at least tw ...
Despite trying multiple suggestions provided by this site, I have been unsuccessful in finding a solution to my problem. Here's the issue at hand: I have a page where all links are loaded through AJAX, including a profile page that fetches data from a ...
Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...
When a user clicks, I am dynamically appending a div to the DOM. In order to capture the values entered by the user, I need to use ng-model for input fields. Since I cannot predict how many divs the user will append, I want to make the ng-model values dyna ...
Consider the following block of HTML: <button id="follow-user1" class="btnFollow">Follow User1</button> <button id="follow-user2" class="btnFollow">Follow User2</button> <button id="follow-user3" class="btnFollow">Follow User ...
I am facing a challenge with my data table in my Spring MVC project. I want to be able to update or remove data from the table without having to reload the entire page. Below is an example of the HTML div element: <div id="datatable"> </div> ...
Looking to add some CSS animations to a menu but running into some issues. I've got the code below for the menu to fade in on hover, but can't quite figure out how to make it fade out smoothly as well. I've tried a few approaches, but all I ...
I'm currently facing a challenge on my Squarespace website where I need to add individual links to various images using jQuery. The issue is that these images do not have a shared class, and unfortunately, I am limited to adding custom CSS or JavaScri ...
How come the HTML canvas stops showing anything after adding a new element? Here is my HTML canvas, which works perfectly fine until I add a new element to the DOM: <canvas class="id-canvas", width="1025", height="600"> ...
I've attempted various methods to clear/reset the value for a datepicker using the on.(change) function, but have been unsuccessful. The Air Datepicker plugin is being used in conjunction with Bootstrap 4. HTML <select title="-- NODE --" id="node ...
Below is a jQuery template I have: <div class="parent-class"> <div class="sub-class"> <div clas="sub-input-class"> <input type="text" /> </div> </div> </div> Recently, I ...
I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...
After spending 3 hours trying to create a boostrap 'card' with 3 identical cards per row, I unfortunately failed. Here is the code I attempted: $.getJSON("./listings.php", function(e) { $.each(e, function(i, e){ if (e.id != ...
I am currently working on developing a responsive card deck using Bootstrap. The goal is to have the card deck display one card per row on mobile, 2 cards per row on tablet, and 3 cards per row on desktop. Below is the snippet of the code I am using: < ...
Good day everyone! I apologize in advance if my explanation is not very clear. Below is my code along with a link to an image that will help illustrate the issue I am facing. Here is the code snippet: <header> <div> <a href="index.html ...
I am having an issue where the thumb on the slider does not move when I try to. This problem occurred after I inserted an img element inside the slider-cntnr div. View the code at http://codepen.io/danielyaa5/pen/xVEXvB HTML <div id="slider-cntnr"&g ...
My MVC Application is encountering an issue with only the first item in the table working perfectly, while the rest are not calling the method. Despite my extensive research, I have been unable to resolve this issue. Below is the code on my view. Can someo ...
Unable to retrieve context from directive <template lang="pug"> div(class="form") select(name="name" v-model="form.input" v-select="form.inputs") option(v-for="(option, ke ...
When utilizing the <base> tag in HTML along with the <style> tag on Microsoft's Edge Browser, I encounter a peculiar issue. Here is a very basic example: <!DOCTYPE html> <html lang="en"> <head> <title>Edge de ...