As I mentioned in my last post, I’ve created a “sliding header” technique: a CSS method for handling screen resize. Since buying a mac and regularly using Safari, I’ve been a bit more sensitive to the need to create pages that handle different screen sizes. My newest solution involves sliding a background image under the regular header text. My new course website shows the technique in action (try viewing the page at full screen and then at half screen–though I haven’t tested it in Firefox or Explorer yet).
Here’s how the trick works. First, the HTML code:
<body>
<div id=”container”>
<div id=”header”>
<h1> English 106 </h1>
<p>Fall 2007 <br />
Instructor: Marc C. Santos</p>
<h2>Composition 2.0: Rhetoric Goes Digital</h2>
</div>
Essentially, we have two divisions to work with, a header division, which contains some relevant information that we want to display on every page, and a container division, which contains not only our header, but also several other divisions: navigation, content, footer, etc. Whenever I code a site, I have one “catch-all” division called container which houses all of the page’s content.
Next, the image file
Notice that the image file, which is 200 pixels high, includes the border (7pixels). This means that, if you want to duplicate my CSS code below and insert your own image, then your original picture must be 186 pixels high. I downloaded this image from Flickr and then cropped it to the size I needed.
O.k., now the CSS for div#container (its only two lines):
div#container {
min-width:520px;
border:1px solid #12385D;
}
While the “min-width” command won’t work in IE 6.0 and earlier, all modern browsers (including IE 7, if memory serves correctly) won’t allow the page to shrink below 520 pixels, the requisite size we need for our sliding image.
The CSS for div#header:
div#header {
height:200px;
overflow:hidden;
background-image:url(headerimage.jpg);
background-repeat:no-repeat;
background-color:#12385D;
background-position:right;
padding-left: 12px;
color:#ffffff;
border:2px solid #FFFF00;
}
The “overflow” property will keep everything contained just in case someone needs to increase the page’s text size (CTRL + +), the postition-right technique pushes the image to the right side of the header division. Everything else above is pretty straightforward. Presto, easy way to code a clean page that can resize to fit a user’s browsing style. In case you’re looking to borrow the code, here’s the source.
