css newbie - background image problem [SOLVED]

[avon_g]

Hi all.........

cmsms newbie with no css experiance at all but CMSMS has changed my life!!

I have managed to edit templates and style sheets and im using the Layout: Left sidebar + 1 column with much success to give me the look and feel i like for my website. One problem i cant seem to get around is to add a background image to the left hand side of my menu. My current website looks like www.avongraphics.co.uk and my new cms website is www.avongraphics.co.uk/cms
TIA if anyone can help.

Regards
Andy

ps. I would like to make a donation to CMSMS...who and where can i do this to?

[RonnyK]

Welcome Andy,

under "documentation", top-menu are documents to be found. One of them is

http://wiki.cmsmadesimple.org/index.php ... nu_Manager

That tells you how different styling can be done on MENU.

Ronny

btw, donations, there is a button on the left-sidebar on the MAIN-page www.cmsmadesimple.org.

[avon_g]

Thanks for the quick response ronnie.
I didnt want to actually change my menu, just add a vertical image 100pix wide x 650 pix vertical to the left of where my menu is.
I have to use a background-image url: i think but every time i place it, my layout goes wrong or the image dosnt display.

TIA

[RonnyK]

OK, sorry, I thought you wanted the images on the menu-buttons, now I see that you want the image in the side-bar.

Did you try putting an extra DIV in. So that there is a DIV for the image and an DIV for the menu...

Ronny

[avon_g]

thanks once again....
Ill go and read up on DIVs and see what happens.
Many thanks

[avon_g]

inserted into my css

div#leftbanner {
  display: block;
  position:relative;
  float: left
  height: 650px;
  background-image: url(images/main/ag_logo_left_vertical.jpg);
  width:100px; 

and added the div to my template but its messed my layout!

www.avongraphics.co.uk/cms

do i need to add some more spacing somewhere?

TIA

[Dr.CSS]

When I do this it works...

div#content {
  margin: 1.5em auto 2em 0;padding-left:100px;background: url(images/main/ag_logo_left_vertical.jpg)no-repeat  /* some air above and under menu and content */
}

If the image has no-repeat it will go to the upper left hand corner of the div it's in...

Course it makes a mess when the page is made smaller, you may want to make the page a fixed width...

[avon_g]

Thanks mark....

ive insterted into my Layout: Left sidebar + 1 column css and has moved the bits i needed to but cant see the image,
is this because i have a background colour set?

[Dr.CSS]

The code I posted was part of your original CSS, it already has a call for div#content {  } if you look a little farther down in your CSS, you just needed to add the part about the image...

The bottom of the image is cut off because the content isn't enuf to fill the page down to the point of showing the bottom of the image...

Right now the template has...
     
You could try and put another div, like
           

           

If you do this you will need to give it a width: and height: with the call for the image instead of in the content...

The best way to experiment is to use Firefox with the web dev. tool bar, it lets you do CSS editing on the fly to get it the way you want, that's how I did it with your page, I opened it in firefox clicked the edit css button and made some changes to see how it looked then copied it and put them here....

[avon_g]

Thanks for you help mark