Correctly aligning images for a page border (using HTML frames)

[marksweb]

I’ve had to use HTML frames for the first time since the 90s and I’m having trouble getting the right side of my browser window to look right. My main problem is that I’m working with exported HTML so I can’t manipulate the layout, and this is also why I’ve had to use frames.

I’ve got a header frame which has a series of images, a repeating image and ends with a curve. Then I’ve got a sidebar and main content frame below and as you resize the window I’m having trouble getting the content frame right side to line up with the curve of the header. Beyond that there was a footer image to finish of the design but I’ve not implemented that.

I’ve had trouble also allowing for the scroll bar and the effect that has on that right side when you’ve got a frame split. Currently I’ve forced a vertical scroll bar in the CSS, but not included that in my demo code.

Please excuse the quality of my CSS. I’m sure it’ll offend most, but I haven’t worked with CSS or Frames for ages so it’s a bit of a mess :(

live demo: http://dl.dropbox.com/u/3755926/cssTricks/main.html
Zip of the site: http://dl.dropbox.com/u/3755926/cssTricks.zip

[Bogdan Dimitrov]

Hi marksweb,
The first think that I saw is that background images are with different widths.
This difference can be the problem.
Take a look for:
1. .logos background image – it is 39px width /header_right.jpg/
2. html, body, #page, #main – background image – it is 32px width /border_right.jpg/

[marksweb]

Oh I forgot to replace that. That was my quick fix this morning but I didn’t mean to include that in the zip. I’ve corrected that.

When the scroll bar appears it moves the frame’s content in however which causes the alignment to go wrong. That’s where I get lost – how do you compensate for the scroll bar when setting this up?
Thanks

[Bogdan Dimitrov]

If you mean left frame scroll bar when shrink browser height – under Mozila Firefox I don’t see an problem when scroll bar is visible or not.
In other side under Chrome if there is no sidebar I see white gap between left and right frame.
You can visually fix this by adding background-color: #F3F7F8 for html.
Hope it help.

[marksweb]

Sorry just realised I’d totally missed off the fact that this issue arises on the ‘BPTRTI_EMP_1’ page where all the dummy content is. There you’ll see that it is over on the right side.

I assume this problem is caused by the two different frames. If you had just 1, the whole page would shift but here it puts a scrollbar on the content frame & might be a problem you can’t avoid.

[Bogdan Dimitrov]

Ok I made browser small enough to see this right scroll bar.
I tried with firebux something like this:
– to #page add – overflow:hidden;
– to #main add – overflow: auto;
and looks like it works

[marksweb]

That looks good to me. Thank you very much :D

[Bogdan Dimitrov]

No problem. Good luck! ;D

[Author]

Posts