?
Solved

Using DHTML/CSS to Layer images and text inside a table

Posted on 2003-02-19
6
Medium Priority
?
266 Views
Last Modified: 2008-02-01
I have a conditional (asp if then statement) that if implemented inserts some text on top of a photo with a <div> tag.  The problem is that if it is inserted, it drops the rest of my text (<div> tags) down.. and creates extra white space inside my table.   I need a way to format the code below such that inserting the <div> tag won't move other <div> tags down on the page.. Is there some CSS setting I am not using.. perhaps float or clear ?? or maybe grouping the <div> tags within another <div> tag?? See code below.

<table align=center>
     <tr>
          <td  bgcolor=LightGoldenrodYellow align=center>
               <div style="z-index:1; top: 0; position: relative;">
                    <img src="http://community.webshots.com/image4/6/54/11/60465411NJoqpq_ph.jpg" border="0" style='HEIGHT: 208px; WIDTH: 312px'>
               </div>
               <%if archived=true then%>
               <div style="z-index:2; top: -30; font-size: 10pt; font-weight: bold; position: relative; color: red;">
                     Archived
               </div>
               <%end if%>
               <div style="z-index:3; top: -3; font-size: 10pt; font-weight: normal; position: relative; color: red;">
                    PHOTO ID = 2134543<br>YEAR 2001
               </div>
          </td>
     </tr>
</table>
0
Comment
Question by:shadc
[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
  • 2
6 Comments
 

Expert Comment

by:phothy
ID: 7984502
Try "display: inline;" like this:

<div style="display: inline; z-index:2; top: -30; font-size: 10pt; font-weight: bold; position: relative; color: red;">
                    Archived
</div>

Though it may be something else.

Do you want it to display like this?

[img] Archived

OR

[img]
Archived

Try using a span tag. As far as I know a <span> is the same as <div style="display: inline;">. Both will lose some formatting capability, but they the contents will behave normally.

<div style="margin-bottom: 0px;">[img]</div>
<div style="margin-top: 0px;">Archived</div>

will display
[img]
Archived

<span>[img]</span>
<span>Archived</span>

will display
[img] Archived


0
 
LVL 2

Expert Comment

by:northernchill
ID: 7988314
Place the image and the text in one <div> tag and change the positioning properties of the text. Like this:

(I have removed properties not directly related to this issue: Font ...)

<div style="Z-INDEX: 1; POSITION: relative; TOP: 0px">
   <IMG src="" >
<%if archived=true then%>
   <div style="Z-INDEX: 2; POSITION:absolute; TOP: 10px; Left: 10px">
        Archived
   </div>
<%end if%>
</div>

This presents the text directly on top of the image without shifting text or table row heights.

0
 

Author Comment

by:shadc
ID: 7993509
northernchill -
Thanks. This almost does what I want it too..  It does not shift text or row heights anymore, however now I can not get the text "ARCHIVED" to be placed in the absolute center of the image.  If I set the TOP to 50% and LEFT to 50% it is still shifted a bit to the right.. If I set the LEFT to 47% it kind of looks ok..  but not really the best solution.  Any Ideas??  

phothy -
"display: inline" messes up ALL my text placement.  What I am looking for is text to be displayed right on top of the image (ie layered) in the exact center of the photo, and more text just below the image.  the text that is placed on top of the image is conditional.  
0
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 2

Accepted Solution

by:
northernchill earned 150 total points
ID: 7995740
Try changing

<div style="Z-INDEX: 2; POSITION:absolute; TOP: 10px; Left: 10px">
    Archived
</div>
to
<table style="Z-INDEX: 2; POSITION:absolute; TOP: 0px; Left: 0px; width:-- your image width here--;height:--your image height here--">
  <tr><td valign=center align=center>
    Archived
</table>

This will let the browser place the text in the appropriate position for you.

0
 
LVL 2

Expert Comment

by:northernchill
ID: 7995790
I haven't actually tried that last idea, it may shift your text again - I don't think it will but with browsers, who knows.
0
 

Author Comment

by:shadc
ID: 8158947
Northernchill,
Thanks, That worked.. I wish I could trim the code a bit, but if it works, I'm good.

Here is how it finally will end up..

<table align=center>
     <tr>
          <td  bgcolor=silver align=center>
               <div style="Z-INDEX: 1; POSITION: relative; TOP: 0px">
                    <IMG src="http://community.webshots.com/image4/6/54/11/60465411NJoqpq_ph.jpg" style='HEIGHT: 208px; WIDTH: 312px'>
                    <table style="Z-INDEX: 2; POSITION:absolute; TOP: 0px; Left: 0px; width:312; height:208; font-size: 10pt; font-weight: bold; color: red;">
                         <tr>
                              <td valign=bottom align=center >
                                   Archived
                              </td>
                         </tr>
                    </table>
               </div>          
               <div style="z-index:3; top: -3; font-size: 10pt; font-weight: normal; position: relative; color: red;" align=center>
                    PHOTO ID = 2134543<br>YEAR 2001
               </div>              
          </td>
     </tr>
</table>

0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

800 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