I'd like to have a div that looks like this:
Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.
Yes, but it's not a div, it's a fieldset
fieldset {
border: 1px solid #000;
}
<fieldset>
<legend>AAA</legend>
</fieldset>
You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Note: you need to set a background as well as a width on the h1
Example: http://jsfiddle.net/ZgEMM/
EDIT
To make it work with hiding the div, you could use some jQuery like this
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(You will need to modify...)
Example #2: http://jsfiddle.net/ZgEMM/4/
I know a bit late to the party, however I feel the answers could do with some more investigation/input.
I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.
/* Styles go here */
#info-block section {
border: 2px solid black;
}
.file-marker > div {
padding: 0 3px;
height: 100px;
margin-top: -0.8em;
}
.box-title {
background: white none repeat scroll 0 0;
display: inline-block;
padding: 0 2px;
margin-left: 8em;
}
<aside id="info-block">
<section class="file-marker">
<div>
<div class="box-title">
Audit Trail
</div>
<div class="box-contents">
<div id="audit-trail">
</div>
</div>
</div>
</section>
</aside>
This can be viewed in this plunk:
Outline box with title
What this achieves is the following:
no use of fieldsets.
minimal use of CSS to create effect with just some paddings.
Use of "em" margin top to create font relative title.
use of display inline-block to achieve natural width around the text.
Anyway I hope that helps future stylers, you never know.
Text in Border with transparent text background
.box{
background-image: url("https://i.stack.imgur.com/N39wV.jpg");
width: 350px;
padding: 10px;
}
/*begin first box*/
.first{
width: 300px;
height: 100px;
margin: 10px;
border-width: 0 2px 0 2px;
border-color: #333;
border-style: solid;
position: relative;
}
.first span {
position: absolute;
display: flex;
right: 0;
left: 0;
align-items: center;
}
.first .foo{
top: -8px;
}
.first .bar{
bottom: -8.5px;
}
.first span:before{
margin-right: 15px;
}
.first span:after {
margin-left: 15px;
}
.first span:before , .first span:after {
content: ' ';
height: 2px;
background: #333;
display: block;
width: 50%;
}
/*begin second box*/
.second{
width: 300px;
height: 100px;
margin: 10px;
border-width: 2px 0 2px 0;
border-color: #333;
border-style: solid;
position: relative;
}
.second span {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.second .foo{
left: -15px;
}
.second .bar{
right: -15.5px;
}
.second span:before{
margin-bottom: 15px;
}
.second span:after {
margin-top: 15px;
}
.second span:before , .second span:after {
content: ' ';
width: 2px;
background: #333;
display: block;
height: 50%;
}
<div class="box">
<div class="first">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
<br>
<div class="second">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
</div>
<fieldset>
<legend> YOUR TITLE </legend>
<p>
Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
</p>
</fieldset>
You can use a fieldset tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
Check this link: HTML Tag
For a duplicate, here another option with transform, no fieldset ( and rounded border required in the duplicates) :
Question
Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this
Where the "Some Title" is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?
Answer position or transform can help you too :
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.fieldset {
border: solid;
color: #353fff;
border-radius: 1em;
margin: 2em 1em 1em;
padding:0 1em 1em;
}
.legend {
transform: translatey(-50%);
width: max-content;
background: white;
padding: 0 0.15em;
}
.fieldset li {
list-style-type: " - ";
}
<div class="fieldset">
<h1 class="legend">Some Title</h1>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
If you are not in a position to add a field set, you can add a background to the element. In my situation, I had different colors in the input element and outside the input element, and also we have a hover color for the input element. So this is a fix I added linear-gradient background with outside color in the top half and transparent color in the bottom half.
I added the transparent color to the bottom half inorder to see the hover color when hovered.
.class-name {
background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}
From a practical perspective, I think PeterS has the best answer. It's also presented in a very clear, didactical style.
Just to save others a few minutes converting it into more production-style code, I've done the following. Basically, it's what you would think you need: One div box inside another, with the outer div box providing the border, the inner providing the title contents with a negative margin shifting it up. A third div then contains the actual content.
This is the CSS:
.outer-border-box {
border: 2px solid black; border-top:3px solid black;}
.label-source-box {
padding: 0 3px; height: 100px; margin-top: -0.8em; }
.box-title {
background: white none repeat scroll 0 0;
padding: 0 2px;
margin-left: 4em;
font-weight:700; font-size:18px;
font-family: 'Avenir Next',Helvetica, sans-serif; }
This is the html:
<div class="outer-border-box">
<div class="label-source-box">
<span class="box-title">Promotional </span>
<div class="box-contents">
<h2>this is the contents</h2>
</div> </div> </div>
It is possible by using the legend tag.
Refer to http://www.w3schools.com/html5/tag_legend.asp
Related
I am wanting to place a div within another div. The point is to create a border at the top of the div. The border will include a small icon image at the left, and a headline.
I am thinking that there will actually need to be a total of three divs within the main div (lighter grey color). Main border div (100% width...the dark grey color example), then within that div will be two more divs. Div for the small icon (20% width), and a div for the headline content (80% width).
How do you position those three divs (dark grey color), within the main div (lighter grey color) to act like a border at the top? Any short examples would be greatly appreciated.
A link to an example image is provided...
enter image description here
Something like this might get you started:
.panel {
display: block;
position: relative;
width: 30vw;
height: 50vh;
background-color: #CCC;
}
.panel header {
width:100%;
background-color: #999;
border-bottom: 1px solid black;
}
.panel footer {
font-size: 60%;
position: absolute;
bottom: 0;
width:100%;
border-top: 1px solid black;
text-align: center;
}
<section class="panel">
<header>
something something
</header>
<div class='content'>
content content
</div>
<footer>
panel footer
</footer>
</section>
Use this
.cont {
width:400px;
height:500px;
background: lightgray;
position: relative;
}
.header {
position: absolute;
left: 0;
top: 0;
width:100%;
height:80px;
background: gray;
color:#fff;
font-size:40px;
font-family: sans-serif;
line-height:80px;
padding:0 0px 0 70px;
box-sizing:border-box;
}
img {
position: absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="cont">
<div class="header">
<img src="https://picsum.photos/50" alt="">
HEADLİNE
</div>
</div>
<div class="box">
<h2>
<span class="box__icon"></span>
Headline
</h2>
<div class="box__content">
Content
</div>
</div>
https://codepen.io/anon/pen/OdYaeY
Your thinking is fine, just be sure to use a naming convention that is consistent and works for you. Here's an example you can feel free to use:
.container {
width: 300px;
height: 350px;
margin: 0 auto;
font-family: Arial, Helvetica, Verdana;
font-size: .95rem;
}
.header {
background: #999;
color: white;
text-transform: uppercase;
padding:.5em;
font-size: 1.3rem;
}
.header .icon {
display:inline-block;
min-height: 1rem;
min-width: 20px;
border: 1px solid white;
}
.body {
background: #ccc;
height: 100%;
padding: 1rem;
}
<div class="container">
<div class="header">
<span class="icon"></span>
<span class="title">headline</span>
</div>
<div class="body">
This is your body block
</div>
</div>
I have 3 buttons, which shall have width according to the width of the button text. This only works with display: inline, but I don't want to have the buttons in a line. How can I list the buttons from top to bottom?
js fiddle
CSS
.wrap{
width: 400px;
height: 100px;
background: red;
}
.button{
display:inline;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
An easy way is by using floats. Remove the display rule and add:
clear:left;
float:left;
jsFiddle example
.button{
clear:left;
float:left;
background: white;
padding: 0.1rem;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
You only need clear and float left, and remove display on .button.
Then your code stay well:
CSS
.wrap
{
width: 400px;
height: 100px;
background: red;
}
.button
{
clear:left;
float:left;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
If this is not what you need, let me know
Try:
.button:after{
content: "";
display: block;
}
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
This question already has an answer here:
Create vertically centered horizontal line to fill width of title with padding in CSS
(1 answer)
Closed 9 years ago.
Can the line behind the text be accomplished with CSS only?
Yes.
HTML:
<h2><span>Centered Header Text</span></h2>
CSS:
body {
background: #ccc;
}
h2 {
text-align: center;
display: table;
width: 100%;
}
h2 > span, h2:before, h2:after {
display: table-cell;
}
h2:before, h2:after {
background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
width: 50%;
content: ' ';
}
h2 > span {
white-space: nowrap;
padding: 0 9px;
}
JSFiddle
Source
Yes it can.
No images, no tables, just two elements and simple CSS.
Here's a fiddle to demonstrate it: http://jsfiddle.net/URrdP/
HTML:
<div> <span>Text Here</span> </div>
CSS:
div {
font-size: 45px;
border: #EEEEEE inset 2px;
position: relative;
text-align:center;
height: 0px;
}
span {
position: relative;
top:-0.7em;
background: #CCCCCC;
}
The key points here are that the outer element has an inset border and zero height and the inner element is positioned half a line upward so it sits on top of the outer element's border.
The other key point is that the inner element has a solid background color, otherwise the border line would show through. This means the technique will only really work successfully when you are placing it on top of a solid background; putting it on top of a gradient or an image may not work so well.
I may not have got the colors or the font sizing perfect for you in my example, but the principle should work perfectly fine for you.
CSS border inset may not be the best way to get a perfect colour match for you; if you need more fine-grained control of the colours you can specify individual colours for border-top and border-bottom.
Here's how you could do something similar with no images.
HTML:
<h1><span>Text Here</span></h1>
CSS:
body, span { background: #ccc; }
h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }
JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/
Without images version (I'd prefer the display:table version though)
CSS:
body
{background:silver;}
h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}
h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}
h1::after
{margin-top:-1px;border-color:gray}
h1 > span
{background:silver;position:relative;z-index:1;}
HTML:
<h1>
<span>
Text Here<br>
On Multiple Lines too
</span>
</h1>
Demo: http://jsbin.com/uqexar/1/edit
Since there was no HTML specification, I added in a couple of spans
<h1>
<span class="wrapper">
<span class="text">TEXT HERE</span>
<span class="line"></span>
</span>
</h1>
CSS:
h1 {
width:300px;
background:#dcdcdc;
padding:10px;
text-align:center;
color:#333;
}
.wrapper {
display:block;
position:relative;
}
.line {
display:block;
height:1px;
background:#cecece;
border-bottom:1px solid #e3e3e3;
width:100%;
position:absolute;
top:50%;
z-index:100;
}
.text {
z-index:200;
position:relative;
padding:10px;
background:#dcdcdc;
display:inline-block;
}
This means the line will look like you specified with two greys.
http://jsfiddle.net/3q5he/
This can be done with a single element:
http://jsfiddle.net/Puigcerber/vLwDf/
<h1>Heading</h1>
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
Origin: http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913
Here's an image showing what I'm trying to pull off.
So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).
I need something that is fluid in relation to the text itself...the overall width can't be fixed.
This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
You can do it in different ways.
One way would be setting border around the text, after keeping text inside header tags or div with font settings.
Refer the suggestions in the following link:
Add centered text to the middle of a <hr/>-like line
Try this: Demo
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
For headings you need to define container's width
Your html code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
your css code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
jsFiddle