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
    Buz
    Buz is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container Positioning

    Right, I'm new to CSS and had a small question regarding the positioning stuff. If I make a container and position it as Absolute, and lets say 30px from the left, would it show up 30px from the left on a bigger monitor< Meaning a larger explorer screen. This is the code I have currently:

    Code:
    .latestnews{
    	position: absolute;
    	left: 5px;
    	top: 170px;
    	background-color: #ececec;
    	padding: 10px;
    	width: 600px
    }
    Also, when I do that, it kind of puts my footer off, since all the content is now in a <div> so I have to manually position the header downwards. Any suggestions on how to fix that?

  • #2
    New Coder
    Join Date
    Jun 2007
    Location
    Chico, CA
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts
    yes it should show up 30px from the left no matter what...(make sure you do a css reset first - *{margin:0;padding:0;})

    a better way to do absolute positioning is to define a relative positioned box, then define absolute items within it. that way it will not effect the rest of the page's positioning.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <title>|</title>
    <style>
    .news{
       position:relative;
       height:200px
       width:600px;
       }
    .latestnews{
       position: absolute;
       left: 5px;
       top: 170px;
       background-color: #ececec;
       padding: 10px;
       width: 600px
    }
    
    </style>
    </head>
    <body>
    <div class="news">
    <div class="latestnews">testtestetsteslorum ismpump</div>
    </div>
    </body>
    </html>
    Last edited by dancrew32; 08-04-2007 at 08:42 PM.

  • #3
    Buz
    Buz is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's exactly what I was about to do mate, glad to know I'm on the right track

    Cheers mate, thanks alot.

    ~Buz

    EDIT: Any suggestions for the header. I'm quite annoyed by setting it manually everytime I add more news to the page.
    Last edited by Buz; 08-04-2007 at 08:53 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
    •