12 replies [Last post]
maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

Ok. It's "my" worst nightmare because I am not that great with CSS.. and I am hoping it's not "your" worst nightmare Smile

As you can see from this page, I am dealing with different layers of backgrounds. I have the green background and the curtains under control. I seem to be having problems with the uppermost layer where the content is. Scroll to the bottom of the page and you'll see what I mean.

Here's my html:




[CONTENT GOES HERE]



and here's my CSS:

#content-outer {background: url(templates/revamp/images/content_top2.gif) no-repeat center top;}
#content {background:url(templates/revamp/images/content_bottom.gif) no-repeat center bottom; padding:100px 85px 50px 85px;}

Let me explain my CSS a bit: I am using 2 images - one with top border and the central part, and another with the bottom border. The first is assigned to #content-outer and the second is assigned to #content. As you can see, the lower part of the background image of #content-outer is peeking from underneath that of #content. This is because of the transparency of the images, but this transparency is needed because the green background image behind all this has a gradation and that gradation cannot be repeated / broken.

Here's my question: Can someone give me some pointers to solve such a problem or point me to sites where they've used such complex transparent frames to show content? It would have been a lot easier if the top and bottom of the frame didn't show content - then I'd just have 3 divs and be done with it. But the top frame extends almost 200px into the content and so does the bottom of the frame.

Is there any way to do this before I contact the designer and ask for a redesign? Smile

Thanks in advance,
-V

AttachmentSize
content_bottom.gif10.48 KB
content_top2.gif35.03 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can use negative

You can use negative margin-bottom to pull the inner element below the background of its parent. You'll need to add a corresponding (positive) margin-bottom to the outer element to keep the bottom scroll image in the same place.

maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

Hello Chris, Thanks for

Hello Chris,

Thanks for commenting. What you say seems logical, but I have tried all combinations of margin-bottom for each div (inner and outer), but their bottoms are stuck together Smile. I guess it is because of them being nested. If the outer has a positive bottom margin, it takes the inner div with it. Should I consider some sort of overflow / float / relative positioning?

Thanks for your help. I can send you the files if you want to take a look at it.

- V

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You need to stop the margin

You need to stop the margin collapsing. Put some padding-bottom (or border-bottom) on #content-outer.

maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

doesn't work

Hello Chris,

Thanks again for trying to help.. but it doesn't seem to be working for me. I am assuming I am doing something wrong here. I am including a simple html file that replicates what I am trying to do on the web site. It simply consists of the two divs that I am trying to use to create this effect. Can you please take a look at this code and let me know how I can change it such that the bottom of the inner frame is sufficiently outside the outer frame so that the outer frame doesn't show up from underneath?

Untitled Document

I appreciate all your advice and support.
Thanks,
V

AttachmentSize
trial.txt 812 bytes
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

That isn't so good for me.

That isn't so good for me. I load your original page into Firefox. Using Firebug I edit the CSS to put in the extra attributes and observe the result. These are my additions ...

#content-outer {
margin-bottom: 100px;
padding-bottom: 1px;
}
#content {
margin-bottom: -54px;
}

which worked fine for me in Firefox 2. (Sorry I missed out the padding on my first reply, I had added borders to see the extent of the two elements and track what I was doing to the elements. I didn't realise the border-bottom was preventing margin collapse).

Your cut-down example has negative margins on both elements, which isn't my suggestion. The essence of my solution is using negative margin-bottom to move the bottom edge of the inner element outside the boundaries of its parent. The changes to the outer element are simply to deal with normal page behaviours - add margin to make space and padding to deal with collapsing margins.

maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

still doesn't work

Chris,

I am sorry for being such a pain.. I tried you suggestion above but I still can't seem to get it to work. I am not sure which css file you say using firebug because there are conditional css statements in the template.

I am attaching the trial file again. It has complete references to the background images in question. I am saving it as trial.txt since this forum doesn't allow html files. Please resave it as .html and see what I mean. If we can get this trial file to work, I can get the template file to work.

Thanks a lot for your help. I REALLY appreciate it. Smile

- V

AttachmentSize
trial.txt 828 bytes
Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 39 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

maddunr, Here's what I've

maddunr,

Here's what I've done:

Untitled Document


About Product

Inspiration behind the designs... “Designing the next generation of vintage.” The inspirations for the creations come from classic cars, cool cocktails and fabulous cultural icons. The designs pay homage to the best in pop culture. Every handbag has a story about the inspiration and the kind of Gal that would carry it. “While designing, I think about the type of girl that would like the particular inspiration and think of a story that represents her personality. Then I make sure the handbag or item is something she would like to carry. ” Every detail from this inspiration is considered & comes to life in the design. For example, the color of the handbag matching the color of a cocktail, or the lines of the bag matching the lines of a car it is honoring.


Product Details



  • Attention to classic standards of quality.

  • Built to last 50 years, like vintage was.

  • All items Handcrafted in USA.

  • Only highest grade of leather & fabric used.

  • Only the finest in hardware used. All made in USA. Except when better quality can be imported from Italy.

  • All items have custom charms & hardware made by Eldorado Club Int.

  • As much effort goes into fabulous linings as does the outside.

  • Each handbag has a silver number plate for authenticity & collect ability value.

  • All handbags have a pink & black “hand made in USA” label inside as well as the logo label.

  • Most bags are fully padded inside, where suits design.

  • Most bags come with lined zipper pouch with sterling silver charm, where suits design.

  • All bags come with a drawstring linen dust bags for careful storage.

I zero'd out margin and padding on most elements to avoid any spacing surprises. I set the width and left and right margin on the inner div to ensure it was centered. Then I used padding on the inner div to keep text from overflowing onto the background image.

Also, notice the background color on the body, and the new content_bottom image I've posted. Putting some kind of background on it, instead of leaving it transparent is the only way I know to 'knock out' the very long background image on the outer div.

It looks like you've got a very tricky composition to build from. You may consider using .png images with alpha transparencies to achieve the smooth edges that .gifs won't give you. But beware that IE6 doesn't play nice with alpha transparencies.

AttachmentSize
content_bottom2.gif 9.58 KB

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

true.. but

Katie,

Thanks a lot for looking at my problem here and for offering a solution. However, if you look at the link I posted originally, the graphic designer not only has a patterned background (which would be hard to match with content_bottom2.gif), there is also gradation in that background - which necessitates the transparency with both gif images concerned and hence the bottom of the long gif showing through.

So, even if I knock out the gradation on the background, the repeating pattern will be difficult to match because I have no idea how long the content will be. The only way I see this working is if the long background ends before the transparent area of the bottom gif begins.

Any suggestions?
-V

PS: Thanks for the suggestion for smooth edges. These images are simply test images with no matting.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

That last example looks fine

That last example looks fine to me. What browser is causing you problems?

maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

which last one?

Chris,

If you mean Katie's example, yes, it will look right because it uses a solid background to block out the outer div background (the long one). But in my example, my background has transparency because the background of the div behind that has a pattern + gradient background. So, the outer div background peeps through the bottom of the inner div.

I have asked the graphic designer to redesign the template based on all the findings in this thread. Ideally, the bottom part of the ornate frame will have to be flat horizontal.

- V

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I meant your example.

I meant your example.

AttachmentSize
Picture 1.png 46.49 KB
maddunr
Offline
newbie
Last seen: 14 years 34 weeks ago
Timezone: GMT-8
Joined: 2007-12-09
Posts: 7
Points: 0

:) I swear I didn't see

Smile :) Smile I swear I didn't see that last night!! Must have been a cache issue on my machine. Thank you so much for helping me solve this problem.

- V