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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Positioning Etc

    Sorry, couldn't think of a suitable title.

    Built this, but as you can see, it doesn't look right...

    http://s131484004.websitehome.co.uk/...rent_map1.html

    I've placed all the content and the compass/map into one surrounding div to cater better for all resolutions. The border is there just to see where it is when building.

    There are a number of problems though...

    In IE,
    the horizontal scrollbar appears,
    the map goes outside the div.

    In FF,
    the map doesn't even show,
    it's very laggy.

    I hope you can see the type of idea I'm going for and advise me on how to achieve what I want! - view in IE please for this one.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The horizontal scrollbar is coming from the uneeded vertical scrollbar that appears to be coming from one of the divs. Adjust the z-index of #map to get it to show in FF.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Layout Trouble - Layers

    I coverd making IE play along with fixed last night

    there are several reason for the horizontal scroll bar in IE. Basically your not implementing the 'trick' right. The z-index -1 is the problem with the background image. Problem is you want it below the text and the compass above it. z-index is not the only way to do it. In this case it won't work at all. Since you have to position something to z-index it, IE will 'fix' the layer. So hmmm... how do we do it you ask?

    That's the fun part.

    style the html with the background tiled image.
    Give the body the map image and position it.
    then your free to move the content around and then z-index the compass. So that the content scrolls but the compass doesn't.

    I put the compass in the content div and then just moved around with margins to make it look right.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html {
    margin: 0;
    padding: 0;
    background: url(http://s131484004.websitehome.co.uk/markaylward/thetestingroom/img_100.gif) 
    
    fixed; 
    }
    body {
    font-family: Georgia;
    font-size: 8pt;
    padding: 0;
    margin: 0;
    background: url(http://s131484004.websitehome.co.uk/markaylward/thetestingroom/mapcorner.gif) 
    
    no-repeat fixed 25% 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    }
    #container {
    text-align: center;
    width: 512px;
    margin: 0 auto 0 auto;
    }
    
    #content {
    f\ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s131484004.websitehome.c
    o.uk/markaylward/thetestingroom/newpaper2.gif');
    background /**/: 
    url(http://s131484004.websitehome.co.uk/markaylward/thetestingroom/newpaper2.gif) top center 
    no-repeat;
    width: 512px;
    height: 768px;
    margin-top: -300px;
    }
    #content[id] {
    background: url(http://s131484004.websitehome.co.uk/markaylward/thetestingroom/newpaper2.gif) 
    
    top center no-repeat;
    margin-top: 0;
    }
    
    .top { top: 120px }
    .bottom { bottom: 80px }
    #container p {
    margin-left: 60px;
    margin-right: 60px;
    clear: left;
    }
    #compass {
    background: url(http://s131484004.websitehome.co.uk/markaylward/thetestingroom/compass.gif) 
    
    no-repeat top left;
    width: 320px;
    height: 300px;
    position: relative;
    z-index:3;
    margin-top: 0;
    margin-left: -460px;
    }
    #compass[id] {
    position: fixed;
    margin-left: -180px;
    }
    h2 {
    float: left;
    margin-top: 60px;
    width: 512px;
    text-align: center;
    }
    h3 {
    float: left;
    clear: left;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 512px;
    text-align: center;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow: auto;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="container">
    <div id="compass"></div>
    <div id="content">
    <h2>A Play With Transparency</h2>
    <h3>Subtitle</h3>
    <p class="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nunc mauris, 
    
    molestie eget, condimentum vitae, ornare ultricies, magna. Cum sociis natoque penatibus et 
    
    magnis dis parturient montes, nascetur ridiculus mus. Quisque sem. Maecenas in sem eget arcu 
    
    auctor malesuada. Proin tellus. Pellentesque imperdiet ipsum quis eros euismod dignissim. Nulla 
    
    at quam. Ut iaculis pede id risus. Nunc aliquam. Vestibulum at tellus ut odio cursus fringilla. 
    
    Integer egestas lacinia massa. Duis velit. Curabitur vel lectus. Vivamus posuere arcu eu orci. 
    
    Duis sed quam. Nam sagittis metus molestie erat.</p>
    <p>Sed auctor ultrices ipsum. Aenean suscipit est eget lacus. Sed sit amet turpis et nulla 
    
    elementum vestibulum. Etiam molestie. Nullam laoreet consectetuer magna. Maecenas convallis. 
    
    Aenean malesuada mauris eget orci. Ut rutrum ipsum ut libero. Cras sodales, ante a cursus 
    
    elementum, enim metus varius nunc, non aliquet massa odio sed lacus. Proin ante. Proin 
    
    tristique ultricies odio. Duis vel purus sed ipsum dictum sodales. Sed eros. Praesent ac nisl 
    
    non mauris iaculis auctor. Fusce egestas lacinia neque. In elementum quam non purus. Praesent 
    
    felis. Sed sit amet justo. Nulla at tortor. Suspendisse potenti.</p>
    <p>Sed auctor ultrices ipsum. Aenean suscipit est eget lacus. Sed sit amet turpis et nulla 
    
    elementum vestibulum. Etiam molestie. Nullam laoreet consectetuer magna. Maecenas convallis. 
    
    Aenean malesuada mauris eget orci. Ut rutrum ipsum ut libero. Cras sodales, ante a cursus 
    
    elementum, enim metus varius nunc, non aliquet massa odio sed lacus. Proin ante. Proin 
    
    tristique ultricies odio. Duis vel purus sed ipsum dictum sodales. Sed eros. Praesent ac nisl 
    
    non mauris iaculis auctor. Fusce egestas lacinia neque. In elementum quam non purus. Praesent 
    
    felis. Sed sit amet justo. Nulla at tortor. Suspendisse potenti.</p>
    </div>
    </div>
    </body>
    </html>
    I ran into problems with the text. It seems the H's would break it up. Solution: float them and have them clear the floats and give them a width so you can center them. Then make sure that the P's clear them as well.

    The lag is normal. Although gecko supports fixed positioning it's not a master at what it does. There is way to avoid the chop though. It ain't pretty but niether is any of this

    I'll explain it rather than do it and show you an example.

    Basically you make the compass div large enough to comletely cover the content. That way there are no edges of the div for the text to snag on. That leads to a problem. The links in the text are hidden under the compass div. IE6 doesn't seem to mind the fact that there is a div on top of the text as long as there is nothing 'viewable' covering them. But gecko says'"wait a sec! You covered my links grrr..."

    Not a problem really.

    you make a selector class for the text of your content. Since IE6 doesn't do selectors it ignores the rule your feeding in. Then you make the the class have relative positioning and a higher z-index of the compass div. so the background image is under the compass but the actuall text is above it. If you don't use a selector IE sees the position and fixes the text (not pretty).

    if you look at these 2 files you'll see how I've done it.

    http://home.earthlink.net/~harbinger...ire/index.html
    http://home.earthlink.net/~harbinger...ss/muffins.css

    example:
    Code:
    <p><span class="lift">To the good folks at <a href="http://www.codingforums.com">Coding Forums</a>: Without you all giving me plenty of practice none of this would be possible.</span></p>
    and the CSS:
    Code:
    #content[id] .lift {
    position: relative;
    z-index: 300;
    }
    Not sure if all that code up there will validate with your doc type. I know the filter thing doesn't. But it works.

    have fun,
    harbinger

    Edit: Only checked on IE6 Mozilla and Opera 8. IE5 [i]should ignore the fixed stuff but no idea how it will handle the margins and stuff.
    Last edited by harbingerOTV; 08-08-2005 at 01:21 AM. Reason: extra info and all that rut

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the in depth answer Harbinger, much appreciated!

    Looks a bit different in different browsers and resolutions, but works pretty nice now.

    http://s131484004.websitehome.co.uk/...rent_map1.html

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    looks like IE is using the text-align: center of the body. Take that off and maybe it will sit like it does in Moz and Opera.

    Fixed is funny bird. Fun to play with though.

    Glad I could get it 'sort of' working for you.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe well feel free to have a play if you like, I'll give it another go tommorow, well today... two nights of staying up till 4am working on layouts is a bit too much for me!

    Hopefully with IE7, alot of these 'bugs' will be solved.


  •  

    Posting Permissions

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