i am using css to create a NewsList like :
<ul class="newslist">
<li><img alt="" src="images/news-bg.png" />
<h5>My Title <br />
<span>Detailed description </span></h5>
</li>
above is the first element and so far it works great. Its like this:
-------
|I | My Title.
| M | Detailed description....
| G|
-------
I am trying to insert the date inside the pic. the image is just an empty chatbox and i would like to be able to insert the date inside the image with html code!
any pointers??
One way is:
<ul class="newslist">
<li style="position:relative">
<img alt="" src="images/news-bg.png" />
<div style="position:absolute;top=Xpx;left=Ypx">DATE</div>
<h5>
My Title <br />
<span>Detailed description </span>
</h5>
</li>
</ul>
Where X and Y are the x and y offset where you want the date.
You can create two divs inside element like following:
<ul class="newslist">
<li>
<div style="background-image:src="images/news-bg.png; float:left">date</div>
<div style="float:right">
<h5>My Title <br />
<span>Detailed description </span></h5>
<div>
</li>
if you are looking to make the date a part of the image you will need to use server side like imagemagic if you just want it to look like it is the relative/absolute positioning is the way to go.
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm trying to find an element on html tags using robot framework. I want to click on first element what ever the element is.
For example
Input text in the text field and then pass key enter
The item will show up and i want to click on first item but i cant
My Robot Code
Open Browser http://www.tarad.com chrome
Wait Until Element Is Visible id=keyword
Input Text id=keyword dog
Press Key id=keyword \\13
Wait Until Element Is Visible id=wrapper_body_all
Element Should Be Visible id=wrapper_body_all
Click Element xpath=//div[id='warpper_all']/div[id='wapper_body_all']//ul/il//img[constains(#src,'//img.trd.cm/120/120/sumpow/img-lib/spd_20140314140410_b.jpg')]
My HTML Tag
<div id="wrapper_body_all">
<div class="main-wrap">
<!--start : #rightProduct-->
<div class="section-col-right">
<!--start : rec_product -->
<div class="rec_product">
<!-- end : rec_product -->
<div class="rec_product">
<div class="section-products-box">
<div class="hitproduct-body">
<ul class="hitproduct-list list">
<!--start : product-list-->
<li>
<div class="item-border list">
<div class="item-image">
<a href="//www.tarad.com/product/5913180" title="ลำโพงน่ารัก dog">
<img src="//img.trd.cm/120/120/sumpow/img-lib/spd_20140314140410_b.jpg"
alt="ลำโพงน่ารัก dog" data-pagespeed-url-hash="3676782613"
onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</a>
</div>
<div class="item-details">
<div class="product-name">
ลำโพงน่ารัก dog
</div>
</div>
</div>
</li>
<!--end : product-list-->
<!--start : product-list-->
<li>
<div class="item-border list">
<div class="item-image">
<a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
<img src="//www.tarad.com/images/web_main/default150x150.gif"
alt="Brewdog Magic Stone Dog - 330 ml - 5" data-pagespeed-url-hash="2123596038"
onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</a>
</div>
<div class="item-details">
<div class="product-name">
<a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
Brewdog Magic Stone Dog - 330 ml - 5</a>
</div>
</div>
</div>
</li>
<!--end : product-list-->
....
....
....
</ul>
</div>
</div>
</div>
</div>
</div>
Error
Be warned, this is quite a brittle Xpath, but it will do the job you're trying to achieve:
Open Browser http://www.tarad.com chrome
Wait Until Element Is Visible id=keyword
Input Text id=keyword dog
Press Key id=keyword \\13
Wait Until Element Is Visible id=wrapper_body_all
Element Should Be Visible id=wrapper_body_all
Wait Until Page Contains Element xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[1]
Click Image xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[1]
This Robot Code works for me, it goes to the site, then inputs "dog" to the search, and then clicks on the very first image result.
If you want to find the 2nd, 3rd, etc - change the last number. for example:
xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[5]
Will find the 5th result. just change where it says [5]. Also, in your Robot make sure it says the entire xpath I just posted. That includes the xpath=
Any questions please ask.
Sometimes you can use another element earlier or later that does find it, and then use
/preceding::div[1]
or
/ascending::div[1]
respectively
Can anyone please help me out with simple example of drag and reordering of divs using angularjs?
<div id="abc" style = width:20px;height:20px; background:red>
ABC
</div>
<div id="xyz" style = width:20px;height:20px;background:blue>
XYZ
</div>
These are 2 horizontal squares.. I want to drag and swap their positions.If I am dragging red box at blue box position then blue one should be shifted to to red's position.
Can it be done with angularjs? I had seen some list reordering examples but very tricky to understand..If someone can give me simple example will be very helpful.
Thank you.
What about using a drag and drop plugin (it also works for resizing)? It will simplify your problem I guess.
This one works like a charm: Gridster
Example:
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div id="abc" style = width:20px;height:20px; background:red>
ABC
</div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div id="xyz" style = width:20px;height:20px;background:blue>
XYZ
</div>
</li>
</ul>
</div>
I have a HTML markup for each brand in my page like this
<ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li>
</ul>
is that heading position ok inside a hyperlink, or should I change it to
<ul>
<li>
<h2>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</h2>
</li>
</ul>
which one is the more right way to write it, and what is the result that will be read by crawler for the heading in both case?
If in the first one, the heading content is only mallname, will the second one be read as mallname mallname mallname as there is a title attribute in the hyperlink and alt attribute in the image inside the heading
here's one of the result of the list item
In your first example, the h2 doesn’t describe the content of the li. In scope of this heading is everything following it, until the next heading starts. So in fact, the previous heading would describe the following content, and so on. This problem always arises when using headings without sectioning elements in lists.
In your second example, the h2 probably contains more than it should (two times "mallname"; the one in the title attribute is not considered to be part of the heading content). But what is the actual content here? There is only a heading, which doesn’t seem to make sense.
Your alt content is probably not correct/useful. When it is exactly the same as the corresponding heading, the you should probably use an empty alt value. But it’s likely that the image represents something in addition to the heading: describe this in the alt content.
Duplicating the heading content in the title attribute doesn’t seem to make sense, either. Only use it for additional helpful (but not essential) content.
So you should use something else: sectioning elements. Judging from the screenshot, it might be the case that article is appropriate (if not, use section).
By using a sectioning element like article, the heading doesn’t have to be placed on the top.
<ul>
<li>
<article>
<a href="/brand/mallname">
<img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
<h2>mallname</h2>
</a>
</article>
</li>
</ul>
However, use this only when the h2 describes the ìmg! When the image is only an alternative to the heading (or only decoration, and the actual image content isn’t relevant in this context), why use headings at all? In that case you’d have just a list of links:
<ul>
<li><img src="/Images/mallname.png" alt=""> mallname</li>
</ul>
Inside of <ul> should go <li> tags, so I think the first markup is more right, if to close eyes on the <div> elements inside of <a>.
Set your <a> to display: block; and you'll be correct with the first one.
You are missing the <ul> tags that are required as a parent for the <li>-tags.
Assuming you'd add the <ul>-tags that are missing: <ul> is not allowed as a child element for <h2> so that renders the second version as no good => first one is "more right".
The tests, I took the liberty to add the missing <ul>'s & mandatory parents, the doctype is HTML5:
W3C markup validator gives green light for this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li></ul>
</body></html>
W3C markup validator gives the aforementioned error to this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</li>
</ul></h2>
</body></html>
I'm trying to retreive "prace.avizo.cz" and "onlineprodej.cz" from the following html. I've tried several different variations to isolate that one url but none have been successful.
I'm trying to get it via an importXML function in a googledoc. Some of the paths I've tried are:
=importXML(B2,"//article[#class='genericlist component leadingReferers']//ul/li[1]")
=importXML(B2,"//ul[#class='sites items']//li[1]")
=importXML(B2,"//li[#class='item']//div//a")
These either don't work or return extra irrelevant data. I'm only looking for the data within this specific article class (genericlist component leadingReferers).
Any help is appreciated.
<article class="genericlist component leadingReferers">
<h2 class="title">
Top Publishers
<i class="tooltip sprite icon_tip_idle" title="<h1>Leading paid referring sites</h1>Leading publishers referring advertising traffic to Cz.indeed.com"></i>
</h2>
<ul class="sites items">
<li class="item ">
<div class="text" title="prace.avizo.cz" data-sitename="prace.avizo.cz">
<a class="link" href="/website/prace.avizo.cz" data-tipsygravity="w" data-shorturl="Prace.avizo.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753"/>
</noscript>
Prace.avizo.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 62.91%"></div>
</div>
</li>
<li class="item ">
<div class="text" title="onlineprodej.cz" data-sitename="onlineprodej.cz">
<a class="link" href="/website/onlineprodej.cz" data-tipsygravity="w" data-shorturl="Onlineprodej.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368"/>
</noscript>
Onlineprodej.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 50.88%"></div>
</div>
</li>
....
This expression will give you the last text node inside the <a> of the first item in the article:
//article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()]
which is the one that contains the text Prace.avizo.cz (surrounded by spaces, tabs and newlines). If you wish to trim those extra spaces, you can pass that expression as the argument to the XPath function normalize-space():
normalize-space( //article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()] )
You can select the second article in a similar manner (same expression, using li[2]):
//article[#class='genericlist component leadingReferers']//li[2]//a/text()[last()]
If you want to retrieve a collection containing all text nodes (which you can manupulate outside of XPath) you can use:
//article[#class='genericlist component leadingReferers']//li//a/text()[last()]
which will return a list containing all text nodes (two, in your example). In this case, you will have to use your host language to extract them (probably in a for-each loop).