Grow your CSS skills. Land your dream job.

Positioning Issue

  • # November 4, 2010 at 8:49 pm

    Hey guys,

    I am new to the forum, and hope to be a long-time member here. I love CSS and will hopefully be able to help some people as well, but right now I am stumped.

    I have a website I am working on, you can view the progress here:
    http://cintrexmedia.com/clients/dirks/

    I can’t get the content area to go above my #content-top.
    If I position it relative and try to get it up there, then it just goes behind the White part, so it is hidden.

    If I position it absolute and try to bring it down to the content area, that works but when I have a lot of content it won’t expand down it goes right over it, ontop of the background image.

    If I put #content-top INSIDE of #content then it works but my content background image will be at the top, so the rounded corner won’t be transparent, it will have the bottom sidebar image behind it.

    I hope this makes sense. But anyway, I’ve tried many things and I can’t seem to figure it out. Does anyone have any suggestions?

    It’s supposed to look like this:
    http://autoshopgarage.com/dirksautomotive/images/mockup.jpg

    Thanks so much :-)

    # November 4, 2010 at 9:05 pm

    try adding
    top: -150px;
    to the stylesheet in the rule for #left-content, then tweak the -150px to get it exactly where you want.

    # November 4, 2010 at 9:13 pm

    It just turns white, since #content-top is overriding it. I tried z-index, but nothing will work.

    # November 4, 2010 at 9:27 pm

    I tried it in firefox and was able to replicate the problem, and it finally went away if I did the negative top margin and moved the #content-top div inside the #content div, rather than having it be a sibling of #content. Does doing that work on your end?

    # November 4, 2010 at 9:39 pm

    It’s looking good, but the #content background is going over the #content-top transparent background, so the rounded corner doesn’t show the main background anymore.

    Anything we can do about that?

    Link: http://cintrexmedia.com/clients/dirks/index.html

    # November 4, 2010 at 10:18 pm

    Hm, not making much progress on my end. Anyone else having any luck?

    # November 5, 2010 at 10:45 am

    Thanks for trying. It’s really killing me :- I need this done for a client, lol.

    # November 5, 2010 at 12:02 pm

    You cannot put that background on the content wrapper, it is showing through because you have a png image over it with a transparent corner. You will have to either use the grey body background to fill in that corner on the content-top bg image, or put in an extra div and have the content-wrapper bg image start further down the page.

    # November 5, 2010 at 2:33 pm

    Virtual,

    Here is where I started from:
    http://cintrexmedia.com/clients/dirks/

    Refresh / Clear Cache. So right here this is how everything is supposed to look, except the text moved up to the top, but it’s difficult, I can’t just position the text how I want it.

    Do you have any ideas, now looking at this version?

    Thanks!

    # November 5, 2010 at 8:39 pm

    To position the text how you want it you will have to put some of it in that top div. Would it look so bad if only the left side moved up, it would be easier to do. If you do that you will have to modify the content-top p and h1 tags to fit.

    Either that or change the way you have cut up the background images. You could also have the bg images separate vertically for left and right content, but you will still have a problem on the right side because that corner is so big.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".