CSS image help

[ianhaney]

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

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

[sunfighter]

I don't think your margin is helping things. I bet you used that to position your image. Since you are doing position: fixed; try using the top and right to position it.
Example not a position:

position: fixed;
top: 0px;
right: 10px;
z-index: 10; //think this is needed??? Your call
}

[ianhaney]

I have managed to solve the image issue now but got couple of other small issues

The nav menu on the side is in the correct place on my 1024 screen but is out of place on the 1280 screen

The website is www.irhwebsites.co.uk/bedazzled

[sunfighter]

Ian, I'm using firefox ver 18.0.1 and your site has no nav menu on the side. All I see is an image and then a centered strip that 610 px wide that contain words and images until you get to the words

These are key skills that stay with our students for life whatever paths they

at that point the strip goes to 444px by sucking in the right side.
Think you lost your css styling.

OK I found your problem. Stop using position:fixed; position: relative; or position: absolute; Use the normal flow of html and I think you'll solve all your problems.
BTW the nav was under the strip because you used position: fixed; on it. I have a 1440px wide screen and mine is small.

[ianhaney]

Hi

Thank you for the reply

I have not done the CSS for firefox yet, only done it for Chrome at the mo, once it looks right in Chrome then I will do it for Firefox and IE

[sunfighter]

Ian if you program correctly in Chrome or Firefox it should work in all browsers with very little difference in the rest of them. Cross Your Fingers.

Again I say
Stop using position:fixed; position: relative; or position: absolute; Use the normal flow of html

[ianhaney]

Cool so I should be taking out the position on the image and anywhere else I have got position

[sunfighter]

position:fixed; position: relative; or position: absolute;
are not the way to place most things in html. There are exceptions, but I'm not sure you need them.

You have your work cut out for you. You are basically starting over. I'd put one element in at a time just like you did not have a page and were just beginning to code it.

[ianhaney]

I am winning, thank you for the info and advice appreciate it

One thing, on my #nav, I got position: fixed as it scrolls with the website, if I comment that out, it just stays at the top, is there another way of having it scroll with the site if I take out the position: fixed

[sunfighter]

No. If your going to use position: fixed put it someplace where it's not going to get over run by your main div and so it don't extend below most browsers.

[ianhaney]

That's the trouble my customer want's the nav menu right up against the center panel

see www.irhwebsites.co.uk/bedazzled

Also it looks on the 1024 screen but on my 1280 screen, it is not in line with the top of the center panel if that makes sense

I have attached a screen shot so you see what I mean

the screenshot is at the link below

http://www.irhwebsites.co.uk/bedazzl...azzleissue.png

[sunfighter]

So why not make a picture of what it is suppose to look like and tell us which element they want to travel down the screen with them and what they want them t hook to etc.

[ianhaney]

That screenshot

On the left is the 1024 screen size and is how it should look and on the right is my 1280 screen size and see the nav menu is not in line with the center panel like the one on the left

How do I get that nav menu to line up like the one on the left