how to get non-rectangular images side-by-side?

[TGA]

[attachment=0]Design idea.jpg[/attachment]

(sorry for the scrolling frames … can’t make it smaller)

I am a beginner and would welcome any tips to get me started correctly.
I attached a drawing done in paint to show what I am trying to create. My main problem is that I was taught to use <div> containers in Dreamweaver, which are always tidy little rectangles with images in them. Obviously, the design does not break down into rectangles. So how can I lay it out?
(I want to use div containers and not tables.)

— Would it work if I had two divs only: One for the header and one for the rest of it? My thought was for the second huge div, I could break up the image into sections in Fireworks and drag them into the div side by side. Would they stick in place correctly? If so, would there be a way to make only the center image in the div scroll?
— Or should I go to fireworks and create separate images out of the part under the header, and then make each a div? If so, how do I get around the fact that they are not rectangular, but the div containers are rectangles? And how would I float them so it all lines up correctly?

Any advice is welcome. Thanks!

[EamonnMac]

Everything in a web page is a rectangle – even if the image itself is not.

If I understand you correctly, you want a header div on top, with a ‘main content’ div stacked underneath. Within this ‘main content’ div, you want to display a non-linear (i.e. curvy) frame image as your background, with a scrolling area placed inside that. This should be no problem – just place an iframe where you want the scrolling content to go. Your code will look something like this (obviously replacing all the numerical etc. values with whatever suits…):

Code:

#header {
width: 970px;
height: 100px;
}
#main-area {
width: 970px;
height: 1000px;
background: url(place/image/src/here.jpg) top left no-repeat #fff;
}
.wrapper {
position: absolute;
top: 150px;
left: 235px;
width: 500px;
height: 500px;
}

and your html something like this:

Code:

…

content of header

Basically, what this does (and please CHECK the above code, coz I’m just typing as i go here!) is create a small ‘window’ (an iframe) to another page where all your content will site. Viewers will see the content framed by the design on your index page. Check out W3C’s page on them, and try the demos: http://www.w3schools.com/TAGS/tag_iframe.asp. As a result, you don’t have to slice up your image at all…

Hope that helped. :)

[TGA]

EamonnMac,

Thanks so much for introducing me to the iframe. That sounds like the way to go!
One question, though: Does the iframe have to appear rectangular? I’m thinking that with the rest of the image being "background", the square frame will have to sit right on top of it. Right?

Thanks again,
Tga

[EamonnMac]

As everything in a webpage is rectangular, then yes – so is the iframe. You can, however specify its width and height to fit whatever area you like. You can also specify that it has no visible border, so (with a background the same colour as your main-area image) it will fit seamlessly into your design, albeit with a scroll bar. You can make it as large as your surrounding graphic will allow.

Remember to keep your content page the same width (padding included) as your iframe if you want to avoid horizontal scrolling as well. ;)

[TGA]

Such a great idea. Thanks again! I think I WILL make everything the same color. It sounds so easy now!
Much appreciated,
Tga

[Author]

Posts