round corners

[first trading]

Take a look here.

www.actionfigures4u.com

I had the same dilema, i used 3 images, simple, no coding just save the 3 images in your stylesheet.

Disadvantages, you need to create 3 images but not really a disadvantage if you don't mind images. They will make the page load slower also but once again the customers i have usually use high speed connection anyways so to me personally no disadvantages.

I don't think you will get drop shadows in CSS but with images you can have any look you wish.

[nagelkruid]

Take a look here.
www.actionfigures4u.com
I had the same dilema, i used 3 images, simple, no coding just save the 3 images in your stylesheet.

Thanks, at least now i have an option to do the middle section as well. Don't mind using images, but i noticed they won't scroll down to the actual window size, so i will have to accept a fixed size for the middle frame.

Or is there a way to get around this as well (maybe with using png files?)

Anyway, thanks for the input, i like the look of your site.

[first trading]

you can have box any size like the ones in my site. there are no restrictions my friend.

simply make an image for the header.

make an image for the footer.

make an image for the sides, please note that the image for the sides is simply a background image and you just apply the following.......

background-image: url(../images/YOUR_IMAGE.gif);
background-position: bottom-center;

you don't have to repeat the image, every time there is a line of text in the box it uses the background image, so your box could have 1 item or 100 items in it but it will look the same.

[first trading]

Forgot to add, thanks for the comment.

Make the center image (the sides of your box) higher than the text that will appear in the box and this way the sides will keep overlapping themselves up and down giving a seemless effect.

tell you what i'll put together a better description with pics.....

[gjh42]

nagelkruid's problem is that the center div only expands enough to fit its content, not all the way to the bottom of the window.

This is a limitation of the div/CSS system, and is one of the few things where tables are superior in getting desired appearances.

[first trading]

You've lost me i'm afraid, i'm only a begginer here.

The contents of my boxes only expand to the contents also.

For example none of my boxes are fixed in size, is this what you mean...?

[first trading]

Sorry, just read the thread back, i see what you mean.

You want the center boxes round also...? or just the nav bars...?

I have been able to achieve both.

[nagelkruid]

You've lost me i'm afraid, i'm only a begginer here.

The contents of my boxes only expand to the contents also.

For example none of my boxes are fixed in size, is this what you mean...?

Its the same here, i am experienced with computers/scripts but a little green on the web coding.
Probably the very reason why my css looks like a mess (at least to me) and why it doesn't always change things on my site when i change stuff in the css :)

Also, this site has been running for about 2 years and i just upgraded to v1.3.8 which triggered me to finally do something about the lay-out as we are doing reasonably ok.
I can see now there is still a lot of rubish/old stuff in there that should actually be removed, but as i can't break anything i'll have to go slow on this. (i do test with xamp locally first)

What i meant was, when my site is pagewide on a big resolution screen the site will stretch to the full extend of the browser and it will not have the fixed frame the standard zen-template uses.
However, there is no minimum set either so if you make the browser window very small it will all shrink in eachother untill it looks hilarious

This may be what gjh42 is meaning with the div/css remark but to be honest i am not sure what he means either.
It may be there is some stuff in there from 2 years ago that is now obfuscating things on this site...

I just managed to get the rounded search box in from the cherry-zen format, and as that is using an image from the css as well, i think i should be able to get it to work...

Thanks,
Jeroen

www.engeltjesendraken.nl/winkel

[gjh42]

"i noticed they won't scroll down to the actual window size"

I thought you meant by this that your centerbox did not stretch all the way to the footer like a side column does. If you really meant that the box sides didn't go all the way to the bottom of the box, that is a completely different problem, and first trading is on the right track.

If you make an image for the heading, one for the bottom of the box and one for the sides

 ##########_
/      \


|      |
|      |


\##########_/

These will work for a box that has a wrapper or container div, a heading div and a content div.
Attach the top to the heading, the bottom to the content and the middle to the container with repeat-y so it repeats vertically for the full height of the box. The top and bottom want to be no-repeat.

The centerboxes typically have only a container div and a heading div, so you can't use three images. For this, make a top image attached to the heading and a middle/bottom image attached to the container. Make the sides of the middle taller than any box you will ever have.

 ##########_
/      \


|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
|      |
\##########_/

[first trading]

This is what i have.............







As you can see what i have done is used 3 images, a slight optical illusion with the top and bottom of the box to give a rounded feel inside of the box also.

in my style sheet i have not repeated the side sections as you don't need to, it is set as a background image so every time there is content in your box it simply adds another section of the background (the sides of the box image).

The other way is exactly as gjh42 has said, i just found this way easier for me.