How to bring the right padding of the box without any extra {div}. The title ::after Selector should admire the right padding of the box. Here is my code. How to do that?
Quentin Veron gave me the right solution.
.box {
background: #f9f9f9;
padding: 20px;
overflow: hidden;
position: relative;
}
.title {
padding-left: 18px;
border-left: 8px solid;
border-color: #000;
line-height: 30px;
position: relative;
overflow: hidden; // This is very important
}
.title:after {
content: "";
display: inline-block;
border-top: 2px solid;
border-color: #000;
vertical-align: middle;
width: 100%;
}
.title:after {
margin-right: -100%;
margin-left: 10px;
}
<div class="box">
<h3 class="title">Title Right Border Line</h3>
</div>
Is this what you are looking for?
.box {
background: #f9f9f9;
padding: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.title {
padding-left: 18px;
border-left: 8px solid;
border-color: #000;
line-height: 30px;
flex: 0 1 auto;
margin: 0;
padding-right: 12px;
}
.box::after {
content: "";
border-top: 2px solid;
border-color: #000;
flex: 1 0 auto;
}
<div class="box">
<h3 class="title" style="">Title Right Border Line</h3>
</div>
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I want to make a line between two circles, for that, I have used the below code by using pseudo-element CSS. I would like to make the line between these two circles responsive, now it's intersecting with circle in some other devices like mobile, etc. How to make it responsive or any other solution that does the same design? Please help.
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab > div {
text-align: center;
margin-right: 100px;
cursor: pointer;
}
.cart_header_tab h6 {
color:#02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color:#ccc
}
span.circle_one::after {
content: "";
width: 152px;
height: 1px;
background: #eee;
position: absolute;
top: 6px;
left: 14px;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
You can start tweaking the code something like this:
Be aware that if you wanted to change the size or width of the circle you have to tweak the other property in the css, hope that is not an issue here.
#cart_header_tab {
position: relative;
display: inline-block;
}
#cart_header_tab::after {
content: "";
position: absolute;
width: 50%;
z-index: -1;
top: 20%;
left: 25%;
border: 1px solid gray;
/* line between circles */
}
#cart_header_tab div {
display: inline-block;
font-size: 12px;
text-align: center;
min-width: 150px;
}
#cart_header_tab span {
color: white;
background: white;
display: block;
height: 15px;
margin: 0 auto 10px;
padding-top: 20px;
width: 30px;
border-radius: 50%;
border: 1px solid #22A7F2;
}
<div id="cart_header_tab">
<div><span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div><span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
Using flex i insert that line between circle as separator itself is a child of flex and hen using margin adjust that according to circles
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab>div {
text-align: center;
cursor: pointer;
}
.cart_header_tab h6 {
color: #02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color: #ccc
}
.cart_header_tab {
position: relative
}
.sep {
width: 100%;
height: 1px;
background: #eee;
margin: 9px -21px 0;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
background: #fff;
z-index: 1;
}
.circle_two {
background: #fff;
z-index: 1;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div class="sep"></div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle
I have been trying to get three bits of text (styled to look like buttons) to line up left, centre, and right using HTML and CSS, no Flexbox or JS, but without success. How can this be achieved? This is what I need:
Here is my code:
#row1 {padding: 20px 20px 5px 20px;
overflow: hidden; }
.button-container {display: block; text-align: center;}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: left;
font-size: 75%; }
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: right;
font-size: 75%; }
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">issue</span>
<span class="button-right">next</span>
</div><!--close button-container">
</div><!--close r1-->
Flexbox is ideal for this type of a problem:
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">index</span>
<span class="button-right">next</span>
</div>
</div>
Alternative without Flexbox:
* {margin: 0; padding: 0; box-sizing: border-box}
#row1 {padding: 20px 20px 5px 20px}
.button-container {position: relative}
.button-left {
position: absolute;
left: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-right {
position: absolute;
right: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-centre {
position: absolute;
left: calc(50% - 17px);
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">issue</span>
<span class="button-right">next</span>
</div>
</div>
Changes made: .button-container {position: relative}, also added position: absolute to all the children with appropriate values of the left and right properties, for the middle child the value of the left property calc(50% - 17px) is calculated based on it's width (padding and border included) which is 34px divided by 2 and deducted from 50%.
HTML
<div id="row1">
<div class="button-container">
<span class="button">previous</span>
<span class="button">index</span>
<span class="button">next</span>
</div><!--close button-container">
</div><!--close r1-->
CSS
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {display: block; text-align: center;}
.button {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
You can use Flexbox, assuming you just want all the buttons to be next to each other you can give your .button-container the property display:flex;.
Here's a JSFiddle.
Your button container is already a block level element, since you are using a <div> so you don't need the display:block
.btns {
position: relative;
display: inline-block;
font-size: 0;
}
.btns a {
position: relative;
display: inline-block;
text-decoration: none;
background-color: #F4F4F4;
color: #000;
font-size: 14px;
padding: 5px 15px;
transition: all .3s ease-in-out;
}
.btns a:hover {
background-color: #777;
color: #FFF;
}
.btns a:first-child {
border-radius: 10px 0 0 10px;
border-right: 1px solid #CCC;
}
.btns a:last-child {
border-radius: 0 10px 10px 0;
border-left: 1px solid #CCC;
}
<div class="btns">
Previous
Index
Next
</div>
Simplest way would be to just add a <br>tag after each button, line this:
<div id="row1">
<div class="button-container">
<span class="btns button-left">previous</span>
<br>
<span class="btns button-centre">index</span>
<br>
<span class="btns button-right">next</span>
<br>
</div><!--close button-container">
</div><!--close r1-->
I have the following. However, I've been trying to get the blue title area to expand with the outter div and the arrow to be aligned in the middle. I have an outer div set at 25% just so the text wraps.
.breakingNewsRec {
width: 100%;
background: #FFF;
position: relative;
border: solid 2px #6A7791;
}
.breakingNewsRec>.bn-rec {
width: auto;
display: inline-block;
background: #6A7791;
position: relative;
margin-right: 20px;
}
.breakingNewsRec>.bn-rec>h2 {
display: inline-block;
margin: 0;
padding: 0 20px;
line-height: 40px;
font-size: 0.8em;
color: #FFF;
box-sizing: border-box;
}
.breakingNewsRec>.bn-rec>span {
position: absolute;
right: -10px;
top: 10px;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #6A7791;
}
.breakingNewsTown {
width: 100%;
height: 40px;
background: #FFF;
position: relative;
border: solid 2px #74936A;
}
.breakingNewsTown>.bn-rec {
width: auto;
height: 40px;
display: inline-block;
background: #74936A;
position: relative;
margin-right: 20px;
}
.breakingNewsTown>.bn-rec>h2 {
display: inline-block;
margin: 0;
padding: 0 20px;
line-height: 40px;
font-size: 0.8em;
color: #FFF;
height: 40px;
box-sizing: border-box;
}
.breakingNewsTown>.bn-rec>span {
width: 0;
position: absolute;
right: -10px;
top: 10px;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #74936A;
}
<div style="width: 25%">
<div class="breakingNewsRec">
<div class="bn-rec">
<h2>Recreation News</h2><span></span>
</div>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj
<img src="imgs/slides/slide2.jpg" width="25%">asdfljas dflkjsdf alskdjf asdfl</div>
<div class="breakingNewsTown">
<div class="bn-rec">
<h2>Town News</h2><span></span>
</div>fareveae vasev</div>
</div>
Using display:table-cell this is very easy to accomplish:
#news {
width: 50%;
}
#news .item {
border-width: 1px;
border-style: solid;
}
#news .item h2 {
color: white;
font-size: 100%;
white-space: nowrap;
position: relative;
border-color: inherit;
}
#news .item h2:after {
content: '';
display: inline-block;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent;
border-left-color: inherit;
vertical-align: middle;
position: absolute;
left: 100%;
}
#news .item h2,
#news .item div {
display: table-cell;
vertical-align: middle;
padding: 0 1.5em;
}
.style1 { border-color: #697791 }
.style1 h2 { background: #697791 }
.style2 { border-color: #74936a }
.style2 h2 { background: #74936a }
<div id="news">
<div class="item style1">
<h2>Recreation News</h2>
<div>
<p>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl</p>
</div>
</div>
<div class="item style2">
<h2>Town News</h2>
<div>
<p>fareveae vasev</p>
</div>
</div>
</div>
I am not sure exactly what you are trying to achieve, but it sounds like something like this:
which would just be applying width:100%; to .bn-rec
EDIT
Regarding your comment - I think I understand then. How about surrounding the text in a <div> and making both <div> tags display:inline-block; and restricting their width by %. Then increasing the margin of the arrow, also by a % like I did here:
https://jsfiddle.net/030y329m/
Is that closer to what you were thinking?