Is there a simple way to remove or make invisible two characters from the beginning of a string using just html and css? You can keep for yourself the downvotes to the questions... I know it's a hack.
I'm using mailchimp to send abandoned cart reminder mails. The price of a product is displayed as
zl123
but I need to display it as
123 zl
I tried to change the settings of the money format, but I haven't found a solution, so I'll try to hack it in some other way. Mailchimp replaces automatically a placeholder so I have to process what they put instead of the price placeholder, I have no control on that.
I have an html mail template and I can use css with it but no javascript. If you know how to solve the format problem in the mailchimp settings directly it will also work of course. Any help is very appreciated.
This is the product list code and the tag is *|PRODUCT:PRICE|*:
*|ABANDONED_CART:[$total=3]|*
<table>
<tbody>
<tr>
<td rowspan="3" style="vertical-align:top" valign="top" width="80"><img src="*|PRODUCT:IMAGE_URL|*" /> </td>
<td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
</tr>
<tr>
<td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
</tr>
<tr>
<td style="padding: 10px 30px">
<table cellpadding="0" cellspacing="0" style="background:#bed22c;">
<tbody>
<tr>
<td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
<td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
*|END:ABANDONED_CART|*
A hacky way will be fixing and repeating the word twice!
p {
font-size: 20px;
}
.hide-first-two {
text-indent: -0.75em;
overflow: hidden;
display: inline-block;
}
.show-first-two {
width: 0.75em;
overflow: hidden;
display: inline-block;
}
<p>
<span class="hide-first-two">zl123</span>
<span class="show-first-two">zl123</span>
</p>
Or using inline style:
<p style="font-size: 20px;">
<span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
<span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>
Considering your text lz123 comming form server and appened in
<p>lz123</p>
You can add text in this <p> by using ::after and ::before css selectors
But if is not possible to remove or manipulate that text in <p> using css
For string manipulation i suggest to use Javascript or Jquery
Related
I'm very very new to html. I'm mostly copy-pasting bits of code as my framework and customizing it to make my emails work. I have this bit of code for my email, but I can't seem to get the opt-in button to center. I've tried reading other similar questions, but my knowledge of coding is that of a beginner, and I can't understand how their coding solutions, in which the code is slightly different, relates to my code to find a solution. I was adding style=text-align: center; in a few spots, but it wasn't working. There were other solutions, but I didn't quite understand how they would work in my code. I've been trying to fix this things for hours now. So very frustrated.
Other than the centering it works in the email.
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Business Name. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
style="text-align: center;
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td>
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.businessname.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Use this code below:
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Handsome Stitchery. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td style="text-align:center;">
<table cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.handsomestitchery.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Going off what you have, I think throwing style="text-align: center; on the <td> that your link button is in should do the trick. Also you might want to get rid of the other style="text-align: center; that is floating above the first tag, it is code that is showing up as text on your page.
I am trying to keep a line of text in a cell from moving down to the next line, but when using white-space: nowrap; the image background that previously covered 100% of the screen is cutoff, as seen in this screenshot:
before and after:
This is the code for the background:
div.transbox {
margin: 0px;
width: 100%;
height: 100px;
background-image: url('http://almosthome2016.org/images/header_trans_bg.png');
}
and the html for the table:
<div class="transbox"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="3%" align="left" valign="bottom"></td>
<td align="left" valign="bottom" class="style74"><span class="style8">ALMOST HOME</span> <span class="style75">THE CAMPAIGN FOR THE NEW IRISH ARTS CENTER</span></td>
<td align="left" valign="bottom" class="style75"> </td>
</tr>
</table>
</div>
This was my way of getting the opaque background as the back of the table. I'm open to other suggestions if that is what is causing the issue with the nowrap.
Thank you!
Try adding:
background-size:cover;
To your CSS for div.transbox
I have this JSFiddle: Click here
<table class="findus-main-table">
<tr>
<td>
<img class="static-map" onClick="swap();" id="static-map-id" />
</td>
<td style="text-align: center; vertical-align:bottom; position: relative;">
<span style="font-size: 22px; font-weight: bold;">The address I want here</span>
<!-- the inner table for location and distance and phone number -->
<table style="text-align:left;" cellspacing="10">
<tr>
<td style="vertical-align:top">
<div>
<div>Phone: (613)-123-1234</div>
<div>Distance: 0.123km</div>
</div>
</td>
<td>
<div><b>Store Hours</b>
</div>
<div>Mon - Fri: 8am - 2am</div>
<div>Sat & Sun: 10am - 12am</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I want is to position the address to the top while the phone number and hours stays at the bottom. I tried using absolute but it wraps the text of the address which i really dont want.
How can I do it?
besides the fact that you shouldn't be using inline styling, is this what you're looking for?
<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">
FIDDLE
instead of using position:absolute witch should be the last thing anyone should try ,I use vertical-align:top
here is a fiddle.and here is my css :
.address{
text-align:center;
font-size:22px;
text-align: center;
font-size: 22px;
height: 78px;
padding: 0;
vertical-align: top;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
We have the following code that goes into a database field that with restricted number of characters.
<p class="Summary-heading"> Description</p>
<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p> </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p> </p>
<table width: 100%border="0" cellspacing="0" cellpadding="0" class="table_icons">
<tbody>
<tr>
<td style="width: 32px; padding-right: 5px; vertical-align: middle;"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle "><img alt=""src="/Portals/0/i/screenprint.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
</td>
</tr>
</tbody>
</table>
As a result I need to shorten the code. Any suggestions would be greatly appreciated.
Here's my take at shortening it, I don't think it can be condensed any further.
This goes into your stylesheet:
<style>
.table-icons {
width: 100%;
border: 0 none;
border-spacing: 0;
border-collapse: collapse;
}
.table-icons td {
width: 32px;
padding-right: 5px;
vertical-align: middle;
border: 0 none;
}
</style>
This into the database
<p class="summary-heading">Description</p>
<p>Outer: 100% Nylon</p>
<p>Body lining: 100% Polyester Micro fleece</p>
<p>Sleeve lining: 100% Polyester</p>
<p>Contrast panel jacket with piping</p>
<p>Concealed hood</p>
<p> </p>
<p class="summary-heading"> Standard Decoration Area(s)</p>
<p>Front, back, chest (both sides)</p>
<p> </p>
<table class="table-icons">
<tr>
<td><img src="/Portals/0/i/embroidery.png"></td>
<td><img src="/Portals/0/i/screenprint.png"></td>
<td><img src="/Portals/0/i/heatapplieddecal.png"></td>
<td><img src="/Portals/0/i/waterresistant.png"></td>
<td><img src="/Portals/0/i/windresistant.png"></td>
</tr>
</table>
If you still need it shorter, it would also help to shorten class names "table-icons" and "summary-heading".
Also, you can remove all the formatting tabs, they aren't necessary at all.
You can use CSS so that you don't need to give style every td. You can use class/id.
like
<style>
.tdClass{width: 32px; padding-right: 5px; vertical-align: middle;}
</style>
<td class="tdClass"></td>
Try moving your styles to a stylesheet which will save you a lot of time writing your code as well. It should look like this:
<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p> </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p> </p>
<table class="master-table">
<tbody>
<tr>
<td class="row"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
<td class="row"><img alt=""src="/Portals/0/i/screenprint.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
</tr>
</tbody>
</table>
With this style sheet
.master-table{
width: 100%;
border="0";
cellspacing="0";
cellpadding="0";
}
.row{
width: 32px;
padding-right: 5px;
vertical-align: middle;
}
Check out the new specifications regarding end tags. In HTML5 many elements don't need an end tag under certain circumstances.
Use an external css file. You repeat the same style code multiple times. Even if you want to let users customize some of the html input or if you want to customize posts in a blog it's always recommended to define standards in your css such as:
.standardTD { ... } You could even define multiple versions of this and make the user choose one in his code.
You can also create a whole class for a table so that you only have to add one class to the table and from this class on onward you can design all the content of your table.
.myTable td {width: 32px; padding-right: 5px; vertical-align: middle;}
The user only has to add this class to his <td>-Tag. Provide elements such as:
.left, .right, .vcenter, .center
For standard text-align. This saves additional length. Furthermore this helps to create a uniform look while supporting customization.
Use compression such as gzip in your db.
You can even use a html compression/minification tool. This however is only recommended if you don't want to change this code later on. (Makes it hard to read). You could even setup a system which does this automatically but that's a little bit advanced.
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>