Here is what I'm trying to do. I have CSS horizontal bar charts. The problem is that I'm trying to get some text before and after. Please see the current screenshot
.forecasting {
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
.forecasting p {
padding: 0;
letter-spacing: 1px;
margin: 0 0 15px;
color: #000;
font-weight: bold;
}
.forecasting p:nth-child(2) {
float: right;
position: relative;
top: -25px;
}
.forecast-bar {
box-sizing: border-box;
background: #fff;
border: #0000CD 1px;
border-style: solid;
}
.forecast-todate {
width: 100%;
height: 15px;
background: #0000CD;
}
<div class="forecasting">
<p>Name of person $30,777,854.19</p>
<p>$30,777,854.19</p>
<div class="forecast-bar">
<div class="forecast-todate" style="width: 90%;"></div>
</div>
</div>
How would I be able to get the Text first, bar chart in the middle, and text at the end.
Is that what you are looking for? Basically I've added flexbox to your main div to put children elements in a row and I gave align-items: center to center them horizontally
.forecasting {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
}
.forecasting p {
padding: 0;
letter-spacing: 1px;
color: #000;
font-weight: bold;
}
.forecast-bar {
box-sizing: border-box;
background: #fff;
border: #0000CD 1px;
border-style: solid;
width: 80%;
padding-right:20px;
margin-right:10px;
}
.forecast-todate {
width: 100%;
height: 15px;
background: #0000CD;
}
<div class="forecasting">
<p>Name of person </p>
<div class="forecast-bar" >
<div class="forecast-todate" ></div>
</div>
<p>$30,777,854.19</p>
</div>
Related
I'm trying to add a text area with a white background:
I wanted the white area to be lower and further to the right.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
.whoami p {
padding-top: 5%;
font-size: 105%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
Does someone know how to do that?
Thanks
If you want to play in white space, you can flex your main container and move the contents around as you wish.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
display: flex;
align-items: end;
justify-content: end;
}
If you add the last 3 css codes I added, you will fix the white box to the bottom right.
One way is using from padding for .grey-zone:
.grey-zone {
box-sizing: border-box; /*here*/
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
padding: 20px 0 0 20px; /*here*/
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
You can add this to you class .whoami
.grey-zone {
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
position: absolute;
top: 50px;
left: 20px;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
How can I add a circle on top of two vertical div in HTML? I succeed in having 2 vertical boxes:
but I cannot figure out how to have a circle in the middle like the following:
The goal is to have a white circle with a blue line and being able to add a logo in the circle. I have the following code snippet:
http://jsfiddle.net/wL9xoad3/
.html {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.body {
background-color: #000;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.vidyard_padding {
height: 100%;
}
.vc {
display: table;
height: 100%;
width: 100%;
}
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.cta {
background-color: #fff;
height: 360px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 640px;
}
.cta-full {
height: 100%;
width: 100%;
}
.cta-half {
float: left;
height: 100%;
width: 50%;
}
.cta-block {
display: table;
height: 100%;
width: 100%;
}
.cta-block-inner {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
}
.cta-block p {
line-height: 1.4125;
margin: 0;
}
.cta-block p.white {
color: #FFFFFF;
}
.cta-block p+.btn {
margin-top: 10px;
}
.cta-block .btn {
background-color: #414142;
border-radius: 2px;
color: #FFFFFF;
display: inline-block;
font-size: 10px;
letter-spacing: 1px;
padding: 8px 12px;
text-decoration: none;
}
.cta-block .btn:hover {
background-color: #313132;
}
<div class="cta-half">
<div class="cta-block" style="background-color:#FFFFFF;">
<div class="cta-block-inner">
<p class="black">Watch our Quick Start</p>
<a class="btn" href="https://google.com">Quick Start</a> </div>
</div>
</div>
<div class="cta-half">
<div class="cta-block" style="background-color:#47b2ffff;">
<div class="cta-block-inner">
<p class="white">Start in the Cloud</p>
<a class="btn" href="https://google.com">Cloud</a> </div>
</div>
</div>
You can use a ::before or an ::after pseudo element with an empty content and some positioning. You can set the width and height of the new element and add some border-radius to make it a circle. Don't forget to set position: relative on the .cta-half element so you can move the circle relative to this.
You can add the following to your snippet on jsfiddle, it should work:
.cta-half {
position: relative;
}
.cta-half:last-of-type::after {
background-color: #fff;
border-radius: 50%;
border: 2px solid #47b2ff;
content: '';
height: 50px;
left: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
}
If you want to add a logo in the circle, you can update your content and add a url(). I'd probably grab the svg version of the logo and encode it using this tool. It will convert the image and use it like this:
content: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 533.5 544.3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z' fill='%234285f4'/%3E%3Cpath d='M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z' fill='%2334a853'/%3E%3Cpath d='M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z' fill='%23fbbc04'/%3E%3Cpath d='M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z' fill='%23ea4335'/%3E%3C/svg%3E");
You can also add some padding to make the logo smaller.
Result:
For my web app's landing page, I'm trying to create a title that appears overlaid on a dotted line (similar to this effect). This is what I currently have:
How do I create this such that the dotted line does not run through the title? I prefer to use the simplest CSS/HTML I possibly can and support the max number of browsers.
My code is pretty rudimentary. So far it is:
<h2>New Account:</h2><br>
<h2 style="margin-top:-0.5em;border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
With the example below you don't need to know the background color, is perfectly scalable, the dots extend to the remaining space of the title.
Actually, the title can wrap on multiple lines.
Feel free to tweak it to your needs and don't forget to prefix.
dotted-container {
border: 2px dotted red;
border-top-width: 0;
margin: 2rem 1rem;
display: block;
}
dotted-container>.content {
padding: 1rem;
}
dotted-title {
display: flex;
align-items: center;
height: 2px;
margin: 0 2px;
}
dotted-title > span {
padding: 0 1rem;
}
dotted-title:after,
dotted-title:before {
border-top: 2px dotted red;
content: '';
display: inline-block;
height: 0;
flex:1;
}
<dotted-container>
<dotted-title>
<span>title</span>
</dotted-title>
<div class="content">
Actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>some other title</span>
</dotted-title>
<div class="content">
Some other actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>and here's a title<br /> on two lines</span>
</dotted-title>
<div class="content">
Some content for a title on two lines.
</div>
</dotted-container>
Of course, you might want to adjust the margin/padding to your own liking and to accommodate any title wrapping on more than one line.
If you want to replace the "crappy" dotted line with a true dotted one, here's an example. Read the blog post to understand it.
Another good write-up on border-image property here.
Also note you don't have to use custom tags, as I did. It's an example. You may use classes or any other selectors that work for your specific case.
And here's an SCSS script I made you can use to pass in your selectors and desired margin/padding values. Far from perfect, but seems to do the trick:
$border-width: 2px;
$border-style: dotted;
$border-color: red;
$container: 'dotted-container';
$title: 'dotted-title';
$content:'.content';
$padding: 2rem;
$margin: 1rem;
$title-padding-value: 3;
$title-padding-unit:rem;
#{$container} {
border: $border-width $border-style $border-color;
border-top-width: 0;
margin: #{$title-padding-value/2}#{$title-padding-unit} $margin $margin $margin;
display: block;
> #{$content} {
padding: #{$title-padding-value/2}#{$title-padding-unit} $padding $padding $padding;
}
#{$title} {
display: flex;
align-items: center;
height: $border-width;
margin: 0 $border-width;
> span {
padding: 0 $padding;
}
&:after,
&:before {
border-top: $border-width $border-style $border-color;
content: '';
display: inline-block;
height: 0;
flex: 1;
}
}
}
Here's a solution with a combination of pseudo elements, flexbox, and absolute positioning.
* {
margin:0;padding:0;
box-sizing:border-box;
}
body {
background: url('https://s-media-cache-ak0.pinimg.com/originals/33/3b/4f/333b4f22ae39d1aaf8c23d77e759d8e1.jpg') 0 0 no-repeat / cover;
}
h2:before,h2:after {
content: '';
bottom: 50%;
border-top: 3px dotted black;
flex: 1 0 0;
}
h2:before {
margin-right: 1em;
}
h2:after {
margin-left: 1em;
}
h2 {
display: flex;
align-items: center;
font-size: 3em;
position: absolute;
top: 0; left: 0; right: 0;
transform: translateY(calc(-50% + 1px));
text-shadow: 0 3px 0 #fff;
}
section {
border: dotted black;
border-width: 0 3px 3px;
position: relative;
width: 80%;
margin: 3em auto;
padding-top: 3em;
background: rgba(255,255,255,0.5);
}
<section>
<h2>New Account:</h2>
<p>foo</p>
<p>foo</p>
<p>foo</p>
</section>
You can use a combination of z-index and background-color, as shown in the snippet below:
z-index pulls the New Account: title in front, then the background-color hides the border behind the it
body {
background: green;
}
#one {
position: absolute;
left: 35px;
z-index: 1;
background: green;
display: inline-block;
color: white;
}
#two {
position: absolute;
z-index: -1;
top: 55px;
margin-top: -0.5em;
border: 2px dashed white;
border-radius: 4px;
color: white;
display: inline-block;
padding: 10px 5px 5px 5px;
}
<h2 id="one">New Account:</h2><br>
<h2 id="two">Choose Nickname:<br>Password:<br></h2>
Perhaps you can do something like this:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box {
background: green;
padding: 15px;
width: 250px;
height: 250px;
}
.inner-box {
border: 1px dotted #ffffff;
height: 100%;
position: relative;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.inner-box p {
position: absolute;
width:70%;
text-align: center;
top: -25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #ffffff;
display: block;
background: green; /* Make it the same as background color */
}
<div class="box">
<div class="inner-box">
<p>My Awesome Title</p>
</div>
</div>
I would suggest having a background colour on the "New Account" if the background is only one colour, that way the dotted line will not be seen as it is covered by the background colour.
The code snippet shows how this can be adjusted to show more or less of the dotted border either side of the title.
.parent{
background-color: green;
position: relative;
font-size: 14px;
}
.parent h2:first-child{
color: #fff;
text-align: center;
z-index: 1;
background-color: green;
position: absolute;
left: 20px;
padding: 0 5px;
}
.parent h2:last-child{
margin-top: 15px;
z-index: 0;
}
.parent_two h2:first-child{
left: 12px;
padding: 0 17px;
}
<div class='parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>
<div class='parent_two parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>
I would move the title up with absolute positioning (just make sure the parent is relative positioned), wrap the title text in a <span> and then add padding and matching background color to that <span>.
body {
margin: 0;
background-color: green;
}
.box {
position: relative;
margin: 1rem;
padding: 1rem;
color: white;
box-sizing: border-box;
border: 1px dashed white;
}
.box-title {
position: absolute;
top: -1rem;
left: 0;
margin: 0;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
.box-title>span {
padding: 0 1rem;
background-color: green;
}
<div class="box">
<h2 class="box-title"><span>New Account:</span></h2>
<p>Username:</p>
<p>Password:</p>
</div>
FWIW, I don't typically care for extra markup but if I have to work extra hard to make it work some other way then I find it acceptable. Especially when it's super simple.
body{
background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=750&h=350') center top 0 no-repeat / cover;
}
.wrapper {
max-width: 400px;
margin: 30px auto 0;
border: 2px dotted red;
height: 200px;
border-top: 0;
text-align: center;
}
.heading {
display: table;
width: 100%;
position: relative;
}
.heading:before {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.heading:after {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.txt-wrapper {
display: table-cell;
width: 1%;
white-space: nowrap;
line-height: 0;
padding: 0 10px;
}
<div class="wrapper">
<div class="heading">
<h2 class="txt-wrapper">
This is heading
</h2>
</div>
<P>
This is paragraph.
</P>
<P>
This is another paragraph.
</P>
</div>
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
As shown in the fiddle here with the following HTML:
<body>
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
</body>
And CSS:
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans',sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border-style: solid;
border-color: rgba(0,150,250,0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
}
.question>p {
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
I am able to get the test question centered if I remove the border-style:solid property of question. However, I am wondering why with border-style it is not centered. I've tried using box-sizing:border-box to no avail.
Thanks
Your Vertical align is messed up because browser applied top bottom margin in p tag, if you removed it this will solve your problem
.question > p {
margin: 0;
}
or
p {
margin: 0;
}
see my updated fiddle here
There is by default margin on p elements, so when there is no border on parent element what happens is margin collapsing on parent-child and that margin doesn't affect position of p. But when you set border (it can be any border as you can see here DEMO) on parent element you prevent margin-collapsing and now you can see margin on p element.
So one solution is to remove margin from p
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans', sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border-style: solid;
border-color: rgba(0, 150, 250, 0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
}
.question>p {
background-color: red;
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
p {
margin: 0;
}
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
Try having the parent div displayed as a table and the p displayed as a table-cell then use vertical-align.
See the below snippet.
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
text-align: center;
width: 100%;
font-family: 'Open Sans',sans-serif;
//background-color: rgba(0,150,250,0.75);
}
.question {
border: 2em solid rgba(0,150,250,.75);
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
display: table;
}
.question p {
border-radius: 1.618em;
position: relative;
display: table-cell;
vertical-align: middle;
}
.answer {
font-size: 1.618em;
border: 0;
border-radius: 1.618em;
width: 50%;
margin: auto;
}
<body>
<div class="main_container">
<div class="question">
<p>Test question here</p>
</div>
<input class="answer" type="text">
<input class="submit" type="submit">
</div>
</body>
Just set margin 0px of p tag. Sample is
.question>p {
background-color:red;
border-radius: 1.618em;
position: relative;
top: 50%;
transform: translateY(-50%);
margin:0px;
}
You can use flexbox here:
1.) Add display: flex; and flex-direction: column; to .question
2.) Add margin: auto 0; to .question > p.
3.) Erase everything else except border-radius from .question > p
Here is a fiddle: https://jsfiddle.net/35jhjqcx/
Update inner paragraph positions to absolute and remove the margins
and update outer div of paragraph position to relative
see working fiddle link
.question {
border-style: solid;
border-color: rgba(0,150,250,0.75);
border-width: 2em;
background-color: white;
border-radius: 1.618em;
margin: 5em auto;
width: 75%;
height: 10em;
position: relative;
}
.question>p {
background-color: red;
border-radius: 1.618em;
top: 50%;
margin: 0;
transform: translateY(-50%);
position: absolute;
width: 100%;
}