Forums | MacLife

Pithecanthropus · 2009-07-11 1:24 pm

I am trying to make a layout using fixed positioning of the left navigation column, header and footer, while the main content scrolls. I've gotten everything to work so far, but can't seem to get it to show the full scroll bar on the right of the screen. I thought adding a positioning of right: 18px; would take care of the problem, but it doesn't and I'm at a loss to figure out how to do it.

HELP!

*Note: the garish colors are for illustrative purposes only.

HTML :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content="HTML Tidy for Mac OS X (vers 14 February 2006), see www.w3.org" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Layout2</title>
  <meta name="generator" content="BBEdit 9.2" />
  <link rel="stylesheet" type="text/css" href="biglayoutXP-styles.css" />
</head>
<body>
  <div id="leftcolumn">
    <!-- opens left column -->
    <ul id="navigation">
      <li>Nav</li>
      <li>Nav</li>
      <li>Nav</li>
      <li>Nav</li>
    </ul>
  </div><!-- closes leftcolumn -->
  <div id="header">
    <!-- opens header -->
    <div id="headpad">
      <!-- opens headpad -->
    </div><!-- closes headpad -->
    <h1>Header</h1>
  </div><!-- closed header -->
  <div id="footer">
    <!-- opens footer -->
    <div id="footpad">
      <!-- opens footpad -->
    </div><!-- closes footpad -->
    <h4>Footer</h4>
  </div><!-- closes footer -->
  <div id="content">
    <!-- opens content -->
    <h2>Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim ligula, interdum eget mollis et, tincidunt a tortor. Aenean sit amet neque vitae nibh facilisis aliquam. Phasellus sit amet justo ante. Nunc fermentum adipiscing tortor quis faucibus. Proin id felis turpis, id hendrerit nunc. Nunc nec sem sapien, et lacinia felis. Quisque sed felis a urna tempor adipiscing et egestas leo. Mauris nec quam sed quam placerat molestie a vel tortor. Donec ac ipsum sed magna cursus euismod. Etiam varius sem nec neque porttitor ornare. Nulla volutpat sagittis quam, nec egestas ante fermentum in. Nullam ipsum purus, imperdiet ac accumsan a, ultrices nec risus. Suspendisse elit massa, accumsan a posuere id, commodo eget risus. Morbi ante nibh, sollicitudin eu venenatis id, tincidunt scelerisque est. Donec in lacus ac magna accumsan mattis vel et orci.</p>
    <p>Integer varius consequat massa nec lobortis. Nulla facilisi. Quisque vestibulum augue sit amet nisi tempor quis venenatis leo sollicitudin. Mauris sed aliquam sapien. Pellentesque aliquet semper purus, et venenatis dui auctor et. Maecenas iaculis gravida leo sit amet volutpat. Mauris sed justo vitae lorem commodo hendrerit. Pellentesque pulvinar porttitor tempus. Maecenas id fermentum velit. Suspendisse malesuada tincidunt semper. Donec bibendum consectetur quam, quis pharetra lorem bibendum sed. Pellentesque tincidunt fermentum purus nec laoreet. Vivamus id enim nec odio dapibus pellentesque. In luctus accumsan ornare. Mauris ultrices feugiat libero.</p>
    <p>Phasellus eu ultricies arcu. Donec eu quam scelerisque tortor viverra vehicula non eu diam. Aliquam ut posuere leo. Aenean cursus laoreet augue in pharetra. Donec varius scelerisque enim, at laoreet enim condimentum nec. Pellentesque a quam dui. Sed sagittis erat vitae dui eleifend convallis. Morbi sollicitudin diam vitae tortor gravida vehicula. Vivamus in lacus id ante vestibulum viverra id ac arcu. Nam dolor enim, ultricies et iaculis vel, rhoncus vel dui. Donec feugiat dignissim lacus in suscipit.</p>
    <p>In interdum neque at nulla tempus ut ornare quam pretium. Nunc ac nisl velit, blandit sodales nunc. Vivamus dapibus iaculis mauris vitae ultrices. Vestibulum elementum luctus neque, et dignissim purus euismod scelerisque. Proin quis est et nulla condimentum porttitor non adipiscing libero. Nulla gravida tortor eu leo malesuada id malesuada turpis vulputate. Etiam suscipit neque quis purus sodales consequat. Curabitur nec nibh faucibus magna ultricies dictum. Duis eget enim vestibulum quam tempus accumsan eget eget erat. Donec faucibus, libero vitae ultrices pharetra, sem est luctus libero, id interdum est lacus id turpis. Praesent ac ligula sem, a posuere libero. Nulla eu eros erat, sed commodo neque. Donec elementum rhoncus nisl quis rutrum. Suspendisse porta dictum quam, sit amet congue neque porta ut. Nullam ut sem accumsan urna consectetur porttitor at id orci. Suspendisse fermentum nibh ac nulla pellentesque quis hendrerit nisl ullamcorper. Duis nibh arcu, fermentum in rutrum at, pellentesque at arcu.</p>
    <p>Suspendisse varius turpis eu ante molestie ut facilisis massa faucibus. Nam pulvinar orci sit amet libero ultrices rhoncus vulputate libero luctus. Pellentesque vitae felis et tellus iaculis semper et sit amet magna. Curabitur vulputate fringilla ligula, nec feugiat tortor pharetra a. Aliquam eu tortor justo, vel rhoncus eros. Phasellus metus sapien, bibendum in dapibus vitae, adipiscing eget lacus. Fusce fermentum ligula blandit ligula feugiat et blandit nibh eleifend. Sed sit amet lacinia ligula. Pellentesque sed arcu enim. Nullam eget tellus aliquet sem luctus sodales. Mauris sed diam id erat molestie accumsan at in dolor.</p>
    <p>Phasellus eu ultricies arcu. Donec eu quam scelerisque tortor viverra vehicula non eu diam. Aliquam ut posuere leo. Aenean cursus laoreet augue in pharetra. Donec varius scelerisque enim, at laoreet enim condimentum nec. Pellentesque a quam dui. Sed sagittis erat vitae dui eleifend convallis. Morbi sollicitudin diam vitae tortor gravida vehicula. Vivamus in lacus id ante vestibulum viverra id ac arcu. Nam dolor enim, ultricies et iaculis vel, rhoncus vel dui. Donec feugiat dignissim lacus in suscipit.</p>
    <p>In interdum neque at nulla tempus ut ornare quam pretium. Nunc ac nisl velit, blandit sodales nunc. Vivamus dapibus iaculis mauris vitae ultrices. Vestibulum elementum luctus neque, et dignissim purus euismod scelerisque. Proin quis est et nulla condimentum porttitor non adipiscing libero. Nulla gravida tortor eu leo malesuada id malesuada turpis vulputate. Etiam suscipit neque quis purus sodales consequat. Curabitur nec nibh faucibus magna ultricies dictum. Duis eget enim vestibulum quam tempus accumsan eget eget erat. Donec faucibus, libero vitae ultrices pharetra, sem est luctus libero, id interdum est lacus id turpis. Praesent ac ligula sem, a posuere libero. Nulla eu eros erat, sed commodo neque. Donec elementum rhoncus nisl quis rutrum. Suspendisse porta dictum quam, sit amet congue neque porta ut. Nullam ut sem accumsan urna consectetur porttitor at id orci. Suspendisse fermentum nibh ac nulla pellentesque quis hendrerit nisl ullamcorper. Duis nibh arcu, fermentum in rutrum at, pellentesque at arcu.</p>
    <p>Suspendisse varius turpis eu ante molestie ut facilisis massa faucibus. Nam pulvinar orci sit amet libero ultrices rhoncus vulputate libero luctus. Pellentesque vitae felis et tellus iaculis semper et sit amet magna. Curabitur vulputate fringilla ligula, nec feugiat tortor pharetra a. Aliquam eu tortor justo, vel rhoncus eros. Phasellus metus sapien, bibendum in dapibus vitae, adipiscing eget lacus. Fusce fermentum ligula blandit ligula feugiat et blandit nibh eleifend. Sed sit amet lacinia ligula. Pellentesque sed arcu enim. Nullam eget tellus aliquet sem luctus sodales. Mauris sed diam id erat molestie accumsan at in dolor.</p>
  </div><!-- closes content -->
</body>
</html>

The CSS:

Code:

html {
    height:100%; 
    max-height:100%; 
    padding:0; 
    margin:0; 
    border:0; 
}

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    height:100%; 
    max-height:100%; 
    overflow:hidden; 
    padding:0; 
    margin:0; 
    border:0; 
}

#leftcolumn {
    width: 180px; 
    float: left; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    background-color: #ff0000; 
    z-index: 5; 
}

ul#navigation {
    padding-top: 180px; 
}

#navigation li {
    list-style-type: none; 
}

#header {
    height: 180px; 
    position: fixed; 
    display: block; 
    width: 100%; 
    z-index: 4; 
    top: 0px; 
    left: 180px; 
    right: 18px; 
    background-color: #00ffff; 
}

#headpad {
    height: 190px; 
    display:block; 
    width:10px; 
    float:left; 
}

#footer {
    position:fixed; 
    margin:0; 
    bottom:-1px; 
    right:18px; 
    left:180px; 
    display:block; 
    width:100%; 
    height:50px; 
    z-index:3; 
    background-color: #800080; 
}

#footpad {
    display:block; 
    width:18px; 
    height:50px; 
    float:left; 
}

#content {
    display:block; 
    height:100%; 
    max-height:100%; 
    overflow:auto; 
    padding-left:180px; 
    padding-top: 180px; 
    position:relative; 
    z-index:2; 
}

matt · 2009-07-12 12:31 am

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="HTML Tidy for Mac OS X (vers 14 February 2006), see www.w3.org" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Layout2</title>
    <meta name="generator" content="BBEdit 9.2" />
    <link rel="stylesheet" type="text/css" href="testlayout.css" />
</head>
<body>
    <div id="leftcolumn">
    <!-- opens left column -->
        <ul id="navigation">
            <li>Nav</li>
            <li>Nav</li>
            <li>Nav</li>
            <li>Nav</li>
        </ul>
    </div>
    <!-- closes leftcolumn -->
    
    <div id="header">
    <!-- opens header -->
        <div id="headpad">
        <!-- opens headpad -->
        </div>
        <!-- closes headpad -->
        <h1>Header</h1>
    </div>
    <!-- closed header -->
    
    <div id="content">
    <!-- opens content -->
        <h2>Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim ligula, interdum eget mollis et, tincidunt a tortor. Aenean sit amet neque vitae nibh facilisis aliquam. Phasellus sit amet justo ante. Nunc fermentum adipiscing tortor quis faucibus. Proin id felis turpis, id hendrerit nunc. Nunc nec sem sapien, et lacinia felis. Quisque sed felis a urna tempor adipiscing et egestas leo. Mauris nec quam sed quam placerat molestie a vel tortor. Donec ac ipsum sed magna cursus euismod. Etiam varius sem nec neque porttitor ornare. Nulla volutpat sagittis quam, nec egestas ante fermentum in. Nullam ipsum purus, imperdiet ac accumsan a, ultrices nec risus. Suspendisse elit massa, accumsan a posuere id, commodo eget risus. Morbi ante nibh, sollicitudin eu venenatis id, tincidunt scelerisque est. Donec in lacus ac magna accumsan mattis vel et orci.</p>
        <p>Integer varius consequat massa nec lobortis. Nulla facilisi. Quisque vestibulum augue sit amet nisi tempor quis venenatis leo sollicitudin. Mauris sed aliquam sapien. Pellentesque aliquet semper purus, et venenatis dui auctor et. Maecenas iaculis gravida leo sit amet volutpat. Mauris sed justo vitae lorem commodo hendrerit. Pellentesque pulvinar porttitor tempus. Maecenas id fermentum velit. Suspendisse malesuada tincidunt semper. Donec bibendum consectetur quam, quis pharetra lorem bibendum sed. Pellentesque tincidunt fermentum purus nec laoreet. Vivamus id enim nec odio dapibus pellentesque. In luctus accumsan ornare. Mauris ultrices feugiat libero.</p>
        <p>Phasellus eu ultricies arcu. Donec eu quam scelerisque tortor viverra vehicula non eu diam. Aliquam ut posuere leo. Aenean cursus laoreet augue in pharetra. Donec varius scelerisque enim, at laoreet enim condimentum nec. Pellentesque a quam dui. Sed sagittis erat vitae dui eleifend convallis. Morbi sollicitudin diam vitae tortor gravida vehicula. Vivamus in lacus id ante vestibulum viverra id ac arcu. Nam dolor enim, ultricies et iaculis vel, rhoncus vel dui. Donec feugiat dignissim lacus in suscipit.</p>
        <p>In interdum neque at nulla tempus ut ornare quam pretium. Nunc ac nisl velit, blandit sodales nunc. Vivamus dapibus iaculis mauris vitae ultrices. Vestibulum elementum luctus neque, et dignissim purus euismod scelerisque. Proin quis est et nulla condimentum porttitor non adipiscing libero. Nulla gravida tortor eu leo malesuada id malesuada turpis vulputate. Etiam suscipit neque quis purus sodales consequat. Curabitur nec nibh faucibus magna ultricies dictum. Duis eget enim vestibulum quam tempus accumsan eget eget erat. Donec faucibus, libero vitae ultrices pharetra, sem est luctus libero, id interdum est lacus id turpis. Praesent ac ligula sem, a posuere libero. Nulla eu eros erat, sed commodo neque. Donec elementum rhoncus nisl quis rutrum. Suspendisse porta dictum quam, sit amet congue neque porta ut. Nullam ut sem accumsan urna consectetur porttitor at id orci. Suspendisse fermentum nibh ac nulla pellentesque quis hendrerit nisl ullamcorper. Duis nibh arcu, fermentum in rutrum at, pellentesque at arcu.</p>
        <p>Suspendisse varius turpis eu ante molestie ut facilisis massa faucibus. Nam pulvinar orci sit amet libero ultrices rhoncus vulputate libero luctus. Pellentesque vitae felis et tellus iaculis semper et sit amet magna. Curabitur vulputate fringilla ligula, nec feugiat tortor pharetra a. Aliquam eu tortor justo, vel rhoncus eros. Phasellus metus sapien, bibendum in dapibus vitae, adipiscing eget lacus. Fusce fermentum ligula blandit ligula feugiat et blandit nibh eleifend. Sed sit amet lacinia ligula. Pellentesque sed arcu enim. Nullam eget tellus aliquet sem luctus sodales. Mauris sed diam id erat molestie accumsan at in dolor.</p>
        <p>Phasellus eu ultricies arcu. Donec eu quam scelerisque tortor viverra vehicula non eu diam. Aliquam ut posuere leo. Aenean cursus laoreet augue in pharetra. Donec varius scelerisque enim, at laoreet enim condimentum nec. Pellentesque a quam dui. Sed sagittis erat vitae dui eleifend convallis. Morbi sollicitudin diam vitae tortor gravida vehicula. Vivamus in lacus id ante vestibulum viverra id ac arcu. Nam dolor enim, ultricies et iaculis vel, rhoncus vel dui. Donec feugiat dignissim lacus in suscipit.</p>
        <p>In interdum neque at nulla tempus ut ornare quam pretium. Nunc ac nisl velit, blandit sodales nunc. Vivamus dapibus iaculis mauris vitae ultrices. Vestibulum elementum luctus neque, et dignissim purus euismod scelerisque. Proin quis est et nulla condimentum porttitor non adipiscing libero. Nulla gravida tortor eu leo malesuada id malesuada turpis vulputate. Etiam suscipit neque quis purus sodales consequat. Curabitur nec nibh faucibus magna ultricies dictum. Duis eget enim vestibulum quam tempus accumsan eget eget erat. Donec faucibus, libero vitae ultrices pharetra, sem est luctus libero, id interdum est lacus id turpis. Praesent ac ligula sem, a posuere libero. Nulla eu eros erat, sed commodo neque. Donec elementum rhoncus nisl quis rutrum. Suspendisse porta dictum quam, sit amet congue neque porta ut. Nullam ut sem accumsan urna consectetur porttitor at id orci. Suspendisse fermentum nibh ac nulla pellentesque quis hendrerit nisl ullamcorper. Duis nibh arcu, fermentum in rutrum at, pellentesque at arcu.</p>
        <p>Suspendisse varius turpis eu ante molestie ut facilisis massa faucibus. Nam pulvinar orci sit amet libero ultrices rhoncus vulputate libero luctus. Pellentesque vitae felis et tellus iaculis semper et sit amet magna. Curabitur vulputate fringilla ligula, nec feugiat tortor pharetra a. Aliquam eu tortor justo, vel rhoncus eros. Phasellus metus sapien, bibendum in dapibus vitae, adipiscing eget lacus. Fusce fermentum ligula blandit ligula feugiat et blandit nibh eleifend. Sed sit amet lacinia ligula. Pellentesque sed arcu enim. Nullam eget tellus aliquet sem luctus sodales. Mauris sed diam id erat molestie accumsan at in dolor.</p>
    </div>
    <!-- closes content -->
    
    <div id="footer">
    <!-- opens footer -->
        <div id="footpad">
        <!-- opens footpad -->
        </div>
        <!-- closes footpad -->
        <h4>Footer</h4>
    </div>
    <!-- closes footer -->
</body>
</html>

Code:

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    }

html {
    height: 100%;
    max-height: 100%;
    border: 0;
    }

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    height: 100%;
    max-height: 100%;
    width: 100%;
    border: 0;
    overflow: hidden;
    }

div#leftcolumn {
    width: 180px;
    float: left;
    z-index: 2;
    }
    ul#navigation {
        position: fixed;
        left: 0px;
        padding-top: 180px;
        height: 100%;
        width: 180px;
        background-color: #ff0000;
        }
        ul#navigation li {
            list-style-type: none;
            padding: 1em 10px;
            }

div#header {
    position: fixed;
    top: 0px;
    height: 180px;
    left: 180px;
    right: 0px;
    background-color: #00ffff;
    z-index: 1;
    }
    div#headpad {
        height: 190px;
        width: 10px;
        float: left;
        }

div#content {
    background-color: #fff;
    position: absolute;
    top: 180px;
    left: 180px;
    bottom: 50px;
    max-height: 100%;
    overflow: auto;
    right: 0px;
    padding: 1em;
    z-index: 0;
    }

div#footer {
    background-color: #800080;
    position: fixed;
    right: 0px;
    bottom: 0px;
    left: 180px;
    height: 50px;
    z-index: 1;
    }
    div#footpad {
        width: 18px;
        height: 50px;
        float: left;
        }

matt · 2009-07-12 12:51 am

A few things:

I would include the

Code:

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    }

block because different browsers may otherwise choose different values for things like margins and font sizes. Zeroing things out means that you don't have to include

Code:

margin: 0;
padding: 0;

for each element. It does mean that you would have to manually define the sizes, margins and padding for things like headers.

You don't need to include

Code:

display: block;

for a div unless the div has been defined to display in a different way in some other area of your code. Divs display as block by default, and their width is by default the whole page.

If such a div has a fixed position, you don't have to use

Code:

width: 100%;

if you know where you want its edges. You can just list where you want them to be.

Two things were causing the scroll bars to disappear: The content div's height was set to 100%, and like I said you don't need to define its height if you define its edges, and the header and footer had higher z-index values than the content div. Z-index means the z index on a graph, like what's used in geometry classrooms. Z-index is the third-dimension, and it defines which elements are on top. You can think of it as if you started stacking pieces of paper and numbered them as you put them down. 1 goes on top of 0, and 2 goes on top of 1, and 3 goes on top of 2, and 1000 goes in front of everything with a number lower than 1000.

I would move the footer to the end of the code, because it makes more sense for someone reading the code, and because search engines expect more important content will appear first in the code and rank pages accordingly.

Forums | MacLife

#1 2009-07-11 1:24 pm

A Little CSS Help

Code:

Code:

#2 2009-07-12 12:31 am

Re: A Little CSS Help

Code:

Code:

#3 2009-07-12 12:51 am

Re: A Little CSS Help

Code:

Code:

Code:

Code:

Board footer