SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How the...? - A CSS Question

    I am using CSS to make a page. My only problem is that when I switch to another resoultion or shrink the window all my CSS positioned elements go wacky on me. How can I make an image stay in the exact same place regardless of resolution or screen size or how can I get everything to stay positioned correctly with regards to resolution or browser window size? Thanks!

    JRF2k
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard

  2. #2
    SitePoint Zealot lightwithoutheat's Avatar
    Join Date
    Feb 2002
    Location
    Washington DC
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hmm...

    When using CSS for positioning, your page elements shouldn't change their position according to screen resolution, that is, unless you are using percentages somehow along with <div's>.

    I've used CSS2 for a long time and have never ran into this (common?) problem. A sample of your code is pretty much necessary in order for anyone to properly help you.

    Let's see some code,

    J.

  3. #3
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    uh huh, some code would be good

  4. #4
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's the link to the page itself. If you view this in 800x600 everything looks great and is where it should be, but move up to 1024x768 and the menu part invades the box where the main content will go.

    http://www.johnrfloyd.com/testing/testcss.htm


    My style sheet is as follows:

    Code:
    body {position: relative; background: url(ryoko2a.gif) no-repeat fixed; margin: 0; padding: 0;}
    
    
    div#links{position: relative; top: 81px; left:630px; width: 100px; height:700px; z-index:100;}
    
    
    div#links a {display: block;
    text-align: center; padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
    text-decoration: none; color: #FFC; background: #444;
    border-left: 5px solid #505050; }
    
    div#links a:hover {color: #411; background: #AAA; border-left: 5px double white;}
    
    
    div#links a span{display: none;}
    
    
    div#links a:hover span{display: block; position: absolute; top: 180px; left:-8; width:125px;
    padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black;}
    
    
    div#content {position: absolute; top: 26px; left: 200px; right: 120px; color: #BAA; 
    background: #22233F; border: solid 5px #444; }
    How can I get the menu to stay the same place regardless of resolution or screen size? Thanks!

    JRF2k
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard

  5. #5
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget about me :-)
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard

  6. #6
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i havnt tested this but try replacing

    div#links{position: relative; top: 81px; left:630px; width: 100px; height:700px; z-index:100;}

    with
    div#links{position: relative; top: 81px; right 20px; width: 100px; height:700px; z-index:100;}

  7. #7
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for you suggestions. I did that and it puts the menu on the far left now instead of on the right side.

    J.
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard

  8. #8
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed it to right: -989; and that got it to where it needed to be but it won't stay there if I got to 800x600. It keeps moving. Is there a way to make my bordered area static so it will stay the same size and not grow or shrink?

    J.
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard

  9. #9
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm

    div#links{position: absolute; top: 81px; right 20px; width: 100px; height:700px; z-index:100;}

    try that :0)

  10. #10
    SitePoint Zealot
    Join Date
    May 2002
    Location
    USA
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still no go.
    Man can learn nothing except by going from the known to the the unknown. -- Claude Bernard


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
  •