Trying to figure out why my <textarea id='customer-title'> is not expanding wider than 216px and producing 3-4 rows???
I am in need of the element to be 4-5 rows in size and stretch to <table id='meta'>. Would also like #address to be same width.
I have working example in JSFiddle - css problem
CSS:
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
/*#address { width: 250px; height: 150px; float: left; }*/
#address { width: 250px; height: 150px; font: 20px "Comic Sans"; font-weight: bold; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 340px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
HTML:
<body>
<form action="insert.php" id="testinsert" method="POST">
<input type="submit" value="Submit" />
</form>
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea form ="testinsert" name="address" id="address">Business Name
Address 1
Address 2
Phone: (000) 555-1212</textarea>
<div id="logo">
<div id="logoctr">
Change Logo
Save
|
Delete Logo
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/CM_LOGO.JPG" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea form ="testinsert" name="customer" id="customer-title">Customer Name Incorporated
c/o Person to Contact</textarea>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$735.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Business Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$150.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$450.00</span></td>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Residential Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$95.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$285.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$735.00</div></td>
</tr>
</table>
<input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
<input type="hidden" form ="testinsert" name="sales" id="sales"></input>
<input type="hidden" form ="testinsert" name="owed" id="owed"></input>
<input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
If you explicitly define the width in your css the text area will expand to the size of the div it is in.
#customer-title {
font-size: 20px;
font-weight: bold;
float: left;
width: 100%;
}
You can change the width of the address as well if you want it to take up the entire space of its parent container:
#address {
width: 100%;
height: 150px;
font: 20px "Comic Sans";
font-weight: bold;
float: left;
}
Had to adjust for the parent div:
#identity{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-255px;
}
Related
I tried everything I could to set a distance from navbar and dashboard from menu but I have no idea how to make it work :). I'm still very new in this programming.
Also every time I click the menu-button, yes it works but the navbar moves weirdly and wasn't maximized.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
#menu {
width: 345px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background-color: #1e1e1e;
z-index: 100;
transition: width 300ms;
}
#logo {
height: 90px;
padding: 32px 0px 16px 20px;
color: #fff;
}
#logo a {
text-decoration: none;
color: #fff;
}
#logo h2 {
margin-top: -49px;
padding-left: 50px;
}
#menubar li {
width: 100%;
margin-bottom: 27px;
padding-left: 16px;
padding-right: 16px;
}
#menubar a {
padding-left: 16px;
display: block;
color: #a9a9a9;
font-size: 14pt;
}
#menubar a#home {
margin-top: 50px;
color: #a9a9a9;
}
#menubar a:hover {
color: #fff;
transition: 0.5s;
}
#menubar a span:first-child {
font-size: 18pt;
padding-right: 16px;
}
#nav-toggle:checked+#menu {
width: 90px;
}
#nav-toggle:checked+#menu #logo h2,
#nav-toggle:checked+#menu li a {
padding-left: 16px;
}
#nav-toggle:checked+#menu #logo h2,
#nav-toggle:checked+#menu li a span:last-child {
display: none;
}
#navbar {
transition: margin-left 300ms;
margin-left: 345px;
}
#nav-toggle:checked~#navbar {
margin-left: 90px;
}
#nav-toggle:checked~#navbar header {
width: calc(100% - 70px);
}
header {
display: flex;
justify-content: space-between;
padding: 16px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
position: fixed;
width: calc(100% - 345px);
background-color: #fff;
transition: left 300ms;
}
.dashboard-title {
display: flex;
margin-top: -39px;
margin-left: 50px;
}
#nav-toggle {
display: none;
}
.menu-button {
margin-top: 10px;
}
#search {
border: 1px solid #ccc;
border-radius: 15px;
height: 50px;
display: flex;
align-items: center;
overflow-x: hidden;
}
#search span {
display: inline-block;
padding: 0px 16px;
font-size: 16pt;
}
#search input {
height: 100%;
padding: 8px;
border: none;
outline: none;
}
#user {
display: flex;
align-items: center;
margin-right: 10px;
}
main {
padding: 32px 24px;
min-height: calc(100vh - 0px);
background-color: #f1f5f9;
}
#dashboard {
margin-left: 345px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 32px;
margin-top: 100px;
}
#box {
display: flex;
justify-content: space-between;
background: #fff;
padding: 32px;
border-radius: 10px;
}
#box span {
margin-top: 50px;
margin-left: -110px;
color: #a9a9a9;
}
#box .customer {
float: left;
margin-left: -115px;
}
#box .box-sign {
color: #a9a9a9;
}
#dashboard-second {
margin-left: 345px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 32px;
margin-top: 32px;
}
#box-second {
display: flex;
justify-content: space-between;
background: #fff;
padding: 32px;
border-radius: 10px;
}
#box-second h2 {
font-size: 14pt;
margin-right: 300px;
}
#box-second .kalendar {
margin-right: 370px;
}
.tabel {
margin-left: 345px;
margin-top: 150px;
padding: 30px 40px 40px 30px;
border-radius: 10px;
background-color: #fff;
}
table,
th,
td {
border-collapse: collapse;
height: 50px;
}
thead {
box-shadow: 0px 3px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
}
table tr {
border-bottom: 1px solid #a9a9a9;
}
table th {
text-align: left;
padding-left: 10px;
}
.table-spacing {
padding-left: 10px;
}
table button {
background-color: #24a0ed;
color: #fff;
font-weight: bold;
padding: 7px 20px 7px 20px;
border-radius: 5px;
display: block;
margin: auto;
border: 0;
cursor: pointer;
}
.transaksi-icon {
padding-left: 10px;
}
.tabel-customer {
margin-left: 400px;
padding-top: 200px;
padding-right: 40px;
}
.customer-icon {
padding-left: 10px;
}
.laporan-icon {
padding-left: 10px;
}
.tabel-laporan {
margin-left: 400px;
padding-top: 200px;
padding-right: 40px;
}
#dashboard-third {
margin-left: 345px;
padding-top: 70px;
padding-bottom: 20px;
padding-right: 25px;
padding-left: 25px;
background-color: #fff;
margin-top: 35px;
border-radius: 10px;
}
#box-third {
margin-top: -50px;
}
#box-third h2 {
margin-top: -32px;
padding-left: 30px;
font-size: 14pt;
}
#media only screen and (max-width: 1200px) {
#menu {
width: 90px;
}
#menu #logo h2,
#menu li a {
padding-left: 16px;
}
#menu #logo h2,
#menu li a span:last-child {
display: none;
}
#navbar {
margin-left: 90px;
}
#navbar header {
width: calc(100% - 70px);
}
}
#media only screen and (max-width: 960px) {
#dashboard {
grid-template-columns: repeat(3, 1fr);
}
}
<div id="all">
<input type="checkbox" id="nav-toggle">
<div id="menu">
<div id="logo">
<a href="index.html">
<iconify-icon icon="ic:outline-local-laundry-service" width="50"></iconify-icon>
<h2>Low'n Dry</h2>
</a>
</div>
<div id="menubar">
<ul>
<li>
<a href="index.html" class="home"><span><iconify-icon icon="ant-design:home-outlined"></iconify-icon></span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="manajemen"><span><iconify-icon icon="ant-design:user-outlined"></iconify-icon></span>
<span>Manajemen User</span>
</a>
</li>
<li>
<a href="transaksi.html" class="transaksi"><span><iconify-icon icon="ep:money"></iconify-icon></span>
<span>Transaksi</span>
</a>
</li>
<li>
<a href="#" class="paket"><span><iconify-icon icon="grommet-icons:package"></iconify-icon></span>
<span>Paket Laundry</span>
</a>
</li>
<li>
<a href="customer.html" class="customer"><span><iconify-icon icon="ic:outline-people"></iconify-icon></span>
<span>Customer</span>
</a>
</li>
<li>
<a href="laporan.html" class="laporan"><span><iconify-icon icon="carbon:report" ></iconify-icon></span>
<span>Laporan</span>
</a>
</li>
</ul>
</div>
</div>
<div id="navbar">
<header>
<label for="nav-toggle">
<iconify-icon icon="ant-design:menu-outlined" class="menu-button" width="43" height="29"></iconify-icon>
<h2 class="dashboard-title">Dashboard</h2>
</label>
<div id="search">
<span class="search-button"><iconify-icon icon="codicon:search"></iconify-icon></span>
<input type="search" placeholder="Search" />
</div>
<div id="user">
<div>
<h4>Admin</h4>
</div>
</div>
</header>
</div>
<main>
<div id="dashboard">
<div id="box">
<h1>23</h1>
<span class="customer">Customer</span>
<iconify-icon icon="ic:outline-people" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>21</h1>
<span>Karyawan</span>
<iconify-icon icon="ic:outline-people" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>21</h1>
<span>New Order</span>
<iconify-icon icon="ant-design:shopping-cart-outlined" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>29</h1>
<span>Total Order</span>
<iconify-icon icon="ant-design:shopping-cart-outlined" class="box-sign" width="40px"></iconify-icon>
</div>
</div>
<div id="dashboard-second">
<div id="box-second">
<iconify-icon icon="bi:bar-chart" width="25px" class="box-sign-second"></iconify-icon>
<h2>Grafik Penjualan</h2>
</div>
<div id="box-second">
<iconify-icon icon="ant-design:calendar-outlined" width="25px" class="box-sign-second"></iconify-icon>
<h2 class="kalendar">Kalender</h2>
</div>
</div>
<div id="dashboard-third">
<div id="box-third">
<iconify-icon icon="ant-design:clock-circle-outlined" width="25px" class="order-icon"></iconify-icon>
<h2>Order Terbaru</h2>
</div>
<table class="order-tabel">
<thead>
<tr>
<th>No.</th>
<th>Tgl. Transaksi</th>
<th>Customer</th>
<th>Paket</th>
<th>Pembayaran</th>
<th>Status Order</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-spacing">1. </td>
<td class="table-spacing">01/10/2022</td>
<td class="table-spacing">Budi</td>
<td class="table-spacing">Paket A</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing" style="color: rgb(50, 233, 108)">Diambil</td>
<td class="table-spacing">Rp 60.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">2. </td>
<td class="table-spacing">05/10/2022</td>
<td class="table-spacing">Dibu</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing" style="color:rgb(50, 233, 108)">Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 240.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">3. </td>
<td class="table-spacing">11/10/2022</td>
<td class="table-spacing">Ubid</td>
<td class="table-spacing">Paket A</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 85.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">4. </td>
<td class="table-spacing">14/10/2022</td>
<td class="table-spacing">Ibud</td>
<td class="table-spacing">Paket C</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 72.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">5. </td>
<td class="table-spacing">18/10/2022</td>
<td class="table-spacing">Bidu</td>
<td class="table-spacing">Paket C</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 60.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">6. </td>
<td class="table-spacing">20/10/2022</td>
<td class="table-spacing">Udib</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 240.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">7. </td>
<td class="table-spacing">28/10/2022</td>
<td class="table-spacing">Dubi</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 85.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>No.</th>
<th>Tgl. Transaksi</th>
<th>Customer</th>
<th>Paket</th>
<th>Pembayaran</th>
<th>Status Order</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</tfoot>
</table>
</div>
</div>
</main>
</div>
</body>
You've got your header as position:fixed which means it's got no height and the content overflows it. If you remove that then set the header to 100% it'll work.
For the main element, add the margin to that and not it's children then all you need to do is change margin-left for that for the css #nav-toggle:checked rules
Finally you've hard coded the widths when the menu is toggled, if you use CSS variables then you only need to change one value.
I've also altered your logo and logo text to show you how to align the icon and text a bit neater. You can use that example for the rest of your items and the stuff in the main element. All markup changes are highlighted.
body {
--width-wide-menu: 345px;
--width-narrow-menu: 90px;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
#menu {
width: 345px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background-color: #1e1e1e;
z-index: 100;
transition: width 300ms;
}
#logo {
/* height: 90px; */
display: flex;
/* added this */
align-items: center;
padding: 32px 0px 16px 20px;
color: #fff;
}
#logo a {
text-decoration: none;
color: #fff;
}
#logo h2 {
margin-top: 0;
display: flex;
height: 100%;
justify-content: center;
/* padding-left: 50px; */
}
#menubar li {
width: 100%;
margin-bottom: 27px;
padding-left: 16px;
padding-right: 16px;
}
#menubar a {
padding-left: 16px;
display: block;
color: #a9a9a9;
font-size: 14pt;
}
#menubar a#home {
margin-top: 50px;
color: #a9a9a9;
}
#menubar a:hover {
color: #fff;
transition: 0.5s;
}
#menubar a span:first-child {
font-size: 18pt;
padding-right: 16px;
}
#nav-toggle:checked+#menu {
width: 90px;
}
#nav-toggle:checked+#menu #logo h2,
#nav-toggle:checked+#menu li a {
padding-left: 16px;
}
#nav-toggle:checked+#menu #logo h2,
#nav-toggle:checked+#menu li a span:last-child {
display: none;
}
#navbar {
transition: margin-left 300ms;
margin-left: var(--width-wide-menu);
}
#nav-toggle:checked~#navbar {
margin-left: 90px;
}
#nav-toggle:checked~main {
margin-left: 90px;
}
#nav-toggle:checked~#navbar header {
/* width: calc(100% - 70px); */
}
header {
display: flex;
justify-content: space-between;
padding: 16px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
/* position: fixed; */
/* width: calc(100% - 345px); */
width: 100%;
/* Added this */
background-color: #fff;
transition: left 300ms;
}
.dashboard-title {
display: flex;
margin-top: -39px;
margin-left: 50px;
}
#nav-toggle {
display: none;
}
.menu-button {
margin-top: 10px;
}
#search {
border: 1px solid #ccc;
border-radius: 15px;
height: 50px;
display: flex;
align-items: center;
overflow-x: hidden;
}
#search span {
display: inline-block;
padding: 0px 16px;
font-size: 16pt;
}
#search input {
height: 100%;
padding: 8px;
border: none;
outline: none;
}
#user {
display: flex;
align-items: center;
margin-right: 10px;
}
main {
padding: 32px 24px;
min-height: calc(100vh - 0px);
background-color: #f1f5f9;
margin-left: var(--width-wide-menu);
/* added this */
}
#dashboard {
/* margin-left: 345px; */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 32px;
margin-top: 100px;
}
#box {
display: flex;
justify-content: space-between;
background: #fff;
padding: 32px;
border-radius: 10px;
}
#box span {
margin-top: 50px;
margin-left: -110px;
color: #a9a9a9;
}
#box .customer {
float: left;
margin-left: -115px;
}
#box .box-sign {
color: #a9a9a9;
}
#dashboard-second {
/* margin-left: 345px; */
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 32px;
margin-top: 32px;
}
#box-second {
display: flex;
justify-content: space-between;
background: #fff;
padding: 32px;
border-radius: 10px;
}
#box-second h2 {
font-size: 14pt;
margin-right: 300px;
}
#box-second .kalendar {
margin-right: 370px;
}
.tabel {
/* margin-left: 345px; */
margin-top: 150px;
padding: 30px 40px 40px 30px;
border-radius: 10px;
background-color: #fff;
}
table,
th,
td {
border-collapse: collapse;
height: 50px;
}
thead {
box-shadow: 0px 3px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
}
table tr {
border-bottom: 1px solid #a9a9a9;
}
table th {
text-align: left;
padding-left: 10px;
}
.table-spacing {
padding-left: 10px;
}
table button {
background-color: #24a0ed;
color: #fff;
font-weight: bold;
padding: 7px 20px 7px 20px;
border-radius: 5px;
display: block;
margin: auto;
border: 0;
cursor: pointer;
}
.transaksi-icon {
padding-left: 10px;
}
.tabel-customer {
margin-left: 400px;
padding-top: 200px;
padding-right: 40px;
}
.customer-icon {
padding-left: 10px;
}
.laporan-icon {
padding-left: 10px;
}
.tabel-laporan {
margin-left: 400px;
padding-top: 200px;
padding-right: 40px;
}
#dashboard-third {
/* margin-left: 345px; */
padding-top: 70px;
padding-bottom: 20px;
padding-right: 25px;
padding-left: 25px;
background-color: #fff;
margin-top: 35px;
border-radius: 10px;
}
#box-third {
margin-top: -50px;
}
#box-third h2 {
margin-top: -32px;
padding-left: 30px;
font-size: 14pt;
}
#media only screen and (max-width: 1200px) {
#menu {
width: var(--width-narrow-menu);
}
#menu #logo h2,
#menu li a {
padding-left: 16px;
}
#menu #logo h2,
#menu li a span:last-child {
display: none;
}
#navbar {
margin-left: var(--width-narrow-menu);
width: 100%;
/*Added this */
}
main {
margin-left: var(--width-narrow-menu);
/* added this */
}
#navbar header {
width: calc(100% - 70px);
}
}
#media only screen and (max-width: 960px) {
#dashboard {
grid-template-columns: repeat(3, 1fr);
}
}
<script src="https://code.iconify.design/iconify-icon/1.0.1/iconify-icon.min.js"></script>
<div id="all">
<input type="checkbox" id="nav-toggle">
<div id="menu">
<div id="logo">
<!-- <a href="index.html"> -->
<iconify-icon icon="ic:outline-local-laundry-service" width="50"></iconify-icon>
<h2>Low'n Dry</h2>
<!-- </a> -->
</div>
<div id="menubar">
<ul>
<li>
<a href="index.html" class="home"><span>
<iconify-icon icon="ant-design:home-outlined"></iconify-icon>
</span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="manajemen"><span>
<iconify-icon icon="ant-design:user-outlined"></iconify-icon>
</span>
<span>Manajemen User</span>
</a>
</li>
<li>
<a href="transaksi.html" class="transaksi"><span>
<iconify-icon icon="ep:money"></iconify-icon>
</span>
<span>Transaksi</span>
</a>
</li>
<li>
<a href="#" class="paket"><span>
<iconify-icon icon="grommet-icons:package"></iconify-icon>
</span>
<span>Paket Laundry</span>
</a>
</li>
<li>
<a href="customer.html" class="customer"><span>
<iconify-icon icon="ic:outline-people"></iconify-icon>
</span>
<span>Customer</span>
</a>
</li>
<li>
<a href="laporan.html" class="laporan"><span>
<iconify-icon icon="carbon:report"></iconify-icon>
</span>
<span>Laporan</span>
</a>
</li>
</ul>
</div>
</div>
<div id="navbar">
<header>
<label for="nav-toggle">
<iconify-icon icon="ant-design:menu-outlined" class="menu-button" width="43" height="29"></iconify-icon>
<h2 class="dashboard-title">Dashboard</h2>
</label>
<div id="search">
<span class="search-button">
<iconify-icon icon="codicon:search"></iconify-icon>
</span>
<input type="search" placeholder="Search" />
</div>
<div id="user">
<div>
<h4>Admin</h4>
</div>
</div>
</header>
</div>
<main>
<div id="dashboard">
<div id="box">
<h1>23</h1>
<span class="customer">Customer</span>
<iconify-icon icon="ic:outline-people" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>21</h1>
<span>Karyawan</span>
<iconify-icon icon="ic:outline-people" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>21</h1>
<span>New Order</span>
<iconify-icon icon="ant-design:shopping-cart-outlined" class="box-sign" width="40px"></iconify-icon>
</div>
<div id="box">
<h1>29</h1>
<span>Total Order</span>
<iconify-icon icon="ant-design:shopping-cart-outlined" class="box-sign" width="40px"></iconify-icon>
</div>
</div>
<div id="dashboard-second">
<div id="box-second">
<iconify-icon icon="bi:bar-chart" width="25px" class="box-sign-second"></iconify-icon>
<h2>Grafik Penjualan</h2>
</div>
<div id="box-second">
<iconify-icon icon="ant-design:calendar-outlined" width="25px" class="box-sign-second"></iconify-icon>
<h2 class="kalendar">Kalender</h2>
</div>
</div>
<div id="dashboard-third">
<div id="box-third">
<iconify-icon icon="ant-design:clock-circle-outlined" width="25px" class="order-icon"></iconify-icon>
<h2>Order Terbaru</h2>
</div>
<table class="order-tabel">
<thead>
<tr>
<th>No.</th>
<th>Tgl. Transaksi</th>
<th>Customer</th>
<th>Paket</th>
<th>Pembayaran</th>
<th>Status Order</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-spacing">1. </td>
<td class="table-spacing">01/10/2022</td>
<td class="table-spacing">Budi</td>
<td class="table-spacing">Paket A</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing" style="color: rgb(50, 233, 108)">Diambil</td>
<td class="table-spacing">Rp 60.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">2. </td>
<td class="table-spacing">05/10/2022</td>
<td class="table-spacing">Dibu</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing" style="color:rgb(50, 233, 108)">Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 240.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">3. </td>
<td class="table-spacing">11/10/2022</td>
<td class="table-spacing">Ubid</td>
<td class="table-spacing">Paket A</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 85.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">4. </td>
<td class="table-spacing">14/10/2022</td>
<td class="table-spacing">Ibud</td>
<td class="table-spacing">Paket C</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 72.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">5. </td>
<td class="table-spacing">18/10/2022</td>
<td class="table-spacing">Bidu</td>
<td class="table-spacing">Paket C</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 60.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">6. </td>
<td class="table-spacing">20/10/2022</td>
<td class="table-spacing">Udib</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 240.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
<tr>
<td class="table-spacing">7. </td>
<td class="table-spacing">28/10/2022</td>
<td class="table-spacing">Dubi</td>
<td class="table-spacing">Paket B</td>
<td class="table-spacing">Belum Lunas</td>
<td class="table-spacing">Baru</td>
<td class="table-spacing">Rp 85.000</td>
<td>
<button type="button">Detail</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>No.</th>
<th>Tgl. Transaksi</th>
<th>Customer</th>
<th>Paket</th>
<th>Pembayaran</th>
<th>Status Order</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</tfoot>
</table>
</div>
</main>
</div>
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'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other
What am I doing wrong? Any help or suggestion would be greatly appreciated!
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table></div>
</div>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
i used ur code and mould it little like wrapping tables inside div and add css accordingly
The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),
else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along white-space )
.Info {
display:table-cell;
}
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
/*display: block;*/
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish.
This is a simple layout~
HTML
<section class="tableGrid">
<div>
<div>
<p>Row 1 - Table 1</p>
</div>
<div>
<p>Row 2 - Table 1</p>
</div>
</div>
<!-- ********************** -->
<div>
<div>
<p>Row 1 - Table 2</p>
</div>
<div>
<p>Row 2 - Table 2</p>
</div>
</div>
</section>
and CSS
.tableGrid {
margin: 4vh 8vw;
padding: 16px;
display: grid;
grid-template-rows: auto;
grid-gap: 16px;
}
.table {
border: 4px dotted red;
}
#media (min-width: 800px) {
.tableGrid {
margin: 8vh 16vw;
padding: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
grid-gap: 24px;
}
}
Check out this pen and if you like what you see learn more about using grid here.
Basically right now I have everything in a straight line, I know it isn't responsive, not part of the task. I want to change it so I have 'clock hours, incentive, off clock, and regular hours' on the top row & overtime hrs, personal, vacation, and holiday' directly beneath it. And then have total hours off to the side near the signature area. I have some thoughts on how to do it but I feel like it could be done in a simple way so I don't know exactly the best way of tackling it.
/* *{
margin: 0;
padding: 0;
} */
/* #page {
size: 8.5in 11in;
} */
h2 {
text-align: center;
}
.signandauth {
/*div for authorized, signature & their textboxes*/
position: absolute;
top: 0;
right: 0;
margin-right: 20px;
margin-top: 20px;
}
.dateSection {
/*div for date script*/
position: absolute;
top: 0;
left: 0;
margin-left: 20px;
margin-bottom: 20px;
margin-top: 65px;
}
.section1 {
padding: 30px 0;
border: 4px solid black;
/* margin-right: 20px; */
}
.section2 {
padding: 70px 0;
border: 4px solid black;
}
label {
border: 1px solid black;
padding: 0.2em;
margin: 0.2em;
display: inline;
}
p {
margin: 0.3em;
padding: 0.3em;
font-weight: bold;
display: inline;
text-align: center;
}
#date {
float: left;
}
#authorized {
/*text box*/
width: 170px;
height: 30px;
float: right;
}
#authorizeP {
/*the label*/
float: right;
}
#signature {
width: 170px;
height: 30px;
float: right;
}
#signP {
float: right;
}
table,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
float: right;
}
td {
width: 90px;
border: 1px solid black;
padding: 5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<body>
<title>Time Card</title>
<div class="section1">
<h2>Time Card: AWS</h2>
<div class="dateSection">
<p id="date"></p>
<script>
var date = new Date();
document.getElementById("date").innerHTML = date.toDateString();
</script>
</div>
<br>
<br>
<br>
<p>Clock Hours</p>
<label id="clockHours">0.00</label>
<p>Incentive</p>
<label id="Incentive">0.00</label>
<p>Off Clock</p>
<label id="offClock">0.00</label>
<p>Regular Hours</p>
<label id="regularHours">0.00</label>
<p>Overtime Hours</p>
<label id="overtimeHours">0.00</label>
<p>Total Hours</p>
<label id="totalHours">0.00</label>
<p>Personal</p>
<label id="personal">0.00</label>
<p>Vacation</p>
<label id="vacation">0.00</label>
<p>Holiday</p>
<label id="holiday">0.00</label>
<div class="signandauth">
<p id="authorizeP">Authorized</p>
<br>
<br>
<label id="authorized"></label>
<br>
<br>
<br>
<p id="signP">Employee Signature</p>
<br>
<label id="signature"></label>
</div>
</div>
<br>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="section2">
<table>
<tr>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</table>
</div>
</body>
</html>
How about putting them in a 2x4 table?
<br>
will break onto a new line, that should do what you're hoping.
<table >
<tr>
<th>Clock Hours</th>
<th>Incentive</th>
<th>Off Clock</th>
<th>Regular Hours</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
<br>
<table >
<tr>
<th>Overtime Hours</th>
<th>Personal</th>
<th>Vacation</th>
<th>Holiday</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
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.