How to make advanced (for me :) progress bar in html? [duplicate] - html

This question already has answers here:
Progress element html text inside
(4 answers)
Closed 2 years ago.
<div class="progress-bar-title">
Blabla - %48
</div>
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:6px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:10px;border-radius:4px;"></div>
</div>
I am using this code but I want this "Blabla - %48" text in the progress bar. How can I do this?
like this but no loading bar, normal progress bar.


.container{
width: 300px;
height: 20px;
background-color: #a1abb3;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.progress{
background-color: #e4c14a;
height: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.load-text{
color: gray;
font-size: 10px;
line-height: 20px;
float: right;
margin-right: 10px;
}
<div class="container">
<div class="progress" style="width:48%">
<span class="load-text">Blabla - 48%</span>
</div>
</div>


Just change the location of the text, and adjust some attributes
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:12px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:20px;border-radius:8px;">
<span class="progress-bar-title" style="color: black;font-size:80%"> Blabla - %48</a>
</span>
</div>
</div>


You can create two div's.
.container{
margin-top: 1rem;
width: 10rem;
background-color: #e5e5e5;
border-radius: 0.4rem;
}
.progress{
background-color: green;
height: 1rem;
padding: 0;
border-radius: 0.4rem;
display: flex;
justify-content: flex-start;
}
.progress span{
color: #fff;
filter: brightness(2);
font-weight: 700;
}
<div class="container">
<div class="progress" style="width:40%">
</div>
</div>
<div class="container">
<div class="progress" style="width:60%">
</div>
</div>

Related

CSS write element tag near to text

I want to have the texts which follow the choices ("A", "B" etc.) in the same line as those choices.
.answer {
box-shadow: inset 0px 0px 4px 0 #b7b7b7;
margin: 5px;
padding: 10px;
font-size: 14px;
border-radius: 7px;
margin-bottom: 10px;
}
<div class="choices">
<div class="answer">A) <p style="">casa</p></div>
<div class="answer">B) <p>kasa</p></div>
<div class="answer">C) <p>fsdfsdf</p></div>
<div class="answer">D) <p>sefsfesf</p></div>
<div class="answer">E) <p>sfesfesfs</p></div>
</div>
How can I do this? Thanks in advance

I suppose your problem/wish is to have the p tag text in the same line as "A)", "B)" etc.?
If yes, add this CSS rule:
.answer p {
display: inline;
}
.answer {
box-shadow: inset 0px 0px 4px 0 #b7b7b7;
margin: 5px;
padding: 10px;
font-size: 14px;
border-radius: 7px;
margin-bottom: 10px;
}
.answer p {
display: inline;
}
<div class="choices">
<div class="answer">A)
<p style="">casa</p>
</div>
<div class="answer">B)
<p>kasa</p>
</div>
<div class="answer">C)
<p>fsdfsdf</p>
</div>
<div class="answer">D)
<p>sefsfesf</p>
</div>
<div class="answer">E)
<p>sfesfesfs</p>
</div>
</div>

What i am doing wrong in table with divs

What i am doing wrong with this table constructed with divs?
Why header row and cell row don't have the same width?
Another problem is, when resizing browser window header an cell losing their justify. I'd like to have the same movement for both header and cells.
if you resize your browser window you will see borders moving different.
here is my code
html, body {
width: 100%;
height: 95vh;
overflow: hidden;
background-color: rgba(31, 30, 30, 1);
}
.records {
width: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.header-cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #3a3a3a;
color: #fff;
white-space: nowrap;
}
.cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #ccc;
color: #494949;
white-space: nowrap;
}
.header {
position: fixed;
width: 100%;
}
.row1 {
padding-top: 4px;
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
<div class="records">
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
Peter Dinklage
</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
Kit Harington
</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>

I have updated your html and styles, The width of the entries row and the float: left; used instead of display: inline-block;
HTML
<div class="records" >
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;width:100%">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;width:100%">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
Style
html,body {
width:100%;
height:95vh;
background-color: rgba(31,30,30,1);
overflow:hidden;
}
.records {
width:99%;
overflow-x:hidden;
overflow-y:auto;
}
.header-cell {
height: 20px;
width: 9%;
background: #3a3a3a;
color: #ffffff;
/* display: inline-block; */
/* margin-left: -4px; */
white-space: nowrap;
border: 1px solid #fff;
/* margin-top: 2px; */
float: left;
}
.cell {
height: 20px;
width: 9%;
background: #cccccc;
color: #494949;
/* display: inline-block; */
/* margin-left: -4px; */
float: left;
white-space: nowrap;
border: 1px solid #fff;
/* margin-top: 2px; */
}
.header {
/*position:fixed; */
width:100%;
}
.row1 {
padding-top:4px;
}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
Refer the update fiddle :
https://jsfiddle.net/5Ldv5m1a/3/

This is a highly unconventional way of making a table. HTML has the <table> element where tables have <tr> (table row) elements and <td> (table cell) elements. The layout would look like this:
<table class="tabName">
<tr class="header">
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
</table>
This will create 2 rows with 4 elements in each row excluding the header. Using the class name for the first table row, you can set special CSS specs on the header and other rules for the non-headers. If you want CSS rules for just the header use this:
.header td{
/*header styles*/
}
If you want to style the cells that are not part of the header use this CSS rule:
td:not(.header td){
/*non-header cell styles*/
}
For future reference, keep in mind that divs are only used to "package" a set of elements together when they share a common set of rules. So avoid rewriting the same rules for multiple elements by using the same class names for both or grouping them within a div. For example, if you have Ok and Cancel buttons together, you would put them inside a div because they will use exact same CSS rules except for the button color.

Try this
.records {
display: table;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.btlrow {
display: table-row;
}
.cell {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #fff;
color: #494949;
display: table-cell;
height: 20px;
margin-top: 2px;
white-space: nowrap;
}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
<div class="records" >
<div class="btlrow">
<div class="cell">#</div>
<div class="cell">Movie</div>
<div class="cell">Distributor</div>
<div class="cell">Country</div>
<div class="cell">Language</div>
<div class="cell">Name</div>
<div class="cell">Role</div>
<div class="cell">Born</div>
<div class="cell">Star Sign</div>
<div class="cell">Episodes</div>
</div>
<div class="btlrow">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div class="btlrow">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>

Your code need few changes in the CSS file and few CSS changes in HTML file. Below are the changes.
HTML:
<div class="records" >
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;display: table-row;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;display: table-row;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
CSS:
html,body {width:100%;height:95vh;background-color: rgba(31,30,30,1); overflow:hidden;}
.records {width:99%; overflow-x:hidden; overflow-y:auto; display: table}
.header-cell {background:#3a3a3a;color:#ffffff;display:table-cell;border:1px solid #fff;}
.cell {background:#cccccc;color:#494949;display:table-cell;border:1px solid #fff;}
.header {display: table-row;}
.row1 {padding-top:4px;}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

Content not displayed correctly [duplicate]

This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 6 years ago.
EDIT: here is a link to whats going on http://flameforged.altervista.org/games/gd/
I have 4 divs inside the <main> element I have styled them to display all on the same line straight across no matter what.
When I have lets say <h3>Title</h3> in all the divs they all display correctly still but once I add a little input field <input type="text"> all the other divs appear to be moved down.
I am not sure how to fix the issue here is my css and html
body{
width: 100%;
height: 100%;
}
header{
background-color: #c0c0c0;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
}
.nav-bar{
display: inline;
float: right;
}
.panel{
display: inline-block;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
width: 24%;
height: 100%;
padding: 2px;
margin-left: 0%;
}
<main>
<div class="panel" id="researchPanel">
<h3>Research</h3>
</div>
<div class="panel" id="typerPanel">
<h3>HTML Terminal</h3>
<form>
<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
</form>
</div>
<div class="panel" id="employeePanel">
<h3>Employees</h3>
</div>
<div class="panel" id="upgradesPanel">
<h3>Upgrades</h3>
</div>
</main>

Give vertical-align: top to panel. here is your working answer
body{
width: 100%;
height: 100%;
}
header{
background-color: #c0c0c0;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
}
.nav-bar{
display: inline;
float: right;
}
.panel{
display: inline-block;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
width: 24%;
height: 100%;
padding: 2px;
margin-left: 0%;
vertical-align: top;
}
<main>
<div class="panel" id="researchPanel">
<h3>Research</h3>
</div>
<div class="panel" id="typerPanel">
<h3>HTML Terminal</h3>
<form>
<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
</form>
</div>
<div class="panel" id="employeePanel">
<h3>Employees</h3>
</div>
<div class="panel" id="upgradesPanel">
<h3>Upgrades</h3>
</div>
</main>

CSS border doesn't work

HTML:
<body>
<div><p>Something</p></div>
<div class = "myPanel">
<div class = "heading">my header</div>
<div class = "body">my body</div>
</div>
<div><p>Something</p></div>
</body>
css:
.myPanel: {
border: 1px solid #687D6D;
border-radius: 5px 5px 0 0;
box-shadow: 10px 10px 1px black;
margin: 3%;
}
.myPanel .heading {
background: #B6F0C4;
border-radius: 5px 5px 0 0;
color: #687D6D;
padding: 10px 20px;
}
.myPanel .body {
padding: 10px 20px;
}
JSFiddle
What I'm curious is that, even if I set border on .myPanel, it doesn't work on .myPanel .body, there's no border around .myPanel .body, why?

here is your problem:
.myPanel: {
just remove the : (colon)
snippet below:
.myPanel {
border: 1px solid #687D6D;
border-radius: 5px 5px 0 0;
box-shadow: 10px 10px 1px black;
margin: 3%;
}
.myPanel .heading {
background: #B6F0C4;
border-radius: 5px 5px 0 0;
color: #687D6D;
padding: 10px 20px;
}
.myPanel .body {
padding: 10px 20px;
}
<div>
<p>Something</p>
</div>
<div class="myPanel">
<div class="heading">my header</div>
<div class="body">my body</div>
</div>
<div>
<p>Something</p>
</div>

Set height depending on container

I am trying to create an app-like website, but I am struggling with having a container within a container.
As you can see when I expand the "Summary" the container doesn't stay within the other container.
How do I fix this?
This is part of my HTML:
<div class ="block" id="page2" heigth=100% style="display: block;">
<details>
<summary id="resultnaam">Sensire</summary>
<p padding=5px>MMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p>
</details>
<div class="block" id="iframeblock">
<iframe src="secretlinkgg" width=100% heigth=100%</iframe>
</div>
</div>
And here is some of the CSS:
.block {
text-align: center;
position: relative;
margin: 5px;
height: 100%;
border-radius: 6px;
-webkit-box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
-moz-box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
box-shadow:
inset 0 0 10px rgba(0,0,0,0.18),
2px 3px 16px rgba(0,0,0,0.6);
background: whitesmoke;
}
#iframeblock {
padding: 10px;
display: flex;
height: 85%
}
Please help :)

It's already fixed.
The code I used is correct :P