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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Position problem

    I'm trying to set up a page using CSS positioning. Not haveing much success.
    I want to have the elements positioned the same in 800X600 as 1024X768 resolution. I've used percentages for the size of the elements and that works fine, but I was wondering if you can use percentages for relative positioning. Obviously using pixels won't work. I've tried. Does anyone know how to position my elements relative to the screen size, or if anyone can help me with my problem it would be much appreciated.
    Here's my code to date;
    Code:
    <html>
    <head><title> test</title>
    <style>
    #first{
    width:20%;
    height:15%;
    background:red;
    position:relative;
    top:20px;
    left:80px;
    }
    #second{
    width:50%;
    height:40%;
    background:green;
    position:relative;
    top:-30px;
    left:150px;
    z-index:1;
    
    }
    #third{
    width:20%;
    height:15%;
    background:blue;
    position:relative;
    left:530px;
    top:-70px
    }
    html{
    background:yellow;
    }
    
    </style>
    </head>
    <body scroll="auto">
    <div id = "first"> first</div>
    <div id = "second">second</div>
    <div id = "third">third</div>
    </body>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    sure u can use percentages for relative positioning but what exactly are you trying to do with your page, if you could clarify more maybe we can give a better solution

  • #3
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm trying to keep the same relative positioning of my elements no matter what resolution the page is viewed with. Hmm try to clarify. I want the page to look the same no matter what size it's viewed. All the elements should resize as the screen resizes and stay in the same position relative to each other. Sorry if that's not clear but I can't think of how else to explain it. If you look at the code in 1024 X 768 resolution and then at 800X 600 you will see what I mean, I hope!!

  • #4
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it Thanks for the help.
    Code:
    <html>
    <head><title> test</title>
    <style>
    #first{
    width:20%;
    height:15%;
    background:red;
    position:relative;
    top:10%;
    left:20%;
    }
    #second{
    width:50%;
    height:40%;
    background:green;
    position:relative;
    top:5%;
    left:25%;
    z-index:1;
    
    }
    #third{
    width:20%;
    height:15%;
    background:blue;
    position:relative;
    left:60%;
    top:0%
    }
    html{
    background:yellow;
    }
    
    </style>
    </head>
    <body scroll="auto">
    <div id = "first"> first</div>
    <div id = "second">second</div>
    <div id = "third">third</div>
    </body>
    Although I'm having trouble understanding how relative positioning works. Somewtimes it looks like it relative to where it should be relative to the preceding element, and sometimes it's relative to the page itself it seems. Oh well as long as it works.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Relative positioning puts the element relative to where it would have normally gone in the page flow. So if it would have normally been 10px below something, and you give it "position: relative; top: 2px" then it moves 12px below the element. It's all about the flow.

    You can also combine relative/absolute positioning... let's say you have a containing element and an element inside of it. If you give the containing element "position: relative" and the inside element "position: absolute; bottom: 0" then the inside element is positioned absolutely at the bottom of its container.

    Hope this helps,

  • #6
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the clarification. I seem to be getting it.
    Last edited by glenmac; 02-22-2005 at 03:30 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
    •