#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0

    Can someone please help me with positioning of my .gif in the header and links?


    Can someone please help me with positioning of my .gif in the header and links?

    It moves whenever I change a computer. Depending on the screen size, the image always moves to some weird obscure place.

    The site name is:

    papercranes.comlu.com

    Is there a substitute for absolute positioning?
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Yes, I am quite surprised you don't know any alternatives. People use floats and margins to get stuff in a layout normally. But, to make it look A TON better all you need to do is this.

    1. Add position:relative; to #templatemo_banner_bar
    2. on #seemore change the left: property to 42% now.
    3. On #seemore change the top: property to 10%

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0

    seemore?


    Originally Posted by Skipt
    Yes, I am quite surprised you don't know any alternatives. People use floats and margins to get stuff in a layout normally. But, to make it look A TON better all you need to do is this.

    1. Add position:relative; to #templatemo_banner_bar
    2. on #seemore change the left: property to 42% now.
    3. On #seemore change the top: property to 10%

    Cheers
    I've added position:relative; to #templatemo_banner_bar

    But for #seemore, do you mean that the coding should now be
    #seemore {position:absolute;overflow:auto;width:auto;height:auto;
    left:42em;top:10em}

    or

    something else? Thanks for all your help!


    EDIT: "I've added position:relative; to #templatemo_banner_bar" This doesn't help at all. :/ My sidebar has gone wrong now as well? Thanks though.
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Where did I say to use "em"s. Your code for #seemore should be this, using PERCENTS

    Code:
    #seemore {
            position:absolute;
            overflow:auto;
            width:auto;
            height:auto;
            left:42%;
            top:10%;
    }
    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0
    Originally Posted by Skipt
    Where did I say to use "em"s. Your code for #seemore should be this, using PERCENTS

    Code:
    #seemore {
            position:absolute;
            overflow:auto;
            width:auto;
            height:auto;
            left:42%;
            top:10%;
    }
    Cheers
    *sighs* Thanks anyways (the .gif is now stuck on the center of the page). I guess I'll just stick to padding/floating.
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    You do realize you can edit the %'s to position it where you want. I just used those values because thats where the image was on my browser when I opened the page. Show me an image of where it is supposed to go and I am sure I can help you more
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0

    Browsers?---


    Originally Posted by Skipt
    You do realize you can edit the %'s to position it where you want. I just used those values because thats where the image was on my browser when I opened the page. Show me an image of where it is supposed to go and I am sure I can help you more
    Thanks, but I was originally hoping for a code that would work on all browsers .

    Hence the "It moves whenever I change a computer. Depending on the screen size, the image always moves to some weird obscure place. "
  14. #8
  15. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    That code does work on all browsers. Since you won't supply me an image of the desired result I have no way of knowing what you want. Every browser, including IE, recognizes the code that i supplied to you.

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0
    Originally Posted by Skipt
    That code does work on all browsers. Since you won't supply me an image of the desired result I have no way of knowing what you want. Every browser, including IE, recognizes the code that i supplied to you.

    Cheers
    Oh, I see! Would you like a screenshot?

    I would post the code, but I'm not sure why, I always get this message:

    new users aren't allowed to post urls?

    I'll just post my css and my html in a textbox on the site?
  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    most likely because of links inside your code. I have the code to your site since I have the link to your site. What I need is for you to go on the computer which displays correctly, screenshot it, upload it, and link me to it so I can take a look and give you the code that will work best for you

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    6
    Rep Power
    0
    Originally Posted by Skipt
    most likely because of links inside your code. I have the code to your site since I have the link to your site. What I need is for you to go on the computer which displays correctly, screenshot it, upload it, and link me to it so I can take a look and give you the code that will work best for you

    Cheers
    Thanks! Currently, it works fine for my computer, I was wondering if there was a coding that works for all my computers, laptops etc., because even though it works fine here, the layout gets totally messed up once I either minimize or use a different laptop.

    Thanks for all the time you've spent, but I think I'll just stick with html/javascript for now..then I'll take a crack at css next month (too many essays to finish T_T).

IMN logo majestic logo threadwatch logo seochat tools logo