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 13 of 13

Thread: CSS image help

  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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:
    Code:
    position: fixed;
    top: 0px;
    right: 10px;
    z-index: 10; //think this is needed??? Your call
    }

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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.
    Last edited by sunfighter; 01-31-2013 at 06:29 PM.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool so I should be taking out the position on the image and anywhere else I have got position

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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.

  • #9
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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.

  • #11
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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.

  • #13
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •