Layering Text slightly over an Image

[p8ball4life]

Here is a screen shot of my problem.

http://i27.tinypic.com/15eadf9.jpg


I would like to move the header up to avoid a lot of that white space.

The only tricks I have read involved using tables and setting the image as a background or something of that nature. This presents a problem because the table then likes to repeat the image or the text is not centered based upon the white space, it's centered on the table.

Are there any other alternatives that I'm missing?

Thanks,
Tyler

[jcdevelopment]

your best bet is to drop tables, they dont play well with others. If you dont want to then use CSS to repeat in the table. That way you can control where it goes and how far it repeats.



background-repeat:/repeat/repeat-y/repeat-x/no-repeat;

[p8ball4life]

What are my other options besides using tables for this problem?

[jcdevelopment]

well, you would want to use div's. they are easier to manage

http://www.hotdesign.com/seybold/

[abduraooft]

@p8ball4life, which is your header? Please post your relevant code or a link to your page.

[p8ball4life]

The header stops after the image and the page content takes over, which includes the heading.

[abduraooft]

No way to say anything without seeing your code. Since this includes a lot images, a link would be more useful.

[p8ball4life]

What are my other options besides absolute for the div positioning?

<div STYLE="position:absolute; top:250px; left:480px;">

With absolute it is relative to the users resolution and window size.

[p8ball4life]

No way to say anything without seeing your code. Since this includes a lot images, a link would be more useful.

Here's a link to the actual page that I'm manipulating. http://www.corporaterelocationlouisvilleky.com/locations.php

Thanks!

[p8ball4life]

It seems like position:relative; was what I was looking for.

<span STYLE="position:relative; top:-40px;"> has done the trick and moves the content up with it.

Thank you for your help, problem resolved.

[jcdevelopment]

glad you got it, try using proper (x)html also


<span STYLE="position:relative; top:-40px;"> *bad*


<span style="position:relative; top:-40px;"> *good*

[abduraooft]

There is no such blank space, and that gap is actually a portion of your logo image (http://www.corporaterelocationlouisvilleky.com/images/logo2.JPG)
How ever you could place your text over that image by applying position:absolute; to that image (you need to adjust the padding/margin of the heading/content)

But before doing that, you need to fix all markup errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.corporaterelocationlouisvilleky.com%2Flocations.php&charset=%28detect+automatically%29&doctype=Inline&group=0), otherwise you'd end up in a complete mess.

And I second, table for layout is really bad! Adopt something like http://bonrouge.com/2c-hf-fixed.php

[p8ball4life]

My next website will be based on CSS tables :)

The uppercase STYLE is just an old habit.

Thanks