I've the following divs in my document:
<div class="bill-header">
<div class="bill-header-info"><span>Bill No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Table No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Room No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Amount</span></div>
</div>
I'm using the following CSS to make them sit on one line:
.bill-header {
height: 30px;
background-color: darkgrey;
padding-left: 10px;
}
.bill-header-info {
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
}
How can I make them appear with same distance in between them?
Fiddle
Do you mean like this? http://jsfiddle.net/3Zv2y/2/
Make these changes:
.bill-header-info {
width:23%;
text-align:center;
}
Add margin: 0 5px in your .vline:
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
margin:0 5px;
}
This will give a margin of 5px in both left and right of your vline element.
JSFiddle
use width property in css for exapmle
.bill-header-info {width:22%;}
Updated Fiddle
As long as there are always four items in a row, you can use a "fixed" percentage value:
.bill-header {
height: 30px;
width: 100%;
background-color: darkgrey;
}
.bill-header-info {
float: left;
width: 24.6%;
text-align: center;
padding-top: 5px;
}
The important parts are the width and text-align properties in .bill-header-info
.bill-header-info {
text-align:center;
width:23%;
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top:3px;
margin: 0 5 3 3px;
border-left: 1px solid gray;
}
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
So I have the following code below.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
}
.inner2 {
border: 1px solid black;
}
.rect {
width: 0%;
height: 20px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: black;
font-size: 12;
}
.sendreceiveBtn {
height: 25px;
width: 100%;
font-size: 12px;
max-height: 25px;
}
<div>
<div class="inlineItems" id="progBtnBar">
<div class="innerDiv1">
<div class="inner2">
<div id="myProgress">
<div class="rect">0%</div>
</div>
</div>
</div>
<div class="innerDiv2">
<button class=sendreceiveBtn>Transmit</button>
</div>
</div>
</div>
I need to line up a button vertically with another div, with both as inline-block inside another div, so they end up next to eachother, preferably the exact same size. However, something about the button is pushing it down a bit. Nothing I have done so far has been able to change this EXCEPT for increasing the font of the text in the button. What is making this space, and how can I get these to line up?
this is the culprit:
.rect {
line-height: 30px;
}
Vertical align allows multiple siblings to share the same vertical position.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
vertical-align: middle;
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
vertical-align: middle;
}
You can see a working example in the following jsfiddle: https://jsfiddle.net/gkotxdt7/
Replace Your existing CSS with below:
.innerDiv1 { display: table-cell; width: 45%; border-right: 1px solid; padding-right: 5px; vertical-align: middle; }
.innerDiv2 { display: table-cell; width: 45%; padding-left: 5px; vertical-align: middle; }
.inner2 { border: 1px solid black; }
.rect { width: 0%; height: 20px; background-color: #4CAF50; text-align: center; line-height: 30px; color: black; font-size: 12; }
.sendreceiveBtn { min-height: 25px; width: 100%; font-size: 12px; height: auto; }
#progBtnBar{
display: table;
width: 100%;
height: auto; }
Thats it. It will resolve the issue.
Have a couple of questions:
How can I do to have my request div and my Languages Div right to the bottom with the red line no matter the size of the divs above them.
How can I make the Name and Rating divs to be align vertically to the middle of the picture?
Here is my code, JSFiddle (https://jsfiddle.net/samuvk/jejjzjjq/1/) and the result
This is my desired result:
I would really appreciate any help.
#menucontainer {
border: 1px red solid;
overflow: auto;
}
.middledividermenu {
width: 39%;
float: left;
border: 1px green solid;
overflow: auto;
}
.pictureleft {
padding: 0.5em 0.5em 0.5em 0.5em;
width: 19%;
float: left;
border: 1px green solid;
overflow: auto;
}
.rightdivider {
width: 40%;
float: left;
border: 1px green solid;
overflow: auto;
}
.namemiddledivider {
width: 70%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 1.8em;
}
.description {
width: 99%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color:grey;
}
.request {
width: 99%;
float: left;
border: 1px blue solid;
text-align: center;
}
.littlepicture {
width: 15%;
float: left;
border: 1px blue solid;
}
.languagecallout {
padding: 0em 0.5em 0em 0.5em;
width: 10%;
float: left;
border: 1px blue solid;
}
.name {
width: 20%;
float: left;
border:1px solid blue;
vertical-align: middle;
}
.rating {
width: 57%;
float: left;
border:1px solid blue;
height:50%;
}
.personrating {
width: 99%;
float: left;
border:1px solid yellow;
vertical-align: middle;
}
.languages {
width: 99%;
float: left;
border:1px solid blue;
}
I edited your fiddle https://jsfiddle.net/jejjzjjq/5/
Use position:relative and position:absolute
Even though your structure is a bit messy, I didn't take time to change it, i only added a few stuff. You really need to review your code entirely!
Does this help? It shows the effect of the spaces between the top divs and the bottom div in a container.
Other notes: I believe that the regular flow of content goes from the top to the bottom and if you want to put a specific piece of content on the bottom or take it out of the regular flow you can use position absolute.
vh is used in my code to get the height so it could fit into the window / view-port nicely.You could make the height to pixels or whatever.
*{
box-sizing:border-box;
}
.container{
height: 100vh;
border-bottom: 3px red solid;
position: relative;
}
.name, .rating, .language, .request{
width: 45%;
border:1px solid blue;
height: 20vh;
}
.name, .request{
float: left;
}
.rating, .language{
float: right;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="name">Name</div>
<div class="rating">Rating</div>
<div class="bottom">
<div class="request">Request</div>
<div class="language">Language</div>
</div>
</div>
I'm trying to do this arrow with CSS. It has the same background image that the left div has. Is it possible to add a background image to the triangle's border and repeat it?
My stab at this problem
HTML
<div class="left">Left Div</div>
<div class="arrow-right"></div>
<div class="right">Right Div</div>
.left, .right, .arrow-right {
display:inline-block;
}
CSS
.left {
background-color: #b6b6b6;
line-height: 32px;
margin: 0;
padding-right: 0;
padding-top: 8px;
vertical-align: top;
padding-left:10px;
}
.right {
background-color: rgba(0, 0, 0, 0.2);
line-height: 36px;
margin-left: -24px;
padding-left: 35px;
padding-right: 5px;
padding-top: 4px;
vertical-align: top;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
margin-left:-4px;
border-left: 20px solid #e4e4e4;
}
Working fiddle
I want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.