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>
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
Have read a lot and even able to make some of this now, but not together ) Please help.
I need th that contains the caption and the "icon" that consists of one char. And I need caption to be aligned left and icon - right. In the same th. ANd they both must be in the middle of the cell vertically. And icon should be in the center/middle of the div as well. Please help. I cannot align caption and cannot align icon in their div. Dunno why, looks like html/css were invented by aliens, I don't understand that logic and how it was possible to make such a simple thing so stupidly complicated )
Here's the screenshot of what I need
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: center;
vertical-align: middle;
display: table-cell;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
vertical-align: middle;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 1px solid #7f9;
}
div.right
{
text-align: center;
vertical-align: middle;
position: relative;
height: 2em;
border: 1px solid #f79;
display: inline-block;
float: right;
width: 2em;
}
div.reload
{
border: 1px solid #79f;
text-align: center;
vertical-align: middle;
width: 2em;
height: 2em;
position: absolute;
right: 0;
bottom: 0;
display: table;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Have found an answer (based on your advices, thank you!!!)
That was easy and still dumb:)
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
text-align: left;
vdrtical-align: middle;
line-height: 2em;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 0px solid #7f9;
display: inline-block;
float: left;
}
div.reload
{
border: 1px solid #999;
text-align: center;
vertical-align: middle;
width: 1.5em;
margin: 0.2em;
line-height: 1.5em;
right: 0;
bottom: 0;
display: inline-block;
float: right;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="reload">⟳</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="reload">⟳</div>
</th>
</tr>
<tr>
<td colspan=2>
Some data
</td>
<td colspan=2>
123.45
</td>
</tr>
</table>
Maybe something like this ?
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.left
{
text-align:left;
background-color: lightblue;
}
.right
{
text-align:right;
background-color: pink;
}
HTML :
<div class="view-table">
<div class="view-row">
<div class="left">Title</div>
<div class="right">⟳</div>
</div>
</div>
If you want the icon on the right side of the th and the title on the left, you need text-align-last:justify instead of text-align:center in the th.
Please note that you also need another text-align-last on the div.reload, else its text-align will have no effect!
table {
border-collapse: collapse;
border-spacing: 0;
}
th {
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
td {
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
}
div.left {
display: inline-block;
vertical-align: middle;
text-align: left;
border: 1px solid #7f9;
}
div.right {
display: inline-block;
border: 1px solid #f79;
display: inline-block;
}
div.reload {
border: 1px solid #79f;
width: 2em;
line-height: 2em;
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Or, this fiddle.
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:
I'm building in HTML three asymmetric tables like this:
<table id="d1">
<tr>
<th colspan="2">ATIS-GESTEL</th>
</tr>
<tr>
<td class="label">Petición:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d2">
<tr>
<th colspan="2">FACILITADOR-SAC</th>
</tr>
<tr>
<td class="label">OT:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d3">
<tr>
<th colspan="2">SAC</th>
</tr>
<tr>
<td class="label">Ticket:</td>
<td class="value"></td>
</tr>
</table>
I have to style some of the properties with CSS, including giving <td>'s with the class "value" a yellow background color. Well, the background color does change, but there's a little space there, like a border. It doesn't fill completely. Just in case, here's the CSS:
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:left;
}
td {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#container {
width: 800px;
height: 600px;
border:1px solid #333333;
}
#header {
padding-left: 7px;
}
#d1 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
}
#d1 tr td.value{
width: 100px;
height: 15px;
background-color: #FFFF66;
}
#d2 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
width: 150px;
height: 40px;
}
#d2 tr td.value{
width: 100px;
Can someone tell me why it's that border appearing, and how to completely fill the cell?
Add border-collapse:collapse to the <table>'s styles.
Maybe the border spacing could be a problem too. Set it to zero.
table.mytable {
border-spacing: 0;
}
I have replaced a table containing four tables (in a grid) with a div-table containing the four tables as cells. Two things that I absolutely can't seem to get to work are:
How do I get rid of the table border of the div tag using display: table?
The bottom left table insists on lining up with the far left edge of the cell and I want it to line up with the far right edge of the cell. Even relative positioning is having no impact on this one.
Here is the CSS:
<style type="text/css">
.Dashboard {
display: table;
border-collapse: collapse;
border-width: 0px;
}
.row1 {
display:table-row;
}
.row2 {
display:table-row;
height: 200px;
}
.cell1 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
.cell2 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
.cell3 {
display: table-cell;
padding: 2px;
border: 1px solid black;
text-align: right;
vertical-align: top;
}
.cell4 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
table.inner {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
padding: 2px;
}
td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
padding: 2px;
}
td.image {
padding: 0;
margin: 0;
}
</style>
And the table layout looks like this:
<div runat="server" id="Dashboard" class="Dashboard">
<div class="row1">
<div class="cell1">
<table class="inner" id="t1">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
<div class="cell2">
<table class="inner" id="t2">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
</div>
<div class="row2">
<div class="cell3">
<table class="inner" id="t3">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
<div class="cell4">
<table class="inner" id="t4">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
</div>
</div>
Any advice is appreciated.
To get rid of the border use
border: none;
With the positioning, find the bottom left table id and use
float: right;
But your best option is to get rid of tables anyways. All of this can just as easily be done with straight css.