I'm working on learning HTML, CSS, and JS on the side, but started messing around with making a new email signature at work and am running into an issue I'm hoping someone can help me out with.
What I'm hoping for:
What I'm getting: https://codepen.io/spacemanspiff_/pen/GRQzwQa
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img
src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I hate drag on about the things I've tried because I imagine you'll see it my code, but essentially what I was thinking I needed to do was put two tables inline. On the left would be the employee's profile pic and the logo below it, and a blue bar in the next column. In the second table would be the employee details and any appropriate links. What I'm getting is the rows in the 2nd table are ending up much larger than I want them, and I'm just not understanding why.
I guess what I was hoping for with the two tables was the ability to keep the information on the 2nd table tighter together, while allowing the info in the 1st table to span multiple rows. This could be the wrong approach altogether, so I'm open to any suggestions!
Thanks for the help!
Do you know how to inspect a document with your browser? Doing so shows that your paragraphs have a default size, mainly due to line height and margin, that is dramatically larger than the text itself.
Either don't use paragraphs or set their line height to zero or another small value and reduce margin. You'll then need to adjust margin on nearby elements to space them back out as needed.
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
line-height: 0;
margin: 5px;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
Related
It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>
People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>
I have a table, always three columns of relatively the same info.
I'm trying to get it to look like this:
So, each "cell" (in the x area) is currently two td's, one for the text and other for the image.
I'm trying to figure out how to evenly space them all across the page and put a small margin in between each one.
Currently, it looks like this
HTML:
<div>
<table>
<colgroup>
<col style="width:33%">
<col style="width:33%">
<col style="width:33%">
</colgroup>
<tbody>
<tr>
<td class="cellData">
<h2><u>Brennon Huels</u></h2>
<p id="email">Meghan35#hotmail.com</p>
<p id="phoneNumber">279-027-8862 x78041</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Xzavier Schinner</u></h2>
<p id="email">Ayla_Fritsch#hotmail.com</p>
<p id="phoneNumber">078-723-5610 x715</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Leone Mayert</u></h2>
<p id="email">Nicolette.Nicolas#yahoo.com</p>
<p id="phoneNumber">003-101-8397</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Moriah Howe</u></h2>
<p id="email">Carli_Friesen7#hotmail.com</p>
<p id="phoneNumber">1-837-151-2364 x2091</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Jayce Koch</u></h2>
<p id="email">Joaquin.Barrows#hotmail.com</p>
<p id="phoneNumber">1-227-294-3980 x9561</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Mekhi Haag</u></h2>
<p id="email">Neva3#hotmail.com</p>
<p id="phoneNumber">(682) 411-5607 x6897</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Merl Kshlerin</u></h2>
<p id="email">Harold_Deckow#yahoo.com</p>
<p id="phoneNumber">627-951-5298 x726</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
tr{
display: block;
padding: 5px;
margin-bottom: 10px;
}
table td{
border:3px solid red;
width:33%;
padding-right: 10px;
}
tr td{
margin: 10px;
width: 33%;
}
td img{
/*display: block;*/
vertical-align: middle;
padding: 4px;
}
tr p{
margin: 0px;
padding-left: 10px;
}
I've tried playing with the classes to no avail, and tried applying this answer but also didn't work, so I'm stuck.
Any ideas or help would be greatly appreciated!
Edit: if a table is the wrong way to go, I'm open to alternatives...I'm still learning html so just did a table because since I wanted something that looks like it, but no other reason.
This question already has an answer here:
How to avoid White line between img and td bottom?
(1 answer)
Closed 6 years ago.
Here is the code:
Fiddle
I believe I have removed all spacing, but the td is still 305px and the img is 300px height.
Even if I try:
<td height="300">
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
or
<tr height="300">
On the containing <tr>.
This is completely ignored and the td stays at 305px?
because img is an inline element and has vertical-align:baseline therefore creates a gap.
So you either can:
display:block in img
or set
vertical-align:bottom
Also you don't need 2 styles tag, neither don't you need to duplicate the body rule with new properties, just put all in one body rule.
Note: careful if you are creating this for html-email, the CSS which is not inline (above body) some email clients such as gmail will strip it, make sure you put it all inline or you use some toll that will do that for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img is inline element and it takes few extra pixels on bottom by default. Use display: block for img to remove this space:
table img {
display: block;
}
I have three tables on my page, each with one row, and three data cells inside.
My issue is, when adding text to a cell, it is increasing the height of the table though I have already defined a height. My second issue is positioning the pictures in the final (3rd) data cells to be in the middle.
#snake {
background-color: #c4df9b;
}
#bat {
background-color: #e2e2e2;
margin-top: 18px;
margin-bottom: 18px;
}
#monkey {
background-color: #c69c6d;
}
#monkeygraphic {
padding-top: 5px;
}
.animalcontainer {
width: 682px;
height: 200px;
}
.animalcontainer td {
border: 1px solid black;
width: 227px;
text-align: center;
}
<div id="main-left">
<table id="snake" class="animalcontainer">
<tr>
<td>
<img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
</td>
<td>sad</td>
<td id="snakepic">
<img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
</td>
</tr>
</table>
<table id="bat" class="animalcontainer">
<tr>
<td id="batgraphic">
<img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
</td>
<td>
<h1>sad</h1>
</td>
<td id="batpic">
<img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
</td>
</tr>
</table>
<table id="monkey" class="animalcontainer">
<tr>
<td id="monkeygraphic">
<img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
</td>
<td>
<h1>sad</h1>
</td>
<td id="monkeypic">
<img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
</td>
</tr>
</table>
</div>
Silly me, i've just learnt the vertical-align css "thing" which seems to have sorted my issue.
Thanks to anybody who read the question though.
(Fix: giving my middle td cells a class, and adding vertical-align: top; to the css)
I want to place text on top of an image that I placed in a table cell.
I tried to use the z-index but the text keeps appearing under the image.
I created a class called p1 that positioned the image relative(not sure how I should handle this inside of a table) and the z-index -1.
I then added the class id in the table cell tag.
What I have so far:
.font1 {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
text-align: left;
}
.hangingindent {
padding-left: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.hangingindent2 {
padding-left: 75px;
}
.p1 {
position: relative;
z-index: -1;
}
.backbox {
z-index: -1;
position: relative;
left: 0;
right: 0;
botton: 0;
}
.text {
z-index 100;
color: #0000000;
font-size: 14px;
position: absolute;
top: 100px;
right: 200px;
overflow: hidden;
}
<table width="1013" border="0" align="center" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/images2/header.gif" width="1013" height="642" />
</td>
</tr>
<tr>
<td colspan="5">
<img src="images/images2/menu-grid.gif" width="1013" height="232" />
</td>
</tr>
<tr>
<td width="55"> </td>
<td width="231">
<img src="images/images2/solutions.jpg" width="204" height="46" />
</td>
<td width="233">
<img src="images/images2/capabilities.jpg" width="204" height="46" />
</td>
<td width="232">
<img src="images/images2/art services.jpg" width="204" height="46" />
</td>
<td width="254">
<img src="images/images2/contact us.jpg" width="204" height="46" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent2">
<img src="images/images2/WELCOME.gif" width="500" height="100" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent">
<p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
<br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
<br />provide the highest quality products at the most competitive prices.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5">
<div class="backbox">
<img src="images/images2/bottom2.gif" width="1013" height="810" />
<div class="text">This is a test to see where the text will land</div>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
As I got from your question is you want to put text over an image. So to do it, there is no need to use z-index. you can do it by setting absolute position of p tag and make td tag as position relative.
demo for it is you can use the link
<table>
<tr>
<td>
<p>Hello</p>
<img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
</td>
</tr>
</table>
CSS:
img {
width:200px;
}
td {
border:2px solid red;
position:relative;
}
p {
position:absolute;
color:yellow;
font-size:30px;
top:0px;
left:70px;
}
You can change the markup little bit.!Z-index will work with position set to other than static (which is default).
Here, you can remove the <img> tag & display the image as background image.
Other solution wrap the text in <p> or <div> & make it position: absolute & immediate parent <td> as position:relative (This is mentioned earlier already)
little code explanation
exp1 -- background-image
td {
background-image: url("");
background-position: left top fixed;
}
exp1 - HTML markup
<td>Data to be there on top of the image</td>
Please check this link! - JSFIDDLE