I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.
Is there a way to have the buttons fit into the table cells?
HTML:
<center>
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">Link1 goes here</td>
<td width="25%">Link2<br>goes<br>here</td>
<td width="25%">Link3<br>goes<br>here</td>
<td width="25%">Link4<br>goes<br>here</td>
</tr>
</table>
<p>
<table border="1" width="90%" class="buttons">
<tr>
<td width="20%">Link1 goes here</td>
<td width="20%">Link2<br>goes<br>here</td>
<td width="20%">Link3<br>goes<br>here</td>
<td width="20%">Link4<br>goes<br>here</td>
<td width="20%">Link5<br>goes<br>here</td>
</table>
</center>
CSS:
.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}
Play with the code:
http://codepen.io/anon/pen/bIEtC
You should try to set height and width 100%. Like this:
.buttons a
{
display: inline-block;
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
Try not to hard code CSS into the HTML... it leads to a mess of trouble!
Taking the inline styling out of the html seems to fix most problems. Then, just like #ArmanVirdi said, add the width and the height of the link to be 100%.
The <center> tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p> tag.
HTML
<table class="buttons width-25">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
<td>Link5<br>goes<br>here
</td>
</table>
CSS
table {
width: 100%;
}
.width-20 td {
width: 20%;
}
.width-25 td {
width: 25%;
}
.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}
JSFiddle for reference
Add to .buttons:
width:0;
Resut:
Related
I'm new into frontend and I have been trying to design a calculator. I used table because I think it is the best option. I used <button> element in order to make it clickable, but when I use the attribute ( border: none or 0) it's not clickable anymore , so what's causing that?
Also I would like to know how to change the button background ( I have tried to inherit it and that works but I don't think this is practical).
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
/* padding: 0; */
/* margin: 0 auto; */
font-size: 2rem;
/* text-align: center; */
background-color: #d8d9db;
}
.wrapper {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 0%;
background-color: black;
}
.screen {
padding: 1rem;
background-color: black;
color: white;
text-align: right;
}
tr {
border: 8px solid black;
text-align: center;
}
td {
/* border: 5px solid red; */
background-color: #d8d9db;
width: 100px;
text-align: center;
margin: 0.5rem;
}
button {
font-size: 3rem;
color: black;
border: 0;
margin: 0;
background-color: inherit;
font-weight: bold;
}
.col4 {
background-color: #df974c;
color: white;
width: 25%;
}
.col4 button {
color: white;
padding: 1rem;
}
.butc {
width: 50%;
background-color: #d8d9db;
padding: 1rem;
}
.but0 {
width: 75%;
background-color: #d8d9db;
padding: 1rem;
}
<div class="wrapper">
<section class="screen">0</section>
<section class="calc-buttons">
<table>
<tbody>
<tr>
<td colspan="2" class="butc"><button>C</button></td>
<td class="numbs"><button>←</button></td>
<td class="col4"><button>÷</button></td>
</tr>
<tr>
<td class="numbs"><button>7</button></td>
<td class="numbs"><button>8</button></td>
<td class="numbs"><button>9</button></td>
<td class="col4"><button>×</button></td>
</tr>
<tr>
<td class="numbs"><button>4</button></td>
<td class="numbs"><button>5</button></td>
<td class="numbs"><button>6</button></td>
<td class="col4"><button>−</button></td>
</tr>
<tr>
<td class="numbs"><button>1</button></td>
<td class="numbs"><button>2</button></td>
<td class="numbs"><button>3</button></td>
<td class="col4"><button>+</button></td>
</tr>
<tr>
<td colspan="3" class="but0"><button>0</button></td>
<td class="col4"><button>=</button></td>
</tr>
</tbody>
</table>
</section>
</div>
Button default active state depends on border when setting border to none for the button this means that border-style set in :active won't work.
So in order to remove the border but reserve the clickable effect you need to add something like this in css
button:active{
border: 1px inset black
}
and consider specifying different buttons widths and heights to match the calculator style which will help in their background colors
I would like to draw the following in my web page:
where the three buttons are submit buttons.
I managed to do most but having a problem drawing the vertical lines.
here is my code:
th,
td {
padding: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 50px 0;
}
span {
border-bottom: 2px solid gray;
border-right: 2px solid gray;
padding: 2px;
display: inline-block;
width: 100%;
}
.button {
width: 100%;
padding: 10px;
font: bold;
font-size: 20px;
border: none;
}
.button_blue {
background-color: LightSkyBlue;
}
.button_red {
background-color: OrangeRed;
}
.button_yellow {
background-color: yellow;
}
.boxed {
width: 600px;
border: 3px solid green;
padding: 5px;
margin: 5px;
margin-left: auto;
margin-right: auto;
}
.circle {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 30px;
font: bold;
text-align: center;
display: inline-block;
;
}
<div style="text-align:center">
<u style="color:Red;">
<h1 style="color:DodgerBlue;font-size:3em;">
Hashi
</h1>
</u>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p></p>
<div style="text-align:center">
<p></p>
<table class="center">
<tr>
<td></td>
<td style="border-bottom:4px solid black"></td>
</tr>
<tr>
<td style="text-align:center"><text style="color:DodgerBlue;font-size: 2em;"> Build bridges </text></td>
<td>
<span> {{ form.create(class_="button button_blue") }} </span>
</td>
</tr>
<tr>
<td style="text-decoration: line-through; text-decoration-thickness:5px;">
<div class="circle" style="background-color:yellow;">
3
</div>
<div class="circle" style="background-color:OrangeRed;">
2
</div>
<div class="circle" style="background-color:lightgreen;">
5
</div>
</td>
<td>
<span>{{ form.load(class_="button button_red") }}</span>
</td>
</tr>
<tr>
<td>
<div class="circle" style="background-color:blue;color:yellow;">
4
</div>
</td>
<td>
<span>{{ form.solve(class_="button button_yellow") }}</span>
</td>
</tr>
</table>
</div>
</form>
</div>
You shouldn't use tables to do design, but if that's what you want, then I will come up with a solution for it.
Don't use inline styles. Refactor them to classes, so the HTML is readable.
Set position: relative on all TDs.
Place each element in a TD of its own.
Make the circular buttons absolute to position them on top of bottom right corner.
Use colspan to place the elements relative to each other.
Use border to draw the lines.
/** UNCOMMENT TO REVEAL THE ENTIRE STRUCTURE OF THE TABLE **/
/*td {
border: 2px solid rgba(0, 0, 0, 0.3) !important;
}*/
body {
font-family: Helvetica;
}
h1 {
color: DodgerBlue;
font-size: 4em;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 1px;
margin: 2rem auto 1rem;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: 1rem;
}
td.subtitle {
color: DodgerBlue;
font-size: 3em;
padding: 1rem;
}
td {
position: relative;
text-align: center;
border: 4px none black;
}
td.right-line {
border-right-style: solid;
}
td.bottom-line {
border-bottom-style: solid;
}
td.double-stroke {
border-width: 4px;
border-style: solid;
}
button {
display: flex;
justify-content: center;
align-items: center;
}
button.big {
margin: 1rem;
padding: 1rem 2rem;
font-size: 1.3rem;
width: calc(100% - 2rem);
box-sizing: border-box;
}
button.circle {
position: absolute;
right: 0px;
bottom: 0px;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 1.1rem;
font-weight: bold;
}
.blue.big {
background-color: LightSkyBlue;
}
.red {
background-color: OrangeRed;
}
.yellow {
background-color: yellow;
}
.lightgreen.circle {
background-color: lightgreen;
}
.blue.circle {
background-color: blue;
color:yellow;
}
<form action="" method="post" novalidate>
<table>
<tr>
<td colspan="4"></td>
<td class="bottom-line"><h1>Hashi</h1></td>
</tr>
<tr>
<td> </td>
<td colspan="3" class="subtitle right-line">Build bridges</td>
<td><button class="blue big">Create a Puzzle</button></td>
</tr>
<tr>
<td><button class="yellow circle">3</button></td>
<td class="bottom-line"><button class="red circle">2</button></td>
<td class="bottom-line right-line" colspan="2"><button class="lightgreen circle">5</button></td>
<td><button class="red big">Upload External</button></td>
</tr>
<tr>
<td class="right-line double-stroke"><button class="blue circle">4</button></td>
<td colspan="3"> </td>
<td><button class="yellow big">Run Internal</button></td>
</tr>
</table>
</form>
i am not even sure if this is possible, but is it possible to place a button in the centre of two table rows. For example i have the following table:
/*MAIN CONTAINER*/
div#products_box{
padding: 0;
margin: 0;
width: 70%;
margin: auto;
border: 2px solid #cccccb;
height: 130px;
border-top: 6px solid #ed1c24;
margin-top: 100px;
margin-bottom: 30px;
}
/*div#products{
padding-left: 20px;
padding-right: 20px;
}*/
button#feed{
text-transform: uppercase;
color:#e86065;
background-color: white;
border: 1px solid #e86065;
border-radius: 5px;
float:right;
padding-right: 10px;
width: 150px;
font-size: 1.5em;
}
/*TABLE*/
table{
width:100%;
margin-top: 6px;
border-collapse: collapse; /* no border */
margin-bottom: 10px;
}
td.avg{
text-align: center;
}
/*products button*/
td#button{
margin-top: 20px !important;
height: 50px;
}
h3#rest_name{
color: #e86065;
font-weight: bold;
font-size: 1.2em;
margin-left: 20px;
}
p#addr{
padding:0;
margin: 0;
font-size: 0.9em;
color: #818284;
margin-left: 20px;
margin-bottom: 20px;
}
p.title{
text-transform: uppercase;
color: #000;
font-size: 0.7em;
font-weight: bold;
}
p.rest{
font-size: 0.8em;
color: #818284;
margin-bottom: 20px;
}
td#review{
float:left;
}
/*Red bottom border*/
tr#bottom,th{
padding: 0;
margin: 0;
background: #e86065;
width: 100%;
border: 1px solid #e86065;
height: 40px;
}
/*review button*/
button#review_butt{
float:left;
color: white;
text-transform: uppercase;
background-color:#e86065;
border: 1px solid #e86065;
font-size: 0.8em;
}
tr.float{
margin-left: 20px;
}
td.float{
margin-left: 20px;
}
<div id='products_box'>
<div id='products'>
<table>
<tr class='float'>
<td class='float'><h3 id='rest_name'>$rest_name </h3> </td>
<td class='float'><p class='title'> Price</p></td>
<td class='avg'><p class='title'>Avg Delivery</p></td>
<td><p class='title'>Cost</p></td>
<td></td>
<td id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>
</tr>
<tr class='float'>
<td><p id='addr'>$rest_add, $rest_city</p></td>
<td></td>
<td class='avg'><p class='rest'>$rest_avg mins</p></td>
<td></td>
</tr>
<div id='cuisine'>
<br>
<tr id='bottom'>
<td id='review'><a href='review.php'><button id='review_butt'>View Reviews!</button></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><img src='Images/Chef_hat.png' alt='Cuisine' style='width:40px;height:40px;'></td>
<td>$rest_cat</td>
</tr>
</div>
</table>
</div>
</div>
But i would like the "FEED ME!" button to be centred in the middle of the table rows like so:
Is this too far fetched or can it work?
try:
<td rowspan="2" id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>
This tells the browser that this cell spans two rows. just make sure the next <tr> is short of one <td> at the end.
I am unaware of the best practice to get my desired result. I have used tables here which have got me close to what I want.
The result doesn't have vertically centered text and I cannot figure out how. Tried using UL to get this but had no luck:
#hotspotbg table {
margin-top: 1px;
}
#hotspotbg table tr td {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#hotspotbg table tr td a {
text-align: center;
text-decoration: none;
display: block;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
height: 51px;
}
#hotspotbg table tr td a:hover {
background: #FFF;
color: #000;
}
<table width="900" height="51px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="25%" height="51" valign="middle">Home
</td>
<td width="25%">Products
</td>
<td width="25%">Reviews
</td>
<td width="25%">Contact
</td>
</tr>
</table>
Setting the line-height of the child (a element in your case) to the height of the parent, will vertically align the text of the a element. See below for more information.
.wrapper {
height: 70px;
width: 100%;
background: red;
overflow: hidden;
}
.wrapper a {
/*NOT AFFECTING THE VERTICAL ALIGN*/
display: block;
float: left;
height: 70px;
width: 50%;
color: #fff;
text-align: center;
/*AFFECTING VERTICAL ALIGN*/
line-height: 70px;
}
<div class="wrapper">
test
nice
</div>
I tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/