Solved

How to overlap an image over a table?

Posted on 2016-09-01
7
36 Views
Last Modified: 2016-09-01
Hi there, was just wondering if.. you can overlap an image over a table?

<table border=0 cellpadding=0 cellspacing=0 width=1330 height=220 align=center bordercolor=black>
	<tr>
		<td height=190 width=55>&nbsp;</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>&nbsp;</td>
		<td height=190 width=720>&nbsp;</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>&nbsp;</td>
	</tr>
	<tr>
		<td height=50 bgcolor=black>&nbsp;</td>
		<td height=50 bgcolor=black>&nbsp;</td>
		<td height=50 bgcolor=black colspan=2>
			<table>
				<tr>
					<td>&nbsp;&nbsp;<font size=5><a class=menu href=?menu=meu>Menu</a></font>&nbsp;&nbsp;</td>
				</tr>
			</table
		</td>
		<td height=50 bgcolor=black>&nbsp;</td>
	</tr>
</table>

Open in new window


This img
<img src=http://www.activenquiry.info/images/brand-GPT.png height=200>

Open in new window

is what I would like to have the black bar go underneath the bottom (where as currently the black bar isnt there)

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
0
Comment
Question by:Graeme
  • 3
  • 3
7 Comments
 
LVL 29

Assisted Solution

by:Olaf Doschke
Olaf Doschke earned 500 total points
ID: 41779553
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:

<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>

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.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41779578
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.
0
 

Author Comment

by:Graeme
ID: 41780178
Julian - here is the pic of how i want it to look

Logo-howto.png
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41780190
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.
0
 

Author Comment

by:Graeme
ID: 41780193
Hi Olaf, just trying now, will be back to you in a little bit, thanks for replying and following up :)
0
 
LVL 29

Accepted Solution

by:
Olaf Doschke earned 500 total points
ID: 41780208
Relative positioning also works:

style='position:relative; top:30px;'

Open in new window


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.
0
 

Author Closing Comment

by:Graeme
ID: 41780256
Hi Olaf have tried your way and with a little adjustment works! :)

position:absolute; top:80px

thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now