I need to find the selected DIV using a 'Employment' text for h3 tag.
I can find it using the following XPATH:
.//div[table[tbody[tr[td[h3[text() = 'Employment']]]]]]/following-sibling::div[#class = 'pbBody']
But this is too big and ugly, what is the good way? something like:
parent::div[h3]following-sibling::div, so without this [table[tbody[tr[td[
HTML text:
<div class="listRelatedObject customnotabBlock">
<div class="bPageBlock brandSecondaryBrd secondaryPalette">
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<img class="minWidth" width="12" height="1" title="" style="margin-right: 0.25em;" alt="" src="/img/s.gif"/>
<img class="relatedListIcon" title="Custom" alt="Custom" src="/img/s.gif"/>
<h3 id="a1H9E000000528F_00N2400000IF18T_title">Employment</h3>
</td>
<td class="pbButton">
<td class="pbHelp">
</tr>
</tbody>
</table>
</div>
<div id="DIV_THAT_I_NEED_TO_FIND" class="pbBody">
<div class="pbFooter secondaryPalette">
</div>
</div>
If you want shorter version you can try
//h3[.="Employment"]/following::div[#class="pbBody"]
The most simple locator:
//div[#class="pbBody"][.//h3[text()='Employment']
but better to use "contains", as usually classes could be added to element
//div[contains(#class, "pbBody")][.//h3[text()='Employment']
And last one is similar to #Andersson 's, but corrected (as you need not following element, but ancestor):
//h3[.="Employment"]/ancestor::div[#class="pbBody"]
Related
I wanted to have a full-width call-to-action banner on my client's website. The template that my client has does not support CSS, so I'm making use of like old school HTML to build pages.
I have a background image for the img src and I want to overlay the text in it. I'm in need of a code that is working since I'm really not well-versed.
I searched up for solutions in adding overlay text to a background image, but most of the answers contain CSS. Here's a code that I tried.
<table>
<tr>
<td></td>
<td rowspan=4><img src="/uploads/image12345jpg"></td>
</tr>
<tr>
<center><td colspan=4>This is the overlay text</td></center>
</tr>
</table>
</center>
I'd appreciate your help and answers.
The support says that I have to individually add it in the HTML code... not sure where it goes.
I think you might be looking for something like this: https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/2/
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="221" height="300" background="https://placeimg.com/640/480/any" valign="bottom">
<FONT size="+1" COLOR="red">This is the overlay text</FONT>
</TD>
</TR>
</TABLE>
EDIT:
This question is asking how to use inline styles, I think:
(I've also put some inline javascript on a click function because you mentioned your scripts wernt working either)
https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/28/
<td style="position:relative;">
<img src="https://placeimg.com/640/480/any" style="position:absolute;z-index:1;" width="600px" height="150px" />
<div style="z-index:2;position:relative;color:red;font-weight:bold; font-size: 40px; top: 40px; left: 100px;" onClick="(function(){
alert('See You can click me');
return false;
});">
<a href="#" onClick="(function(){ alert('See You can click me'); return false; })();return false;">
your text goes here click here</a>
</div>
</td>
This worked for me. Thank you for the help! Appreciate it.
<div class="container" style="position:relative;text-align:center;color:white;" >
<img class="img-responsive" src="https://placeimg.com/640/480/any" alt="#" style="width:1880px;height:250px;" >
<div class="centered" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" >Example Text</div>
</div>
I just want to decrease the size of space between this two images I put in the table. I'm so sorry I know this is just a basic html code. Please help me.
This is the code:
<table class="sample" width="200" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td align="center" valign="center">
<a href="#" ><img src="images/reception2.png" alt="" /></a>
</br>
SERVICES
</td>
<td align="center" valign="center">
<img src="images/services2.png" alt="" />
</br>
OFFERS
</td>
</tr>
</table>
It's hard to advise without seeing the CSS you are using. You could try adjusting the width of the table.
Demo here: http://codepen.io/sol_b/pen/VmQGzr
You can remove the inline style on your table and then target it in your CSS, like this:
.sample {
width: 200px;
}
Change the width to whatever works.
you can use margin property of CSS. for your question margin-right for the SERVICES img and margin-left for the OFFERS img are proper solutions.
Try to add this snippet:
<img src="images/reception2.png" alt="" style="margin-right: -25px"/>
<img src="images/services2.png" alt="" style="margin-left: -25px"/>
Also, You can change the number range to finally find the suitable numbers.
I have a HTML table that's completely composed of eight images. They're puzzle pieces, so they have to be placed specifically and accurately.
This was easy on desktop, I just used absolute positioning to mess around with the pixels and make it work. It looks like trash on mobile though. The pieces are still together, but the puzzle is all the way to the right of the screen and it's too large. I've done a fair bit of Googling, but the only results I found were for tables composed of text, which doesn't work for my situation.
Here's the table, if anyone's interested -
<table width="100%" id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr>
<td id="one">
<img src="1.png" class="merge0">
</td>
<td id="two">
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td id="three">
<img src="4.png" class="row1">
</td>
<td id="four">
<img src="2.png" class="merge1">
</td>
<td id="five">
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td id="six">
<img src="8.png" class="row2">
</td>
<td id="seven">
<img src="5.png" class="row3">
</td>
<td id="eight">
<img src="3.png" class="row4">
</td>
</tr>
</table>
I read a bit about jQuery mobile, but I've never really grasped the concept of jQuery, and mobile is a foreign platform to me. I'm hoping to learn though :)
I've also tried those "desktop to mobile" converters, and they all are horrible.
Edit - I think people might suggest that I completely take the table out and use a different method of arranging my images. I'm really not sure how to go about doing this, and I'd prefer it if I could keep my current setup. If it's not possible though, I'd appreciate some pointers on how to do it differently.
Go over the getting started page and then use jQuery-mobile grids:
<div class="ui-grid-a">
<div class="ui-block-a"><img src="1.png" class="merge0"></div>
<div class="ui-block-b"><img id="2" src="6.png" class="merge"></div>
</div>
For the grid with three images just use "ui-grid-b"
Hope this helps
best
M
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
I'm trying to correct an old template which contains tables and not divs.
The whole template consists of tables.
I'm tyring to position an png image absolutely in the table, that is overlapping the background.
The code I've made is as follows:
<tr>
<td></td>
<td><a href="homepage.html">
<div style="position:absolute;margin-top:-60px;margin-left:-18px;">
<img src="images/header.png" width="280" height="120" alt="" border="0">
</div>
</a>
</td>
</tr>
The problem is that some browsers "miss" a pixel.
Is there any way to position absolutely an image in a table?
p.s. at the moment, I know that the best way is to use divs, but I shall not alter the whole template, just alter only the heading.
Correct way:
<tr>
<td></td>
<td>
<div style="position:absolute;margin-top:-60px;margin-left:-18px;">
<a href="homepage.html">
<img src="images/header.png" width="280" height="120" alt="" border="0">
</a>
</div>
</td>
</tr>