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 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Images keep changing their position depending on comuter

    Hi!

    I'm a rookie at HTML/CSS so this might be easy, but I certainly can not get it to work.

    I've been wanting titles above two link lists (widgets from blogger. I use blogspot.) and chose to make two PNGs, and managed to get them in place so they looked good on my computer (a macbook pro, using google chrome): http://tinypic.com/r/2ep83gn/6
    (I'm talking about the "find me" and "blogs I love" images on the right)


    But when I check my blog on other computers (PC) with firefox, chrome or explorer the images keep changing their position, and it's always different. Here's a screenshot of my friend's PC:
    http://tinypic.com/r/jq11g4/6

    And uh, here are the codes I used, if you can somehow see what I need to change (I know I can't)

    Code:
    h20 {
    position: absolute;
    top: 10px;
    left: 900px;}
    h19
    {
    position:absolute;
    left:803px;
    top:170px;
    }
    h18
    {
    position:absolute;
    left:809px;
    top:112px;
    }
    Code:
    <h20><img align='right' alt='none' src='http://i46.tinypic.com/kbzv34.png' style='max-width:100%'/></h20>
    
    <h19><img align='right' alt='none' src='http://i50.tinypic.com/10q9h83.png' style='max-width:100%'/></h19>
    
    <h18><img align='right' alt='none' src='http://i47.tinypic.com/b6v97k.png' style='max-width:100%'/></h18>
    Or has it something to do with the width of the different computer screens? If so, where/how do I change so my blog remains with the same width on every computer?

    Hope someone can help! I've been googling forever and ever.. Peace
    Last edited by sandradecibell; 11-13-2012 at 10:24 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sandradecibell,
    Your absolute positioned images are probably relative to the top left corner of the browser window.
    To make them stop moving around with different screen resolutions, they should be relative to a containing element instead.

    Have a look at this quick positioning tutorial that will show how that works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your answer! Yes, I think they are relative to the top left corner. I checked out the guide but I couldn't find out what I have to do? Can I make them relative to the container's(the post area) left corner, because the container remains the same width on all screen resolutions, right? Where and how would i change the element which the images are going to be relative to?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by sandradecibell View Post
    Where and how would i change the element which the images are going to be relative to?
    Put the images in that container and make it position: relative;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You should also have a look at the links about validation in my signature line. The code snippet you've posted is invalid.

    h20, h19 and h18 are not HTML elements. They can be id's or classes of a div element though. Would look more like this:
    <div id="h20">stuff</div>
    and
    Code:
    #h20 {
    position: absolute;
    top: 10px;
    left: 900px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, so I put the code in the container section and changed to relative but it ended up looking like this:
    http://tinypic.com/r/i3huvk/6

    I guess I need the images to be positioned "in front" of the text? Should I use the float position somehow?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    There's really no way to tell what's going on by looking at your screencaps. I would always recomend floats before using absolute positioning but who knows what blogger lets you do?

    A link to the test site would help. At least then we'd see your code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    <h20> could just go away. A containing element for that image isn't really necessary, the image does need to be moved into #container since that's what you want it positioned relative to.

    You can still use that as an id on the image so you can specifically style it from your CSS. Like this -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
        background: none repeat scroll 0 0 #E6E6E6;
        border-top-right-radius: 0;
        box-shadow: 0 0 0 #C1BFBF;
        margin-bottom: 0;
        margin-top: 0;
    	position: relative;
    }
    .container_12 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
    }
    img#h20 {
    	position: absolute;
    	left: 900px;
    	top: 10px;
    }
    </style>
    </head>
    <body>
        <div id="container" class="container_12">
            <img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
        </div>
    </body>
    </html>
    align='right' is deprecated under your DocType and should not be used
    style='max-width:100%' ...I think full width is a given
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I feel like I'm retarded, but I've tried to do what I think you wanted me to do.. but it got severely messed up. http://www.sknutsson.blogspot.com


    Blogspot won't let me use the <div id="container" class="container_12">
    <img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
    </div> code.
    Last edited by sandradecibell; 11-14-2012 at 09:44 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by sandradecibell View Post

    Blogspot won't let me use the <div id="container" class="container_12">
    <img src='http://i46.tinypic.com/kbzv34.png' alt='none' width="304" height="470" id="h20">
    </div> code.
    Yes, it's always some limitation in trade for a prepackaged blog. I'm sure there is some way to do it but without seeing how blogspot is making you edit your code... I can't really help much.

    Someone here probably has a lot more experience with a CM than I do. There may be some blogspot forum too? I don't know.

    And don't feel retarded, we all started somewhere!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •