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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help replicating frames in CSS

    Hi guys after perusing the forums I have decided to give a frameless page a go but I am having a bit of trouble.

    What I want to do is replicate the functionality of the frames version of my site.
    go here to see it:- http://doozer.tifozi.net/warcry.html

    I have made a start and I have figured out how to make each separate html page a division which is selected from a javascript driven menu BUT...

    I cannot get the divs to scroll or automatically resize themselves in the same way as the HTML frames do. I have tried loads of combinations of setting the overflow and position property on various divs, but a solution that will keep the image and banner frames fixed at the top of the screen while the menu and main container divs scroll below them eludes me.

    I have knocked up this short HTML page and I would be very appreciative if one of you helpful guys show me how "???.css" should look to position the divs and make them work like I need them too.

    <HTML>

    <HEAD>
    <LINK HREF="???.css" REL="stylesheet" TYPE="text/css">
    </HEAD>

    <BODY>

    <DIV CLASS="image">
    This division will contain and display images.
    It must be 209 pixels wide and 300 pixels deep.
    It should be in the top left of the screen at position 0,0.
    It must not scroll off the screen when the divisions below it scroll.
    </DIV>

    <DIV CLASS="banner">
    This division will contain the page banner.
    It must be 100 pixels deep and automatically scale itself to fit the visible width of the screen less the 209 pixels for the image div.
    It should be on the top of the screen at position 209,0.
    It must not scroll off the screen when the divisions below it scroll.
    </DIV>

    <DIV CLASS="menu">
    This division will contain the page menu.
    It must be 209 pixels wide and automatically scale itself to fit the visible height of the screen less the 300 pixels for the image div.
    It should be below the image div at position 300,0.
    It must allow itself to scroll but preferable in the 'y' direction only.
    </DIV>

    <DIV CLASS="main">
    This division will contain the main page material.
    It must automatically scale itself to fit the remaining visible portion of the screen left by the other divs.
    It's top left corner should be at position 209,100.
    It must allow itself to scroll but preferable in the 'y' direction only.
    </DIV>

    </BODY>

    Thanks in advance
    Paul

  • #2
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In case anyone else was interested I am now fairly sure this problem cannot be solved with CSS and DIV's alone.

    The closest workaround for a single page solution is to use a single table, the height and width of the browser window, and place divs within the cells of that table.

    Anyone who knows different please feel free to post.



    Paul

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It canbe accomplised with css.

    For the banner and POTD ( I guess that's what you want ) you should use fixed positioning.

    The main content area should have a 100% height and width, and the min-width you describe, and the margin-top as you describe.

    Do you have the images for the banner?
    Last edited by mrruben5; 07-13-2005 at 12:12 AM.
    CATdude about IE6: "All your box-model are belong to us"

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All the images and content should be the same as the link I quoted at the top

    http://doozer.tifozi.net/warcry.html

    I tried out some of what you suggested but it displays all wrong in IE (fixed doesn't work, positions wrong) and completely differently in FireFox and Opera (closer but still not right).

    I'm guessing there is a lot more CSS needs to go in, right?

    <HTML>

    <HEAD>

    <STYLE>

    div.image {
    position:fixed;
    top:0px;
    left:0px;
    height:300px;
    width:209px;
    background-color:red;
    color:black;
    overflow:hidden;
    }

    div.banner {
    position:fixed;
    top:0px;
    left:209px;
    height:100px;
    background-color:green;
    color:white;
    overflow:hidden;
    }

    div.menu {
    top:300px;
    left:0px;
    width:209px;
    background-color:blue;
    color:white;
    overflow:auto;
    }

    div.main {
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    margin-top:100px;
    margin-left:209px;
    background-color:black;
    color:white;
    overflow:auto;
    }

    </STYLE>

    </HEAD>

    <BODY>

    <DIV CLASS="image">
    This division will contain and display images.
    It must be 209 pixels wide and 300 pixels deep.
    It should be in the top left of the screen at position 0,0.
    It must not scroll off the screen when the divisions below it scroll.
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    </DIV>

    <DIV CLASS="banner">
    This division will contain the page banner.
    It must be 100 pixels deep and automatically scale itself to fit the visible width of the screen less the 209 pixels for the image div.
    It should be on the top of the screen at position 209,0.
    It must not scroll off the screen when the divisions below it scroll.
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    </DIV>

    <DIV CLASS="menu">
    This division will contain the page menu.
    It must be 209 pixels wide and automatically scale itself to fit the visible height of the screen less the 300 pixels for the image div.
    It should be below the image div at position 300,0.
    It must allow itself to scroll but preferable in the 'y' direction only.
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    </DIV>

    <DIV CLASS="main">
    This division will contain the main page material.
    It must automatically scale itself to fit the remaining visible portion of the screen left by the other divs.
    It's top left corner should be at position 209,100.
    It must allow itself to scroll but preferable in the 'y' direction only.
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    <BR>
    <BR>
    <BR>
    Test for scrollng
    </DIV>

    </BODY>

    </HTML>

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://home.earthlink.net/~harbinger...fixedtest.html

    simple example of fixed positioning for IE6 (this does not work in IE/Mac and IDK about IE 5.x/PC)

    IE doesn't understand position:fixed. You have to "trick" it into playing along. It gets tricky later on trying to get things where you want them. I'll try to explain a little using that link as an example.

    Code:
    html {
    overflow: hidden;
         /* Hide from IE \*/
         overflow: visible;
         /* End Hide */
    }
    body {
        height: 100%;
        overflow: auto;
    
    }
    That makes the basics of fixed positioning work for IE. IE/mac will hide everything but the background of the BODY.

    Now all the tricky stuff.

    ANYTHING that you give positioning to, IE will FIX. eg:

    Code:
    #thing {
        width: 200px;
        height: 200px;
        background: #00f;
        position: absolute;
        left: 30px;
        top: 30px;
    }
    #thing[id] {
        position: fixed;
    }
    All browsers see the position:absolute and place the object accordingly. IE then ALSO sees the position:absolute as position:fixed. Everything else does not. So the [id] (or [class] if applicable) line tells everything else to FIX the object.

    The fancier the layout gets the trickier it gets. Using floats & margins to move objects around.

    If you care about IE5.x viewing your site you can write the same CSS without the first piece of code I wrote but still using the [id] or [class] to FIX things. They will not be fixed in IE/Mac. Then AFTER the css but still in the head add a conditional statement:

    Code:
    <!--[if IE]>
    <style type="text/css" media="all">
    @import "css/ie.css";
    </style>
    <![endif]-->
    and in this new file write all the code I first posted. Ie/mac and <5.5pc will ignore the conditional comment. Ie pc 5.5+ will read it and FIX everything.

    I'm not 100% on the conditional comment part as for what PC versions of IE will load it but I know 6 does.

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info harbinger, I'll have a play around with these bits.

    1 question in Opera your page renders as a blank black screen.

    Is that the same as the Mac/IE problem you mentioned where it only displays the frame background?

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    hmmm...I guess your the first person to actually view it in Opera (or at least tell me of the problem). Thanks.

    What you see in Opera is what IE/mac does as well.

    I would go this route then:

    Code:
    <link rel="stylesheet" type="text/css" href="css/normal.css">
    <!--[if IE]>
    <style type="text/css" media="all">
    @import "css/ie.css";
    </style>
    <![endif]-->
    code for the IE css
    Code:
    html {
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow: auto;
    }
    If you look here:

    http://home.earthlink.net/~harbingerofthevoid/

    you can see I did this. If you would, could you look at it on Opera and see if the fixed method is working?

    I know IEmac will scroll everything as it will not load the CSS through the conditional comment and it won't understand the fixed property.

    One thing you might encounter is an IE bug. If you look at the code of the page you'll see Ihave
    Code:
    #content {
    margin-right: 48px;
    }
    for IE and:
    Code:
    #content {
    margin-right: 112px;
    }
    for everything else.

    Not exactly sure why IE shifts it all out whack like that but fixing it was easy enough.

  • #8
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Opera problem...

    I checked out your website in opera and it looks fine.
    However I pasted the IE 5. fix into the test page you put up (fixedtest.html) and it still displays as a blank black screen in opera. There must be some other opera "bug" in it.

    It's a shame you don't know why IE needs different positioning values because that was going to be my next question.

    Lastly, although I am impressed at the progress I have made with this CSS implementation of my frame site, it still isn't quite right.

    I need the menu div and main page to scroll independently. At the moment as they are not fixed they scroll together.

    Can this independent scrolling be implemented using css?


  •  

    Posting Permissions

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