YtAnd Posted December 22, 2009 Report Share Posted December 22, 2009 Hello again. I hoped I wouldn't have to write again so soon, but ah, well. My site is at http://tiny.cc/vbw71. The problem I'm having is with the navigation blocks on the left. I am trying to adapt Dan Cederholm's "indestructible boxes" method as described in "Bulletproof Web Design" to accommodate transparent top and bottom edges. What I wanted to happen: I have an image of a torn piece of paper. I want to put all the nav text ("About me: Click here to find out about me", etc.) inside the paper. The box/torn paper should expand and contract based on how much text I have in there. The method I used: I divided the graphic in half to make "papertop.gif" and "paperbottom.gif". I attached paperbottom as the background of the entire (with class "navbox"), and attached it to the bottom left.I attached papertop as the background of the h3 within the , attached to the top left. The problem: The ragged line that you see going through "About me" is actually the top of the "papertop" image. Above that line, the top of "paperbottom" is peeking through. What I tried: 1) Replacing "paperbottom" with the entire paper image That works if the graphic is expanded out to its full size. But if not, the entire paper image keeps moving up, leading to the same problem. 2) Flipping the images 3) Playing with padding 4) I thought about just making the background of "papertop" white instead of transparent, so maybe "paperbottom wouldn't show through. But it would look obvious for nav blocks further down on the (blue gradient) page. By the way: For an example, I successfully did this in another part of the site, for the content box. But the background wasn't transparent. Can anyone help? Quote Link to comment Share on other sites More sharing options...
virtual Posted December 22, 2009 Report Share Posted December 22, 2009 If I have understood correctly, I got your torn top image to show in Firefox by inverting the background images and adding some padding. I changed the following in .navbox h3: background:transparent url(../images/paperbottom.gif) no-repeat scroll left bottom; padding:10px 0 50px 10px; and this in .navbox background:transparent url(../images/papertop.gif) no-repeat scroll left top; padding:2px 0 0; Quote Link to comment Share on other sites More sharing options...
YtAnd Posted December 22, 2009 Author Report Share Posted December 22, 2009 (edited) Thanks, virtual, for the help. Now I have something to work with, but am still wondering how to get the box like I envisioned. To make this easier, you will now link to the original page at the same place. But here's another link to click to get to a page with the changes "Virtual" submitted: http://tinyurl.com/yzr3wxp Here are some remaining issues: * When I switch the "About Us" text from H3 to H1, the box breaks. Actually, H2 works fine too so I could stick with that. But why is that happening when there is a very large "paperbottom" image to work with? *** How in the world can I get the smaller title underneath ("Find out who I am here") to be inside the box? Ideally, I'd like the padding to pad the text, not just move background images around. With the "Bulletproof" boxes, there is plenty of background image to go around, and the text pushes the box, revealing more or less of the image. Though the original wasn't working as planned, it made sense to me to put "paperbottom" at the bottom left of the entire div. Then the words inside the should have always stayed within the "paperbottom" image, right? (But they didn't -- arg!) So far, I can have H2 or H3 information in the box, but no smaller titles underneath. I may end up just going with that, but it is a puzzle I'd like to figure out to get it how I really wanted, if possible. Edited December 22, 2009 by YtAnd Quote Link to comment Share on other sites More sharing options...
virtual Posted December 23, 2009 Report Share Posted December 23, 2009 Ok, I have changed the following on your version http://tiny.cc/vbw71 to make the ul li tag sit within the image. I have not tried it in IE so you might want to check that. Remove the background image from the .navbox h3 tag and add padding:0 10px; (to position your H tag) On the #nav tag add background:transparent url(../images/papertop.gif) no-repeat scroll 0 0; On .navbox add background:transparent url(../images/paperbottom.gif) repeat-y scroll 0 0; padding-bottom:50px; Quote Link to comment Share on other sites More sharing options...
YtAnd Posted December 28, 2009 Author Report Share Posted December 28, 2009 Virtual, thanks again for your help with this. I hope I can get to your level someday! I took the new things you suggested and added some to it to create something I'm really happy with. This means I now have 4 URLs. Sorry everyone. But I'll leave them up for a while for people to look at. THE URLs: -- My original submission: http://tiny.cc/nkzFM -- Virtual's 1st changes: (the same URL) http://tinyurl.com/yzr3wxp -- Virtual's 2nd changes: http://tiny.cc/kZ8re -- My latest version, which I'm very happy with: http://tiny.cc/vbw71 What I like about Virtual's 2nd changes: Placing both of the background images at the top left (0,0) of their containing means there are no more issues with overlapping transparency. Pure genius! Also, I didn't think of repeating an image vertically to fill in the space. Very nice! Lastly, switching the the background images were inside of meant the words were inside of the image as I wanted! My one lasting issue was that I wanted the torn paper images to contract or expand depending on how much text was in the middle. It took way too long, but I figured it out. My final version: I went with Virtual's 2nd changes, with slight changes: The top part of the image is aligned in its own div top, left. I added another , "navrepeat", under that div, also aligned top left. It has a new image of only the middle section, which repeats-y. For the bottom, I created yet another called "shortBot" (as in short bottom), and aligned the bottom image bottom left. But first I shortened the image of the bottom of the paper to just what was needed and called it "paperShortBot." Final thoughts: *********** I am happy with this. But there are a LOT of here. If anyone gets a bright idea about how to trim some s, feel free to post something here! *************** Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 28, 2009 Report Share Posted December 28, 2009 BTW, you can remove the "#header" div from your page if you give its background to the #content div, and place it top right. That would be one less div. Also, you should be able to do your left nav like this: Content inside... Use the repeating background on this div, and add margins/padding to move the text into the exact position you want it. You don't really need to make those top/bottom images background images, like you are doing currently -- you could just use regular tags and make the code a lot cleaner. Quote Link to comment Share on other sites More sharing options...
YtAnd Posted December 29, 2009 Author Report Share Posted December 29, 2009 (edited) Wow - that looks a lot less complicated. Thanks! Edited December 29, 2009 by YtAnd Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.