Framing the Content

Looking back to the first tutorial where we decided what we wanted our web page to look like, we now have a lot of the overall structure of the page in place. The next thing that we need to add is the sub heading below the menu bar and the background to go behind the actual page content. As in the prior tutorials we'll add the HTML code first.

<h2>Sub heading goes here</h2>
<div id="text">xxx</div>

Those of course need to be styled so as to give them the appearance we want them to have in our page.

h2 {margin : 0; padding : 10px 5px; text-align:center; font : bold italic 1.1em 'bookman old style',georgia,serif;}
#text {margin : 10px; padding : 10px; height:1%;background-color:#ccc; background-image: url(background.gif);border : 2px ridge #999;overflow:hidden;}

A couple of things to note with what we have in these commands. One is that we now have an extra image called background.gif that is referenced from the stylesheet and so that image needs to exist in the appropriate folder in order to be used. Secondly we have given the text div a height of 1%. This will make no difference at all to most browsers since the height of the div will be expanded to fit whatever content we place in it and that content is certain to be taller than that 1%. The height is there to resolve a bug in Internet Explorer where the div needs to have an IE proprietary property called hasLayout set to true in order for it to display the way we want. Adding the height is the easiest way to trigger that setting without impacting on the appearance in other browsers.

Our template page is yet another step closer to looking the way we want.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow