My journey “In Search of the Holy Grail”

19/10/2009

My journey “In Search of the Holy Grail”

Filed under: Công việc,Học tập — dinhnhy @ 11:41 am

“In Search of the Holy Grail” – http://www.alistapart.com/articles/holygrail
I found the article is very good for me to understand the whole idea about the “standard design” (aka Holy Grail in web design). And the best thing is it is build “On the shoulders of giants” ^_^

So after understanding the idea, I try to implement my own three column web layout for our website:

main.css

/* Start of modification to adjust the column width */
/* Center column: fluid + side paddings (20px) + topbot paddings (20px) */
/* Left column: 140px + side paddings (2px) */
/* Right column: 1px + side padding (0px) */
/* Body min-width: (LC fullwidth + CC side paddings)*2 + RC fullwidth */
body {
  min-width: 321px;          /* 2x(140+20) + 1 */
}

#banner {
  height: 80px;
}

#mainContainer {
  padding-left: 140px;      /* LC fullwidth */
  padding-right: 21px;      /* RC fullwidth + CC both side paddings */
  overflow: hidden;
}

#centerCol {
  padding: 10px 10px;       /* CC padding top/bottom & left/right */
  width: 100%;
}

#leftCol {
  width: 138px;             /* LC width */
  padding: 2px 1px 2px 1px; /* LC padding */
  right: 160px;             /* LC fullwidth + CC both side paddings */
  margin-left: -100%;
}

#rightCol {
  width: 1px;               /* RC width */
  padding: 0 0px;           /* RC padding */
  margin-right: -21px;      /* - RC fullwidth - CC right padding */
}

* html #leftCol {
  left: 1px;                /* RC fullwidth */
}

/* End of modification */


* html body {
  overflow: hidden;
}

#mainContainer .column {
  position: relative;
  float: left;
  padding-bottom: 10010px;  /* X + padding-bottom */
  margin-bottom: -10000px;  /* X */
}

#footer {
  clear: both;
  padding: 5px;
  position: relative;
}

* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
}

theme_gray.css

/* Color theme */
#banner {
  background: #eee url(/images/banner-MIS.jpg) no-repeat 0 -10px;
}

#mainContainer {
  background-color: #fff;
}

#centerCol {
  background-color: #fdd;
}

#leftCol {
  background-color: #eee;
}

#rightCol {
  /*background-color: #eee;*/
}

#footer {
  background-color: #ddd;
}

* html #footer-wrapper {
  background: #ddd;         /*** Same as body background ***/
}
/* End of color theme*/