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); }
Related
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>
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>
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>
I want to display the div content (having different heights) one after the other, with 2 divs side by side. I have tried to do this but I am getting space between divs having different heights.
Here is the code:
<html>
<div class="itemlist">
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
</div>
.ItemView {
width: 46%;
float:left;
background: #fff;
margin: 10px 10px 0px 10px;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
Current output:
You should seperate the 2 columns and put all elements of a column in a floated container.
See this FIDDLE
HTML :
<div class="itemlist">
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
</div>
CSS :
.ItemView {
width: 100%;
background: #fff;
margin: 10px 0 0;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
.col{
float:left;
width:46%;
margin: 0 10px;
}
.big {
height:200px;
}
If I use bootstrap, it messes the alignment up on my page. Member names should be appeared right next to icon, but with Bootstrap, they overlap the icon.
How can I fix this?
Also, when the browser window is made smaller, the square line gets messed up too. I want the data to have a border when the window is small.
So I don't want it to look like this:
But rather, like this:
If possible I want to have these icon, and name in middle not on the top.
DEMO http://jsfiddle.net/sbq7X/
HTML
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location">Located in California</div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
</div>
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location"><span class='text-error'>Located in California</span></div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
CSS
div.store_row{
min-width: 300px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
border:1px solid;
display:table;
}
div.store_left{
width: 300px;
display:inline-block;
vertical-align:top;
}
div.store_right{
width: 300px;
display:inline-block;
vertical-align:top;
background-color: #FFFFFF;
}
div.store_title{
background-color: #000000;
color: #FFFFFF;
height: 35px;
padding:5px;
}
div.store_location{
height: 35px;
border-right:1px solid;
background-color: #FFFFFF;
padding:5px;
}
div.store_icon{
width: 70px;
height: 70px;
display:inline-block;
}
div.store_icon img{
width:100%;
height:100%;
}
div.introduction{
display:inline-block;
vertical-align:top;
width:200px;
text-align: left;
}
.... and bootstrap
img-polaroid class has 4px padding and it causes the problem:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
See the fiddle where it's removed.
EDIT: The alignment is working fine as well. You have static width for the all elements and they're too wide for fiddle. I've decreased their size so they are inline now.