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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Garland, Texas
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Frame vs HTML frames

    I read the pros and cons of both CSS Frames and HTML and decide that CSS was the best way to go, even though I really don't see that much of a promblem per say with HTML frames, but decide to go with the general public about it. So I got a CSS code off the net from http://www.dynamicdrive.com/style/layouts/category/C11/ and I decided to uses the following CSS

    Code:
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #framecontent{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 130px; /*Height of frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    
    #maincontent{
    position: fixed; 
    top: 130px; /*Set top value to HeightOfFrameDiv*/
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
    padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="framecontent">
    <div class="innertube">
    
    <h1>CSS Top Frame Layout</h1>
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Dynamic Drive CSS Library</h1>
    <p><script type="text/javascript">filltext(255)</script></p>
    
    <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    
    </div>
    </div>
    Here's my problem, I was able to remove the javascript in the main content page and put my content in, which had tables as a database. Here's a link to my page http://tdcj.homeip.net/ the problem I have is designing the header or "the top of the page". The only thing I can do is simple html images and text. I like to add hidden tables so that I can make image tabs and so on, can anyone help? Also I find the code complex to adjust the hieght, what looks great on my computer, doesn't seen so great one others. Matter of fact I went to a PHP class today to show some people my site and the top part of my site cut my images and text in half. So of you might see this some of you might now, but trust me, it happened. How do I get my site to look visble correct for everyone?

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    ...Matter of fact I went to a PHP class today to show some people my site and the top part of my site cut my images and text in half...
    As a start, you might like to fix this by changing back the heights within your <style> from 50px to 130px?

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Remove 'overflow:hidden' from #framecontent.

    You also need to remove the comment from your first line because you're putting IE into 'quirks mode'.


  •  

    Posting Permissions

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