Task8Start - Write a css/html representation of the base layout

See TasksExplained? for more infos about tasks. This task is based on the template at TaskTemplateStart

Category : gui
Date opened : 2007-01-24
Description :
Remarks : See Task7Start for the layout sketch
Referenced in Story : WebStatistics Story5Start Task11Start Task7Start
Status : closed

2007-01-24 - Layout done
- html
- css
- Screenshot

Changelog

2007-01-24 - Layout done

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>remo - rule editor for modsecurity</title>
  <link href="stylesheets/remo.css" media="all" rel="Stylesheet" type="text/css" />
</head>

<body id="remo">
  <div id="banner" class="header">
    <div id="title"><h1><a href="http://remo.netnea.com">remo</a> - rule editor for <a href="http://www.modsecurity.org">modsecurity</a></h1></div>
    <div id="logodiv" align="right"><a href="http://remo.netnea.com"><img id="logo" src="images/logo.png"/></a></div>
  </div>
  <div id="maindiv">
    <div id="source" class="maincolumn">
      <div id="source-toolsetarea" class="toolsetarea">
      class: toolsetarea, id: source-toolsetarea
      </div>
      <div id="source-detailarea" class="detailarea">
      class: detailarea, id: source-detailarea      
      </div>
      <div id="source-mainarea" class="mainarea">
      class: mainarea, id: source-mainarea      
      </div>
      <div id="source-statusarea" class="statusarea">
      class: statusarea, id: source-statusarea      
      </div>
    </div>
    <div id="rules" class="maincolumn">
      <div id="rules-toolsetarea" class="toolsetarea">
      class: toolsetarea, id: rules-toolsetarea      
      </div>
      <div id="rules-detailarea" class="detailarea">
      class: detailarea, id: rules-detailarea      
      </div>
      <div id="rules-mainarea" class="mainarea">
      class: mainarea, id: rules-mainarea      
      </div>
      <div id="rules-statusarea" class="statusarea">
      class: statusarea, id: rules-statusarea      
      </div>
    </div>
  </div>
</body>
</html>

css

This was partly based on the depot shop css in the "Agile Web Development with Rails" book.
The floating technique was taken from http://www.maxdesign.com.au/presentation/liquid/example13.htm.

/* Global styles */

/* START:notice */
#notice {
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}
/* END:notice */

h1 {
  color: #494949;
  font-size: 150%;
  font-family: "DejaVu Sans", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

img {
  border: none;
}

a:link, a:visited, a:hover {
  color: #2eaeff;
  text-decoration: none;
}


/* Styles for main page */

#banner {
  float: left;
  width: 100%;
  background: #d4ebf9;
  border: 1px solid white;
  font-family: "DejaVu Sans", Helvetica, Arial, sans-serif;
  color: #494949;
}


#title {
  float: left;
  width: 49%;
  margin-left: 1%;
  white-space: nowrap;
}
      
#logodiv {
  float: left;
  width: 49%;
}

#maindiv {
  float: left;
  width: 100%;
  padding-top: 5px;
  font-family: "DejaVu Sans", Helvetica, Arial, sans-serif;
}

#source {
  float: left;
  width: 50%;
}

#rules {
  float: left;
  padding-left: 1%;
  width: 49%;
}

.toolsetarea {
  background: #d4ebf9;
  height: 40px;
  border-top: 1px dotted gray;
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}
.detailarea {
  background: #49a6e0;
  margin-top: 2px;
  height: 80px;
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}
.mainarea {
  background: white;
  margin-top: 2px;
  height: 400px;
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}
.statusarea {
  background: #d4ebf9;
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
  border-bottom: 1px dotted gray;
}

#source-toolsetarea {
}
#source-detailarea {
}
#source-mainarea {
}
#source-statusarea {
}

#rules-toolsetarea {
}
#rules-detailarea {
}
#rules-mainarea {
}
#rules-statusarea {
}

/* The error box */

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}