Loading ...
Sorry, an error occurred while loading the content.

3861RE: Almost Finished - Re: [NH] Multiple Browser CSS

Expand Messages
  • Grant MacKenzie
    May 23, 2003
    • 0 Attachment
      >I don't see how the "floating naval" technique can work, unless used with a
      >fixed length page. After all "float" is designed to force other material
      to
      >wrap around the object. You've got to have something in that object or the

      > While I approve of the Shawn Morton's desire to use a style sheet
      > to get rid
      > of unnecessary HTML bloat, I still see the <TABLE> tags as the easiest way
      > to produce a naval that will always reach to the bottom of the page.
      >
      > Tell me I'm wrong, someone!
      >
      > Greg

      You are wrong Greg, ;)

      >other object will fill its space. In other words, you need to introduce
      >something which will guarantee that the naval equals the length of the
      >object that is attempting to wrap round it. Using a fixed length is one
      >approach. Given the desirability of making text in the main part of the
      >window resizable and to allow for different sizes of window I can't think
      of
      >an alternative - beyond using a completely different technique.

      Below a simple typical css layout which shows how this can be done.
      Instead of floating the nav , fix it to the left,set it's width and then
      make the main contents left margin as big as the navs width.
      In a way the nav is like a annotation to the main text, so it a pleasing
      idea semantically, to place it in the main contents margin.... you know like
      annotated bibles and the like.


      <!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" lang="en">
      <head>
      <title></title>
      <style type="text/css">
      body
      {
      margin: 0px;
      padding: 0px;
      }

      #header
      {
      border: thin solid black;
      background-color: #DCDCDC;
      }

      #nav
      {
      position: absolute;
      left: 0px;
      width: 233px;
      }

      #main
      {
      margin-top: 0px;
      margin-left: 235px;
      background-color: #F8F8FF;
      border: thin solid blue;
      }


      #footer
      {
      background-color: #F8F8FF;
      border: thin solid red;
      }
      </style>

      </head>
      <body>
      <div id="header">
      <h1>
      HEADER
      </h1>
      </div>
      <div id="nav">
      <ul>
      <li>
      NAVIGATION
      </li>
      <li>
      NAVIGATION
      </li>
      </ul>
      </div>

      <div id="main">
      <p>
      MAIN CONTENT
      </p>

      <p>
      MAIN CONTENT
      </p>
      <p>
      MAIN CONTENT
      </p>
      <p>
      MAIN CONTENT
      </p>
      </div>

      <div id="footer">
      <p>
      FOOTER CONTENT
      </p>
      </div>
      </body>
      </html>



      When dividing a page up into sections like header,nav,maincontent, footer I
      tend to use divs with IDs because these will be unique on each page. A class
      selector ought to pertain to 'more than 1 selected element(s)'i.e. a 'class'
      as the name implies .

      Because I'm positioning relative to a screen I deal with px. If relative to
      text I would use em.
    • Show all 11 messages in this topic