Hi,
thanks for your post, and sorry for the trouble.
I see what you mean, but I’m afraid that I can’t really help with a direct solution here. This simply is out of the scope of support that I can offer for TablePress, mainly as it’s not really a question that is related to tables, but more about general site elements.
I can gladly offer some hints though: Besides the HTML code for the image (that should not have the text), you could add the text e.g. in another <div> or <span> element. Then, you could use CSS code to make that element hover above the image, via e.g. the CSS z-index and position: relative; properties. These links could be helpful: http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html
Regards,
Tobias
Thread Starter
Gijs22
(@gijs22)
Hi Tobias,
Oh I am sorry, I thought maybe there is a HTML code or something I can code in CSS within tablepress, but thanks for the help anyway!!
I’ll have a look into this, it probably will help me a lot!
Thanks!
Gijs,
Hi,
no worries! 🙂
Well, yes, there is HTML and CSS for this, but as it’s not directly related to tables (the same HTML/CSS would be necessary outside of a table), I see this as a more general question.
I hope the links can guide you in the right direction.
Regards,
Tobias
Thread Starter
Gijs22
(@gijs22)
yes! I managed to do it 🙂
http://www.etaprojects.co.uk/site/home-page-images-2-0/?preview=true
But the problem now is that I dont know how to link the image to an URL that brings you to the right page. I know how to do this when you insert an image in the ‘normal’ way, but not within this table!
Can you help me out with this please?
Thanks,
Gijs
Hi,
unfortunately, I can’t view the page that you linked to, as it only seems to be a preview for logged-in users.
Basically, you will just have to get the HTML code for a link straight, i.e. add something like
<a href="http://example.com/link/">...</a>
around the HTML code for the image.
Regards,
Tobias
Thread Starter
Gijs22
(@gijs22)
This is the code I used. It is a bit different than usual I think, but at least it works:
‘<div style=”background-image:url(http://www.etaprojects.co.uk/site/wp-content/uploads/2015/05/Build-8.11.jpg);background-repeat:no-repeat;height:400px;width:266px;margin-top:20px;”>
<h1 style=”color:black;line-height:18px;padding:5px 20px 10px 15px;”><span class=”first-line”>Engineering Consultancy</span></h1>
<p style=”color:black;padding:2px 10px 10px 20px;”>x</p></div>’
How do I insert your code in this?
Gijs
Hi,
yes, this is rather unusual for this, but it should work.
Just put this code in the place of the ... from my previous post.
Remember that all line breaks in the code will be visible later, as they are changed to HTML <br /> tags automatically. You should therefore remove alle line breaks and empty lines (so that the code basically is in one line of text (except for the line breaks that the browser/editor adds as automatic word-wrapping)).
Regards,
Tobias
Thread Starter
Gijs22
(@gijs22)
Hi Tobias,
AB-SO-LUTELY PERFECT! You’re a star:)
Thanks so much!
Regards,
Gijs
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: Please rate TablePress here in the plugin directory. Thanks!
