CSS と HTML ビューについては、このフィドルをご覧ください。
コードは次のとおりです。
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
<a href="#">Dashboard</a>
<a href="#">Logout</a>
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
id が header-bar の div には、このセグメントに描画されたすべての要素が含まれている必要がありますが、このセグメントが動作を拒否する理由がわかりません。私はデザインを始めたばかりで、Dreamweaver のようなグラフィカル ツールをコード ビューやデザイン ビューと共に使用してこれらを作成しています。また、ブラウザでは、id が header-bar の div にテキストがまったく表示されません。ID が header-bar の div は、Chrome の Inspect Element で 0px の高さを報告します。