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

YUI Grids - Layouts

Expand Messages
  • netrix37
    I m looking for the best way to create a layout where the top header is a 100% width but the body is for example 750px. I think it will be easier to explain
    Message 1 of 1 , Feb 27, 2009
      I'm looking for the best way to create a layout where the top "header"
      is a 100% width but the body is for example 750px. I think it will be
      easier to explain if you saw what I've got so far. Thanks in advance.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

      <html>
      <head>
      <title></title>
      <link rel="stylesheet" type="text/css"
      href="yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" />
      <style type="text/css">
      body
      {
      background: #ccc;
      }

      #header
      {
      background-color: #fff;
      padding: 3px;
      }

      #hd-bar
      {
      top: 25px;
      border-bottom: 6px solid #a0a0a0;
      }

      #bd
      {
      margin-top: 10px;
      }
      #bd .yui-b { border: 1px solid #8d8d8d; background-color: #fff;}
      #topnav { margin-top: 14px; font-size: 16px; text-align: right; }
      </style>
      </head>
      <body>
      <div id="header">
      <!-- must be yui-t3 to allow enough space for logo -->
      <div id="doc2" class="yui-t3">
      <div id="hd">
      <div id="yui-main">
      <div class="yui-b" id="topnav"><a
      href="http://www.mysite.com" title="Go Home">Home</a> | <a
      href="/search" title="Search">Search</a> | <a href="/people"
      title="People">People</a> | <a href="/companies"
      title="Companies">Companies</a> | <a href="/jobs"
      title="Jobs">Jobs</a></div>
      </div>
      <div class="yui-b"><a href="http://www.mysite.com"><img
      src="images/logo.gif" /></a></div>
      </div> <!-- hd -->
      </div> <!-- doc -->
      </div> <!-- header -->
      <div id="hd-bar"><!-- bar --></div>

      <div id="doc2" class="yui-t2">
      <div id="bd">
      <div id="yui-main">
      <div class="yui-b">
      main content
      </div>
      </div>

      <div class="yui-b">
      <ul>
      <li>nav1</li>
      <li>nav2</li>
      <li>nav3</li>
      <ul>
      <li>nav3 sub</li>
      <li>nav3 sub</li>
      </ul>
      <li>nav 4</li>
      <li>nav 5</li>
      </ul>
      </div>
      </div> <!-- bd -->
      <div id="ft"><!-- ft --></div>
      </div> <!-- end doc -->
      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.