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
Let's say I have a <div> with 10 floating elements inside:
<div>
<div class=floatme>...</div>
<div class=floatme>...</div>
...(8 more)
</div>
Depending on the horizontal space available, some of them will wrap to consecutive lines.
Q: How can I, say, style the ones on the second line?
<style>
.floatme {
float: left;
}
.floatme:if-wrapped-to-nth-line(2) {
background: url("rainbows.png");
}
</style>
.app {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: #bbb;
animation: 2s ease-in-out infinite alternate woosh;
}
.app, button {
font-family: sans-serif;
}
.tabs {
border-bottom: 2px solid #039;
}
.tabs button {
background: #039;
color: white;
border: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.toolbar {
background: white;
}
.toolbar > div {
padding: 3px;
float: left;
border-right: 2px solid #bbb;
}
.toolbar > .right {
float: right;
border-right: 0;
}
.toolbar button {
border: 2px solid #777;
}
.toolbar button:hover {
background: #bbb;
}
.toolbar::after {
display: table;
content: '';
clear: both;
}
#keyframes woosh {
from {
width: 300px;
}
to {
width: 500px;
}
}
<div class=app>
<nav class=tabs>
<button>Tab 1</button>
</nav>
<nav class=toolbar>
<div>
<button>A</button>
<button>B</button>
</div>
<div class=right>
<button>Right</button>
<button>side</button>
</div>
<div>
<button>C</button>
Description
</div>
<div>
<button>D</button>
<button>E</button>
<button>F</button>
</div>
<div>
<strong>Q</strong>: How to style second line?
<button>G</button>
</div>
<div>
<button>H</button>
<button>I</button>
Etc etc...
</div>
</nav>
</div>
You can give the element class name and don't try using nth-child() a lot because it's bad performance.
<div>
<div class=floatme one>...</div>
<div class=floatme two>...</div>
...(8 more)
</div>
Also you can use same idea to create gallery image using CSS Grid layout and BEM methodology.
CSS Grid Layout:
https://www.youtube.com/watch?v=jV8B24rSN5o&t=930s
BEM:
https://www.toptal.com/css/introduction-to-bem-methodology.
I'm having a problem with trying to create a footer in an angular4 app. The issue seems to be if a child component loaded in the app-router is of greater height than it's parent component... The footer on the parent doesn't go to the bottom of the full page, but just to the bottom of the parent component.
eg.
I've placed my footer at the very bottom of the app.component.html file:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
The footer is a very simple element:
<footer style="height:150px; background-color:blue">
<h3 class="text-light mt-5">This is the app footer</h3>
</footer>
The problem is the footer doesn't go to the bottom of the total app, it goes to the bottom of the app.component.html...but if the child component being loaded in the app-router is large ie the result of an ngFor loop of many elements... then it the footer is no longer underneath the child.
I can demonstrate the problem more simply by this:
I add a simple component of height 3000px and bootstrap background color danger orange:
<div class="bg-danger" style="height: 3000px;">
</div>
I load the component via routes to go into the router outlet.
The result is this:
Image of problem
How can I make sure the footer is at the bottom of the page?
EDIT:
This CSS is attached to the .css file in the app component.
None of the others seem to address the issue:
#splashbackground{
background:url('/assets/images/photo.jpg') no-repeat;
background-size:cover;
min-height:950px;
}
.dark-overlay{
background-color:rgba(0,0,0,0.4);
position:absolute;
top:0;
left:0;
width:100%;
min-height:952px;
}
Outside attached to other .css files there's these, but none of them really deal with positioning of the card elements or anything. What can I add to the footer element to ensure it will be at the bottom?
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.clickable{
cursor: pointer;
}
.borderThin{
border: 1px gray inset;
border-radius: 15px;
}
.vertical-align {
position:relative;
top:50%;
}
.card-img-left {
border-bottom-left-radius: calc(.25rem - 1px);
border-top-left-radius: calc(.25rem - 1px);
float: left;
padding-right: 1em;
margin-bottom: -1.25em;
}
.panelTheme {
background-color: #222;
color:#999;
border-radius: 5px;
}
/*Image Insertion*/
.customClass {
background-color: #222;
border-radius: 5px;
margin:5px;
width: 500px;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}
/*Image Insertion*/
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
#media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
.modal-content{
background-color: #222;
border-color: #222;
border-radius: 0;
}
.modal-header{
border-bottom: 0px !important;
}
.modal-backdrop{
background-color: red;
}
.customClass {
background-color: #D21C1C;
border-radius: 5px;
margin:auto;
width: 50%;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}
Solved!
The issue seems to have been how the divs were organised in the app-component.html:
Going from:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
to this:
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
fixed the issue.
HTML
<paper-card class="media-responsive" heading="Nearest customers">
<div class="card-content">
<nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
</div>
<div class="card-actions card-footer">
<div style="float:right;text-align:right">
<a data-route="allcustomers" href="/full-customer-list">Full customer list
<iron-icon class="iron-icon-12" icon="fa:arrow-right"></iron-icon></a>
</div>
<div class="clear"></div>
</div>
</paper-card>
CSS:
<style type="text/css">
paper-card {
position: relative !important;
width: 100%;
margin-bottom: 10px;
height: auto !important;
}
.card-actions {
position: relative !important;
bottom: 0 !important;
}
</style>
Custom Style:
<style is="custom-style">
paper-card {
--paper-card-header-color: #000000;
--paper-card-header-text:{
font-size:15px;
margin:0 auto;
};
--paper-card-header: {
margin:0 auto;
border-bottom:1px solid #dddddd !important;
padding:0;
margin-bottom:0px !important;
};
--paper-card-actions {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
position:relative !important;
#apply(--paper-card-actions);
}
}
</style>
Output (please see attached image)
How can I achieve this?
I have solved this in the past by using iron-flex-layout.
You could also solve it using the --paper-card-actions and defining the proper flex styles.
Also I think for your custom style example there is a typo:
--paper-card-actions { should be --paper-card-actions: {
I have a box center, and I want to color that box differently depend on the page. I try this
#center {
margin-top: 2px;
padding: 10px 20px; /* CC padding */
width: 100%;
height: 800px;
color: black;
font-size: 11px;
}
#backgroundRed{
background-color: red;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 240px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
so then I would try this
<div id="containder">
<div id="backgroundRed">
<div id="center" class="column">
abc
</div>
</div>
</div>
however the background of the box does not turn to red, someone explain to me what did I do wrong? btw, I must have class="column"
Maybe what you wanted was this rule?
#backgroundRed div#center {
background-color: red;
}
That means "if div#center is a child of #backgroundRed..."
Your example should make the outer div have a red background.
Try the following code
#backgroundRed{
background-color:red;
overflow:hidden;
}