Nuke to Drupal Theme conversion: define DOM

Now that the sizes, the positions and some extras are known, I can make a DOM out of this:

DOM

<div id="logo">1</div>
<div id="header">2</div>
<div id="banner">3</div>
<div id="wrapper">
  <div id="sidebar-left">4</div>
  <div id="main-content">
    <div id="sidebar-right">6</div>
    5
  </div>
</div>
<div id="footer">7</div>

CSS

I will not get into the details of the CSS here, only show the results of the layout CSS.

body,
#logo,
#header, 
#banner,
#wrapper,
#main-content,
#sidebar-left,
#sidebar-right,
#footer {
  padding:0;
  margin:0;
}

#logo {
    background:#f669ff;
    height : 80px;
    width : 132px;
    position : absolute;
    left : 0px;
    top : 0px;
  }
  
#header {
    background:blue;
    height : 80px;
    width : 648px;
    position : absolute;
    left : 132px;
    top : 0px;
  }

#banner {
    background:yellow;
    height : 80px;
    width : auto;
    position : absolute;
    left : 10px;
    top : 80px;
    right: 0;
  }

#wrapper {
    position:relative;
    background:#73ffcd;
    margin-top : 160px;
  }

#main-content {
    position:relative;
    background:yellow;
    margin-left:132px;
    margin-right:10px;
  }

#sidebar-left {
    position:relative;
    background:green;
    margin-left : 10px;
    top : 0;
    width:122px;
    float:left;
  }

#sidebar-right {
    position:relative;
    background:blue;
    width:122px;
    float:right;
  }
  
#footer {
    position:relative;
    background:pink;
    clear:both;
    height : 73px;
  }

mockup

see the result here

About the author: Bèr Kessels is an experienced webdeveloper with a great passion for technology and Open Source. A golden combination to implement that technology in a good and efficient way. Follow @berkes on Twitter. Or read more about Bèr.

blog comments powered by Disqus