tables within tables with background images

@davidg47May 21.2004

I’m sorry if this seems like such a simple… really… really newbie question, but I have tried all I know (which isn’t much) to solve this little problem. I have an image I want to use as a background, and then use tables on top of that image to organize some text and other images on top of the background image. PLEASE HELP!!! How do I do this. A friend of mine told me I can just put a table within a table… which I have tried but without success. Every time I try to do it, I get text either to the side of the image, or under the image. Can someone please send me an example of how this is done, or point me to a simple example of how this is done? Thanks so much for your patience and help.

to post a comment

HTML

41 Comments(s) _↴

@PeOfEoMay 21.2004 — #Never put a table within another table. This is called nesting, and it is known for inaccessibility (it will not linerarize (go into a text only mode) properly for text based browsers, and it will not work choke in ns4), It will also waste noticable amounts of bandwidth (bandwidth is money, too much nesting will cost you). Tell your friend he is wrong and he needs to come here and learn how to lay out his sites correctly, or he is just a statistic, another ignorant developer. If you want to lay your site out I suggest using css to organise the content and css to set that background image. www.bluerobot.com has some good rudimentary css layouts, www.w3schools.com has some good css information, here is your background information

http://www.w3schools.com/css/css_background.asp

@davidg47authorMay 21.2004 — #OK, thanks for the advice. I am using the CSS from Dreamweaver to place the background image. If anyone knows of a really good tutorial on using tables to place text over the background image, please forward me the URL.

Dave?

@Aronya1May 21.2004 — #Peo,

I heard your "ughh" all the way in California! ?

@spufiMay 21.2004 — #[i]Originally posted by davidg47 [/i]

[B]OK, thanks for the advice. I am using the CSS from Dreamweaver to place the background image. If anyone knows of a really good tutorial on using tables to place text over the background image, please forward me the URL.

Dave? [/B][/QUOTE]

Is the text that you want over the image tabular data, ie a chart? If not, then you shouldn't be using a table in the first place. You could use a <div> tag instead.

@davidg47authorMay 22.2004 — #Actually the text is just links to other pages in the site. Can you please send me to an example of such a page, or send me an example? Thanks so much for your help.

@spufiMay 22.2004 — #Check out the Taming List link in my sig for a good way to handle a group of links. I can't recall exactly how they do it, but if they have a id in within the <ul> tag, ie <ul id="menu"> then you could define the background image for the menu id via CSS.

[URL=http://www.w3schools.com/css/css_reference.asp]CSS Reference[/URL]

@IncaWarriorMay 22.2004 — #no one uses netscape 4 and anyone who couldn't see the nested tables wouldn't see the pictures either so it doesn't really matter from that perspective.

The only reason i would go with css and other methods is that it makes the code neater and easier to work with (even if it is a bit longer in some places)

@davidg47authorMay 22.2004 — #I thought I would attach a .jpg of what the index page of this site should look like. The logo at the top is part of the background image. All of the links and the small photos at the bottom are text I need to format on the page...

Any additional help will be greatly appreciated.

[upl-file uuid=ad0ec5fa-d89a-4631-b3f8-61f9cdf77862 size=61kB]index_page.jpg[/upl-file]

@ray326May 22.2004 — #I'll suggest a few things.

1. the gradient should be the background for the page

2. the top graphic should be an <h1> with the image in it or as a background to it

3. the middle image should be the background for a div and the text should be text, probably a <ul> and the other side of the bar <p>s.

4. the menu under the big div should be a <ul>

@PeOfEoMay 22.2004 — #[i]Originally posted by IncaWarrior [/i]

[B]no one uses netscape 4 and anyone who couldn't see the nested tables wouldn't see the pictures either so it doesn't really matter from that perspective.

The only reason i would go with css and other methods is that it makes the code neater and easier to work with (even if it is a bit longer in some places) [/B][/QUOTE] netscape 4 + earlier + text based + audio braille. None of them will render a nested table right. If you want to use tables you have to style them with css and put them together in such a way that it will linearize. This would probably mean using a list for the links because it would not mix with center content. Thats what I would do at least If I used a table. http://knights.europe.webmatrixhosting.net/hybrid.html

http://knights.europe.webmatrixhosting.net/hybrid2.html

those are two accessible and standards compliant table css hybrid layouts (rudimentary of course)

@davidg47authorMay 22.2004 — #Thanks for your suggestions... but man oh man am I having a difficult time formatting this thing. Maybe I should create two different tables because of the different locations of the different menus.

Any further advice is appreciated.

@spufiMay 22.2004 — #Posting code, or links to the site tends to do wonders. ?

@ray326May 22.2004 — #[i]Originally posted by davidg47 [/i]

[B]Thanks for your suggestions... but man oh man am I having a difficult time formatting this thing. Maybe I should create two different tables because of the different locations of the different menus.

Any further advice is appreciated. [/B][/QUOTE]
Maybe you should take my advice and DITCH the tables.

@davidg47authorMay 23.2004 — #Ray,

I appreciate your advice, but I have no idea of how to do this. Can you please point me toward an example of such a layout?

Thanks.

@ray326May 23.2004 — #I'll see if I can throw something together.

@davidg47authorMay 23.2004 — #Thanks allot Ray... I look forward to seeing it.

@ray326May 24.2004 — #Here it is. Looks about the same in FF and IE6, for others YMMV. Not a single table to be found.

[upl-file uuid=5a93ca31-94d7-4850-b562-81f25bc38fae size=17kB]metronaps.zip[/upl-file]

@IncaWarriorMay 24.2004 — # Posting code, or links to the site tends to do wonders.[/QUOTE]
I don't think he caught the hint

@davidg47authorMay 24.2004 — #Ray, man, this is perfect... and so cool! Thanks so much for your help and patience. Now I just have to decipher all of the stuff you used to build the page...

Once again, thanks so very much...

David

@ray326May 24.2004 — #David, would you mind if I used that as raw material for a tutorial? I understand if you'd prefer not to release it.

@davidg47authorMay 24.2004 — #Sure man, go ahead... I talked with my business partners, and they said it's cool.

@ray326May 24.2004 — #[i]Originally posted by davidg47 [/i]

[B]Sure man, go ahead... I talked with my business partners, and they said it's cool. [/B][/QUOTE]
Thanks. Good example are hard (for me) to come by.

@davidg47authorMay 25.2004 — #Hey Ray,

I greatly appreciate all of the help you have been so far, now I want to ask you one more favor. Can you help me in laying out one more page? After this, I will not ask you to help me with anymore. I also want to know if there is a source where I can break down and decipher all of the css stuff you did so I can hopefully some day do it myself.

Thanks,

Dave

@PrimalMay 25.2004 — #David,

Someone gave me this link [URL=http://www.w3schools.com]www.w3schools.com[/URL] and it has helped a lot. Click on 'Learn CSS' on the left and go through the tutorials. I've been keeping the 'CSS2 Reference' page open while I've been learning and experimenting.

@davidg47authorMay 25.2004 — #Primal,

Thanks for your advice... I will go through the tutorials when I have time. The reason I asked Ray for some help is because he has always been very prompt in either helping, or answering my questions, and I need to get this site up by the end of this weekend.

Dave

@ray326May 26.2004 — #Send me a link to another page image or send me the image and I'll see. I reserve the right to say no. 8-)

@davidg47authorMay 26.2004 — #Thanks so much Ray... this is becoming a really big learning experience for me... obviously I need to take a few days and really dig into CSS to be able to keep up with the rest of you.

Attached is a copy of what the page 2 of the site should look like. At the bottom of the page, the text will continue on for several lines.

Dave

[upl-file uuid=3806a775-66b0-42ac-bbd5-556a7dc6d950 size=54kB]page2.jpg[/upl-file]

@ray326May 27.2004 — #Ok, it's not perfect but it's a start. I'll let you take it from here.

[upl-file uuid=5311abe7-48cf-43e5-b279-e54d45e40e05 size=28kB]metronaps.zip[/upl-file]

@davidg47authorMay 27.2004 — #Hey Ray,

Once again man, you have come through. But... now I need a little guidence on how to make just a few minor changes.

As you can see by the picture I posted, the blue gradient at the top is supposed to come down to below the few icons at the top... so how can I do that? Another thing these numb skulls want is for the <li></li> lines next to each of icons (top of page on page2) (bottom of page on page1) to all be the same (short) length. At first they said they only wanted them to be the same length, so I just added some <br> tags next to the shorter images so the lines would all be the same length. But noooooooo... they want them all to be short.

Anyway, thanks for all your help. I'm still trying to decipher how you did all of this. I'll get there when they give me the chance to breath from all the other stuff they have me doing. And they seem to pile more and more onto me everyday.

Dave

@ray326May 28.2004 — #the blue gradient at the top is supposed to come down to below the few icons at the top[/QUOTE] Move the little clear:both div up under the </ul> and put a &nbsp; in it.

As for the little line, you might try using a little 1px wide white GIF as a background in the <li>s, positioned in the upper left corner.

{time passes}

Yep that works like a champ. Make a little GIF 1px wide and as tall as you want the line. Remove the border from the #navbar ul li and add something like:

background: transparent url(tick1x15.gif) no-repeat;

@davidg47authorMay 28.2004 — #Hi Ray,

This is where I placed the "little clear:both div up under the </ul> and put a   in it.",

<p>10am-6pm, Mon-Fri<br />

Empire State Building, #2410<br />

Call for reservations and info:<br />

999-999-1212</p>

</li>

</ul>

[B]<div style="clear:both;"> </div>[/B]

</div>

<div id="midpic">

<ul>

<li><a href="#"><font color="#0000FF">Take a Metronap</font></a></li>

<li><a href="#">FAQs - </a></li>

<li><a href="#">Become a Member</a></li>

<li><a href="#">Hours and Directions</a></li>

<li><a href="#">Corporate Programs</a></li>

<li><a href="#">Sleep Science</a></li>

But maybe I did something wrong, because the blue logo part at the top is still looking the same. I will reattach the picture of what the top of the page should look like to help you better understand.

[upl-file uuid=3aa6e2e0-b282-4880-985a-32077756af5d size=55kB]page2.jpg[/upl-file]

@ray326May 29.2004 — #That was the right move. Dunno why nothing changed but maybe I fiddled something else and forgot. Here's the latest.

[upl-file uuid=feca2c11-7f8d-4201-8367-b81f9bbaac62 size=28kB]metronaps.zip[/upl-file]

@davidg47authorMay 30.2004 — #Ray,

You are definitely a shining star in the web development field, your kindness and your unselfish assistance to those of us that are only just beginning in the field that you so obviously have already mastered is unmatched by any of the other posters on this forum.

Now that the praises are out... I have yet another question concerning the pages you have been helping me with. I am attepting to make some of the text on the page bold. I have tried both the <b></b> and <strong></strong> tags, but it seems that neither of them works... So, I assume that something in the CSS is controlling the text. Can you please tell me how I can make "some" of the text in the pages bold?

My next question is, how can I change the color of links when the person mouses over the link, and then to have it be an even different color once a link is visited?

Once again, thanks so much for your help...

Dave

@ray326May 30.2004 — #I am attepting to make some of the text on the page bold. I have tried both the <b></b> and <strong></strong> tags, but it seems that neither of them works... So, I assume that something in the CSS is controlling the text. Can you please tell me how I can make "some" of the text in the pages bold?[/QUOTE]
If the [b]bold text[/b] is imbedded like that then <strong> is the way to go. If it's more general then font-weight:bold; in a style is more appropriate. <b> should never be used. Now it could be you're trying to emphasize something that is already declared with the above style so that will have no effect. Eg, on page 2 the midpic lists are already bold but doing a <strong> down in the ipsum text works as expected.
My next question is, how can I change the color of links when the person mouses over the link, and then to have it be an even different color once a link is visited?[/QUOTE]
Those are done using the pseudo selectors :link, :visted, :hover, :active on the anchor element. Here's an example for all anchors on the page:

a:hover { color: blue; background: white; }

Stick that right under the a {} style and see what happens. I don't like the results I've had with :active so I stay away from that, normally just doing a and a:hover.

@davidg47authorMay 31.2004 — #Ray,

How do I edit the logo you inserted into the page? When I open it in Photoshop or Paint Shop Pro, I can't even see it because it blends into the background white. Man, I gotta get this page done tomorrow!!!

Thanks,

Dave

@ray326May 31.2004 — #Frankly, I wouldn't. That logo is just a piece of crap I cut out of your page image because I didn't have the separate pieces. If you must fiddle with it directly then there is undoubtedly a way to show up transparency in a general way in Photoshop or PSP. I use Painter and Photo Impact and they both can do that. It's just a white on transparent GIF. What you really need to do is take the original and anti-alias it against the blue background. I just simply cut those things out with Painter for this prototype; I never expected them to be used as production images.

@davidg47authorMay 31.2004 — #Ray,

I do have a copy of the logo as a psp with a transparent background, but when I save if from a .psp file to either a .gif, or a .jpg, it always adds a white background to it... jeeze... what do I do now?

BTW Ray, what part of the world are you in? It's midnight here in New York... so since I just recieved this note from you, I'm wondering where you are?

Dave

@ray326May 31.2004 — #I'm ignorant of both PS and PSP so I can only offer a WAG. Some paint programs require you to float the part of the image that will not be transparent and maybe even have that selected when you do the save as. In PS I'd expect the visible part to be on its own layer and the background to either be declared transparent somehow or only the visible layer selected for the save.

I'm in the D/FW area and I stay up way too late.

@davidg47authorMay 31.2004 — #Thanks Ray,

I got off my lazy ass and figured out how to do it...

Dave

@davidg47authorJun 04.2004 — #Hi once again Ray,

If you will go look at the index page, and at the bottom of the page in the navigation section, you will see that I have attempted to add the small tick marks that you created for me. But, now I can't get rid of the <li></li> that follows the images present.

So, how do I get rid of the old... longer li lines?

Thanks again,

Dave

@ray326Jun 05.2004 — #The original lines are borders. Remove the border-left from the #botnav ul li style.

Also in #HTML _↴

Hi Im new..Javascript/embedded PDFs works in every browser except for IE9??Repeating image but not in background DIV based menu system

Success!

Help @davidg47 spread the word by sharing this article on Twitter...

Tweet This

tables within tables with background images

41 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

tables within tables with background images

41 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

41 Comments(s) _↴

Also in #HTML _↴