SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exploring Limits of CSS Layout Tutorial Problem - using it on 2 columns

    Hi.

    Im relatively new to CSS layouts and ive been practicing. I recently came across the above tutorial and im very interested in the javascript ..... script written in the tutorial.

    Only problem is im using a differnt 2 column css layout. And im trying to get the script to work.

    Do you think this is possible? Or should i research my javascript some more and create my own script? Im going to post me code is it is not too much to read. Thanks

    FJ

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #box {
    width: 700px;
    margin-left: 10%;
    margin-right: 10%;
    }
     
     
    <!-- MAIN CONTENT DIV SECTIONS -->
     
    #header {
    background-image:url(header.jpg);
    height: 60px;
    top: 0px;
    }
     
    #headernav {
    background-color:black;
    height: 20px;
    top: 0px;
    }
     
    #nav {
    float:left;
    width: 150px;
    background-color:white;
    text-align:left;
    border-right: 1px, dotted;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
    #main { 
    background-color:white;
    margin-left: 150px;
    text-align:left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
     
     
    #footer {
    background-color:yellow;
    height: 20px;
    }
    This is part of my main xhtml code
    Code:
     <body>
     
    <div id="box">
     
    <div id="header"></div>
     
    <div id="headernav"></div>
     
    <div id="left">
    <div id="nav"> 
    	 <ul>
    	 <li><a href="#">Home</a></li>
    	 <li><a href="#">Style</a></li>
    	 <li><a href="#">Links</a></li>
    	<li><a href="#">About</a></li>
    	 </ul>
    </div>
    </div>
     
    <div id="content">
    <div id="main"><h1>Monochromatic</h1><p>test test test <p></div>
    </div>
     
    <div id="footer">Copyright 2004</div>
     
    </div>
     
    </body>
    And this is the slightly edited javascript code.

    Code:
     // layout2.js
    // Cross-Browser.com & SitePoint.com - Equal Column Height Demo
    if (document.getElementById || document.all) { // minimum dhtml support required
    document.write("<"+"script type='text/javascript' src='x_core.js'><"+"/script>");
    document.write("<"+"script type='text/javascript' src='x_event.js'><"+"/script>");
    document.write("<"+"style type='text/css'>#footer{visibility:hidden;}<"+"/style>");
    window.onload = winOnLoad;
    }
    function winOnLoad()
    {
    var ele = xGetElementById('left');
    if (ele && xDef(ele.style, ele.offsetHeight)) { // another compatibility check
    	adjustLayout();
    	xAddEventListener(window, 'resize', winOnResize, false);
    }
    }
    function winOnResize()
    {
    adjustLayout();
    }
    function adjustLayout()
    {
    // Get content heights
    var cHeight = xHeight('main');
    var lHeight = xHeight('nav');
    // Find the maximum height
    var maxHeight = Math.max(cHeight, Math.max(lHeight));
    // Assign maximum height to all columns
    xHeight('left', maxHeight);
    xHeight('content', maxHeight);
    // Show the footer
    xShow('footer');


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
  •