EDIT: alright, i have run into another problem, the nav bar has about 2px extra under each of the links, and i can't seem to get rid of them, any ideas?

linkies
any help is appreciated

There are several things that need to be considered wolf. I have downloaded your images and played with them, and I have come up with an idea of what you are trying to achieve. You are using two separate blocks for your header images and your navigation images. Can you confirm that you want your navigation images to be inline, left and right of your header images.

Also, if you want to repeat the header-left and header-right images, copy these images into a paint program and duplicate your idea on canvas. Doesn't look right. I would work of 7 blocks instead of 5, cutting header-left and header-right in half, at the junction where horiz. line meets angled line. I would then repeat the horiz. portions of the image. Experiment in a paint program, repeating the side header-left and header-right images, as opposed to splitting the images and repeating the horiz. portions of the images.

If you want all of the parts to remain inline, with only two portions (header-left and header-right) expanding when browser is resized, then put them all in a DIV with the width:100% style included. Inside that DIV, put 5 (or 7 if you split the images) DIVS for each part. Use a fixed width for all of the divs (in pixels - to correspond with width of images) that are fixed, and don't include a width style for the header-left header-right DIVS.

Look into the background, background-repeat CSS properties for a few clues.

If you want an example, then let me know.

Use a fixed width for all of the divs (in pixels - to correspond with width of images) that are fixed, and don't include a width style for the header-left header-right DIVS.

i tried that.. and it didn't work, i have varied my code so much trying to get the tempramental beast of css to work. so now that it does. (in firefox atleast) ill leave it.

i was initially working on the headers. where i came to the problem, its solved now (regardless of how "right" it looks) it had something to do with the fact that the cells with the spacers in them didn't have a width. so they wouldn't be drawn. but thats fixed now.

I am watching it take shape in both IE and Mozilla, and it is taking shape. Keep up the good work. As a commercial developer, I have many reference sites on web development, would you like a link to some that can help?

I'm alright for now. however, if you look at the bottom of the nav spacer, it expands larger than it should, and i can't get it to go any smaller.

anyway, this is the concept

Linkies #2



last edited by myWhiteWolf at 17:05:04 02/Feb/07

Try fixing the height for navspacer.

In relation to your edited request for assistance, the following needs to be looked at.

There are several things that could be causing the effect. Your images have a height of 20px, and you have added a 1px border around the blocks. Setting the block height to 20px means that the block area has a Y dimension of 20px high, but adding a border doesn't deminish this area, it simply adds it to the block. Therefore, the nav links have an actual physical height of 22px. 20px being the height of the block, plus a 1px border top and bottom = 22px. If you want to keep the border, then simply reduce the top margin (-2) to bring the top of the block up 2 pixels. There are numerous ways to effect a workaround, but this one would be one worth looking at first. Hope this gives you some assisance.

FB

nope
didn't help, i added the borders on after the problem with the sizing happend anyway. so the borders don't cause it.

any other ideas?

Experiment with the height of the block. Change it to 18px and see what happens, or increase the height of the entire nav by 2px. Play with the margins, such as adding a top-margin:-2px and see if that pulls them up that extra 2px. Change the background of the block to a different colour, so you can see where the blocks fall in relation to each other. This might give you an idea on where the blocks are relative to each other, and give you an insight into a workaround. Padding in the nav bar could cause the effect, as well as padding in the smaller overlaying blocks. All I can suggest is experimentation. Best of luck.

FB