 How to insert an L shaped image in table |
  |
| newwebseo |
 Oct 19 2011, 04:27 AM
Post
#1
|
|
Advanced Member  Group: Members Posts: 125 Joined: 9-October 09 Member No.: 9,984  |
I am having an L shaped image and want to put it in table but do not want to divide it in to two parts.
I have tried to put the image in table but it is taking too much space for its width. Actually the issue is that I want to put some content on the empty space of L If you have any solution please suggest me. |
  |
 
|
| Brian Chandler |
Oct 19 2011, 04:37 AM
Post
#2
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
By an "L-shaped image" you presumably mean one with a quadrant blank? No image format I know of supports images that are not rectangular.
If the blank part is the background colour you want you can position the text over it by using CSS Z-index values (look up the details) so the text is in front. Otherwise you had better make that part of the image transparent. Or you could make the image the background of the <td> in question. |
|
|
|
| Darin McGrew |
Oct 19 2011, 08:20 AM
Post
#3
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
It's worth considering what you want to have happen when the content won't fit in the space you've allocated for it (the "empty space" of the L).
|
|
|
|
| newwebseo |
Oct 20 2011, 02:58 AM
Post
#4
|
|
Advanced Member Group: Members Posts: 125 Joined: 9-October 09 Member No.: 9,984 |
""you had better make that part of the image transparent.""
Brian Chandler If I make the empty space transparent and then fit it in table then how to display content on it. I have tried this " CSS Z-index values " but it is not solving the issue. If you have any other suggestion then please let me know. This post has been edited by newwebseo: Oct 20 2011, 02:59 AM |
|
|
|
| pandy |
Oct 20 2011, 03:53 AM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
By positioning the text on top of the image. Z-index isn't necessarily needed.
|
|
|
|
| pandy |
Oct 20 2011, 04:04 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
This is one way to do it.
CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>L</title> <style type="text/css"> <!-- body { font: 100% Vardana, sans-serif } #foo p { margin: -330px 0 0 265px; width: 100px } --> </style> </head> <body> <div id="foo"> <img src="http://www.feixandmerlin.com/uploads/pics/L_01.jpg" width="600" height="383" alt="L"> <p> This is the text that should be displayed in the empty quadrant of the L shaped image.</p> </div> </body> </html> If you up the text size in your browser you can see the problem Darin mentioned. |
|
|
|
| newwebseo |
Oct 21 2011, 05:33 AM
Post
#7
|
|
Advanced Member Group: Members Posts: 125 Joined: 9-October 09 Member No.: 9,984 |
Thanks for the code that you have given.
I have achieved what I wanted to get. Now I am able to write the content on empty quadrant. Once again Thanks a lot. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 07:14 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC