Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what's better code?

    Hi, I'm looking for some advice from those who know more about acceptable/accessible coding.

    I've solved a problem in two ways, but not sure which is a safer solution.

    If there's been a recent breakthrough in CSS and we can now have 2 background images in one div (one anchored to the top and one anchored to the bottom) then neither of these are necessary, but if not:

    my page backgrounds are blue at the top, gradiating to white, and have an image at the bottom (usually the white fades into the image to some extent). Obviously, the amount of content in a page varies, so I can't just have a set image for the whole page.

    The top section is in a separate div called "backgroundtop", the white is the background colour of the main div, and the image is a background image in the main div.

    solution 1: "backgroundtop" is within the flow of the main div. Then a "text" div has a relative position "top:-90px;"
    problem: i have a 90px space at the bottom of the page.

    solution 2: "backgroundtop" is separate, absolutely positioned, and I use z-indexes to put it in the right layer.
    problem: the positioning seems to need separate ie6 and ie7 style sheets (container div is centred, but fixed width)
    fear: I worry about absolutely positioned divs popping about the page in future browsers or something.

    Can anyone give me advice?
    I guess the generic question is: which is worse? absolutely positioned divs and z-indexes, or negative relative positioning?

  • #2
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Can't you have 2 divs, one inside the other, with the content inside the inner div....have the outer div as your top gradient & the inner div as your bottom image...this way both divs stretch to fit the content, eg.
    Code:
    <div class="top_grad">
        <div class="bot_img">
            <p>Content in here</p>
        </div>
    </div>
    Does that fix your problem?

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's so much better. I don't have a clue why I didn't do that in the first place - it's so obvious, isn't it?
    Thank you - really appreciate your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •