I'm working on an email template, so I'm limited with div, and CSS. Some email clients do not handle div and CSS. I have to use tables instead.
I have a td, in that td I need a title text with colored background at 100% width of td.
Here is my code, that is not working:
<td width="50%" valign="top" style="border: solid 2px #3c3141; border-width: 6px 2px 4px 0px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-left: none; background-color: #f1e4e7; margin: 0px; padding: 20px; text-align: center;">
<span style="background-color: #f5434f; color: #ffffff; padding: 10px; font-size: 16px; width: 100%;">
<strong>Termek nev</strong>
</span><br>
<span>
<br>ide jon a szoveg
</span>
</td>
You cannot specify a width for an inline element like span. Either use a block element like div or p or else force the span to display as a block using display:block as follows:
<td width="50%" valign="top" style="border: solid 2px #3c3141; border-width: 6px 2px 4px 0px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-left: none; background-color: #f1e4e7; margin: 0px; padding: 20px; text-align: center;">
<span style="background-color: #f5434f; color: #ffffff; padding: 10px; font-size: 16px; width: 100%; display:block">
<strong>Termek nev</strong>
</span><br>
<span>
<br>ide jon a szoveg
</span>
</td>
Related
I have a 2x4 table, which looks like this:
https://codepen.io/steph2020/pen/EQjyxr
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
}
table td:last-child {
border-bottom: 0;
}
}
#macroom{
color:#A52A2A;
font-size: 20px;
letter-spacing: 1px;
}
#slinky{
color:#000000;
font-size: 20px;
letter-spacing: 1px;
}
.brandImage1{
margin-top:15px;
margin-bottom:15px;
height:60px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.brandImage2{
height:60px;
width:150px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.locationIcon{
width:30px;
}
table, th, td {
background-color: #fff;
border-radius: 1px 1px 1px 1px;
overflow: hidden;
border-width: 1px;
border-color: #f4f4f4;
box-shadow: 6px 6px 18px 0 rgba(0,0,0,0.3);
text-align: center;
}
<table>
<thead>
<tr>
<th scope="col">
<a href="http://www.petessentials.ie/" target="_blank">
<img class="brandImage1" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg">
</a>
</th>
<th scope="col">
<a id="macroom" href="https://www.facebook.com/juliespetshop/" target="_blank">
<strong>Macroom Pet Shop</strong>
</a>
</th>
<th scope="col">
<a href="http://www.westcorkpetstore.net/" target="_blank">
<img class="brandImage2" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg">
</a>
</th>
<th scope="col">
<a id="slinky" href="https://www.goldenpages.ie/slinkys-pet-shop-mitchelstown/" target="_blank">
<strong>Slinkys Pet Shop</strong>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Pet Essentials">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Unit 9 Kilnagleary Business Park,</p>
<p>Carrigaline, Co. Cork</p>
</td>
<td data-label="Macroom Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>3 Main St Macroom</p>
<p>Co. Cork</p>
</td>
<td data-label="Potty Fish">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Bandon, Co. Cork</p>
</td>
<td data-label=" Slinkys Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Mitchelstown, Co. Cork</p>
</td>
</tr>
</tbody>
</table>
I am using data-label to replace the images in small screens. I want to have the images show up rather than the text in small screens. Now I am using text in data-label, How to use data-label to represent images instead?
It's currently not possible to do that in such dynamic way using that data-label technique.
What you can do is: add specific styles to each td index, with nth-of-type. That's odd, but should work.
I have been try to make an html and css lines to display user image, name, old file name, new file name and date.
My problem is when the whole content has the same length it will look good but if the username is longer or another other sting is longer it will deform the table and design please i need help.
Below is a sample image and jsfiddle link
Here is bad side
Here is my html code
<table>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">Ujah peter</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectarea</strong></span>
<span><strong>Newprojectarea</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">micheal grayer</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectareaxxx</strong></span>
<span><strong>Newprojectlocation</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
</table>
Here is css code
.treeBottomLine{
border-bottom: 2px solid #337ab7;
display: block;
margin-top: 0px;
width: 60%;
height: 20px;
text-align: center;
align-content: center;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
background-color: #fff;
}
.fromtree{
display: inline-block;
border-bottom: 2px solid #337ab7;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
padding: 3px;
margin-right: 3em;
background-color: #fff;
}
.treeimage{
border-radius: 50%;
border: 2px solid #337ab7;
background-color: #fff;
margin: 5px;
margin-right: 1em;
width:30px;
height:30px;
}
.treeName{
border: 2px solid #337ab7;
background-color: #fff;
padding: 3px;
margin-left: 2em;
margin-right: auto;
text-align: center;
display: inline-block;
}
.treeSender{
border-top: 2px solid #337ab7;
width: 100%;
display: inline-block;
position: relative;
top: -2.6em;
left: 33px;
z-index: 0;
}
.treeSenderline{
display: inline-block;
position: relative;
left: 2.6em;
top: -2em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #337ab7;
width: 100%;
height: 3px;
}
.treeMain{
position: relative;
}
Here is a link to https://jsfiddle.net/evr50w05/
I believe what you're looking for is to float the blue line to the left, and add a margin:
.treeMain {
float: left;
margin-left: 33px;
}
I've created a fiddle showcasing this here.
Hope this helps!
I'm trying to setup some links in an email and I'm having trouble getting them to display correctly.
<p style="display: block; text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</p>
They appear fine on desktop (side by side). On mobile I'd like them to stack but, as expected, they only take up 45% of the screen which is too small.
Since I can't reliably use media queries because of Gmail, is there any way to make them stack and appear at a reasonable width on mobile?
Thank you
Add a min-width to your anchor's, and since you re-style the p, use a div instead.
<div style="text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</div>
You can bring your code back to the past using tables. This technique is only reliable if it's just for an email.
<table width="500px">
<tbody>
<tr>
<td width="50%">Link one</td>
<td width="50%">Link two</td>
</tr>
</tbody>
</table>
Found it, sorry, changed padding and forgot to change it for textarea.
My mistake. Will delete )
I'm trying to make table with text input and textarea input on the same row, but cannot make textarea the same height as the text input.
Could anyone please tell me, why text input and textarea have different height and how to fix that? As you can see, textarea is 2px higher and chrome inspector tells me the same. What's wrong and how to fix that?
(sorry for a large text, site told me that I've got "mostly code" and have to add some details. Have no idea, what else may I add to that code, the problem is obvious)))
Thank you!
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
the textarea has padding top-bottom 2px,
the input only 1px.
change the padding on textarea:
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding: 1px 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
box-sizing: border-box; is what you need to place onto the input and text area. Also works well for select.
By using box-sizing: border-box; it means you dont have to adjust all of your widths, padding and line-height and you can have everything the same
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
To fix the problem, add box-sizing: border-box to the input element AND to the textarea element (for the fix to work in Chrome).
div {
background: #ddd;
}
input#te {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table>
i created the table with empty span tags with padding giving them a box shadow.
its simple html structure is as follow.
<table>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></td></span>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
</table>
with css code as below..
th {
font-size: 20px;
background-color: #cccccc;
padding: 5px 8px;
}
td {
padding: 5px 5px 10px 5px;
font-size: 18px;
background-color: #ececec;
}
th,td {
border-right: 2px solid #dedcdd;
}
table {
margin-top: 25px;
border: 2px solid #dedcdd;
position: relative;
border-collapse: collapse;
}
.tokenHolder {
background-color: white;
cursor: pointer;
position: relative;
color: transparent;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 2px 2px 2px gray;
border-radius: 2px;
}
the respective js fiddle is at http://jsfiddle.net/Pank/4A9BM/
here in after using border-collapse:collapse at the table removes the box shadow for the span inside it..
otherwise hole code is running fine in all browsers..
Please help for this ie related quirk..
Just add
<!doctype html>
in the top of your HTML document. It will work fine. Tested in IE10
updated answer.
screen shot: When i use
http://www.image-share.com/ijpg-2440-42.html
Screen shot: without using
http://www.image-share.com/ijpg-2440-43.html
http://www.image-share.com/ijpg-2440-44.html
here is the link to it. just read it.
w3schools