CSS styling issues
I am trying to create a header with a progress bar at the top. I am trying to make it responsive. I tried reading about this and tried several solutions but no success. So my questions are:
- How do I get the progress bar to shrink from the screen? So far, I've used tables to arrange items and I can wrap the table, but the progress bar itself won't shrink.
- How do I properly align the progress bar so that it shows to the right when full screen?
Here's my code:
.header-style {
background-color: #2A417B;
height: auto;
width: auto;
display: block;
}
.header-text {
color: white;
margin: 0em;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
display: block;
position: relative;
text-align: left;
padding: 1em;
}
.table-wrap {
display: block;
}
.table-wrap td {
display: inline-block;
}
progress {
display: inline-block;
width: 50em;
height: 2em;
margin: 1em;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}
<header class="header-style">
<table class="table-wrap">
<tr>
<td><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
<td>
<h1 class="header-text"> My heading</h1>
</td>
<td> <progress value="5" max="100"></progress></td>
</tr>
</table>
</header>
+3
source to share
3 answers
You can achieve something similar with flexbox.
If you want elements on one line:
.header-style {
background-color: #2A417B;
/* define as flex-container */
/* by default items will be on single line */
display: flex;
/* center items */
align-items: center;
}
.header-text {
color: white;
margin-right: 1em;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
position: relative;
text-align: left;
/* don't shrink image */
flex-shrink: 0;
padding: 1em;
}
progress {
width: 50em;
height: 2em;
margin: 1em;
/* moving progress bar to right */
margin-left: auto;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}
<header class="header-style">
<img class="header-style-logo" src="logo_white.png" width="111" height="72" />
<h1 class="header-text"> My heading</h1>
<progress value="5" max="100"></progress>
</header>
If you need elements on multiple lines, you need to add a pseudo element with margin-left: auto
to place it to the right and the CSS value is order
less progress
. Demo video:
.header-style {
background-color: #2A417B;
/* define as flex-container */
display: flex;
/* center items */
align-items: center;
/* allow moving items to new line */
flex-wrap: wrap;
}
.header-text {
color: white;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
position: relative;
text-align: left;
padding: 1em;
/* don't shrink image */
flex-shrink: 0;
}
.header-style:after {
content: "";
/* adding order to display before progress bar */
order: 0;
/* move to the right */
margin-left: auto;
}
progress {
width: 50em;
height: 2em;
margin: 1em;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
/* display after pseudoelment */
order: 1;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}
<header class="header-style">
<img class="header-style-logo" src="logo_white.png" width="111" height="72" />
<h1 class="header-text"> My heading</h1>
<div class="margin-left-auto">
</div>
<progress value="5" max="100"></progress>
</header>
+2
source to share
You can try something like this with percentages:
.header-style {
background-color: #2A417B;
height: auto;
width: auto;
display: block;
}
.header-text {
color: white;
margin: 0em;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
display: block;
position: relative;
text-align: left;
padding: 1em;
}
progress {
display: block;
width: 100%;
height: 2em;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
}
table{
width: 100%;
}
td.logo{
width: 10%;
}
td.heading{
width: 10%;
}
td.progress{
width: 80%;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}
<header class="header-style">
<table class="table-wrap">
<tr>
<td class="logo"><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
<td class="heading">
<h1 class="header-text"> My heading</h1>
</td>
<td class="progress"> <progress value="5" max="100"></progress></td>
</tr>
</table>
</header>
+2
source to share
I suggest using the css flex method to manage your content. The Document Object Model is what defines the logical structure of your page, and it is good practice to keep the logical structure logical. Using a table for anything other than storing tabular data is not good practice.
The reason your progress bar is not responding to view / escaping port changes is because the browser is trying to read the em (Attributed to font size) measure. Using% as the unit for your progress bar will dynamically control its size.
.header-style {
background-color: #2A417B;
height: auto;
width: auto;
display: block;
}
.header-text {
color: white;
margin: 0em;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
display: block;
position: relative;
text-align: left;
padding: 1em;
}
.table-wrap {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
progress {
display: inline-block;
width: 100%;
height: 2em;
margin: 1em;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}
img {
flex-shrink: 0;
}
<header class="header-style">
<div class="table-wrap">
<img class="header-style-logo" src="logo_white.png" width="111" height="72" />
<h1 class="header-text">My heading</h1>
<progress value="5" max="100"></progress>
</div>
</header>
0
source to share