1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Z-Index Help? Overlapping Background on Background

Discussion in 'CSS' started by jams44, Jan 6, 2008.

0
  1. #1
    Hey Everyone,

    So I am trying to skin Wordpress to look like this - radiantstatic.com/champs/champs_layout.jpg(don't mind the low quality images, they are being changed during finalization) - . Anyways what I want to do is take this - radiantstatic.com/champs/images/bg_wave.jpg and insert it directly under the top nav bar without effecting any other elements below it , so it looks just like as if it were part of the content background. Does anyone have any idea how I could do this? Any help would be great.

    The blog is radiantstatic.com/champs

    notice how the post content is pushed down and the right navbar border is chopped off.
     
    jams44, Jan 6, 2008 IP
  2. t.sealey

    t.sealey Peon

    Messages:
    110
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    z-index:-1 for whatever you want underneath

    position:absolute the div or whatever is holding the background element.

    PM me I can explain better.
     
    t.sealey, Jan 7, 2008 IP
  3. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    PMed you, thanks ahead of time. I'll list the result afterwords!
     
    jams44, Jan 7, 2008 IP
  4. t.sealey

    t.sealey Peon

    Messages:
    110
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Championship Swimmer text looks like a padding issue.
    You also need to add some padding above the calender.
    Try changing the Content Width acouple of pixels and see if anything changes with the bar being cut off
     
    t.sealey, Jan 7, 2008 IP
  5. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    But I know its the bg_wave.jpg image. It needs to go one depth lower but I can't seem to get it right. I t may not be in the right place either. If you could help me try and position it correctly that would be awesome!
     
    jams44, Jan 7, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Since negative z-indeces mean nothing in browsers like FF, it's better to use 1 for whichever you want the lowest thing to be and higher numbers for the stuff on top.

    FF and the Gecko family try to follow the CSS standards with negative z's by sticking the z'd element behind the <body> (hiding it).

    Know that you can set z-indeces simply by document flow too. For instance, stuff that's static (no position is mentioned in the CSS) have a default z-index of 0. Stuff that's positioned relatively sit above that. Floats and absolutlye positioned stuff generally sits above those.

    Looking at your site in FF it looks like the JPG, so maybe you've solved this. Usually, you wouldn't set something like the wave image as an image in the HTML. You'd set it as a background on the element that comes after the menu (like the main content div or something). Background images sit lowest within an element-- they'd only cover up another element if the container which it's a background image in also covers it (if the main white body part somehow covered the menu as a whole). Letting stuff sit in normal document flow should look right automatically.
     
    Stomme poes, Jan 8, 2008 IP
  7. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hey thanks for the post, the wave is still not properly positioned, I merely found a crappy work around which I'd like to fix. Right now it is behind the navbar but not the content, that is why the content is pushed down so low. ANyway to fix that?
     
    jams44, Jan 12, 2008 IP
  8. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Still looking for some help. So here is my issue: http://radiantstatic.com/champs

    Notice the bg_wave.jpg image is not actually "behind" the content div, instead it is pushing it down. Is there anyway I can prevent it from pushing it down, in terms of z-index? This is the last part of the layout and it is really irking me, any help would be great.

    Thanks,
    Joe
     
    jams44, Jan 13, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Meh-- I'm not sitting behind my bug-busting machine, I'm at home instead with Iceweasel : ( so i don't have my t00lz.

    But I see your content pushed down. So tell me, why is that img sitting in the html?

    It's clearly decoration. The box holding that text, the biggest one, should have that image sitting as a background image instead. Right now that image is in the HTML and that means it has a height and a width that the other content must respect. Background images cannot affect anyone. Everyone sits on them. They have no power : )

    I'd do something like,
    header
    --header stuff
    /header
    menu
    mainpage with wave as background image.

    Content on main page is given a little bit of distance from menu with a bit of top padding.

    I will try to check back and see. I think if you move the image it might solve this.
     
    Stomme poes, Jan 15, 2008 IP
  10. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I understand that the image is just currently "there". But like I said before, I CANNOT add it as a background image because there is already an image. This is a really sucky problem and I don't really have any way around it. Z-Index as I am told is the ONLY way to fix this. If anyone could help me using z-index that would be great.
     
    jams44, Jan 15, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I hope I have some time to get a crack at it. There are always ways of getting an image in the background : )

    I myself am having some trouble with overlapping floats (only IE6 of course) and playing with z-index isn't really helping me. It's a limited tool.
     
    Stomme poes, Jan 15, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Still working on it, only get like 5 minutes here and there... but what I'm doing is stripping the page to the basic boxes and then sticking the images in. I'm actually changing some of the positioning since, being a workpress theme, it of course has multiple repeats of the same CSS in several areas, so changing one doesn't help when it's also in three other parts of the page. No wonder these things are so hard to work with. I'm chucking it.

    I'm also doing a few other things just so you can see them, like sticking some readable text under that header. You want teh googlies to see this page and help spread it to people searching for non-profit swimming thingies?? Let's give them something to read.

    I'll post it here when I'm done, explain what I did, and let you do what you want with it.

    -Cheers,
    pOes
     
    Stomme poes, Jan 16, 2008 IP
  13. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thanks a bunch. You don't know how much I appreciate this!
     
    jams44, Jan 16, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    This is what I have-- the middle stuff is NOT CSS'd so it doesn't look like your page. I only played really with the header, the menu, the main page's background and borders, and footer.

    First, since there should be text for the name of the page for everyone-- googlie-bots, people on dial-up surfing without images for faster loading (and the image in the header loads slow-- could be optimised but you said you'd do that later), blind people using screen readers or anyone using text browsers for whatever reason. So I put the text in that I saw and stuck the header on top of that. It's a really useful trick.

    Second, I seperated the header header from the menu-- they are really two seperate parts anyway. So I cut the images apart and then stuck them back together. The menu is now holding its own background image.

    Now the menu's got an issue: you've got a lot of these little words called :link: but when you put actual words in there they're likely to be longer than :link: yeah? The problem with both our menus is that either text-enlargement more than once or more menu selections needed means the menu will increase, drop down, and push down on the main page part below (actually moving it 7px-worth of padding to the left because that's what's holding the last menu item a bit away from the edge). I added a z-index though I dunno that it's needed, so at least the menu items stay sitting on top and people can still click on them.
    Second issue with the menu is, in order for it to act more like yours on text-enlarge and do less damage, the items are floated right. So, you've got to be a bit careful on your item order-- write them backwards in the source. Like, item one in the source will be the furthest right (and look like the last item). Not a huge deal, but otherwise the first time you rebuild your menu you'll be like, wtf??

    Third, you said the main page content was holding an image already. You're right, it was, but why? I can't figure it out, except that the header is 833px wide and the rest of the page is 800px-- so it looks like they filled the extra space on the sides with an image. What a waste-- I added side borders mimicking the image and the normal background image from the body simply shows through. No biggie, so now the main page content can hold an image... tada! The wave. I then added like 30px top padding to keep all content below most of it.

    I kept the float set-up they had there, with the narrowcolumn (what a dumb name, if it's not as narrow as the sidebar!!) floating left and the sidebar simply sitting on the right having a huge left margin. I think they did it that way to have the sidebar come later in the source. Good idea. Main page content has overflow:hidden to keep the white background going longer than the sidebar (otherwise, the narrowcolumn is just a float hanging out and doesn't bring the white with it).

    Footer clears the left float-- in the original it was clearing in two directions and maybe that's still needed cause I didn't look at what all is floated in the content in the middle, so you'll prolly need to change that. The text is set up a little bit different too-- I forget what they did, I just used my normal tricks to make it look like yours.

    I don't think I saw an h1 in your page which is good, cause I used the header text as an h1. So your H2 stays an h2 and the rest is just sitting there.

    I looked at all these in IE6/IE7, FF2, Opera 9+, and Safari on Windows, then FF1.5/Iceweasel(FF2), Opera 9+, and Konqueror on Linux. They seem the same, but it's a static page. I know nothing of all this fancy bloggitty-blog-blog-blog with a dog-blog software stuff, so I don't know how they'll behave when they change. I may have also inadvertantly changed something that the bloggitty-blog-blog software uses. I don't think so, but maybe. Another reason why I tried to leave that stuff alone, and just changed the tabbing. I tab in 2's-- every 2 spaces inwards means it's inside whatever's 2-spaces further out. The other guys went a little wild with the tab and I couldn't see easily what was going on.

    http://stommepoes.nl/Joe/joeswim.html

    CSS is internal at the top. You will have to integrate the two, but as I mostly just changed the outside stuff, I think it should be okay. Biggest internal change is instead of a div or whatever it was with a class of narrowcolumn, it's now a div with that id. So that .narrowcolumn might have been really wrapped around each comment box I forget... so then just make another div and you can prolly even give it the same name if it's a class.

    Hope this helps. Good luck.
     
    Stomme poes, Jan 17, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Uh, and what I wrote is validated HTML-wise but the table crapola for the Calendar isn't a million miles near. Also not very accessible to screenreaders, uses a nested table so the month name can have a little arrow on each side (that could've been a table row or header), and has inline CSS and Javacrap polluting the inside.

    Just so you know; it's up to you if you want to do anything about that. It's not any worse than on any other bloggitty blog blog.
     
    Stomme poes, Jan 17, 2008 IP
  16. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    That's perfect, I never though of just ditching that one background. One more question, any idea why it doesn't align in FF but it does in IE?
     
    jams44, Jan 17, 2008 IP
  17. jams44

    jams44 Peon

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Another question, sorry about this. Well Wordpress (the blog script I'm using) gets really nutty when you start to take stuff out. What what I need to modify to remove the back_bg.jpg out of the content area and replace it with the bordered outline with the wave bg? I will definitely use your menu idea, its great.
     
    jams44, Jan 17, 2008 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Show me a screen shot of FF, because it looked fine on mine... (I think I forgot to check it in smaller screen resolutions so it could be that... OR your default font size is a little bigger, and as I said a larger font size will bump that menu down and push a bit to the left the main content page).

    Yeah there is a problem with screwing with turdpress or any of those... I can't remember who was holding that bg_image but in your own code you can simply remove it. The thing is, I changed stuff so I could do that. The #page wrapping the whole site is 833px wide. That's so the header can have that circle sticking out. But the rest of the content is really only 800px wide. They wrote that as also 833px and then used an image to make it look thinner.

    One problem you'll have in changing this over is that the page width is mentioned like three times, so just changing it once does you no good : ( This is why I hate sloppy CSS like what comes in templates-- almost half of your CSS is either repeating itself or is for elements you don't even HAVE.

    You could try to make minimal changes to the HTML where the names of #page, #header, #topnavigation, #content, and #narrowcolumn are changed to match mine... then remove any mentions of those in your CSS and replace with mine. The CSS mentioning the stuff inside could stay the same. #topnavigation and #content need to be explicitly set to 800px width and margin: 0 auto to center them underneath the header. #page also may not have the background colour (then you won't see the background showing through the sides of #content/#narrowcolumn), so you have to remove that in the several places it shows up, and put it instead on the #content div (that's probably your main problem in changing the width and removing bg_img... you're still getting white, right?)

    But, post a screenshot of FF and I'll see if I can tell what's causing it.

    *Edit the side borders I added are merely 1px solid #000; (thin black lines)... the colours are, like I said, merely the background showing.
     
    Stomme poes, Jan 18, 2008 IP