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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image won't position correctly and...

    Bascially, I've got two problems.

    Firstly, my image won't position as absoloute. If I zoom out, my images automatically go out of position.

    Here's my CSS:

    Code:
    body 
    {
    background-image:url('http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif');
    background-color:#CDB79E;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size:800px 500px;
    }
    
    
    
    
    /*Defines the banner wrap along the top of the page */
    
    .topbanner
    {
    width:50px;
    height:44px;
    background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
    }
    And my HTML

    Code:
    <!Doctype HTML>
    <html>
    <head>
    <meta name="description" content="Runevision - Reliving the past, in the present">
    <meta name="keywords" content="RuneVision, Runescape, Private Server, Relive, Old,
    2006, past, website, 317, cache, client, source, play, webclient, forums, Runeserver" />
    <meta http-equiv="content-type" content="text/html;Charset=UTF-8">
    </head>
    <div align="center">
    <body>
    
    <link href="C:\users\elizabeth\Project\CSS\body.css" rel="stylesheet" type="text/css">
    	<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="50" alt="ScrollTop">
    	<img src="" width="800px" height="150" alt="Banner">
    What should I do?

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Um... which image has class name "topbanner" ?
    And what's this <div align="center"> do outside body ?

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Richter View Post
    Um... which image has class name "topbanner" ?
    And what's this <div align="center"> do outside body ?
    That was a mistake, div align should be within the body tags.

    Also, ignore the topbanner class.

    As you can tell, I'm a newb at HTML and CSS.
    Last edited by Jemdt; 06-10-2012 at 12:55 PM.

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    I still not understand what you try to solve, which image won't position as absoloute and which images is out of position ?
    Do you mean background image of body, ScrollTop or Banner ?

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, I should've made this much clearer. You don't actually need most of that code mentioned.

    Ignore the CSS and take a look at the HTML:

    Code:
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="50" alt="ScrollTop">
    Basically, I've tried using the style="position....." tags to try and keep this image in a fixed position. However, whenever I zoom out a significant amount the image moves out of position. I'd like to know how to keep this image (and the banner for that matter) in a fixed position.

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Ok Jemdt, I fix some code and add a shell for help us adjust them easier.

    Css
    Code:
    .Shell { 
    	top:0; left:0; right:0; position:fixed; /*make it fix position*/
    	text-align:center; /*Make it show at center of page*/
    }
    .Shell>img { 
    	width:100%; /*make it stretch, if you don't like this you can change 100% back to 810px*/
    	height:50px;
    }
    Html
    Code:
    <div class="Shell"><img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" alt="ScrollTop"> </div>
    Last edited by Richter; 06-10-2012 at 03:50 PM.

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Richter View Post
    Ok Jemdt, I fix some code and add a shell for help us adjust them easier.

    Css
    Code:
    .Shell { 
    	top:0; left:0; right:0; position:fixed; /*make it fix position*/
    	text-align:center; /*Make it show at center of page*/
    }
    .Shell>img { 
    	width:100%; /*make it stretch, if you don't like this you can change 100% back to 810px*/
    	height:50px;
    }
    Html
    Code:
    <div class="Shell"><img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" alt="ScrollTop"> </div>
    Thanks for helping, but I've still got the same problem. I'd like the whole page to simply get smaller on the page (like the background does) not stretch out. For example, if you zoom out on this site, the resolution changes, but the site containers do not change in shape.

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    No they not, because of you still not config css of your page to be responsive.
    I suggest to find a book or web that teach you about responsive web design because your page need to be recreate entire page for it

    Oh, for background image just replace "background-size:800px 500px;" to "background-size:cover;" and it will be fine


  •  

    Tags for this Thread

    Posting Permissions

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