I'm trying to create a button toolbar like so:
/------+--------+-------\
| left | middle | right |
\------+--------+-------/
All I have to do in this fiddle, is to eliminate the margin between the buttons. But how to do this without using negative values for margin? Is this possible, or exists better ways to create a toolbar?
HTML:
<button class=left>left-button</button>
<button>middle-button</button>
<button class=right>right-button</button>
CSS:
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
}
.left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.right {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the spaces between the buttons as below:
<button class=left>left-button</button><button>middle-button</button><button class=right>right-button</button>
.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0px;
}
http://jsfiddle.net/4ssd9/7/
just add float:left;
i also wrapped it with container so it will be centered, you can remove them if you want.
see updated fiddle
hope that helps.
You can use float:left; on the button.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
float:left; /* Add this */
}
DEMO
Here I have made the required changes please check the fiddle link http://jsfiddle.net/Mohinder/vwK3Z/
what you need to do is make buttons float:left; remove right border from left button and left border from right button the way I have it on fiddle.
And if you want no border-between then add class="mid" to middle button and add .mid { border-left:none; border-right:none; } in your CSS
Related
I have a rounded button like this.
.rock{
height:100px;
width:100px;
border-radius:100px;
border-color:yellow;
border-width:8px;
}
<button class="rock" type='button'>Button</button>
My question is, how can I remove the weird half-colored thing that shows up on the button border and changes when clicked. I just want the button border to be solid yellow.
Set border-style to solid. I think it's outset by default, which gives you a more beveled treatment.
.rock {
height: 100px;
width: 100px;
border-radius: 100px;
border-color: yellow;
border-width: 8px;
border-style: solid;
}
<button class="rock" type='button'>Button</button>
I have attached an Image. I want to create similar Border. but I am unable to create top border half
here is my CSS
border-left:1px solid;
border-top:1px solid;
border-bottom:1px solid;
border-right:1px solid;
How do I actually make top border limited?
You can abuse a fieldset and legend for this:
fieldset {
height: 100px;
width: 80%;
margin: 1em auto;
}
legend {
padding: 1em;
}
<fieldset>
<legend>Icon here</legend>
</fieldset>
Note: This is not semantic as this is not the intended use of a fieldset or legend.
MDN Reference
The HTML element is used to group several controls as well as labels () within a web form.
Use fieldset and legend:
body {
background-color: #4a494e;
}
.box {
border: 5px #b79a60 solid;
color: #b79a60;
}
.box-label {
color: #b79a60;
padding: 5px 10px;
}
<fieldset class="box">
<legend class="box-label">Insert Clock Image Here</legend>
<h1>Hours</h1>
<p>Show gallery opens daily</p>
<p>11.00am - 6.00pm</p>
</fieldset>
I want to make both elements 'select' and 'button' have the same height.
JS Fiddle
HTML
<select><option>...</option></select><button>Button</button>
CSS
* {
font-size:100%;
}
select, button {
border:1px solid gray;
padding:.4em .6em;
margin:0;
//box-sizing:border-box; (did not help...)
}
JS Fiddle
Right now it looks like this:
But it should look like this:
How can I achieve the desired outcome with changing the CSS?
Add some bigger padding for button:
button{
padding: 1px;
}
Just make sure in all browsers elements are shown equal. Form elements tends to be Browser specific, so they may wary. Better put dropdown above fake drowpdown image and make it with opacity = 0, in that way you will get dropdown appearance same in all browsers.
Give padding differently.. May be like this
select, button {
border:1px solid gray;
margin:0;
}
select {
padding:.35em .6em;
}
button {
padding:.4em .6em;
}
Define height as like this
select, button {
border:1px solid gray;
padding:.4em .6em;
margin:0;
height:40px; // add this line
}
Demo
select, button {
border:1px solid gray;
margin:0;
padding:0 .6em; //updated
height:2.3em; //new
box-sizing:border-box; //new
}
* {
font-size: 100%;
box-sizing: border-box;
}
button::-moz-focus-inner {
border:0;
padding:0;
}
select, button {
border: 1px solid gray;
padding: 5px;
margin: 0;
}
button {
padding: 6px;
}
I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):
------------------------------------------ TEXT --------------------------------------------
the line should be dotted and the text in the middle should separate the line in half.
I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.
I hope it's clear. Thanks for ideas
<div id="line"><span>TEXT</span></div>
And CSS:
#line{
border-bottom: 1px black dotted;
overflow:visible;
height:9px;
text-align:center;
margin: 5px 0 10px 0;
}
#line span{
background-color: white;
text-align:center;
padding: 0 5px;
}
See Example on JSFiddle
I would use CSS, and two containers:
Demo: http://jsfiddle.net/LRSuJ/
HTML:
<div class="something">
<div class="content">Text</div>
</div>
CSS:
.something {
border-bottom: dotted 1px #000;/* Border style */
height: 10px; /* Adjusted height */
margin-bottom: 10px; /* Proper offset for next element */
line-height: 20px; /* Actual text height */
text-align: center; /* Center text */
}
.content {
background-color: #FFF; /* Hide previous dots */
display: inline; /* Inline element */
padding: 0 10px; /* Customisable left/right whitespace */
}
You could use a fieldset and legend:
<fieldset>
<legend>TEXT</legend>
</fieldset>
fieldset
{
border-top:solid 1px black;
}
fieldset legend
{
text-align:center;
}
http://jsfiddle.net/2amBc/
I would do it like this:
HTML
<fieldset>
<legend>Text with dotted line</legend>
</fieldset>
CSS
fieldset {
border: 0;
border-top: 1px dotted gray;
}
legend {
text-align: center;
}
jsFiddle demo: http://jsfiddle.net/XZcRB/
This is my layout:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
And the CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
The round borders don't appear on the item elements.
If I put them separately in itemHeader and itemFlag they appear.
But I'd really like to clear some code and put them in the item
Also can't get the radius to work on the divContainer class. I want a rounded container which contains rounded rows.
What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.
I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.
If you remove the background color from the table rows, and you can add this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your class names.
You can see it in action here:
http://jsfiddle.net/jaSs8/1/
Maybe the problem is in divContainer class. Try to change the display attribute to table-row.
You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
I think best solution for this case is to create wrapper for table tag and apply all border styles to it.
<div class="tableWrapper">
<table>{tableContent}</table>
</div>
<style>
.tableWrapper {
border-radius:10px;
}
</style>