SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Horizontal positioning a gif varies with monitor

    I have a gif graphic just to the right of main logo (upper left). It seems that the monitor displaying it changes the horizontal positioning (mine looks ok as a 16:9 ratio monitor but on letterbox 4:3 monitors it shuffles left and mostly hides behind the main logo.

    The CSS otherwise works well.

    http://69.89.31.182/~drainma1/

    The css is http://69.89.31.182/~drainma1/style.css
    Last edited by swmagic; May 4, 2010 at 14:04. Reason: typo

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    That's because the image is absolute positioned. Don't AP it if you don't want it sliding places
    Code:
    img#chute
    Or raise the z-index to 100 if you want it on top
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I showed you how to do that in your other thread and it was all working fine, what happened?

    I had told you that it needed to be nested in the #header and then the header needed position:relative; to become the containing block for the AP'd chute image.

    http://reference.sitepoint.com/css/absolutepositioning
    http://reference.sitepoint.com/css/containingblock

    You have since pulled it out of the header and wrapped it in a span with that silly 960 Grid .container_12 class. That is where you lost the relative positioned parent which served as the containing block.

    The site just needs a wrapping div set at 960px with auto margins and your done centering once and for all.

    By the way, you are linking to your style.css twice in the page head, just link to it once.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Should I not have used span? and removed the 960 grid .container class?

    I restored your code but the sliding still occurs (and the chute image is still in front of the main logo--I want it behind probably because I'm so paranoid about the sliding of the chute).
    Last edited by swmagic; May 5, 2010 at 10:44. Reason: spelling

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swmagic View Post
    Should I not have used span? and removed the 960 grid .container class?

    I restored your code but the sliding still occurs (and the chute image is still in front of the main logo--I want it behind probably because I'm so paranoid about the sliding of the chute).
    There is no need to wrap the image in a span with that class on it. The image had an ID hooked to it and if it had of been nested in the header everything would have been fine.

    I restored your code but...

    No, you have not done it correctly if you are referring to the link you posted above. The image is still nested in that span and you have not set position;relative; on your header. The position;relative; on your header is what will keep the chute image from sliding around.

    That is all explained in your other thread.
    Try again

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sigh. I appreciate your persistence, Ray.

    I added position:relative back to the header.
    I also put the chute id inside the header div (thereby removing the span).

    But the chute still slides with resizing. BTW, do I have too many </div>'s They seem unbalanced.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swmagic View Post
    I also put the chute id inside the header div (thereby removing the span).
    I don't know what page your working with but according to the link in your first post nothing has changed in the html yet. I have no way of knowing what you are doing unless you update the link with your changes.

    You need to get that style.css linked to only once in your head element. I have already mentioned that above and it needs to get corrected so we can make live edits without interference from the second style.css link.

    Anyway, here is how to do the html just as it was explained in the other thread.
    Code:
    <div id="header" class="container_12">
    <a id="logo" href="#"><img src="images/logo.jpg" alt="Logo" height="119"/></a>
    <img id="chute" src="images/polychute.gif" alt="polychute height="119"/>
      <div class="headerlinks">
        <p><a href="#">About Us</a> | <a href="#">Our Guarantee</a> | <a href="#">Blog</a> | <a href="#">Privacy</a></p>
        <p><strong><center>RV Waste Management</center> 
        "Simpler, Safer, &amp; Sanitary"</strong></p>
      </div>
     </div>
    Code:
    #header {
        position:relative;
        height: 119px;
        z-index:100;
    }
    a#logo { /* floats logo image left */
        float:left;
    }
    
    img#chute {
        position:absolute;
        top:17px;
        left:272px; /*was 311px*/
        z-index: 95;
        height:170px;
        width: 326px;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks that was it. I hadn't changed the image chute position and I removed the container_12 class in the header. But I had tried your method of header and then within that the 2 images.

    Does position:absolute apply to ONLY within the parent container?


    I'm creating a new post about the background not showing up in IE7
    body {
    background: #8c8a8b url(images/body-bg.jpg) repeat-x top;
    z-index: -100;
    font: 12px Arial, Helvetica, sans-serif;
    }

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swmagic View Post
    Does position:absolute apply to ONLY within the parent container?


    I'm creating a new post about the background not showing up in IE7
    body {
    background: #8c8a8b url(images/body-bg.jpg) repeat-x top;
    z-index: -100;
    font: 12px Arial, Helvetica, sans-serif;
    }
    Hi,

    Glad you got the header business sorted out.

    If you look back at post#3 you will see that I gave you some links to the SitePoint reference that explain about absolute positioning and containing blocks. When position:relative; is set on a parent div it becomes the containing block for all it's AP'd children.

    You should not be needing z-index:-100 on the body element. I have not looked at it in IE7 yet but there should be no need for any z-index on the body.

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When I removed the z-index:100;on the header, IE7 now shows the menu over the graphic. Knowing that the higher the Z-index number is the higher the layer upon which it appears, I'm not sure why that is happening as imagechute z-index is 95 and .sf-menu is 90 (line 377 of style.css). I'm pretty sure .sf-menu is the menu line.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I found it, I set the header Z-index to 50.

    Thanks again!!!

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Grghhh. spoke too soon. This is weird. My Dreamweaver renders it ok in IE7 and Firefox. I reposted both the style.css (12:51 am) and resaved and posted as index5.html (12:50 am)

    http://69.89.31.182/~drainma1/index5.html

    yet, the published one does not show the gradient background in IE7. Any ideas?

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Stop messing with the page please
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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