Jump to content

YtAnd

Member
  • Posts

    9
  • Joined

  • Last visited

Everything posted by YtAnd

  1. My issue is laid out here. The top and bottom of this picture frame box are images in the html. The center is a repeating background image that expands with the text. It looks okay in Firefox, but there is a space between these boxes in IE. Thoughts appreciated!
  2. Hello there, I have designed a site, My link. If you have Internet Explorer 7 installed natively on your machine, please take a look at the home page and tell me if the slideshow works. Here's why I ask: I have a virtual computer, IE 7 with XP, installed on my computer. The whole index page looks correct but the slideshow is just a blank box. I also use IETester. According to that version of IE 7, the slideshow does work. So I'm really confused! Thanks in advance!
  3. 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! ***************
  4. 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.
  5. 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?
  6. Wow, I'm really impressed. I stuck with the z-index method because that makes the most sense to me right now, but will study the "normal image" strategy too. I'm so grateful for your help, Wickham. Happy holidays!
  7. Okay, I updated those issues on the page (making the z-index plain old "55") and the problem still stands. Any other ideas?
  8. The site I am building is at http://tiny.cc/vbw71. My problem: The text box is covering up the bottom of the flower image. There are two header images: headerA which is the real header, and header B, which is the problem. Header B contains the bottom of the flower image and actually some of it is showing. It is a background image on the div called "forHeaderB" that I made just for that reason. More specifically: If I put a bunch of s in the code between "forHeaderB" and the text box, the rest of the image shows. So I figure its back there somewhere. I tried to set the Z-index of the "forHeaderB" div to 55 and everything else to 0, but it's still hiding back there. Any thoughts? I am floating the nav to the left and the content to the right, so would rather not get into absolute positioning unless absolutely necessary. (I tried creating a box with a transparent top and the cut-off part DOES show through, but it's just a CSS nightmare because all the rest of the boxes' tops will do the same thing and be more obvious.)
×
×
  • Create New...