We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
7 days, 16 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to overlap an image over a table?
Posted on 2016-09-01
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
3
7 Comments
Active today
Well, this comes from rowspan=2, the picture spans two rows, so next tr leaves a gap for the second td.
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:
PS: you might also try table-layout:fixed, as per this article: https://css-tricks.com/fixing-tables-long-strings/
Bye, Olaf.
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:
<td height=190 width=200 valign=middle><a href=?><img style='position:absolute' src=http://www.activenquiry.info/images/brand-GPT.png height=200></a></td>
PS: you might also try table-layout:fixed, as per this article: https://css-tricks.com/fixing-tables-long-strings/
Bye, Olaf.
Active today
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.
Active today
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.
Active today
Hi Olaf, just trying now, will be back to you in a little bit, thanks for replying and following up :)
Active today
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.
Featured Post
MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
When it comes to write a
Context Sensitive Help
(an online help that is obtained from a specific point in state of software to provide help with that state)
,
first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number.
For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month7 days, 16 hours left to enroll
728 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.