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
Related
(First time using StackOverflow, apologies if my formatting is wrong)
As a background: I'm trying to unify live chat from both Twitch and Youtube so they can be both show in the same page at the same time.
Most popular site that does that, StreamLabs, unfortunately doesn't work very well for that, since messages coming from Youtube sometimes get "stuck", which very often make them stop appearing and then they appear all at once.
After checking for alternatives, I came across a site called Botisimo that does that and doesn't have that problem that StreamLabs has, but unlike Labs, I can't manually edit the HTML/CSS/JS of the now unified chat. It shows up in a very simple manner.
How it shows the messages
However, as I'm putting that chat as a browser page in the streaming software, I can manually edit the CSS of that page, but nothing else, which shouldn't be a problem.
The problem appeared after I inspected the page to see the names of the divs/spans I had to change in the CSS: There's 2 spans with the same name.
You can see in the image that before the username, there's 3 badges. Those 3 badges and the username are both called "name"
The code that shows after each message is sent is:
<div class="flex-none message chat" data-platform="twitch" data-name="MOD_LeviathaN" data-message="Testing">
<span class="name">
<img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18">
</span>
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;">
MOD_LeviathaN
:
</span>
<span class="text" style="color: rgb(0, 0, 0); font-size: 24px; line-height: 120%;">Testing</span>
</div>
So when I style that , it does the same styling on both of them:
Like this
And I want it to show like this:
Desired style
This is how it shows on StreamLabs, which have a variable for the badges and for the name itself, and are obviously different. They're both on the same div class, so the styling is applied as intended. On Botisimo however, the messages are also included in the same div class as the other 2, so It gets styled as well, which is not the desired effect.
Is there a way to either split the badges from the username, or put the message outside that div so it doesn't get styled with both of them, using only CSS since I don't have a way of modifying both the HTML and the JavaScript?
I also tried to hide the badges at least, using the following code:
img[alt~="broadcaster"] {
display: none;
}
img[alt~="subscriber"] {
display: none;
}
img[alt~="premium"] {
display: none;
}
This did get rid of the badges, but the style still applied to a small part that was still technically there.
Like that
Thanks in advance for all the help. If there's another completely different site that does the same thing (unifies the chat), I'm willing to try it as well.
If you want to create similar style to the one you mentioned(Desired style) enclose the both span with class="name" in a div or span and apply the css to that div.
actually when you apply css to class "name" it apply on both seperatly when u will enclose it in a div and apply css to that it will be apply to both as one
see css selectors and try to resolve it using id
Can I asked you a question, if you don't mind?
Have you tried putting
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span>
inside the <span class="name"> <img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18"> </span>
cause I heard it is possible to do it. Then on the <span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span> try putting an ID on it so it can be separated to the other span you put
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/
I'm a beginner to HTML and CSS. I'm using jquery mobile, and jquery ui to build a page. I have added a select menu and two images as buttons next to it. I have set a border width of 1px to see the layout. As it is seen in the picture below select menu border is extended and covers the images so I can't click on them.
select menu border covers image
This is the html
<div id="container" >
<img src="styles/add_button.png" id="addButton" class="imgButton">
<img src="styles/remove_button.png" id="removeButton" class="imgButton">
<form>
<select name="select-native-1" id="selectMenu">
</select>
</form>
</div>
this is the CSS
.imgButton{
float : right;
margin: 0em .2em;
}
#container{
vertical-align: middle;
margin:0em 1em 1em 1em;
}
#selectMenu{
float: right;
}
What is the problem here?
I find tables to be the easiest way to properly align things. Try this...
<table><tr>
<td><select name="select-native-1" id="selectMenu"> </select></td>
<td><img src="styles/add_button.png" id="addButton" class="imgButton"> </td>
<td><img src="styles/remove_button.png" id="removeButton" class="imgButton"></td>
</tr> </table>
And then add widths to the td elements to give it the look you want.
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 client who wants to send gift certificates to people who sign up on their site. They want it all designed out, so I can't just send a text email. I'm trying to position text over the image so that it can still be dynamic.
I'm trying to do this with absolute positioning. Some email systems love it. Some hate it. Gmail happens to hate it.
We're using MailChimp for the campaign. Here is the full source of the email. Following that is just the snippet that isn't working.
<html>
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head>
<body style="background-color: #bab145;text-align: center;">
<table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;">
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
<tr>
<td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;">
<p>view email in browser | Unsubscribe *|EMAIL|* | Update your profile | Forward to a friend</p>
<p>*|LIST:DESCRIPTION|*</p>
<p>*|HTML:LIST_ADDRESS_HTML|*</p>
<p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p>
</td>
</tr>
</table>
<span style="padding: 0px;"></span>
<center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
<td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
Sent to *|EMAIL|*. Unsubscribe |
Update Profile |
Forward to a Friend
</td>
<td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
*|REWARDS|*
</td>
</tr></table></center></body>
</html>
And just the snippet I'm worried about:
<tr>
<td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|FNAME|* *|LNAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
GetFreePellets.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$100</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|COUPONCODE|*</div>
</div>
</td></tr>
Note: MailChimp merge variables are those things between | and |.
Here is an image of what it looks like in Entourage. The red bar is a real name, so.. ya:
Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
And here is it in gmail (I know the name isn't censored):
Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Any ideas on how to get this working in gmail?
Unfortunately, you can't use position: absolute.
Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.
Most HTML emails are laid out with tables.
Check this out.
Please note that is not a foolproof solution. I had some problems with it on Outlook and need to disable it.
So first of all you need to set a container to position against.
<div style="width:300px;height:300px;">
</div>
Then place an element inside that, set display as inline-block and position it with margin-top and margin-left.
<div style="width:300px;height:300px;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
</div>
</div>
N.B. Unfortunately negative values in the margin won't work in Gmail, Outlook.com or 365.
The element is now behaving similar to position:relative but we want position:absolute so as not to affect the flow of any neighbouring elements. To achieve this wrap the inner element in a div with max-height:0;max-width:0 this now mean that div takes up no space on the page, but the overflow can still be seen.
<div style="width:300px;height:300px;">
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
</div>
</div>
</div>
You can now place multiple elements in that container and position them absolute. In this example I've added outlines and semi transparent background colours to clear display the outcome.
<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
1
</div>
</div>
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
2
</div>
</div>
<div style="max-height:0;max-width:0;overflow: visible;">
<div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
3
</div>
</div>
</div>
Outlook
Ok so it still doesn't work in desktop Outlook but it does work pretty much everywhere else I've test.
But please do use this wisely. Do consider Outlook, perhaps a VML fallback or simply using Outlook conditional comments.
Source: https://web.archive.org/web/20170824110806/http://blog.gorebel.com/absolute-positioning-in-email
I would suggest doing the whole thing as a table (div support is not 100% reliable in email clients). Use border properties to give the table the green border. Insert the image of the logo/banner in the first row of the table (merged three columns). Use the next 3 rows for the To, From and Amount (with the values in the merged second and third columns). And use the last column of the last row for the cupon code.
If you really want the double border then you can either wrap the table in a div or for maximum compatibility, wrap the table in a 1 column, 1 row table.
Yes it's ugly but email clients have extremely buggy and/or old implementations of HTML so this is not the time or place to be squirmish about ugly, non-web2.0-looking code.
See the link posted by alex for more info.
(I know I'm answering 4 years later... but probably it will help somebody...)
If you look carefully, you don't have background images, you have possibly 10 images or more, many background colors and a complex table.
There's no image behind a text. You could divide your table and compose your background image as multiple image fragments, and match the text's background color with these images.
Really... in this template there are no "required" background images, just a complex table.