*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
{% load static %}
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
<link rel="stylesheet" href={% static "css/styles.css" %}>
<link rel="stylesheet" href={% static "css/loader.css" %}>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% include "partials/_preloader.html" %}
<nav class="navbar">
<div class="navbar__container">
<i class="fa-solid fa-dna"></i>
<!-- <div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<ul class="navbar__menu">
<li class="navbar__item">
FENCING
</li>
</ul>
</div> -->
<ul class="navbar__menu">
<li class="navbar__item">
<!-- HOME -->
</li>
<li class="navbar__item">
<!-- TECH -->
</li>
<li class="navbar__item">
<!-- PRODUCTS -->
</li>
<li class="navbar__btn">
<!-- SIGN UP -->
</li>
</ul></div></nav>
<div class="table-container">
<h1 class="table-heading">Turniere</h1>
<table class="table-turniere">
<thead>
<tr>
<th>Name</th>
<th>Datum</th>
<th>Ort</th>
<th>Kategorie</th>
<th>Einladung</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">kleeblatt</td>
<td data-label="Datum">2.64.234</td>
<td data-label="Ort">foil</td>
<td data-label="Kategorie">u21</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
<tr>
<td data-label="Name">dead</td>
<td data-label="Datum">wd34</td>
<td data-label="Ort">fwadwdl</td>
<td data-label="Kategorie">wwwwwww1</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
</tbody>
</table>
</div>
{% include "partials/_footer.html" %}
<script src="{% static 'js/loader.js' %}"></script>
</body>
</html>
hey guys i need some help with this:
when using iphone 12 dimensions in google dev tools i get my table coordinated right but when i open my page through my phone i gets really buggy,
(iphone 12)
in google dev tools with iphone 12 resolution settings (as it should be)
on my iphone 12 (buggy)
i want the tables to render out right so as in google dev tools, on my iphone and this is the source code:
html code:
{% load static %}
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
<link rel="stylesheet" href={% static "css/styles.css" %}>
<link rel="stylesheet" href={% static "css/loader.css" %}>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% include "partials/_preloader.html" %}
<nav class="navbar">
<div class="navbar__container">
<i class="fa-solid fa-dna"></i>
<!-- <div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<ul class="navbar__menu">
<li class="navbar__item">
FENCING
</li>
</ul>
</div> -->
<ul class="navbar__menu">
<li class="navbar__item">
<!-- HOME -->
</li>
<li class="navbar__item">
<!-- TECH -->
</li>
<li class="navbar__item">
<!-- PRODUCTS -->
</li>
<li class="navbar__btn">
<!-- SIGN UP -->
</li>
</ul></div></nav>
<div class="table-container">
<h1 class="table-heading">Turniere</h1>
<table class="table-turniere">
<thead>
<tr>
<th>Name</th>
<th>Datum</th>
<th>Ort</th>
<th>Kategorie</th>
<th>Einladung</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">kleeblatt</td>
<td data-label="Datum">2.64.234</td>
<td data-label="Ort">foil</td>
<td data-label="Kategorie">u21</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
<tr>
<td data-label="Name">dead</td>
<td data-label="Datum">wd34</td>
<td data-label="Ort">fwadwdl</td>
<td data-label="Kategorie">wwwwwww1</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
</tbody>
</table>
</div>
{% include "partials/_footer.html" %}
<script src="{% static 'js/loader.js' %}"></script>
</body>
</html>
css code:
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
{% load static %} <html lang="en"> <head> <script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script> <link rel="stylesheet" href={% static "css/fencingstyles.css" %}> <link rel="stylesheet" href={% static "css/styles.css" %}> <link rel="stylesheet" href={% static "css/loader.css" %}> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> {% include "partials/_preloader.html" %} <nav class="navbar"> <div class="navbar__container"> <i class="fa-solid fa-dna"></i> <!-- <div class="navbar__toggle" id="mobile-menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <ul class="navbar__menu"> <li class="navbar__item"> FENCING </li> </ul> </div> --> <ul class="navbar__menu"> <li class="navbar__item"> <!-- HOME --> </li> <li class="navbar__item"> <!-- TECH --> </li> <li class="navbar__item"> <!-- PRODUCTS --> </li> <li class="navbar__btn"> <!-- SIGN UP --> </li> </ul></div></nav> <div class="table-container"> <h1 class="table-heading">Turniere</h1> <table class="table-turniere"> <thead> <tr> <th>Name</th> <th>Datum</th> <th>Ort</th> <th>Kategorie</th> <th>Einladung</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td data-label="Name">kleeblatt</td> <td data-label="Datum">2.64.234</td> <td data-label="Ort">foil</td> <td data-label="Kategorie">u21</td> <td data-label="Einladung">PDF</td> <td data-label="Details">Details</td> </tr> <tr> <td data-label="Name">dead</td> <td data-label="Datum">wd34</td> <td data-label="Ort">fwadwdl</td> <td data-label="Kategorie">wwwwwww1</td> <td data-label="Einladung">PDF</td> <td data-label="Details">Details</td> </tr> </tbody> </table> </div> {% include "partials/_footer.html" %} <script src="{% static 'js/loader.js' %}"></script> </body> </html>
What fixed the problem for me was:
Changing display:block —-> to display:grid
Now it works on every device
like so:
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: grid;
width: 100%;
}
}
Related
whenever I try to add text in footer it already gets positioned in center. I don't know how to fix coz I can't find where is the error. Can anyone help me fix this and also whenever I try to add bootstrap link to my header it affects my drop down css also.
also Im using notepad++ for website
html code
<!DOCTYPE.HTML>
<html>
<head>
<title>
E-Commerce Website
</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Assignment1.css">
<link rel="stylesheet" type="text/css" href="assi1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="topnav">
<div class="topnav-right">
<div class="dropdown">
<button class="dropbtn">Cart
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Your Orders
Proceed to checkout
</div>
</div>
</div>
<button class="button" style="vertical-align:middle"><span>Home</span></button></span></button>
<button class="button" style="vertical-align:middle"><span>News</span></button>
<button class="button" style="vertical-align:middle"><span>Sign Up</span></button>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Best Sellers
Smartphones
Laptops & Desktops
Electronics
Fashion
Furniture
</div>
</div>
<div class="srch">
<input type="text" placeholder="Search..">
</div>
</div>
</br></br>
<center><img src="banner2.jpg" width="80%" height="65%"></center>
<!--image slider-->
<br><br>
<div class="table1">
<table class="a">
<tr><td colspan="5"><h2>SmartPhones<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><img src="phone 1.png" width="70%"></th>
<th><img src="phone 7.jpeg" width="30%"></th>
<th><img src="phone 4.png" width="45%" ></th>
<th><img src="phone 8.png" width="60%"></th>
<th><img src="phone 6.png" width="70%"></th>
</tr>
<tr>
<td></td>
<td><h3>OnePlus Nord 2 5G</h3></td>
<td><h3>Poco M3 5G</h3></td>
<td><h3>Apple iPhone 12 Pro (128GB)</h3></td>
<td><h3>OnePlus 2 Pro</h3></td>
<td><h3>OnePlus 9 Pro 5G</h3></td>
</tr>
<tr>
<td></td>
<td><h4>From ₹29,999</h4></td>
<td><h4>From ₹29,999</h4></td>
<td><h4> ₹1,28,900</h4></td>
<td><h4>From ₹37,999</h4></td>
<td><h4>From ₹37,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<div class="table3">
<table class="b">
<tr><td colspan="5"><h2>Laptops<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><img src="l1.png" width="80%"></th>
<th><img src="l2.png" width="95%"></th>
<th><img src="L3.png" width="80%" ></th>
<th><img src="l4.png" width="80%"></th>
<th><img src="l5.png" width="80%"></th>
</tr>
<tr>
<td></td>
<td><h3>ROG Strix G17 Advantage Edition G713
</h3></td>
<td><h3>ROG Strix SCAR 17 G733</h3></td>
<td><h3>Razer Blade 15</h3></td>
<td><h3>Legion Y540 - Raven Black</h3></td>
<td><h3>ThinkPad E14 35.56cms-Black</h3></td>
</tr>
<tr>
<td></td>
<td><h4>₹97,999</h4></td>
<td><h4>₹1,29,999</h4></td>
<td><h4> ₹1,30,900</h4></td>
<td><h4>From ₹69,000</h4></td>
<td><h4>From ₹49,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<center> <th><img src="banner9.jpg" width="100%" height="80%" ></th> <center>
<br>
<br>
<br>
<div class="table3">
<table class="b">
<tr><td colspan="5"><h2>Laptops<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><img src="l1.png" width="80%"></th>
<th><img src="l2.png" width="95%"></th>
<th><img src="L3.png" width="80%" ></th>
<th><img src="l4.png" width="80%"></th>
<th><img src="l5.png" width="80%"></th>
</tr>
<tr>
<td></td>
<td><h3>ROG Strix G17 Advantage Edition G713
</h3></td>
<td><h3>ROG Strix SCAR 17 G733</h3></td>
<td><h3>Razer Blade 15</h3></td>
<td><h3>Legion Y540 - Raven Black</h3></td>
<td><h3>ThinkPad E14 35.56cms-Black</h3></td>
</tr>
<tr>
<td></td>
<td><h4>₹97,999</h4></td>
<td><h4>₹1,29,999</h4></td>
<td><h4> ₹1,30,900</h4></td>
<td><h4>From ₹69,000</h4></td>
<td><h4>From ₹49,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<div class="table2">
<table class="b">
<tr><td colspan="5"><h2>Devices and accessories<h2></td></tr>
<tr>
<th><img src="a1.jpeg" width="55%"></th>
<th><img src="a2.jpeg" width="55%"></th>
<th><img src="a3.jpeg" width="40%"></th>
<th><img src="a4.jpeg" width="50%"></th>
<th><img src="a5.jpeg" width="50%"></th>
</tr>
<tr>
<td><h3>Wired earphones</h3></td>
<td><h3>Bluetooth Headphones</h3></td>
<td><h3>Data cards</h3></td>
<td><h3>Tv streaming devices</h3></td>
<td><h3>Webcams</h3></td>
</tr>
<tr>
<td><h4>From ₹399</h4></td>
<td><h4>From ₹899</h4></td>
<td><h4> Upto 60% off</h4></td>
<td><h4>From ₹2799</h4></td>
<td><h4>From ₹490</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<center><table class="brandtable">
<tr><td><img src = "logo-paypal.png"></td>
<td><img src = "logo-godrej.png"></td>
<td><img src = "logo-oppo.png"></td>
<td><img src = "logo-coca-cola.png"></td>
<td><img src = "logo-philips.png"></td>
</tr>
</table>
</center>
<footer>
<p> hello </p>
</footer>
</body>
</html>
css code
body {
margin: 0;
background-image: linear-gradient(to right, #43cea2, #185a9d);
font-family: 'Poppins', sans-serif;
}
.topnav {
overflow: hidden;
background: orange linear-gradient(#F7971E,#FFD200);
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
background: orange linear-gradient(#FFD200);
}
.dropdown {
padding-top:15px;
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
display: inline-block;
border-radius: 4px;
background-color: #ff8c00;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.topnav input[type=text] {
float: center;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
width:30%;
border: none;
font-size: 17px;
}
#media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.topnav-right {
float: right;
}
.table a{
table-layout: auto;
}
.table a, h2{
color: #ff4411;
font-size: 25px;
font-family: 'Signika', sans-serif;
padding-bottom: 10px;
}
.table a, h3{
font-family:Roman-55,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 19px;
text-align: center;
}
.table a, h4{
font-size: 16px;
color: #388e3c;
padding-top: 8px;
text-align: center;
}
.table1 {
background-image: linear-gradient(#FFAFBD , #ffc3a0);
background-color: white;
}
.table1 td, th {
border: 0px;
width: 200px;
}
.table1{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
}
.table2{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
}
.table2 {
/* background-image: linear-gradient(#FFAFBD , #ffc3a0); */
background-color: white;
}
.table2 td, th {
border: 0px;
width: 300px;
}
.table3{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
background-image: linear-gradient(#3eadcf, #abe9cd);
background-color: white;
}
.table3 td, th {
border: 0px;
width: 300px;
}
/* button hover */
.button {
display: inline-block;
border-radius: 4px;
background-color: #ff8c00;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.srch{
padding-top:15px;
padding-right:10px;
}
/* brands */
.brandtable{
width:100%;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 0px;
border-bottom: 2px solid orange;
margin: 0;
background-color:white;
}
/*footer*/
footer{
}
Use table/td/tr tags only if you want to use it for table purpose. For other purpose you can use HTML5 semantic/div tags with CSS3 properties.
Follow HTML5 semantic tag property w3school semantic : w3school semantic tags
Try to use Markup Validation Service to check code quality.
You can see, I took some of part from your code and convert into new style. Solved example codepen.io/ganesh1172/footer-html5
I hope you understand what I want to say. All the best 👍 ✌️.
Because of mistakes in your HTML, chrome somehow wraps your footer in center tag. You can check your HTML here and try to solve problems
https://validator.w3.org/nu/#textarea
There are too many problems with your markup. First thing is stop using center tag, that is outdated now, Use css instead to center the elements.
Your footer is wrapped inside the center tag ( very hard to find but if you see it with the chrome developer tool, you will find that ).
Try to learn modern Html5 and css3 syntax.
Happy learning.
I have an HTML document with a stylesheet referenced in a link tag. The character set is UTF-8 and is defined in the HTML and CSS files. In Chrome and Microsoft Edge, the CSS renders as it should, however in Firefox and IE it doesn't load it. There aren't any errors in the Console of Developer tools and no compilation errors in the IDE I am using.
I can go directly to the CSS file using the absolute file path in the URL bar and it will display the contents of the file, and it will render the HTML just fine. The CSS will render when I enclose it in style tags in the HTML file itself. However, I want to link tag it for organization.
I cannot find the solution anywhere even though many people have had this issue. I'm wondering if there is a known solution to this that could help me.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="\css\core-test.css" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar">
<a>#</a>
</nav>
<div class="table-box">
<div class="table-body">
<table id="main-table" class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>TOTAL</th>
<th>OI</th>
<th>IV</th>
<th><button id="filterbtn" class="filterbtn fa fa-filter"></button></th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
</tbody>
</table>
<div id="option-modal" class="option-modal">
<div id="option-modal-box" class="option-modal-box">
<span id="closebtn" class="closebtn">×</span>
<div id="option-modal-header" class="option-modal-header">
<a id="option-modal-header-title" class="btc-color option-modal-header-title">BITCOIN</a>
</div>
<div id="option-modal-body" class="option-modal-body">
<div id="chart-box" class="chart-box">
<div class="box-header">
<a class="box-title">Chart</a>
</div>
<div style="background-color: gray;" class="box-body">
<a>chart-box</a>
</div>
</div>
<div id="orderbook-box" class="orderbook-box">
<div class="box-header">
<a class="box-title">Orderbook</a>
</div>
<div class="box-body">
<div class="orderbook-bid-body">
<table id="orderbook-bid-table" class="orderbook-bid-table">
<thead>
<tr>
<th>TOTAL</th>
<th>SIZE</th>
<th>BID</th>
</tr>
<tbody>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
</tbody>
</thead>
</table>
</div>
<div class="orderbook-ask-body">
<table class="orderbook-ask-table">
<thead>
<tr>
<th>ASK</th>
<th>SIZE</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
</table>
</div>
</div>
</div>
<div id="stat-box" class="stat-box">
<div class="box-header">
<a class="box-title">Greeks</a>
</div>
<div class="box-body">
<table id="greek-table" class="option-modal-table">
<thead>
<tr>
<th>MARK</th>
<th>OI</th>
<th>IV</th>
<th>DELTA</th>
<th>THETA</th>
<th>VEGA</th>
<th>GAMMA</th>
</tr>
</thead>
<tbody>
<tr>
<td id="mark-greek">0.031</td>
<td id="oi-greek">1120.0</td>
<td id="iv-greek">60.9%</td>
<td id="delta-greek">-0.2</td>
<td id="thelta-greek">-9.0</td>
<td id="vega-greek">1.23</td>
<td id="gamma-greek">0.00012</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="trade-box" class="trade-box">
<div class="box-header">
<a class="box-title">Recent Trades</a>
</div>
<div class="box-body">
<table id="trade-table" class="option-modal-table">
<thead>
<tr>
<th>PRICE</th>
<th>IV</th>
<th>SIZE</th>
<th>TIME</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.032</td>
<td>60.9%</td>
<td>1</td>
<td class="call-color">00:12:34</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var optionModal = document.getElementById("option-modal");
var chartButton = document.getElementsByClassName("chartbtn");
var closeButton = document.getElementById("closebtn");
function openChart() {
optionModal.style.display = "block";
}
for (var i = 0; i < chartButton.length; i++) {
chartButton[i].addEventListener("click", openChart);
}
window.onclick = function(event) {
if (event.target == optionModal) {
optionModal.style.display = "none";
}
}
closeButton.onclick = function(event) {
if (event.target == closeButton) {
optionModal.style.display = "none";
}
}
</script>
</html>
Here is the CSS:
#import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
#charset "utf-8";
:root {
--bg: #060c17;
--item-bg: #0c1427;
--main-font-color: white;
--border: #262f43;
--th-bg: black;
--th-font: #7886a1;
--btc: #ff8133;
--eth: #106fb7;
--call: #10b759;
--put: #ff3366;
--main-font: 'Overpass', sans-serif;
}
.container {
display: flex;
flex-direction: column;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0;
background-color: var(--bg);
}
.navbar {
position: fixed;
padding: 20px;
top: 0;
right: 0;
left: 0;
width: 100%;
text-align: center;
background: var(--item-bg);
border-bottom: 1px solid var(--border);
}
.navbar a {
color: var(--main-font-color);
font-size: 20px;
font-family: var(--main-font);
}
.table-box {
display: flex;
border-radius: 0.25rem;
margin-top: 75px;
margin-bottom: 1px;
height: 100%;
width: 99%;
background-color: var(--item-bg);
border: 1px solid var(--border);
overflow: hidden;
}
.filterbtn {
color: var(--th-font);
background-color: var(--th-bg);
font-size: 14px;
border: none;
cursor: pointer;
}
.table-body {
position: relative;
margin-top: 40px;
width: 100%;
overflow: auto;
border-top: 1px solid var(--border);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.table thead {
color: var(--th-font);
}
.table tbody {
color: var(--main-font-color);
}
.table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.chartbtn {
font-size: 14px;
border: none;
border-radius: 0.25rem;
cursor: pointer;
color: var(--th-font);
background-color: var(--th-bg);
}
.table thead th,
.table tbody td {
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid var(--border);
}
.table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.btc-color {
color: var(--btc);
}
.eth-color {
color: var(--eth);
}
.call-color {
color: var(--call);
}
.put-color {
color: var(--put);
}
.option-modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 20px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.option-modal-box {
display: flex;
margin: auto;
height: 95%;
width: 90%;
background-color: var(--item-bg);
border: 1px solid var(--border);
border-radius: 0.25rem;
overflow: hidden;
}
.closebtn {
padding-top: 0.5%;
right: 6%;
cursor: pointer;
font-size: 20px;
font-family: var(--main-font);
position: fixed;
color: var(--main-font-color);
}
.option-modal-header {
position: fixed;
margin: 5px;
}
.option-modal-header-title {
position: sticky;
font-family: var(--main-font);
font-size: 20px;
}
.option-modal-body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 40px;
height: 90%;
width: 100%;
background-color: var(--item-bg);
overflow: auto;
}
.option-modal-body div {
min-width: 50%;
}
.orderbook-bid-body {
display: inline-table;
}
.orderbook-bid-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-bid-table thead {
color: var(--th-font);
}
.orderbook-bid-table tbody {
color: var(--main-font-color);
}
.orderbook-bid-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-bid-table thead th,
.orderbook-bid-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-collapse: collapse;
}
.orderbook-bid-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.orderbook-ask-body {
float: right;
}
.orderbook-ask-table {
position: relative;
padding-bottom: 10px;
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-ask-table thead {
color: var(--th-font);
}
.orderbook-ask-table tbody {
color: var(--main-font-color);
}
.orderbook-ask-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-ask-table thead th,
.orderbook-ask-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.orderbook-ask-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.option-modal-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.option-modal-table thead {
color: var(--th-font);
}
.option-modal-table tbody {
color: var(--main-font-color);
}
.option-modal-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.option-modal-table thead th,
.option-modal-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
}
.option-modal-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
#media screen and (max-width: 800px) {
.chart-box {
width: 100%;
}
.orderbook-box {
width: 100%;
}
.stat-box {
order: 4;
width: 100%;
}
.trade-box {
width: 100%;
order: 3;
}
}
.chart-box {
height: 50%;
overflow: hidden;
}
.orderbook-box {
height: 50%;
overflow: hidden;
}
.stat-box {
height: 49%;
overflow: hidden;
}
.trade-box {
height: 49%;
overflow: hidden;
}
.box-header {
height: 6%;
padding: 5px;
}
.box-title {
color: var(--main-font-color);
font-family: var(--main-font);
font-size: 16px;
margin: auto;
}
.box-body {
border: 1px solid var(--border);
height: 89%;
overflow: auto;
}
Could the backslashes be the problem?
<link rel="stylesheet" type="text/css" href="/css/core-test.css" media="screen">
Try changing them to forward slashes.
I made a table in html but when I try to increase the height of a table cell it doesn't increase.
this is the index.html file:
<!DOCTYPE html>
<!--Begin-->
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
</table>
</body>
</html>
and here is the style.css file:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
This is how that looks:
But that isnt what I wanted because in the code I put rowspan="2" so here is an example of what I expected
But why is it that the first image is the result of this code and not the second?
You don't have a third row in your HTML code, that's why that cell doesn't span into a third row. As soon as you add a third row, the rowspan will look as expected:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
<tr>
<td>Row 3, second cell</td>
</tr>
</table>
</body>
</html>
I was creating a table and suddenly this white space showed up between rows. I tried some things but couldn't get it to go away.
Later realised that it happened only when bootstrap was enabled
When I remove bootstrap css file it gets fixed.
Here is without bootstrap
body {
margin: 0;
background-image: url(https://ambrosia-servers.com/adminactivity/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
top: 0px;
}
.table th h1 {
font-weight: bold;
font-size: 1em;
text-align: center;
color: #C6B642;
padding: 5px;
}
.table td {
font-weight: bold;
font-size: 1em;
color: #8e8e8e;
padding: 10px;
}
.table {
text-align: left;
overflow: hidden;
width: 100%;
display: table;
border-collapse: collapse;
/*padding: 0 0 8em 0;*/
}
.table td,
.table th {
padding:0;
margin:0;
}
.table tr:nth-child(odd) {
background-color: #252424;
}
.table tr:nth-child(even) {
background-color: #000000;
border: black 0px solid;
}
.table th {
background-color: #2B2B1B;
}
.table td:first-child {
background-color: #2b2b1b;
color: #C6B642;
font-weight: bold;
}
.table tr:hover {
background-color: #464A52;
}
.table td:hover {
background-color: #C6B642;
color: #403E10;
font-weight: bold;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: all;
}
#media (max-width: 800px) {
.table td:nth-child(4),
.table th:nth-child(4) {
display: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<table class="table">
<thead>
<tr>
<th><h1>Sites</h1></th>
<th><h1>Views</h1></th>
<th><h1>Clicks</h1></th>
<th><h1>Average</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>9518</td>
<td>6369</td>
<td>01:32:50</td>
</tr>
<tr>
<td>Twitter</td>
<td>7326</td>
<td>10437</td>
<td>00:51:22</td>
</tr>
<tr>
<td>Amazon</td>
<td>4162</td>
<td>5327</td>
<td>00:24:34</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>3654</td>
<td>2961</td>
<td>00:12:10</td>
</tr>
<tr>
<td>CodePen</td>
<td>2002</td>
<td>4135</td>
<td>00:46:19</td>
</tr>
<tr>
<td>GitHub</td>
<td>4623</td>
<td>3486</td>
<td>00:31:52</td>
</tr>
</tbody>
Bootstrap enabled
body {
margin: 0;
background-image: url(https://ambrosia-servers.com/adminactivity/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
top: 0px;
}
.table th h1 {
font-weight: bold;
font-size: 1em;
text-align: center;
color: #C6B642;
padding: 5px;
}
.table td {
font-weight: bold;
font-size: 1em;
color: #8e8e8e;
padding: 10px;
}
.table {
text-align: left;
overflow: hidden;
width: 100%;
display: table;
border-collapse: collapse;
/*padding: 0 0 8em 0;*/
}
.table td,
.table th {
padding:0;
margin:0;
}
.table tr:nth-child(odd) {
background-color: #252424;
}
.table tr:nth-child(even) {
background-color: #000000;
border: black 0px solid;
}
.table th {
background-color: #2B2B1B;
}
.table td:first-child {
background-color: #2b2b1b;
color: #C6B642;
font-weight: bold;
}
.table tr:hover {
background-color: #464A52;
}
.table td:hover {
background-color: #C6B642;
color: #403E10;
font-weight: bold;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: all;
}
#media (max-width: 800px) {
.table td:nth-child(4),
.table th:nth-child(4) {
display: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<table class="table">
<thead>
<tr>
<th><h1>Sites</h1></th>
<th><h1>Views</h1></th>
<th><h1>Clicks</h1></th>
<th><h1>Average</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>9518</td>
<td>6369</td>
<td>01:32:50</td>
</tr>
<tr>
<td>Twitter</td>
<td>7326</td>
<td>10437</td>
<td>00:51:22</td>
</tr>
<tr>
<td>Amazon</td>
<td>4162</td>
<td>5327</td>
<td>00:24:34</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>3654</td>
<td>2961</td>
<td>00:12:10</td>
</tr>
<tr>
<td>CodePen</td>
<td>2002</td>
<td>4135</td>
<td>00:46:19</td>
</tr>
<tr>
<td>GitHub</td>
<td>4623</td>
<td>3486</td>
<td>00:31:52</td>
</tr>
</tbody>
</table>
Try adding this to your css - you already have the classes set. you just need to add the border-top to that section.
.table td, .table th {
border: none !important;
}
You can use:
.table > tbody > tr > td {
border-top: none;
}
Of course, it'll only works if your CSS is executed after the Bootstrap import. Otherwise, you'll need a border-top: none !important to force the override.
A Happy new year to everyone,
I am having an issue to which I am clueless at answering. . I have 12 divs set up in a 4 across by 3 down layout. I just coded an attachment to box 5 but the scrolling text is at the bottom of the page and i am lost as how to get it to line up in the box 5 (tickets Pending). My css skills are lacking and could use some help
This is the code i was able to capture with inspect element.
{ inline style
position: relative;
overflow: hidden;
}
#pscroller1 {
width: 370px;
height: 120px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}
//code from CSS file
body {
background-color: #d0e4fe;
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
}
p#lastRun{
font-family: Garamond, 'Times New Roman', Georgia, serif;
font-variant: small-caps;
//font-weight: bold;
font-size:1.5em;
text-align:center;
background-color: black;
color: white;
}
h1 {
color: orange;
text-align: center;
}
a {color:#7FFFD4;
}
#mHeader, #mHeader2{
text-align: center;
font: Georgia, Times, serif;
font-size: small;
//font-weight: bold;
}
/* squares configuration */
#squareBox {
margin-left: auto;
margin-right: auto;
width: 1568px;
height: 700px;
//border: 2px solid #73AD21;
//border-radius: 10px;
//background: url(paper.gif);
background-color: tan;
}
#square1, #square2, #square3, #square4, #square5, #square6, #square7, #square8, #square9, #square10, #square 11, #square12{
background-color: WhiteSmoke;
width: 386px;
height: 203px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
margin-left: 5px;
text-align: center;
}
#square1{
float: left;
margin-top: -15px;
}
#square2{
float: left;
margin-top: -15px;
}
#square3{
float: left;
margin-top: -15px;
}
#square4{
float: left;
margin-top: -15px;
}
#square5{
float: left;
margin-top: 10px;
}
#square6{
float: left;
margin-top: 10px;
}
#square7{
float: left;
margin-top: 10px;
}
#square8{
float: left;
margin-top: 10px;
}
#square9{
float: left;
margin-top: 10px;
}
#square10{
float: left;
margin-top: 10px;
}
#square11{
float: left;
margin-top: 10px;
}
#square12{
float: left;
margin-top: 10px;
}
.sqHeader{
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
/* Table configuration */
th{
font-size: small;
font-variant:small-caps;
background-color: Wheat;
}
table, td, th{
margin: 1em; border-collapse: collapse;
border: 1px solid black;
padding: .15em;
margin-top: 2px;
font-size: 100%;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
tbody tr:nth-child(even) {
background-color: #F8F8F8 ;
}
tbody tr:nth-child(odd) {
background-color: #99FFCC;
}
tbody tr:hover {
background-color: #c9f;
}
#dataContainter, #rightNavBar, #leftNavBar{
height: 580px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
}
#leftNavBar , #rightNavBar {
width: 146px;
background-color: light-gray;
font-size: 74%;
}
#leftNavBar {
float: left;
}
#rightNavBar {
float: right;
}
#filterButton{
margin-left: auto;
margin-right: auto;
}
.statusGray {
background-color: gray;
}
.statusRed {
background-color: red;
color: white;
font-weight: bold;
text-decoration: blink;
}
.statusYellow{
background-color: yellow;
color: black;
font-weight: bold;
}
.statusGreen{
background-color: green;
color: white;
font-weight: bold;
}
.statusBlue{
background-color: blue;
color: white;
font-weight: bold;
}
.regionRed {
background-color: #FF6600;
}
#displayResults tr:hover {
background-color: #FFFF00;
}
#customers tr.alt td {
color: #EAF2D3;
background-color: #000000;
};
input:focus {
background-color: yellow;
}
button:hover {
background-color: blue;
color: white
}
.dEntry:focus, .qSearch:focus {
background-color: #99FFFF;
}
.dEntry, .data {
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
//font-weight: bold;
//font-size: 80%;
//color: blue;
}
/*****************************************************
* generic styling for ALS elements: outer container
******************************************************/
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 370px;
height: 120px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
margin-bottom: 50px;
}
#pscroller2{
width: 700px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
// code from html file
<body>
<div id="squareBox">
<div id="square1">
<span class="sqHeader"> Ticket Monitor</span>
<table id="A3">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="a3Data"></tbody>
</table>
</div>
<div id="square2">
<span class="sqHeader"> Unclaimed Jobs Monitor</span>
<table id="xerox">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="xeroxData"></tbody>
</table>
</div>
<div id="square3">
<span class="sqHeader">Monitor</span>
<table id="d3">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data3"></tbody>
</table>
</div>
<div id="square4">
<span class="sqHeader"> 2Hr Monitored by Marques (CA)-</span>
<table id="d4">
<th>Response</th>
<th>Longest-UnTouched Ticket</th>
<th>Status</th>
<th>#</th>
<tbody id="kaiserData"></tbody>
</table>
</div>
<div id="square5">
<span class="sqHeader">C 1-Hour Callback Monitor</span>
<table id="d5">
<th>Minutes</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="cdwHpgData"></tbody>
</table>
</div>
<div id="square6">
<span class="sqHeader">Tickets Pending Processing</span>
<table id="d6">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="pscroller1"></tbody>
</table>
</div>
<div id="square7">
<span class="sqHeader"> Monitor</span>
<table id="d7">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data7"></tbody>
</table>
</div>
<div id="square8">
<span class="sqHeader">EDI Shared Mail Box Monitor</span>
<table id="d8">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data8"></tbody>
</table>
</div>
<div id="square9">
<span class="sqHeader">Multi-Trips / Aged Monitor</span>
<table id="d9">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data9"></tbody>
</table>
</div>
<div id="square10">
<span class="sqHeader">#10 Monitor</span>
<table id="d10">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data7"></tbody>
</table>
</div>
<div id="square11">
<span class="sqHeader">#11 Monitor</span>
<table id="d11">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data8"></tbody>
</table>
</div>
<div id="square12">
<span class="sqHeader">#12 Monitor</span>
<table id="d12">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
</table>
</div>
</div>
</body>