January 31st, 2013, 04:51 AM
CSS image help
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
Thanks in advance
margin: -30% 0 0 -25%;
February 3rd, 2013, 05:11 PM
Why would you be setting negative margins?
Can you provide a live link or more HTML and CSS?
February 4th, 2013, 02:19 AM
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
February 4th, 2013, 04:44 PM
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.
February 5th, 2013, 01:53 AM
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;
February 5th, 2013, 12:28 PM
No mate, try this:
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
Last edited by Nanomech; February 5th, 2013 at 12:30 PM.
February 5th, 2013, 12:34 PM
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
February 5th, 2013, 12:46 PM
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.
February 5th, 2013, 12:46 PM
Im stuck now as I tried that and the nav menu is still causing issues by being in the wrong place on different resolutions
February 5th, 2013, 12:48 PM
Oh yeah def, I normally style it so looks all ok in chrome then style it so looks the same in IE/FF etc
February 5th, 2013, 01:06 PM
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
February 5th, 2013, 04:21 PM
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