Sun, 2007-12-09 02:47
Ok. It's "my" worst nightmare because I am not that great with CSS.. and I am hoping it's not "your" worst nightmare 
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?
Thanks in advance,
-V
| Attachment | Size |
|---|---|
| content_bottom.gif | 10.48 KB |
| content_top2.gif | 35.03 KB |
Sun, 2007-12-09 12:27
#1
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.
Sun, 2007-12-09 20:31
#2
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 . 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
Sun, 2007-12-09 21:36
#3
You need to stop the margin
You need to stop the margin collapsing. Put some padding-bottom (or border-bottom) on #content-outer.
Sun, 2007-12-09 23:41
#4
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
| Attachment | Size |
|---|---|
| trial.txt | 812 bytes |
Mon, 2007-12-10 01:32
#5
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.
Mon, 2007-12-10 01:55
#6
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.
- V
| Attachment | Size |
|---|---|
| trial.txt | 828 bytes |
Mon, 2007-12-10 01:56
#7
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.
| Attachment | Size |
|---|---|
| content_bottom2.gif | 9.58 KB |
Mon, 2007-12-10 04:31
#8
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.
Mon, 2007-12-10 10:38
#9
That last example looks fine
That last example looks fine to me. What browser is causing you problems?
Mon, 2007-12-10 17:09
#10
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
Mon, 2007-12-10 19:44
#11
I meant your example.
I meant your example.
| Attachment | Size |
|---|---|
| Picture 1.png | 46.49 KB |
Mon, 2007-12-10 20:47
#12
:) I swear I didn't see
:) 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