I am looking to create a border and header similar to this example:
[![][1]][1]
Is there a CSS solution for achieving this design?
One method I have tried that seems to work is:
.header{
margin-top:-10px;
background:#fff;
}
Are there any alternate options available to achieve this style? [1]: https://i.sstatic.net/iHCVG.jpg
To create a header, you have multiple options in CSS. You can utilize the :before or :after pseudo-elements to add content before or after an element.
For example, you can use the following HTML:
<header></header>
And apply the following CSS styling to it:
header{
border:3px solid;
height:300px;
position:relative;
}
header:before{
content:'Header';
position:absolute;
top:-10px;
left:50px;
background:#fff;
padding:0 20px;
}
Another method is to use both the header and h1 elements together. Here's an example:
html:
<header><h1>Header</h1></header>
With the corresponding CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header > h1{
position:absolute;
top:-35px;
left:50px;
background:#fff;
padding:0 20px;
}
Alternatively, you could simplify things even further by using the fieldset element for your header. See below for an example:
<fieldset>
<legend>Header</legend>
</fieldset>
Another option to consider is using a fieldset, although it may not be the most ideal solution if not being used within a form.
The HTML
<fieldset>element is designed to group controls and labels (<label>) in a web form.
Source.
Alternatively, you could experiment with this code:
HTML:
<div class="box">
<h3>title</h3>
</div>
CSS:
.box
width: 400px;
height: 200px;
border: 1px solid black;
}
.box > h3 {
position: absolute;
background: white;
height: 20px;
margin-top: -12px;
margin-left: 10px;
padding: 0 10px;
}
I'm attempting to create a gap in the rectangle by using the middle selection handle. I have two middle selection handles, and if I choose either of them, it should create a gap in the middle, dividing the rectangle into two equal halves (like curtain ...
I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...
At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...
Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...
After attempting to use mx-auto to center an image within a Bootstrap 4 card just beneath the card-text, I found that the image remained left-justified. <img src="my.svg" class="mx-auto" alt="..."> I also tried placing the img inside a div and usin ...
In my current code, I am setting the rotational angle of an element using the following: $('#1-link-2') .css('height', length) .css('-webkit-transform', 'rotate(' + angle + 'deg) ...
Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...
I am currently in the process of creating a dice using the bootstrap grid system. Although I have not completed it yet, here is a small snippet of the code that showcases my progress. However, when I inspect my webpage using developer tools (see attached i ...
As someone who is relatively new to Google Fusion, I am eager to expand my knowledge and skills. Recently, I created a customized map with an infowindow and embedded it onto my website using the FusionTablesLayer Wizard. I wanted to avoid using the target= ...
Currently, I am facing a strange bug related to the select element. Whenever I open the dropdown, there is always a mysterious black option at the top. This is how my HTML looks like: This particular element is part of my test controller. <select ng- ...
Whenever the screen width is less than 576px, I notice that the menu icon on my website shifts its position along with the title (FOOD, LLC). How can I resolve this issue? Website: ...
I have been struggling to make a menu slide to the left when a button is clicked, and then slide back to its original position when the same button is clicked again. Although I have been using the toggle method, it doesn't seem to be working for me. I ...
I am currently working on a project that involves searching for strings in a database and then appending the selected string to a text box. So far, I have been successful in retrieving the search results from the database and appending them below the text ...
I am currently learning JavaScript and JSON, as I am enrolled in a class that focuses on these topics. Our latest project requires us to create a JSON file and use a button along with JavaScript to display its contents. I have spent countless hours trying ...
Using the following SQL query in a link to extract information from a database <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">L ...
Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...
How can I enable the selection of the option group in this code snippet? <select> <optgroup value="0" label="Parent Tag"> <option value="1">Child Tag</option> <option value="2">Child Tag</option> </optg ...
This code snippet is a part of a React component in a project. I have imported a CSS file for styling and have already integrated Material UI. However, the function for the new article is not displaying on the webpage as expected. import "./Widgets. ...
Upon upgrading from Bootstrap 4.4 to 4.5, I noticed a change in the responsiveness of cards within columns on my website. Previously, these cards would adjust accordingly when the screen size was smaller, but now they seem to overlap each other. This issu ...
I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...