menu image - thin line separator

Tali / 2009-05-27 04:46:43   

Hi guys,
I'm wondering if it's possible to have a thin line or image 'separating' the menu from the content area.
Check out this image i've mocked up to see what i mean.
Much better than my crappy description of it :)

I'm not sure what the best way to do this is... I was thinking of tiling a 1px high background image in the menu???

Question 2 is:
If this is possible, would i still be able to use a jpeg logo at the top of the nav?

arsondpi / 2009-05-27 06:20:58   

Hello there...

yep - add some extra padding to the right of your #menu .container and also add something like:
#menu { background: url(your_1_px_image_url) repeat-y right top; }

(You'll may need to readjust margin-left in your #content and even touch up the backgrounder menu, but go ahead and start with the basic steps and then see what needs adjusting etc)

And the answer to the second question is "yes it's possible"...

Tali / 2009-05-28 02:11:54   

hmmm.. it doesn't seem to be working.
though, i got rid of #menu .container, as i'm starting my site styling over... so i got rid of some changes to start fresh.

i put the bg img code under #menu {

is it in the wrong spot? have i written the code wrong?
:\

Tali / 2009-05-28 09:11:01   

whoops! it did work! i think i had a cache issue.. thanks for your kind help! :)

arsondpi / 2009-05-28 10:18:29   

semi-wrong but I you getting the idea right and I see that your got it working!
Clap-clap-clap :-D

It is advised that #menu & #content should not have padding. Check css box model.
Why did you get rid of #menu .container? On the contrary padding should be applied to #menu .container ... Move paddings from #menu to #menu .container and from #content to #content .container. It should work well...

One last hint/trick: your image is 215px √ó 1px.
Your css is:

  1. background-image: url(http://www.taligalon.com/indexhibit/files/gimgs/bg_shadow.jpg);
  2. background-repeat: repeat-y;
  3. background-position: top right;

background-position: top right; means that you don't need a long strip of the background but you position just the grey-ish embossed bit... to understand what I'm saying replace you image url with this image which is 7px √ó 1px.

Tali / 2009-05-29 01:54:22   

done! padding and bg image fixed. thanks arsondpi :)

Hope i adjusted all the padding correctly. Visually - it looks exactly the same as before, so I'm happy if it makes the code better.

Thanks for all your tips :D

This thread has been closed, thank you.