Have look on this code:
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" /> aaa<?=$msg['UserName'] ?> :
</a>
this is a row that show a message in short type. in this row I need to <?=$msg['UserName'] ?> be after image but it going to next line.
when I type word without a tag its OK but links goes to next line. How do I fix this?
more explanation on this pic:
Please notice that I can't use float, if there is another way except float please tell me that.
Edited:
(I have fixed that place by changing parent tag to span but ...)
I need to make whole row a link to that specific message and make username a link to user profile. Who can I place links inside each other?Or another solution maybe?
Second Edit
I have placed a tags inside each other and both of them works well but still second a tag goes to next line! I have tried display:inline but whole row collapsed!
You can't use 'a' tag in "a" tag .... but just for you If you want to align it after image use style property and use ,
<a href="#" class="list-group-item">
<span class="badge"><?=$st ?></span>
<img class="small_profile_pic" src="<?=$pic ?>" style="display:inline" /> aaa<?=$msg['UserName'] ?> :
</a>
Related
I am trying to add a background url to a DIV alongside an advanced custom field.
http://placehold.it/1000x500
Like this : Custom Fields for Div background images? (wordpress)
In the Advanced Custom Field I have tried text, wysiwyg, link picker...
However, when the page is loaded the / seem to be stripped out and "" are also in there.
Any ideas on getting this working
Here is the code I have tried:
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner
style="background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<a href="<?php the_field('background_url'); ?>. </a>');">
style="background-image: url('<?php the_field('background_url'); ?>');">
I think you should test to set No formatting for this field as shown in the below screenshot:
One other thing that might be a problem is that you don't close the first attribute (class) in your element:
|
v
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner style="
In fact, your entire markup looks suspicious, what are the anchor tag doing here background-image:url('<a href="<?php the_field('background_url'); ?>. </a>');?
Try changing your code to something along these lines:
<div class="clearfix featuresStrip homeBBanner-edit homeBBanner" style="background-image:url('<?php the_field('background_url'); ?>');">
...
</div>
The above assumes that the background_url field is plain text.
I want to extract link of an image but only in case if this picture does not contain word "thumb" in its name.
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="TestClass">
<img src="http://insales.ru/images/thumb.jpeg" class="productimage">
</a>
So I want to extract "http://insales.ru/images/thumb.jpeg" line from <img> tag if only picture name does not have "thumb" keyword.
I am trying to do like that:
//a[#class='TestClass']//img[not(contains(#src, 'thumb'))]
Not working. Because I am loosing data from <a> now.
Sometimes I extract links directly from <a> tag. From rev or href. But sometimes from <img> child of <a>.
How to specify xpath that will allow to extract links from parent or its child. But there is a condition for child.
In details:
I am parsing data from online store. To be specific I am trying to get images of a product. The code I provided represents one image of a product. I need only big version of picture. Not small thumbnail picture. The problem is that sometimes link to big picture presented in rev attribute of <a> tag. Sometimes it is presented in src attribute of <img> tag.
Case 1 (link I need presented in <a> tag and rev attribute
<li class='product-item'>
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="MagicThumb-swap">
<img src="http://insales.ru/images/thumb_T001" class="productimage" title=" Tissot">
</a>
</li>
In that case I need to extract http://insales.ru/images/large.jpeg line. I dont need http://insales.ru/images/thumb_T001 that is in <img> tag.
Case 2 (link I need presented in <img> tag and src attribute)
<div class='item'>
<a title="" id="Zoomer" class="MagicZoomPlus jqzoom modal" href="http:// insales.ru/images/thumbi14.jpg" >
<img src="http://insales.ru/images/large_i14.jpg" title="Orient” class="productimage">
</a>
</div>
In this second case I need to extract http://insales.ru/images/large_i14.jpg line. And I dont need http:// insales.ru/images/thumbi14.jpg that is in <a> tag.
I know how to extract link in each of these two cases. But I don’t know how to make universal xpath that will allow getting links to big pictures in both scenarios. Thata why i am trying to make a condition based on picture name in link. If there is a 'thumb' keyword in link im trying to filter it out.
If I have understood correctly now, the correct path expression is
//a/#rev[not(contains(.,'thumb'))] | //img/#src[not(contains(.,'thumb'))]
where | is the union operator that combines sets of nodes.
Assuming an input document like
<html>
<li class='product-item'>
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="MagicThumb-swap">
<img src="http://insales.ru/images/thumb_T001" class="productimage" title=" Tissot"/>
</a>
</li>
<div class='item'>
<a title="" id="Zoomer" class="MagicZoomPlus jqzoom modal" href="http:// insales.ru/images/thumbi14.jpg" >
<img src="http://insales.ru/images/large_i14.jpg" title="Orient" class="productimage"/>
</a>
</div>
</html>
the result will be (individual results separated by -----------):
rev="http://insales.ru/images/ large.jpeg"
-----------------------
src="http://insales.ru/images/large_i14.jpg"
And in case you need to include the class attribute of a:
//a[#class='TestClass']/#rev[not(contains(.,'thumb'))] | //a[#class='TestClass']/img/#src[not(contains(.,'thumb'))]
However, you did not mention that in your "detailed" description.
How would I go about making this div a link to a page? There are some links within the div, which I am wondering, does that prevent me from making the entire div a link? as you can see I have tried wrapping the div in a a tag, but that does not work. I got it to work with javascript, but the 'hand' pointer doesn't show up when hovering over the div. I know I could add this in CSS, but I would prefer to do it with link tags.
<a style="display:block" href="viewmessagethread.php?id=<?php echo $messageid; ?>">
<div class="<?php echo $message_read_status; ?>">
<div class="media-body">
<span class="pull-right noti-time"> <?php echo $dte_new; ?></span>
<div width="100%"><b><?php echo $title;?></b>
</div>
</div>
</div>
</a>
Sincere thanks for any help. It is greatly appreciated.
Yes, if there are links within the <div>, that won’t work. An <a> element automatically ends at the start of another “nested” <a> element. Just like with <p>.
See the MDN docs on <a>:
Permitted content: flow content (excluding interactive content) or phrasing content.
Permitted parents: Any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent).
<!--First page-->
Note
<!--page2.html-->
<a name="note">
<article>
<div>
.
.
.
</div>
</article>
</a>
i have tried putting "note" as id of article tag as well as of main div tag under article tag. Also i have tried wrapping main div tag in anchor tags. Still it displays the whole page2.html on click. Can anyone help?
The name attribute is not supported in HTML5. To Link to an element with a specified id within a page
Try using this:
<!--page2.html-->
<a href="#note">
It will show the whole page, but its going to your specific location in that page.
Take a look at this page:
http://www.w3schools.com/tags/att_a_href.asp
I have a wordpress posts link and around list item (each post) i have hyperlink, but the problem is that mu hyperlink becomes with width and height of 0 and all that block of post is not linkable, however in the source code from browser i can see that it shows more hyperlinks and they close as they open so they are width and height of 0, just around title and content hyperlinks affects them and makes them linkable, to note again in code i have just one hyperlink.
EDITED
Somehow i have more links displayed even if i have one wrapped all the content, on browser it shows few more links and if i delete that one, they all removes
<li>
<a class = "posts_link" href="www.google.com">
<div class = "posts">
<h2><?php the_title(); ?></h2>
<div class = "posts_list">
<?php the_content('Read more...');?>
<div class = "clear"></div>
</div>
<div class = "addition">
<div class = "add_time">
<time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_date(); ?> <?php the_time(); ?></time>
</div>
<div class = "add_comment">
<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
<br />
</div>
</div>
</a>
</li>
If all that you want to do is make the whole div clickable, there are certainly better ways. One of them would to add a onclick function to your div and write the function, could either be window.open or location.href, both will do the job.
It's hard to tell from this screen but did you add display:block to your a href? If you want an area to link you need to replace default display:inline to block..
Your problem is that
You're using a foreach loop
The link is not being provided with any text
Untill the link is provided with text, its height and width will have no meaning at all. Because there is nothing you can click on. However adding a little bit padding might do the work.
http://jsfiddle.net/afzaal_ahmad_zeeshan/Jes6e/
a {
padding: 5px; // to make it clickable
border: 1px solid #333; // to make it visible..
}
In the fiddle you will see that the link is having no width or height but is still clickable. Why? Because it creates some space for the element to be clickable.
When there is no space, nothing is clickable and so no element is linked.
I have tested your code,
http://jsfiddle.net/afzaal_ahmad_zeeshan/8NdnF/ Here is the fiddle for that. And guess what? Whole of the element is clickable.