The text of every rss in the newsletter is going down and positioned to the left.
I tried to change to put two columns in order to avoid it, but then i'm couldn't get to change the column size and the text wrap down in mobile version.
<div style="text-align: left;">
<a href="https://contratocompraventavehiculo.co">
<img data-file-id="798535" height="60" src="https://gallery.mailchimp.com/fb081e42ac85d682d4bbec/images dd-8a84-47cd-b3e0-a23f612be.png" style="border: 0px ; width: 60px; height: 60px; float: left; margin: 0px 15px 0px 0px;" width="60" />
</a>
<span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">
<span style="font-size:16px">
<span style="color:#000000">
Become an expert
</span>
<br />
<a href="https://contratocompraventavehiculo.co" target="_blank">
<span style="color:#000000">
<strong>Discover new opportunities</strong>
</span>
</a>
</span>
</span>
</div>
In the next link you can view that the text is going down and not aligned with the first part of text: https://i.imgur.com/Pez3jGp.png
HTML code has changed a lot from how it started out 20 years ago.
At the beginning (20 years ago), we made tables. Tables for everything. These days we use <div> tags and <aside> tags - but back then, everything was in a table structure. To position things precisely, we put <tables> inside <table> cells. That is what you must still do - for emails only.:
<table>
<tr>
<td>
<table><tr><td>some data</td></tr></table>
</td>
</tr>
</table>
Also, tables in email support only limited CSS. And your CSS cannot be inside <style> tags - it must be inline, like this:
<td style="text-align:right">
Not like this:
<style>
td{text-align:right;}
</style>
References:
https://www.w3schools.com/html/html_tables.asp
https://www.sitepoint.com/how-to-code-html-email-newsletters/
https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/
Related
In my program, I have a text element that displays in 2 different sections. It will display is section A, and again in section B (popup). I was hoping to create 1 object using CSS that could be used for both sections. That way I could call the same object to check this element regardless of where it is displayed. I can't seem to figure it out. Maybe its not possible, or maybe I need someone who has more experience with HTML and CSS to show me the light.
Here is the HTML for this element in section A when it is displayed
<td id="treeCol" valign="top" style="overflow: hidden; display: block;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section A when it is NOT displayed (hidden when section B is displayed)
<td id="treeCol" valign="top" style="overflow: hidden; display: none;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section B when it is displayed
<div class="blockUI blockMsg blockPage PopUp White" style="z-index: 1011; position: absolute; padding: 0px; margin: 0px; width: 1365px; top: 50px; left: 50px; text-align: left; color: rgb(0, 0, 0); border: 0px none; background-color: rgb(255, 255, 255);">
<div class="White" style="margin: 0px 20px 20px; display: block;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
Here is the HTML for this element in section B when it is NOT displayed (hidden when section A is displayed)
<div class="White" style="margin: 0px 20px 20px; display: none;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
To select the element in section A, I could use the ID and it will work
css=#selection
To select the element in section B, I could also use it's id and it will work
css=#dataAccessOrgSelection
I wanted to have 1 selector for this element, so I tried this. However, it selects both the displayed and hidden elements. So if I'm on section A, it will select the element for both A and B, even though B is hidden (and vice-versa)
div.orgSelection span[id]
Is there a way to have 1 selector for this element, that will only select the visible element? I could check for "display:none" in the style attribute, but I'm not sure how to do this when it is located in td for section A, and div for section B.
Okay, if I understand your question right, you need CSS selector valid for both A and B in visible state.
td#treeCol[style*=block] span#selection, div.PopUp>div[style*=block] span#dataAccessOrgSelection
A tiny explanation. Comma - is for logical OR in CSS selectors. Visible divs of yours have a part of their style attribute - block ([style*=block]). So for both selectors we find span with needed id being contained inside a visible div. If the sectors are not right enough, play with attributes a little more.
To be completely sure that your approach works, you should call the element location with this selector every time before checking its visibility to avoid StaleElementReferenceException, because, clearly, those elements are not the same
But, if I was you, I would check a specific logic and not the 'what if' case. You should know exactly when and what element should be visible.
As Alexander Petrovich mentioned, I would recommand to use to different element-selectors, because in my opinion, they are indeed different elements. In this case, you can find easy selectors with ids.
But if there's a valid reason for a one-selector-but-two-elements-constuct, you need to make clear, which parts of your dom may vary and which are stable. I'm not so firm with css, but I can give you some xpath expressions, if this helps:
//span[(#id='dataAccessOrgSelection') or (#id='selection')]
//span[#class='']
//span[contains(text(),'Select') and contains(text(),'org unit')]
//div[#class='orgSelection']/span
I guess you will be able to transform this xpath-selectors into css-selectors...maybe this pdf will help:
http://code.google.com/p/timger-book/source/browse/trunk/cheatsheet/Locators_table_1_0_2.pdf
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I have a hyperlink that contains an image, nothing special - like this .
I want to align the text to the right of the image as per attachment1, but the result is as per attachment2. I need to also block the hyperlink so that it fills the rectangle (its width and height)
Anyone know how to acheive this?
Bunch of ways to do this:
Using <div>'s
<div style="width: 200px;">
<div style="float: left; width: 70px;">
<img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" />
</div>
<div style="float: right; width: 130px;">
<p><strong>This is a really really over sized title for a link to neverland</strong></p><p>Some other text</p>
</div>
<div style="clear: both;">
</div>
Using a <table>
<table width="200">
<tr>
<td rowspan="2"><img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" /></td>
<td><strong>This is a really really over sized title for a link to neverland</strong></td>
</tr>
<tr>
<td>Some other text</td>
</tr>
</table>
put this on your page, see what is happening. Cheers
<div style="width:500px;height:250px; padding:10px; padding-left:250px; border:solid 1px black; background-repeat:no-repeat; background-position:left center; background-image:url('https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAlUA/EHduo3GhTDs/s250-c-k/photo.jpg')">
Google – 52 minutes ago – September 8 marks the anniversary of Star Trek's first broadcast, and naturally ... Amit Singhal originally shared this post: OK, I admit it, I am a die-hard Trekkie. I grew up watching endless ...
Google – 18 hours ago – By now, you may know that when you search for [define] followed by a word, Google will show you the definition. But did you know that there's a Dictionary mode ...
</div>
Similar to #njk, but using the a as the block element.
http://jsfiddle.net/scrimothy/r6TKz/
I want to show two lines in <td>. And it is showing, next to each other.
<td bgcolor="White">
First Name
(on external website)
</td>
I want to be like below.
1st line bold and 2nd line will be small letters.
You could add a <br/> to force a line break and define some CSS classes for the font-styling:
<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span> <br/>
<span class="subtext">(on external website)</span>
</td>
Update:
For completeness, I'm also including what others have suggested: instead of using a <br/> element, control the line-break via CSS. This has the advantage, that you can change the behavior (remove the line-break) by simply editing the CSS:
<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>
Instead of using span elements, you could also use divs, which have the line-break by default (but it can be disabled by setting display:inline in the CSS).
<td bgcolor="White" >
<span style="font-weight:bold;">First Name</span> <br/>
<span style="font-size:6px;">(on external website)</span>
</td>
like that I suppose
As you want to style the lines differently, you need to put them in separate elements anyway, so if you use block elements they will end up as separate lines:
<td style="background: white;" >
<div style="font-weight: bold;">First Name</div>
<div style="font-size: 70%;">(on external website)</div>
</td>
Use <span></span> with the block attribute or <p></p>
<td bgcolor="White" >
<strong>First Name</strong><br />
<small>(on external website)</small>
</td>
You can put a p tag to indicate a newline like this.
<td>
First Name
<p>(on external website)</p>
</td>
Or use a br tag like this:
<td>
First Name <br />
(on external website)
</td>
The simplest solution is to add a <br /> as #M4N writes in his answer. But since it seems, that "First Name" is some sort of title, I would recommend to use the apropriate HTML tag. Also use CSS to style your table:
HTML:
<td class="white">
<h3>First Name</h3>
<span class="small">(on external website)</span>
</td>
CSS:
.white {
background-color: white;
}
.small {
font-size: .8em;
}
Note: Because <h3> is a block level element, the line break is "inserted" automatically
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }