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
Related
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
I have this layout of my web page, here last div tag <div>{this.props.status}</div> is in left end. I want to set it in center between rock and scissors button.
Expected
<div className="AppTitle">
<b>Score: {this.props.score}</b>
<div>
<RoundedButton text="Rock" clickitem={this.clickitem} />
<RoundedButton text="Paper" clickitem={this.clickitem} />
<RoundedButton text="Scissors" clickitem={this.clickitem} />
</div>
<div>{this.props.status}</div>
</div>
App.css
.AppTitle {
margin: 50px;
}
.Button {
padding: 20px;
margin: 20px;
border: 1px solid blue;
border-radius: 10px;
}
What is the way to do it in HTML ?
Try this for css.
.AppTitle {
margin: 50px;
display:inline-block;
}
.button {
padding: 20px;
margin: 20px;
border: 1px solid blue;
border-radius: 10px;
}
.status{text-align:center;}
<div class="AppTitle">
<b>Score: -1</b>
<div>
<Button class="button">Rock</Button>
<Button class="button">Paper</Button>
<Button class="button">Scissors</Button>
</div>
<div class="status">Computer Won</div>
</div>
EDITED
Here added four button & background this one clear.
.AppTitle {
margin: 50px;
display:inline-block;
background:#b5b5b5;
}
.button {
padding: 20px;
margin: 20px;
border: 1px solid blue;
border-radius: 10px;
}
.status{text-align:center;background:#ccc;}
<div class="AppTitle">
<b>Score: -1</b>
<div>
<Button class="button">Rock</Button>
<Button class="button">Paper</Button>
<Button class="button">Scissors</Button>
<Button class="button">Rock</Button>
</div>
<div class="status">Computer Won</div>
UPDATED
Make parent div to center.
.wrapper{text-align:center;}
.AppTitle {
margin:50px;
display:inline-block;
background:#b5b5b5;
text-align:left;
}
.button {
padding: 20px;
margin: 20px;
border: 1px solid blue;
border-radius: 10px;
}
.status{text-align:center;background:#ccc;}
<div class="wrapper">
<div class="AppTitle">
<b>Score: -1</b>
<div>
<Button class="button">Rock</Button>
<Button class="button">Paper</Button>
<Button class="button">Scissors</Button>
</div>
<div class="status">Computer Won</div>
</div>
</div>
If you have a look at .status, you'll find that it is the same width as the previous <div>. To center the text, you'll need to give it the CSS:
.status {
text-align: center;
}
Also, <RoundedButton> is not a HTML tag. Use <button> instead.
.AppTitle {
margin: 50px;
display: inline-block;
}
.button {
padding: 20px;
margin: 20px;
border: 1px solid blue;
border-radius: 10px;
}
.status {
text-align: center;
}
<div class="AppTitle">
<b>Score: -1</b>
<div>
<button class="button">Rock</button>
<button class="button">Paper</button>
<button class="button">Scissors</button>
</div>
<div class="status">Computer Won</div>
</div>
This could also work #Williams
.mainContainer {
width: 500px;
height: 200px;
border: 2px solid black;
background-color: lightgray;
}
.top {
width: 100%;
height: 50px;
background-color: lightgray;
display: table-cell;
vertical-align: middle;
padding-left: 100%;
}
.outputContainer {
width: 100%;
background-color: lightgray;
height: 20px;
}
#score {
margin-top: 50px;
display: inline;
}
.third {
width: 30%;
height: 70px;
background-color: lightgray;
display: inline-block;
}
button {
padding: 20px;
border: 2px solid blue;
border-radius: 10px;
width: 100px;
}
<div class="mainContainer">
<div class="top">
<span id="score"><b> Score: </b></span>
</div>
<center>
<div class="third">
<button type="button"> Rock </button>
</div>
<div class="third">
<button type="button"> Paper </button>
</div>
<div class="third">
<button type="button"> Scissors </button>
</div>
<div class="outputContainer">
<h2> Computer won! </h2>
</div>
</center>
</div>
In order to keep them aligned in most cases and not just as a fix on a certain display, try putting them in one and using display: block, like so
<div className="AppTitle">
<b>Score: {this.props.score}</b>
<div>
<RoundedButton text="Rock" clickitem={this.clickitem} />
<div style="display:block">
<RoundedButton text="Paper" clickitem={this.clickitem} />
<span>{this.props.status}</span>
</div>
<RoundedButton text="Scissors" clickitem={this.clickitem} />
</div>
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>
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/