Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.
How to overlap an image over a table?
Hi there, was just wondering if.. you can overlap an image over a table?
This img
I have considered cutting the image into 2 however this is a template website and many different logos, etc will be used, so cutting isnt an option - where i need the full logo
Thanks in advance
<table border=0 cellpadding=0 cellspacing=0 width=1330 height=220 align=center bordercolor=black>
<tr>
<td height=190 width=55> </td>
<td height=240 width=200 rowspan=2 valign=middle><a href=?><img src=http://www.activenquiry.info/images/brand-GPT.png height=200></a></td>
<td height=190 width=55> </td>
<td height=190 width=720> </td>
<td height=190 width=300 valign=middle>
<table width=300>
<tr>
<td align=right class=menu><b><font size=3>Good morning Traveller</font></b></td>
</tr>
<tr>
<td align=right><font size=2><a href=http://customer.gptouring.com.au class=menu>Log in to GP Touring Portal</a></font></td>
</tr>
</table>
</td>
<td height=190 width=20> </td>
</tr>
<tr>
<td height=50 bgcolor=black> </td>
<td height=50 bgcolor=black> </td>
<td height=50 bgcolor=black colspan=2>
<table>
<tr>
<td> <font size=5><a class=menu href=?menu=meu>Menu</a></font> </td>
</tr>
</table
</td>
<td height=50 bgcolor=black> </td>
</tr>
</table>
This img
<img src=http://www.activenquiry.info/images/brand-GPT.png height=200>
I have considered cutting the image into 2 however this is a template website and many different logos, etc will be used, so cutting isnt an option - where i need the full logo
Thanks in advance
Asked:
3-
3
2 Solutions
It is generally not considered a good idea to use tables for layout?
Can you post a mockup (image) of how you want the screen to look - so we can potentially suggest a different approach.
Can you post a mockup (image) of how you want the screen to look - so we can potentially suggest a different approach.
Have you tried, what I gave? At least it goes in that direction, the bar is gapless and the logo overlaps. On my browsers the logo appears too low, but you can adjust the position.
Bye, Olaf.
Bye, Olaf.
Hi Olaf, just trying now, will be back to you in a little bit, thanks for replying and following up :)
Relative positioning also works:
Dipping the logo down 30px from it's usual position.
Bye, Olaf.
PS: The essential part is to not use rowspan and instead move the image from its original position, the default css will allow overflow, if not, also set overflow:visible instead of hidden.
PPS: It's true what others say, this layout does not essentially qualify for being done with a tabl, but if you stick with that, what qualifies for a span is the black bar, it could be a single td with colspan of the number of columns the table has, so it's just one black cell.
style='position:relative; top:30px;'
Dipping the logo down 30px from it's usual position.
Bye, Olaf.
PS: The essential part is to not use rowspan and instead move the image from its original position, the default css will allow overflow, if not, also set overflow:visible instead of hidden.
PPS: It's true what others say, this layout does not essentially qualify for being done with a tabl, but if you stick with that, what qualifies for a span is the black bar, it could be a single td with colspan of the number of columns the table has, so it's just one black cell.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
Tackle projects and never again get stuck behind a technical roadblock.
Join Now
If you remove that the first row will be higher, pushing everything down.
If you don't want that, but allow the logo to overflow into the next row, then use absolute position:
Open in new window
PS: you might also try table-layout:fixed, as per this article: https://css-tricks.com/fixing-tables-long-strings/
Bye, Olaf.