I currently have an event tracker made using html and css. My issue is that I would like to get ride of display: flex; due to browser-compatibility issues. Is there an alternative to achieve the same result? I tried using display:inline-block because without flex all steps were coming in different lines.
HTML:
<div class="container">
<div class="row event">
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 1</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step complete">
<p class="event-stepnum">Step 2</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 3</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
CSS:
.event > .event-step {
padding: 0;
position: relative;
}
.event > .event-step .event-stepnum {
color: #595959;
font-size: 16px;
margin-bottom: 5px;
}
.steps .step-on,
.steps .step-done {
background-color: #1b7e28;
color: #1b7e28;
border: 1px solid transparent;
}
.progress {
position: relative;
border-radius: 0px;
height: 5px;
box-shadow: none;
margin: 20px 0;
}
.progress > .progress-bar {
width: 0px;
box-shadow: none;
background: #fbe8aa;
}
.event-step.complete > .progress > .progress-bar {
width: 100%;
}
.row {
display:flex;
}
JSFiddle Demo
Just replace the display:flex by display:inline-block and give your step divs a fixed width:
.event > .event-step {
padding: 0;
position: relative;
width: 200px;
}
.row {
display: inline-block;
}
https://jsfiddle.net/onk2cqhg/
Related
I am using Bootstraps grid system and I need about a 2px space between each column. I've tried Column-Gap but nothing.
Could anyone help?
Code HTML:
<div class="container">
<div class="row">
<div class="col-md-3" id="one">
<h3>Pink</h3>
</div>
<div class="col-md-3" id="two">
<h3>Purple</h3>
</div>
<div class="col-md-3" id="three">
<h3>Green</h3>
</div>
<div class="col-md-3" id="four">
<h3>Orange</h3>
</div>
</div>
<div class="row2">
<div class="col-md-3" >
<h3>Things that are Pink</h3>
<p>Pigs</p>
<p>Barbie</p>
<p>Some Skins</p>
<p>Ham</p>
</div>
<div class="col-md-3" >
<h3>Things that are Purple</h3>
<p>Prince</p>
<p>Goths</p>
<p>Paint</p>
<p>Berries</p>
</div>
<div class="col-md-3" >
<h3>Things that are Green</h3>
<p>Grass</p>
<p>Peas</p>
<p>Leafs</p>
<p>Apple</p>
</div>
<div class="col-md-3" >
<h3>Things that are Orange</h3>
<p>Orange</p>
<p>Ice-Lolly</p>
<p>Essex</p>
<p>Carrots</p>
</div>
</div>
</div>
</body>
</html>
Code: CSS
body {
font-family: 'Roboto Mono', monospace;
}
#media screen and (min-width: 768px)
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}
.jumbotron {
text-align: center;
}
.container {
text-align: center;
}
#one {
border: 5px solid pink;
border-radius: 20px;
background-color: pink;
color: white;
}
#two {
border: 5px solid purple;
border-radius: 20px;
background-color: purple;
color: white;
}
#three {
border: 5px solid green;
border-radius: 20px;
background-color: green;
color: white;
}
#four {
border: 5px solid orange;
border-radius: 20px;
background-color: orange;
color: white;
}
.row2 {
margin-top: 30px;
margin-right: -15px;
margin-left: -15px;
}
A quick guide to resizing Bootstrap’s gutter width
Resizing Bootstrap's Gutter
A simple method of changing Bootstrap's default gutter size.
HTML
<div class="gutter-2 row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
`
CSS
.gutter-2.row {
margin-right: -1px;
margin-left: -1px;
}
.gutter-2 > [class^="col-"], .gutter-2 > [class^=" col-"] {
padding-right: 1px;
padding-left: 1px;
}`
to change the gutter you have two way:
change #grid-gutter-width in variables.less:327, but then you will need to compile the generated css yourself.
change #grid-gutter-width and download a new custom build at Bootstrap#Customize
Note that the customize section will be dropped in twitter bootstrap 4.
I have a group of stats styled as shown below, but if I want to center the group, it will use the width of the descriptions that extend past and have a larger width. What's the easiest way to center according to the width of just the stat numbers and still have the descriptions below them?
.container {
text-align: center;
}
.stats {
display: block;
margin: 0 auto 30px auto;
}
.left-stats {
text-align: right;
display: inline-block;
margin-right: 40px;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: inline-block;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
I have a solution using your HTML and using display: table-cell instead of display: inline-block. Instead of a 40px margin to create the space between the columns, I added 20px left/right padding in the relevant elements.
Note that I added dotted blue borders for demonstration purposes, you can remove them.
.container {
text-align: center;
}
.stats {
display: table;
width: 100%;
margin: 0 auto 30px auto;
border: 1px dotted blue;
}
.left-stats {
text-align: right;
display: table-cell;
width: 50%;
padding-right: 20px;
border: 1px dotted blue;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: table-cell;
width: 50%;
padding-left: 20px;
border: 1px dotted blue;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
You mean something like this?
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
text-align: center;
}
I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:
Currently, I have the following code:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item a.current {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
I cannot find a way to add the empty space in between the content of the div and the bottom border without it being the same colour as the div background.
As it currently stands you can't do this. You can't add a gap between an element and its own border. You can, however, add the border to its parent element (the div.item element in this case), then add padding-bottom to that same element to separate it from the a element:
$("a").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item.current {
border-bottom: 2px solid red;
padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item current">
Page 1
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
Note that I've also modified your JavaScript to add this .current class to the li element and not the clicked a element.
demo
new css:
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
border-bottom: 8px solid red;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
border-bottom: 4px solid white;
}
.container .item a.current {
}
One more version using :after pseudo element. Unlike other answers this will put white border inside of element, not push the green further outside.
The interesting parts I added/changed:
.container .item a {
...
position: relative;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
And here is a demo:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
position: relative;
}
.container .item a.current {
border-bottom: 2px solid red;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
</div>
Demo: http://jsfiddle.net/osajfgLc/
Not sure whether this is what you want. Try this. I added a div with class box. This also can be done using css after method.
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.box {
margin-top:2px;
height: 2px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
<div class="box"></div>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>
Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.
Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)
I have type of card created. It has 3 rows with a p and a div. I want both of them to come in the same line. How can I do this?
HTML:
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p>Commitment</p>
<div class="progress_wrap">
<div class="progress" style="width:35%;"></div>
</div>
</div>
<div class="reputation">
<p>Reputation</p>
<div class="progress_wrap">
<div class="progress" style="width:65%;"></div>
</div>
</div>
</div>
CSS:
.user_card {
background-color: #eee;
width: 30%;
padding: 10px;
}
.user_card div p {
display: inline;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
Fiddle.
Please post fiddle as well with your answers!
Using display table, table-row, table-cell.
http://jsfiddle.net/vnama/
.user_card {
background-color: #eee;
width: 30%;
padding: 10px;
display:table;
}
.user_card p {
display: table-cell;
vertical-align:top;
line-height:30px;
padding:2px 10px 2px 2px;
}
.user_card div {
display:table-row;
padding:2px;
}
.user_card div div {
display:table-cell;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
You can try using tables: http://jsbin.com/efugop
I have it:
HTML:
<div class="user_card">
<div class="skills">
<table><tr><td>
<p>Skills</p></td><td>
<div class="progress_wrap" style="margin-left:70px;">
<div class="progress" style="width:95%"></div>
</div></td></tr></table></div>
<div class="commitment">
<table><tr><td>
<p style="position:relative;margin-top:6px;">Commitment</p>
<div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;">
<div class="progress" style="width:35%;"></div>
</div></td></tr></table>
</div>
<div class="reputation">
<table><tr><td>
<p style="position:relative;margin-top:6px;">Reputation</p>
<div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;">
<div class="progress" style="width:65%;"></div>
</div>
</td></tr></table>
</div>
</div>
CSS:
.user_card {
background-color: #eee;
width: 50%;
padding: 20px 80px 20px 20px;
}
.user_card div p {
display: inline;
float: left;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100px;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
You can use css to float left
. progress_wrap {
float: right;
}
HTML
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p style="margin-left:-35px;">Commitment</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:35%;"></div>
</div>
</div>
<div class="reputation">
<p style="margin-left:-73px;">Reputation</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:65%;"></div>
</div>
</div>
In CSS
.user_card {
background-color: #eee;
width: 50%;
padding: 20px 100px 20px 20px;
}
.user_card div p {
display: inline;
float: left;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}