SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Problems making the content area have a dynamic height

    Hi guys,

    I'm currently trying to turn this into XHTML/CSS:



    The problem is that it needs to have a dynamic height, so I've no idea how to approach the problem.

    The first step I'd say would be to create an image along the entire top that's about 5px high for the top of the box, and then a 1px high image for a repeating background.

    The problem I've got now is with the bottom area, and how to get text over it without having to create an entirely separate div and put the content between the two (which would be pretty awful).

    Thanks in advance for any advice, I'm really stuck on this!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd personally do it the way you're suggesting.

    Code:
    <div id="container">
     <span class="top"></span>
     <p>Content here</p>
     </span class="bottom"></span>
    </div>
    Obviously the paragraphs would be replaced by your left and right columns but that's the easiest way I'd create the image above using the method you've described.

    I tend to use spans if it's purely for presentational purposes though so that it's easier to see where DIVisions in the code are supposed to be.

    Hope that helps?

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's brilliant thank you! :-)

    My only problem at the moment is the content bit overlapping the bottom area. It's hard to explain it, but the gradient is 100px for example, so that needs to go into the 'bottom' area of the div, yet also needs to overlap the <p>content</p> if that makes any sort of sense?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, in that case you'll probably need an extra div/span in there to achieve the effect you're after.

    Code:
    <div id="container">
      <span class="content">
        <span class="top"></span>
        <p>Content here</p>
        </span class="bottom"></span>
      </span>
    </div>
    You could then apply the repeating background to the div and then apply the gradient background to the content span and position it at the bottom.

    It's not ideal but the best solution I can think of until there's wider support for CSS3 and multiple background images

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Damn that CSS3, I wish it'd hurry up, multiple background images would make things so much easier! I could do all of this with one div pretty much then :P

    Huge thanks for the reply though, it's a nice solution, but I think I'll just ditch the outerglow thing and have a solid 1px border and then an image background for the gradient. Or something.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Dave meant a DIV not a SPAN as a wrapper, since spans cannot contain P elements.


Bookmarks

Posting Permissions

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