<!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>
  <style type="text/css">
  /*<![CDATA[*/

  body { margin: 0; }

  #header { height: 100px; width: 60em; margin: 0 auto; }

  #userbar { color: #5A2; font-family: sans-serif; text-align: right; background-color: white; }
  #username { color: black; }

  #bar-space { height: 0.6em; }

  #navbar { font-size: 14pt; background-color: white; }

  #links li { display: inline; list-style-type: none; padding: 0 0.5em; }

  #links li a { text-decoration: none; color: #000; }

  #links li a:hover { text-decoration: none; color: #5A2; }

  .fr { float: right; }

  #fold { height: 0; width: 60em; margin: 0 auto; border-bottom: 1px solid #CCC; }

  /*]]>*/
  </style>

  <title></title>
</head>

<body>
  <div id="header">
    <img src="logo.png" />

    <div class="fr">
      <div id="userbar">
        Hello, <span id="username">austinkelleyway</span>! - preferences - logout
      </div>

      <div id="bar-space"></div>

      <div id="navbar">
        <ul id="links">
          <li><a href="#">loremipsum</a></li>

          <li><a href="#">loremipsum</a></li>

          <li><a href="#">loremipsum</a></li>

          <li><a href="#">loremipsum</a></li>

          <li><a href="#">loremipsum</a></li>

          <li>search <input type="text" name="search" size="10" /></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="fold"></div>
</body>
</html>

How can I improve this html/css? Is there someway I can make it more liquid, or less redundant, or even just clearer?

1 answer

1
point

You could use HTML5 to make the code more semantic which would make it clearer. Remove things like bar-space and just put bottom margin on the div above it, include your CSS in an external stylesheet. You might want to take a look at something like the HTML5 Boilerplate template as a base. Also if you are interested in liquid widths, you should look into Less regarding liquid widths (make sure to play with it and adjust your browser size to see!)

Answered about 6 years ago by Lynn Wallenstein
  • HTML5 Boilerplate is a very useful for all the new fronteers :) Nikita Sumeiko about 6 years ago