I have a css table and am trying to make a space between each row, the gap should have no color. I have tried a few things that have not worked such as:
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
and
border-collapse: collapse;
The code is below along with a jsfiddle.
Thanks.
HTML
<div class="live-mu-table" >
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="a-1">q1</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-3">A3</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-2">q2</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-1">A1</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-3">q3</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-2">A2</div>
</div>
</div>
CSS
.live-mu-table{
display: table;
background-color:Azure;
margin-bottom: 5px;
padding-bottom: 5px;
position:relative;
margin-left: auto;
margin-right: auto;
width:75%;
// border-collapse: collapse;
}
.live-mu-table-tr{
display: table-row;
height:30px;
}
.live-mu-table-tdq{
display: table-cell;
border:1px solid #000;
width:60%;
text-align:center;
vertical-align:middle;
cursor: pointer;
}
.live-mu-table-tda{
display: table-cell;
border:1px solid #000;
width:30%;
text-align:center;
vertical-align:middle;
cursor: pointer;
}
.live-mu-table-tdspacer1{
display: table-cell;
border:1px solid #000;
width:10%;
text-align:center;
vertical-align:middle;
}
Use border-spacing to create the spacing.
And if you want the gaps to have no background color, move the background-color from the table to the table-rows.
.live-mu-table {
display: table;
margin-bottom: 5px;
padding-bottom: 5px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 75%;
border-spacing: 0 3px; /* new */
}
.live-mu-table-tr {
display: table-row;
height: 30px;
background-color: Azure; /* moved */
}
.live-mu-table-tdq {
display: table-cell;
border: 1px solid #000;
width: 60%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.live-mu-table-tda {
display: table-cell;
border: 1px solid #000;
width: 30%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.live-mu-table-tdspacer1 {
display: table-cell;
border: 1px solid #000;
width: 10%;
text-align: center;
vertical-align: middle;
}
<div class="live-mu-table">
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="a-1">q1</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-3">A3</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-2">q2</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-1-2">A1</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-3">q3</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-2">A2</div>
</div>
</div>
Related
I really need your help with this. For the life of me, I cannot begin to understand as to why I cannot seem to get my form DIV to properly be positioned on the right side of my 2 column layout.
See attached picture below:
Here is the HTML & CSS in question:
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>
I got it to sit in the right container by adding float:right to the form container div
Fiddle - http://jsfiddle.net/90777hu9/
It's because you float box4 left but you do not float box5 right. So it is still in the flow of the document and pushed below the float left.
Added float:left and width: 78%; to .box5 Press in the snippet the fullpage button to see it
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
float:left;
width: 78%;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>
I'm building the following (see image). Basically, I need 5 buttons with overlapping buttons (each with numbers) on the top. However, I'm unsure how to go about this?
One solution:
https://jsfiddle.net/ryd5e51n/
<div class="button">
<div class="button-top"><span class="text">1</span></div>
<div class="button-bottom"></div>
</div>
.button
{
display: table;
}
.button-top
{
background-color: black;
width: 36px;
height: 36px;
border-radius: 18px;
margin: auto;
position: relative;
z-index: 2;
box-shadow: 0px 0px 2px 2px #bbbbbb;
color: white;
text-align: center;
}
.text
{
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.button-bottom
{
background-color: #efefef;
width: 100px;
height: 90px;
margin-top: -15px;
position: relative;
z-index: 1;
border: 2px solid #bbbbbb;
border-radius: 20px;
}
You can do this with a single element:
HTML:
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
CSS:
div.button {
display:block;
float:left;
margin:18px 5px 0;
position:relative;
overflow:visible;
background:none #efefef;
width:100px;
height:100px;
border:2px solid #ccc;
border-radius:10px;
counter-increment: button;
}
div.button:before {
content:counter(button);
display:block;
padding:8px 14px;
background:none #000;
border:2px solid #ccc;
border-radius:100px;
color:#fff;
position:absolute;
left:50%;
top:-18px;
transform: translateX(-50%);
}
See fiddle: https://jsfiddle.net/jj2nk5f1/2/
Here it is.
.button {
float: left;
margin-left: 10px;
}
.number {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: black;
margin-left: 15px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid black;
margin-top: -10px;
}
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
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;
}
HTML
<div class="right-details">
<div class="right-details-row">
<b>Left title</b>
</div>
<div class="right-details-row">
<div class="right-details-row-l">K</div>
<div class="right-details-row-r">Laass</div>
</div>
</div>
<div class="details-divider"></div>
<div class="left-details">
<div class="left-details-row">
<b>Right Title</b>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 1</div>
<div class="left-details-row-r">Chosen 1</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
</div>
CSS
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
}
.details-divider{
width:20px;
display:table-cell;
}
.right-details{
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
}
.left-details-row{
width: 232px;
float:left;
margin: 0 0 5px 4px;
}
.left-details-row-l{
width:110px;
float:left;
overflow:hidden;
}
.left-details-row-r{
width:122px;
float:left;
overflow:hidden;
}
.right-details-row{
width: 345px;
float:left;
margin: 0 0 5px 4px;
}
.right-details-row-l{
width: 35px;
float:left;
margin: 0 0 2px 4px;
}
.right-details-row-r{
width: 296px;
float:left;
overflow:hidden;
}
As you see in jsfiddle , in the left Div text is in the bottom, How to shift it to the top?
Add vertical-align:top to your .right-details rule:
.right-details {
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
vertical-align:top;
}
jFiddle example
add
vertical-align: top;
to .right-details
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
vertical-align: top;
}
note the last property
http://jsfiddle.net/V5JtR/1/
HTML:
<div class="spoiler-content-block">
<div class="spoiler-inner-content-block">
<div class="top-block top-block-tight">
Name
</div>
<div class="bottom-block">
<span class="previous-number">0</span>
</div>
</div>
<div class="spoiler-inner-content-block">
<div class="top-block">
Time of last login
</div>
<div class="bottom-block">
<br>
<span class="previous-number">0</span>
</div>
</div>
<div class="spoiler-inner-content-block">
<div class="top-block top-block-tight">
Status
</div>
<div class="bottom-block">
<span class="current-number">0</span><br>
<span class="previous-number">0</span>
</div>
</div>
</div>
CSS:
div.spoiler-content{
border: 1px solid #DDDDDD;
padding: 10px;
white-space: nowrap;
text-align:center;
}
div.spoiler-content-block{
display: inline-block;
border:1px solid #ececec;
white-space: normal;
padding: 5px;
text-align: center;
vertical-align: middle;
}
div.spoiler-inner-content-block{
display:inline-block;
white-space: nowrap;
}
.top-block{
border: 1px solid #ececec;
padding: 5px;
margin-bottom: 5px;
height: 30px;
}
.bottom-block{
border: 1px solid #ececec;
padding: 5px;
}
Example: http://jsfiddle.net/nonamez/aGQ8F/
The problem is in the <div class="bottom-block"> - when there is one value it goes bottom, how to fix it?
Try adding a vertical-align:top to your div.spoiler-inner-content-block
div.spoiler-inner-content-block{
display:inline-block;
white-space: nowrap;
vertical-align:top;
}
I've forked your fiddle
Fiddle
You need to add vertical-align:top to the spoiler-inner-content-block