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>
```
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.
I just started to learn programming in PHP. So i got an old script from a friend where i can learn on and got the following question.
The scripts contains a menu on the left wich is this code:
<td width="125" align="left" valign="top" class="left_nav"><table width="125" border="0" cellspacing="0">
<tr>
<td class="left_nav_inner">
Actions:
- test.
Can someone help me how to put the column on the right?
This is the class left_nav
.left_nav {
background: #333;
border-left: 1px solid #000000;
border-right: 0px solid #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
width: 125px;`
}
You need to change css:
.left_nav {
position:absolute;
right: 0px;
margin-top: 50px;
background: #333;
border-left: 1px solid #000000;
border-right: 0px solid #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
width: 125px;
}
See Demo : http://jsfiddle.net/HjYR9/
First this has nothing to with php
Second your html is incomplete
or its just wrong.
But if you want a object in the right corner of your screen use this.
position: absolute;
right: 0px;
top: 0px;
visit this link link if you want to find more info about it
I have a table cell with text in it but how can I make the text flush to the top or bottom of the cell (with no padding above it)? I've tried vertical-align, but it's still not quite to the top 'edge'.
My code
<table>
<tr>
<td class="foo">3.2325</td>
<td class="bar">4.5931</td>
</tr>
</table>
table {
border-bottom: 2px solid black;
border-collapse: collapse;
}
table td {
border-top: 1px solid black;
border-collapse: collapse;
background-color: pink;
padding: 0 10px 10px;
}
.foo {
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
}
.bar {
font: normal 16px arial;
}
JSfiddle example: http://jsfiddle.net/KznxN/2/
depending on whether you wish more above or below, you adjust the "line-height" depending
example:
. {foo
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
line-height: 24px;
}
But beware, it would be better fix the height size of your cell