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
    Jan 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS position attached to bottom of another css box

    Brief: I want a graphic's position to be at the bottom of a list that is controlled by another class, but has the height tag of "auto" so it's different so I can't set a static position for the graphic.

    Ok, so I have this great setup where I list all my games and using CSS it's placed near the right of my screen and mid-way down. The size is like 500px wide and the height is auto so I can make it as long as it needs to be. Now I have a background that is two white stripes down the outside (500px wide to match the list's width). So far so good, I can list as much or as little as I want and the sides are always giong to be there! Now I have an image at the top of my list that is a horizontal bar to make the top of my list. At the bottom

    I want to have a shape like this:
    \________| (notice the angle).

    But with my background being the two vertical lines:
    | blah blah | .

    I get this when I put the image at the bottom of the list (it's still inside my tags so it's positioned by the list's class):
    |\_______|

    I want the area left of the angle to be transparent to show off the background of the whole page. But the list's background has a dark gray between the two bars so it doesn't work.

    so how do I make the bottom graphic's( \_____| ) position be wherever the list ends (the list is on auto so it'll change), or is there another way to do this?

    Look...
    Right:


    Wrong:

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Post a link or the code, the images showing what you've getting vs what you want are ok but unless we can see what you've got already we can't start to help you.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    on the base element use the following:

    position: relative;
    top: <the height of the image>
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)


  •  

    Posting Permissions

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