So today im trying to take items and subitems from a listview and put it in my html template. i can see how this is hard to understand so im going to be showing u what i mean.
This is the Source code for the HTML File
body {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
color: #666666;
background-color: #333333;
margin: 0px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
tr.h th {
background-color: #333333;
border: none;
}
th {
color: #ffffff;
background-color: #00E5EE;
border: 1px solid #00E5EE;
padding: 3px;
vertical-align: top;
text-align: left;
}
td {
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
pre {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 0px;
margin: 0px;
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
<body>
<div class="center" style="margin:auto;width:80%;">
<table>
<tr class="h">
<th>
<h2>Stats... </h2>
</th>
<th></th>
<th></th>
</tr>
<tr>
<th>name</th>
<th>age</th>
<th>gander</th>
</tr>
<pre><tr><td>Quan</td><td>12</td><td>male</td></tr></pre>
<pre><tr><td>sam</td><td>14</td><td>male</td></tr></pre>
</table>
<p><small>lit stuff right here </small></p>
</div>
</body>
So now to tell you what i want happening, i want when i click the button that says "Turn to html" that i show in the form photo, to convert the items and subitems into the html layout that i also show in the second photo.
i hope this is enough information.
Related
I have a problem laying out and centering the navbar and the table. I want the navbar to be right under the h2 element and centered. At the moment, the navbar breaks onto the next line. The layout of the table is fine, but it should be centered. I wonder if there is a better technique for making a navbar.
Here is my code:
* {
background-color: #2c2f33;
text-decoration: none;
}
.bet-table {
display: table-cell;
margin: 0;
color: white;
}
.bet-table th,
td {
border: 1px solid;
text-align: center;
padding: 5px 5px 5px;
}
.bet-table table {
margin-left: auto;
margin-right: auto;
}
.logo {
text-align: center;
font-size: 40px;
font-family: arial;
font-weight: lighter;
color: white;
}
.nav-g ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-g li {
list-style: none;
display: inline-block;
}
.nav-g a {
text-decoration: none;
width: 100px;
display: block;
padding: 2px 2px 2px;
font-size: 15px;
font-weight: lighter;
text-align: center;
color: white;
font-family: arial;
float: left;
}
.Choose h3 {
color: white;
background-color: #7289da;
padding: 8px 8px 8px 8px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
margin-top: 5pc;
}
.navbar a:hover {
color: #7289da;
}
<div id="h-container">
<h2 class="logo">Betbowl
<h2>
<div class="nav-g">
<ul>
<li><a href="#">Make-A-Bet</li>
<li><a href="#">Pending</li>
<li><a href="#">Completed</li>
</ul>
</div>
</div>
<div class="Choose">
<h3>Choose</h3>
</div>
<div class="bet-table">
<table style="width:100%; margin-left: auto; margin-right: auto;">
<tr>
<th>Situation</th>
<th>Bet</th>
<th>Winner</th>
<th>Earnings</th>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
First you need to close your <a> tags. like this:
I AM A LINK
ul needs to be centered:
text-align:center
for the table you should remove display property from the container, default value works fine:
.bet-table{
/* display: table-cell; REMOVE THIS LINE */
margin: 0;
color: white;
text-align: center;
width: 100%;
}
table{
margin: 0 auto
}
find the edited version here: https://codepen.io/theBehrouz/pen/QWmXZbr
I am trying to create a certificate in an html email. I cannot get the border to extend to the right alignment. Below is my code and an image of it. I know that html in outlook doesnt behave the same way but I do want instructor and manager on the same line inside the border. Float doesnt work and I could not get the margins to work.
CSS Code
<pre>
<style>
.cert {
border: 15px solid #0072c6;
border-right: 15px solid #0894fb;
border-left: 15px solid #0894fb;
width: 700px;
font-family: arial;
color: #383737;
overflow: visible;
}
.crt_title {
margin-top: 30px;
font-family: "Satisfy", cursive;
font-size: 40px;
letter-spacing: 1px;
color: #0060a9;
}
.crt_logo img {
width: 130px;
height: auto;
margin: auto;
padding: 30px;
}
.colorGreen {
color: #27ae60;
}
.crt_user {
display: inline-block;
width: 20%;
padding: 5px 25px;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: "Satisfy", cursive;
font-size: 40px;
border-bottom: 1px dashed #cecece;
}
.signature{
font-family: 'Brush Script MT', cursive;
font-size: 40px;
letter-spacing: 3px;
text-decoration: underline;
}
.normal{
font-family: 'Arial';
font-size: 40px;
letter-spacing: 3px;
}
.afterName {
font-weight: 100;
color: #383737;
}
.colorGrey {
color: grey;
}
.certSign {
width: 200px;
}
#media (max-width: 700px) {
.cert {
width: 100%;
}
.tableClass {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 20px 0px !important;
}
</style>
</pre>
HTML Code
<table al[![enter image description here][1]][1]ign="center" width="600" border="0" cellpadding="0" cellspacing="0" class="cert">
<tr>
<td width="70%" align="center" class="crt_logo">
<img src="logo path"width="200" height="121" alt="logo">
</td>
</tr>
<tr>
<td width="70%" align="center">
<h1 class="crt_title">Certificate Of Completion
<h2>This Certificate is awarded to</h2>
<h1 class="colorGreen crt_user">Name</h1>
<h3 class="afterName">For completion in Class
</h3>
<h3>Awarded on Date taken</h3></td>
</tr>
<tr>
<td align="left" valign ="middle" style="font-family: 'Brush Script MT', cursive;
font-size:30px; text-decoration: underline;display:inline:">Instructor </td>
<td width="10px" align="left" valign ="middle" style="font-family: 'Brush Script MT',
cursive; font-size:30px; text-decoration: underline;display:inline:">Manager</td>
</td>
</td>
</tr>
</table>
The issue that I am having is when I hover over the value in the table row, and the font size increases, so does the height of the table row.
I would like for only the font size to increase on hover, and not the table row height. I've tried messing with line-height, max-height in the table, td, tr, tr:hover css to no avail. Any help would be greatly appreciated.
table {
color: black;
width: 100%;
border: 1px solid #000000;
background-color: #996600;
background: #000066;
z-index: -47;
}
td {
font-size: 2.4em;
padding: 1em, 1em, 1em, 1em;
font-family: -apple-system, 'Raleway', '.SFNSText-Regular', 'Arimo', 'FreeSans', 'Oxygen', 'Nimbus Sans L', 'Liberation Sans', 'Helvetica Neue LT Std', 'Helvetica', 'Arial', 'ITCKorinnaW03-Kursiv', sans-serif;
text-align: center;
height: 2.4em;
color: #FF0;
border: 1px solid #000000;
text-decoration: bold;
z-index: -47;
}
td:hover {
cursor: pointer;
font-size:2.8em; /*this is the font size I want to increase to on hover, without affecting height of row.*/
}
<table>
<thead>
<th>
CATEGORY
</th>
</thead>
<tr id="row_1">
<td id="cell_1A">
$100
</td>
<td>
$100
</td>
</tr>
</table>
```
Change also the height on hover:
table {
color: black;
width: 100%;
border: 1px solid #000000;
background-color: #996600;
background: #000066;
z-index: -47;
}
td {
font-size: 2.4em;
padding: 1em, 1em, 1em, 1em;
font-family: -apple-system, 'Raleway', '.SFNSText-Regular', 'Arimo', 'FreeSans', 'Oxygen', 'Nimbus Sans L', 'Liberation Sans', 'Helvetica Neue LT Std', 'Helvetica', 'Arial', 'ITCKorinnaW03-Kursiv', sans-serif;
text-align: center;
height: 2.4em;
color: #FF0;
border: 1px solid #000000;
text-decoration: bold;
z-index: -47;
}
td:hover {
cursor: pointer;
font-size:2.8em;
height: 2em; /* more precisely it should be (2.4x2.4)/2.8 */
}
<table>
<thead>
<th>
CATEGORY
</th>
</thead>
<tr id="row_1">
<td id="cell_1A">
$100
</td>
<td>
$100
</td>
</tr>
</table>
Change your height em to rem, so it is determined by the global value not the locally changing on hover value. Might as well change it all to rem to simplify it. Also, I would remove the padding and just let it center itself with vertical-align: middle.
table {
color: black;
width: 100%;
border: 1px solid #000000;
background-color: #996600;
background: #000066;
z-index: -47;
}
td {
font-size: 2.4rem;
vertical-align: middle;
font-family: -apple-system, 'Raleway', '.SFNSText-Regular', 'Arimo', 'FreeSans', 'Oxygen', 'Nimbus Sans L', 'Liberation Sans', 'Helvetica Neue LT Std', 'Helvetica', 'Arial', 'ITCKorinnaW03-Kursiv', sans-serif;
text-align: center;
height: 4.4rem;
color: #FF0;
border: 1px solid #000000;
text-decoration: bold;
z-index: -47;
}
td:hover {
cursor: pointer;
font-size:2.8rem; /*this is the font size I want to increase to on hover, without affecting height of row.*/
}
<table>
<thead>
<th>
CATEGORY
</th>
</thead>
<tr id="row_1">
<td id="cell_1A">
$100
</td>
<td>
$100
</td>
</tr>
</table>
```
I have a simple table and associated CSS rules for the table as shown:
HTML:
<table id="depts">
<tr>
<th>Department</th>
<th>Posts</th>
</tr>
<tr>
<td colspan="2" class="none"> No Posts in this department</td>
</tr>
</table>
CSS:
#depts {
width: 500px;
font-family: 'Open Sans', sans-serif;
border-spacing: 0;
border: 1px solid black;
}
#depts td{
border-top: 2px solid #607D8B;
text-align: left;
font-family: 'Patua One', cursive;
padding: 10px;
}
.none {
text-align: center;
padding-top: 40px;
}
As it can be seen, I've added a new class for a td named none.The text-align property has been changed from left to center.But it is not reflected, when I run the page.The output is as below:
Why is'nt the new rule being ignored.Does colspan has anything to do with it?
just add #depts before your .none declaration.
.none class have a lower priority than #depts td.
You can take a look at priority order here or here
#depts {
width: 500px;
font-family: 'Open Sans', sans-serif;
border-spacing: 0;
border: 1px solid black;
}
#depts td{
border-top: 2px solid #607D8B;
text-align: left;
font-family: 'Patua One', cursive;
padding: 10px;
}
#depts .none {
text-align: center;
padding-top: 40px;
}
<table id="depts">
<tr>
<th>Department</th>
<th>Posts</th>
</tr>
<tr>
<td colspan="2" class="none"> No Posts in this department</td>
</tr>
</table>
Add the "important" flag to the none class like this:
.none {
text-align: center!important;
padding-top: 40px;
}
Your rule is ignored (not really ignored) because it has lower specificity (See: CSS Specificity: Things You Should Know).
You could use:
#depts td.none {
text-align: center;
padding-top: 40px;
}
ID has more priority than class so you can add
#depts .none {
text-align: center;
padding-top: 40px;
}
or
.none {
text-align: center!important;
padding-top: 40px;
}
CSS Specificity can be found here
I'm adding a new 'News Container' to a slightly older webpage at our firm.
This container is made up of a 2x3 table. I want the Cell 2x2 to be as High as the Text.
Here's the Problem:
Everybody uses IE in our offices (Security reasons etc.) but for some reason IE ignores the height attribute given either directly in HTML (style="height:;" or height="") or in a separate CSS.
So in Chrome it looks like this (how it should):
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ╠═════════════╣
╚══╩═════════════╝
And in Internet Explorer like this:
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ║ ║
║ ╠═════════════╣
╚══╩═════════════╝
Picture: http://imgur.com/a/jQXhQ
View it yourself (Open in both Chrome and IE) here.
How can I get IE to use the Height attribute or alternatively is there a different way?
IE Version: 11.0.9600.17358
Update: 11.0.13
Code:
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td rowspan="2">
<img id="NewsAmpel" alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
</tr>
<tr>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
i have made some changes in html as well as CSS
Working Fiddle
http://jsfiddle.net/UzCRc/60/
HTML
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td id="NewsAmpel">
<img alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
</table>
CSS
#NewsAmpel{
width:36px;
}
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
#NewsTable {
border: 2px solid #000000;
background-color: #FFFFFF;
width: 100%;
}
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;
vertical-align: top;
display:block;
}
#NewsDesc {
height: 20px;
width: 100%;
margin:0;
padding:0;
display:block;
}
#NewsHeader {
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #000000;
background-color: #FF1000;
}
Changes in html
Removed colspan
added image TD in same TR
Instead of image, ID has given to TD
CSS changes
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;//modified
vertical-align: top;
display:block;//added
}
#NewsDesc {
height: 20px; //added
width: 100%;//modified
margin:0;
padding:0;
display:block;//added
}
#NewsAmpel{
width:36px;
}