Jump to content
Stef's Coding Community
Susie

Background image help

Recommended Posts

I am coding this layout and am struggling with the left side navigation background.

 

http://cli.gs/BLPdsE

 

Because the main background is a gradient, I've had to use transparent pngs for these images. I need to make the left nav expandable, but I don't see how to make it work.

 

What I've done is create a top and bottom image so it can be expandable, but when I set the background color to match the image, the corners of the box stick up past those rounded corners.

 

If this background were a solid color, I could do it no problem like you see on the right with the white content area. But there's a gradient here, too.

 

Can anyone give me an idea on how best to accomplish this? TIA!

Edited by Susie

Share this post


Link to post
Share on other sites

Seems like the easiest solution would be to modify the left-nav-top-bg.png img (http://www.auxanocreative.com/clients/norwalk/images/left-nav-top-bg.png) so that it is much longer so you don't need to use a background color?. Perhaps make it 600ish pixels long?

 

Otherwise, you'll probably need to do what you did for the footer of that box -- splitting the left-nav-top-bg.png img into two images, one containing the top rounded corners, and the other containing the rest of the image, and then use them in two separate divs.

Share this post


Link to post
Share on other sites

Hmmm.... I still don't see how to do it. If I were to make the top image 600ish pixels long, then it's not truly expandable because in theory, the client could add several pages and it would eventually not be long enough.

 

The second way wouldn't work either, would it? I mean, that gradient is confusing me. And I would still have the corners of the box sticking out.

 

So confused! lol

Share this post


Link to post
Share on other sites

Hi Susie,

 

You should be able to put the background color on the ul, li, or a, depending on how you have it setup. Either that, or maybe put an absolute div that holds the color with the correct dimensions (top:yada bottom:yada). That should also expand as needed.

Share this post


Link to post
Share on other sites

Thanks, guys.

 

Ben, I think if I did it that way, I would still have issues because the list wouldn't appear only appear in the middle of the container. Know what I mean? I need the list to appear at the very top and all the way to the very bottom.

 

Eric, I actually tried, that, but again since the list is at the very top, the new background color covered up that gradient and the swirls.

Share this post


Link to post
Share on other sites

I understand what your saying (the swirls). You "could" just put the background color on the bottom couple li's. Or why don't you try that AB div solution - that "shoud" work well. Set the top deminsion to start at the very bottom of the top image, and the bottom demension to the very top of the bottom image. And z-index appropriately.

Share this post


Link to post
Share on other sites

Well, it's working now. John/shelfimage figured it out for me. I still have a few IE kinks to sort out, but it's all there. Whew!

 

Thanks so much for looking at this today!

Share this post


Link to post
Share on other sites

I knew you were gonna ask that. LOL Honestly, I'm not sure....we were in IM and he was using firebug. He was in a hurry to go pick up his kids and my kids kept interrupting me and making it impossible for me to concentrate.

 

Later tonight, I hope to go through the changes he made and figure it out myself. :D

Share this post


Link to post
Share on other sites

I got bleach in my eyes a week ago (had to run to the optomologist - I'm fine now I think), before I left I tried for about ten minutes and couldn't find a quick fix. I figured out enough to know I'd have to setup a stripped down test page though. I still might out of couriosity! Those swirls definetely make it more complicated. Well that, and, the adjustable height.

Share this post


Link to post
Share on other sites

Bleach in your eyes! Ouch! That had to burn. I hope you are okay.

 

Actually, this design was made by a graphic designer and she asked me to code it and implement CMS MS. Fun stuff! :)

Edited by Susie

Share this post


Link to post
Share on other sites

Yes, and it was a silly mistake on my part. I remembered the bottom slice is now inside the larger container, so I had to add the margin to the larger one instead. Duh @ me. :rolleyes:

 

I'll email you later! :D

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...