Thread: CSS image help

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

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12

    CSS image help


    Hi

    I have a image at the top of my page and is in the right place on my 1024 x 768 screen but when looking at it on my second screen which is a 1280 x 768 I think, it appears off the page, how do I set it so it appears in the same place on both screen sizes

    The css I got for it is below

    Code:
    img.homeimg {
    margin: -30% 0 0 -25%;
    position: fixed;
    z-index: 10;
    }
    Thanks in advance

    Ian
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    Why would you be setting negative margins?

    Can you provide a live link or more HTML and CSS?

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Hi Nanomech

    Thank you for the reply

    I have solved the image issue now but got another small issue if you could help

    On the site is a nav menu on the left and it scrolls up and down with the page

    On my 1024 x 768 screen it's in the right place but on my 1280 screen the nav menu is not in line with the top part of the panel in the center

    The link is below

    www.irhwebsites.co.uk/bedazzled

    Any ideas

    Kind regards

    Ian
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    What is it meant to be aligned to? I just checked in 1024x768 and it is exactly the same at my normal res 1680x1050. The only thing I would say is that because you have set a position of 'fixed' you may as well manipulate the top, right, bottom and left properties, instead of declaring minus -margins.

    Kind regards,

    NM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Hi Nanomech

    The nav menu is supposed to be in line with the top of the center panel

    So rather than be using the following

    margin: 26.3% 0 0 -13%;

    Use something like margin: 0 0 0 0;

    That right?

    Ian
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    No mate, try this:
    Code:
    img.homeimg 
    {
    	position: fixed;
    	top: 26.3%;
    	left: 13%;
    	z-index: 10;
    }
    It should produce the exact same effect but seeing as though you were declaring position: fixed, that allows you to manipulate the top,bottom, left and right properties of an element. I think it's probably more the 'standard' thing to use when you have declared a fixed element. I have run into situations before though where I had to set a negative margin though, can't remember for the life of me what it was now.

    It's still strange though because I checked it at the exact same resolutions that you did and it produced the exact the same result for me, the div was positioned exactly in the same place, even in my 1680x1050 resolution, it was the same as 1024x768.

    What browser are you viewing your site in? I checked your site in FF 18

    Kind regards,

    NM.
    Last edited by Nanomech; February 5th, 2013 at 12:30 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Oh right ok will try that then mate

    I am looking at it in Google Chrome, should be the same shouldn't it as FF
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    Browsers can vary in the way the use or handle certain things.

    I'd suggest you download IE, FF and let's say Safari and take a look at your webpage in all those browsers. You could end up with very bad results. I remember when I first started coding, I just coded with IE not knowing any different and when I was told about the need to make your site cross browser compatible, I downloaded the other browsers and my site was ALL over the place.

    It's a very important thing in this day and age to not only make your site cross browser compatible but cross platform compatible (if you want to go the full hog of course) as using mobiles for web browsing nowadays is probably more active than it's ever been and will probably increase forever more as it's only a matter of time before everyone has an android or ipad etc etc.

    I'll check your site out now in Chrome.

    Kind regards,

    NM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Im stuck now as I tried that and the nav menu is still causing issues by being in the wrong place on different resolutions
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Oh yeah def, I normally style it so looks all ok in chrome then style it so looks the same in IE/FF etc
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    You know I've just spent the last half hour going through your code but I can't get it to stay in the same place. Although I'm not sure if it's because of your negative margins set on your other elements or what, I am truly Bedazzled

    Regards,

    NM.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    152
    Rep Power
    12
    Hi, sorry for the late reply

    Love the use of the word bedazzled, lol love it

    Strange ain't it, I even moved the nav menu outside of the container div thinking it might be that

IMN logo majestic logo threadwatch logo seochat tools logo