Today I turned a Mock created by Web Solution’s Senior Web Designer Bradford Sherrill into an HTML layout.
I decided to do something a little different this time and take screen shots of my progress. Click an Image to enlarge it.
*Edit
As Requested I am updating this post with the HTML and CSS I used to create this site.
I’m starting with the HTML and adding the CSS in a day or two.
I started by creating elements with the sizes and locations of each part of the web site layout. The different colors are so I can easily see each element.
Im only including the HTML in the body tag to reduce the amount of code you have to scroll though.
This layout is being developed for an ASP.Net 2.0 Master Page so any <asp: tags are specific to that framework.
I started by creating 6 div’s to define the basic layout of the site.
The header has a fixed height and expands to 100% of the browser window.
The body content div has no defined height but has a fixed width of 1000 pixels.
The 3 divs that it contains each have a fixed width and are floated left. The reason these elements are inside of a parent div with a fixed width is to prevent the divs from dropping below each other when the browser is less than 1000 pixels because the user resized the browser or has a lower screen resolution.
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="bodyContent">
<div id="leftContentHolder"></div>
<div id="menuContent"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</form>
</body>
Next I added in a background image for the Header, Left Content Area, The Menu, the Main Content Area and the Footer.
The Images are added in as background images for each part of the layout except the logo.
In the mainContent div I added another div that is used to give the content some padding. This is done to get around IE 6’s broken box model. Many people prefer to use some IE specific css hack to give an element with a width padding or a margin but I prefer this method.
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="bodyContent">
<div id="leftContentHolder">
<div id="logo">
<a href="Default.aspx">
<img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />
</a>
</div>
<div id="leftContent"></div>
</div>
<div id="menuContent"></div>
<div id="mainContent">
<div id="mainContentPadding">
<asp:ContentPlaceHolder ID="cp1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="footer"></div>
</form>
</body>
Now this site is finally starting to look good. Lets finish the layout up by adding in some content in the header and footer
<body>
<form id="form1" runat="server">
<div id="header">
<div id="services">
</div>
<div id="headerText">
<div id="headerTextSpacing">
Header Links Here
</div>
</div>
</div>
<div id="bodyContent">
<div id="leftContentHolder">
<div id="logo">
<a href="Default.aspx">
<img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />
</a>
</div>
<div id="leftContent">
<div id="leftContentPadding">
</div>
</div>
</div>
<div id="menuContent">
<div id="menuContentPadding">
<div id="ConcretePolishing" runat="server" class="menuButton">
<a href="Concrete-Polishing.aspx">Concrete Polishing</a>
</div>
<div id="FloorCoatings" runat="server" class="menuButton">
<a href="Floor-Coatings.aspx">Floor Coatings</a>
</div>
<div id="SeamlessFlooring" runat="server" class="menuButton">
<a href="Seamless-Flooring.aspx">Seamless Flooring</a>
</div>
<div id="TerrazzoCementitious" runat="server" class="menuButton">
<a href="Terrazzo-Cementitious.aspx">Terrazzo Cementitious</a>
</div>
<div id="SurfacePreparation" runat="server" class="menuButton">
<a href="Surface-Preparation.aspx">Surface Preparation</a>
</div>
<div id="SafetyStriping" runat="server" class="menuButton">
<a href="Safety-Striping.aspx">Safety Striping</a>
</div>
<div id="ConcreteRepair" runat="server" class="menuButton">
<a href="Concrete-Repair.aspx">Concrete Repair</a>
</div>
<div id="FloorMaintenance" runat="server" class="menuButton">
<a href="Floor-Maintenance.aspx">Floor Maintenance</a>
</div>
</div>
</div>
<div id="mainContent">
<div id="mainContentPadding">
<asp:ContentPlaceHolder ID="cp1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="footer">
<div id="footerText">
Footer Links Here
</div>
</div>
</form>
The layout is now complete, so its time to finish adding in the content that would be displayed on our home page.
I hope you enjoyed this article.
I will be going into further detail on my next Web Layout article but if you want to see anything specific, let me know.