Large and tables/cells..how?

[buddyb]

I placed this question in Web Design forum, but this may well be the place. I have a large upside down "L" shaped graphic I want to use as part of my navbar. It runs up the left side and across the top. I want to be able to drop things in on top of it. First, to get it to work with data cells do I have to slice the image and spread it through two different tables/cells, or is layering an option for my project? I've performed the most basic HTML to my pages, so this is a bit hazy for me. Any thoughts appreciated.
BuddyB

[Dani]

First of all, I deleted your thread from the Design Layout forum. Second of all, I'm a bit hazy on what you're asking. The best way to layout your site is to design the entire thing in a program such as Adobe Photoshop. Then, slice up the image, and output as HTML. If you could give me an example of what you're asking for (it's hard for me to picture in my head), I'd be happy to slice it up for you the correct way and do the table structure for you.

[buddyb]

If you could give me an example of what you're asking for (it's hard for me to picture in my head), I'd be happy to slice it up for you the correct way and do the table structure for you.

Dani,
Thanks for responding to this. Here's a sample of what I'm talking about.

[IMG]http://home.comcast.net/~giddyupgilbert/myfilelocker/navbar.gif[/IMG]

I haven't been able to get my .gif to show. I've set it up 50 ways from Sunday and nothing seems to work. Can you tell what I'm doing wrong? I've used the the img src=, quotes but nada. myfilelocker is where everything is stored on that server, so I've tried it with and without the "myfilelocker." The reason I tried it without is, I use another server where "htdocs" is my file folder, but you don't allude to it for stuff to show. I'm plum confused at this point. I would use that server but I keep getting 550 errors with my client. I can access the server, but can't do anything at the moment.
Thanks for your time, BuddyB

[Dani]

Image is broken :-/

[DaveSW]

I'd use the css and no slicing. Actually that's a lie. I'd use css tiling and a 1px gif, backed up by a secondary div with a background for the header. But in your case, try the first option:

<style type="text/css"><!--
body { background: url(graphics/image.gif) 0 0 no-repeat; }
--></style>

Or if you want an insight into what I was talking about with slicing, then check out www.tollgatesecurity.co.uk/main.php

[buddyb]

Dani,
Let's see if this one works

[IMG]http://www.eliving.com/navbar/navbar.gif[/IMG]

That's what I meant by the upside down "L". I will use the left side for navigation and the top for some other stuff.

Thanks,
BuddyB

[buddyb]

I'd use the css and no slicing. Actually that's a lie. I'd use css tiling and a 1px gif, backed up by a secondary div with a background for the header. But in your case, try the first option:

<style type="text/css"><!--
body { background: url(graphics/image.gif) 0 0 no-repeat; }
--></style>

Or if you want an insight into what I was talking about with slicing, then check out www.tollgatesecurity.co.uk/main.php

Thanks Dave, most of that I didn't understand. I'm just coming to a point where I will be getting into CSS. I will first check out the link you referenced, and then try to educate myself.
BuddyB

[DaveSW]

if you put the code in my last post into the head section of your page then it will put the image in the top left as a background. you will then just need to make sure your table lands in the right place on top.

I seem to remember having your dilemma myself a few years ago, so maybe this workaround will help. It depends how familiar you are with the code etc.

for the table cells that you want a background on, use an inline css style:

<td style="background: url(graphic.gif);">

you may want to add additional controls such as

<td style="background: url(graphic.gif) repeat-y;">

- This will tile the image down the cell. change y to x for the horizontal equivalent.

if you think of anything else you might want to do with it, just ask. Ultimately your best solution is to use css for your layout instead of tables, but hey, you've got to start somewhere!

[buddyb]

:o

if you put the code in my last post into the head section of your page then it will put the image in the top left as a background. you will then just need to make sure your table lands in the right place on top.

Dave, is this what you had in mind?

<style type="text/css"><!--
body { background: http://www.eliving.com/lightofworld/revelation101b.gif 0 0 no-repeat; }
--></style>

or

<style type="text/css"><!--
body { background: http://www.eliving.com(lightofworld/revelation101b.gif) 0 0 no-repeat; }
--></style>

Right now I'm in over my head :o And actually neither of the two work for me. So, I'm doing something incorrectly. I understand placement of the the table over the graphic, but so far..nada.
BuddyB

[buddyb]

I believe what is confusing me is:

URL(graphic.gif)

It seems that a link should go into this area. Otherwise, I'm missing the boat somewhere.
BuddyB

[buddyb]

I'd use the css and no slicing. Actually that's a lie. I'd use css tiling and a 1px gif, backed up by a secondary div with a background for the header. But in your case, try the first option:

<style type="text/css"><!--
body { background: url(graphics/image.gif) 0 0 no-repeat; }
--></style>

Boy Howdy!
Did I ever overlook the obvious Dave. I got it to work. I was trying to turn it into something it's not. Shame on me. And, thank you for the input.
BuddyB

[anastacia]

hi. maybe what you should do is save your image in the same folder where you are palnning to write your html coded. this will avoid you using complex hyperlinks and referencing tags.otherwise the codes already mentioned should do the work. another thing MAKE SURE YOU CLOSE ALL YOOOOUR TAGS PROPERLY. RECENTLY I WAS IN SUCH A DILEEMA. YOU TYPE SO FAST THAT U DO MAKE MISTAKES. PAY HEED AND ALL WILL BE WELL JUST DONT WORRY,
BYE AND TAKE CARE

[DaveSW]

no problem! I think you get it, but just to clarify:

URL(graphic.gif) - uses file graphic.gif located in the same folder as the page.
URL(folder1/graphic.gif) - uses the same file but this time the image is located in a subfolder called folder1
URL(http://www.website.com/images/graphic.gif) - uses the same image but absolutely referenced from the ficticious site, website.com.

I think you realised that afterwards, but anyway. ;)

[buddyb]

I think you realised that afterwards, but anyway. ;)

I did realize it after a fashion (duh), but your imput help immensely :cheesy:.
Thanks,
BuddyB