Member Avatar for 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

  • 4 Contributors
  • 13 Replies
  • 184 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by buddyb

Dani AI

Generated

A practical, low-friction way to get that upside-down “L” to work as a navbar is to treat the artwork as two pieces (left slab + top slab) and place them with CSS rather than slicing the whole image into table cells. That keeps markup semantic, lets the page content sit on top, and makes tiling or repeating parts much easier. ’s Photoshop/slicing route will work if a single image must remain intact, and ’s CSS-background idea is the right direction; ’s note about keeping image files local will avoid the common path/FTP confusion that ran into.

A concise layout pattern that matches the idea: reserve a fixed-width vertical layer on the left and a fixed-height horizontal layer at the top, then move the page content over with margin/padding that matches those dimensions. Example (adjust widths/heights to the actual graphic sizes):

:root { --nav-width: 160px; --top-height: 80px; }

#nav-left { position:absolute; top:0; left:0; width:var(--nav-width); height:100vh;
           background-image:url('nav-left.png'); background-position:top left;
           background-repeat:repeat-y; z-index:1; }

#top-bar { position:absolute; top:0; left:var(--nav-width); right:0; height:var(--top-height);
           background-image:url('top-bar.png'); background-position:top left;
           background-repeat:repeat-x; z-index:1; }

#page { margin-left:var(--nav-width); padding-top:var(--top-height); position:relative;
        z-index:2; }

Quick troubleshooting and notes: verify each image URL by loading it directly in the browser (common cause of “not showing”); remember hosts with case-sensitive file systems require exact filenames; 550 FTP errors usually mean permissions or wrong remote path—check with the host; when debugging give the layers temporary solid background colors to confirm sizes; prefer CSS positioning/containers over table-based layout for maintainability and future responsive tweaks.

Recommended Answers

All 13 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for Dani

Image is broken :-/

Member Avatar for 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

Member Avatar for buddyb

Dani,
Let's see if this one works

[IMG][/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

Member Avatar for 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

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

Member Avatar for 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!

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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. ;)

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.