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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS div Positioning Issues

    I found the solution, but will check this thread and take advice if you have any to offer, thanks

    Hey all, I found your forum through a google search while looking for help on my project.

    I'm more of a server side coder, so my CSS is rusty at best, and I seem to be having problems. Here's the situation:

    I needed to have a ~15% opaque 'content box', I did this by using a .png background image. I was just going to make a 1px image and repeat it along the y axis to go easy on loading times, but an image with a height of 1000px was only 6.62kb, besides if I did it that way I could keep my shadowed borders.

    Aside from that this seems to be the only way it has come close to properly working. I was considering making a ~5px image to put at the top of the <div> to cover the shadow for the top and top edges, then a 1px repeating background to shave some loading time, but either way I still don't think it will work with the code I have currently.

    My structure is as such ( View Here: http://www.dreamlab.nu/r3ign ):

    Body > Wrapper > Logo + Nav + Content Box > Content Box Modules

    The Content Box is the ~15% opaque box, and it will not size properly when I place content inside of it. When I set the Content Box height to 100% it extends ridiculously far. If you've followed the link I posted above, the height on the content box is currently set to 30%.

    If you need files you should be able to access them all via my above working directory ( http://www.dreamlab.nu/r3ign ).

    Images in /images
    global.css in main directory
    index.php in main directory

    Thank you for your help in advance, I'm sorry for the length of my post, but I tend to over explain everything.

    EDIT: Also I added position:absolute; to the Content Box because it wouldn't budge past ~5px height unless it was being filled with text only. Perhaps I'm not using the function properly.
    EDIT2: After reading w3s's article on CSS positioning, I am indeed using the function incorrectly, since no parent has a position, it is referring to the HTML tag, and will extend forever. I am unsure of how to fix this, and the problem still stands.
    EDIT3: After more in depth reading at w3schools, I discovered position: relative; it seems to work properly now. It's amazing how simple something is when you step back from it for a second. Either way, if you have any suggestions on my code, or see something that's a no-no, please feel free to post, I'm always looking for tips.
    Last edited by 3dfx; 04-21-2011 at 10:09 PM.


 

Posting Permissions

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