Is there a way to render a box on another box's border, similar to the example image here: Expected Output
I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution.
If you have any advice or suggestions on how to approach this design, I would greatly appreciate it!
We have recreated the image you provided as faithfully as possible.
To achieve this layout, we used position:relative for the card container and position:absolute for its internal elements.
.card{
position:relative;
width: 400px;
height: 200px;
border: solid 2px gray;
border-radius: 15px;
padding: 5px 5px 5px 5px;
text-align: center;
background: linear-gradient(white 50%, #F1FAFF 50%);
margin-top: 100px;
}
.inner{
border: solid 1px lightgray;
border-top: none;
height: 80%;
width: calc(100% - 20px);
box-shadow: 0px 2px 2px lightgray;
position: absolute;
bottom: 10px;
left: 10px;
background: white;
}
.label{
position: absolute;
top: -15px;
left: 25px;
background: #F5F5F5;
padding: 5px 10px;
font-family: sans-serif;
font-weight: 600;
border-radius: 5px;
}<div class="card">
<div class="label">13 Mar - 12 Apr</div>
<div class="inner">
</div>
</div>To accomplish this, utilize the legend element. For a unique style, apply position: relative to the parent div (referred to as the bordered box), use position: absolute on the child div, and adjust values for top, left, margins, or translate.
If you want to achieve this effect, you can create two div elements.
.outer{
border:2px solid #333;
width:200px;
height:150px;
border-radius:20px;
}
.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}<div class="outer">
<div class="inner">
</div>
</div>I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...
I am looking to figure out how I can send a <FORM> from an HTML page to a PHP file that will retrieve data from a database and then return the results to the same HTML page without any redirection. What I aim for is to avoid redirecting users. Take ...
In my jade template called 'main page', I have a reusable template named 'product template'. The 'product template' is designed to display dynamic data and needs to be flexible enough to be used in multiple pages without being ...
As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...
I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...
Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...
I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...
My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...
Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...
In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the C ...
I am looking to create a navigation bar that transforms into a menu button and collapses when the browser window is minimized. I would like it to function similarly to the one found at . While I have searched for tutorials, most only cover how to create ...
I am having trouble setting a default option in my select box using the html selected property. I want the selected option to be assigned to StartingYear, but currently it's not working as expected. <select [(ngModel)]="StartingYear"> < ...
My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...
I have an 800 by 100 image for the background and I'm trying to extract sections from it (like a sprite sheet) in order to create a background. I believe this method is efficient and allows me to experiment and learn how to generate backgrounds in the ...
Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...
I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...
I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...
Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...
Wondering how I can incorporate all the cool Bootstrap components into a webpage. Is there a tool that offers live preview? Back in the day (web 1.0), Dreamweaver was my go-to for creating HTML and basic CSS, but what are some current tools where I can si ...
With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...