Print, video, sounds

Make the web page header liquid

Use tables in the header that float left.
When the screen is narrow they stack.		 pdf version
Header_table_stacked.gif
By nesting two tables inside a single-cell header table, you can make the Header on your web page liquid. For wide pages the two tables are on left and right. When the viewer window is narrow, the two tables stack.

Sure, I know the modern thing is to use divs instead of tables. Tim Berners Lee and all the college professors have been dissing tables for three decades. They have to be politically correct and they claim that tables do not "read" well for blind web surfers that use audio readers to understand web pages.
I dispute this. I doubt tables are a problem in modern disabled reading software. If they are, then all those college professors need to go work on making better web page audio interpreters and stop carping about the one half-decent way web designers have to control the page layout.

Tables almost always act more sensibly in a web page. When you go to print pages out, most browser software will not cut up tables but they all hack up div containers, sometimes losing some of the text or image.
Bottom of first columnmove down to the left
So this problem started once I hacked on the template files in Movable Type to make the body of the blog post look better. Once I started getting my Tech articles blog liquid, so it fills the page width, the header become a problem. I put the blog title and description on the left and a rako.com logo and a link to the table of contents on the right. But when you made the page narrow, the text would just write on top of other text.
Colliding_header_text.gif

This is so typical for pages made with the oh-so modern and oh-so-schwacked divs. So I made a new "banner header" template file for the Tech articles blog. Instead of divs, I used tables. One big single-cell table for the whole header. Then two 1x2 row tables nested inside the big table.

The first little table has the blog title tag in the top cell and the blog description tag in the bottom cell. The second of the two nested tables has my rako.com logo linked to the home page in the top cell and a "Contents" link to the table of contents in the lower cell. The Movable Type template HTML for the liquid header is:

 <table id="header">
        <tbody>
            <tr>
                <td>
                    <table id="header-left">
                        <tbody>
                            <tr>
                                <td id="header-name">
                                    <a href="
move up a little to the right move down to the left
<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a>
                                </td>
                            </tr>

                            <tr>
                                <td id="header-description">
                                    <$mt:BlogDescription$>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table id="header-right">
                        <tbody>
                            <tr>
                                <td id="header-logo">
                                    <a href="http://www.rako.com" target="_blank">
               <img src="http://www.rako.com/Archive/2007-01/Rako_logo.gif"  alt="Home" /></a>
                                </td>
                            </tr>

                            <tr>
                                <td id="header-contents">
                                    <a href="http://www.rako.com/Contents" target="_blank">Contents</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
move up a little to the right move down to the left
Header_table_close.gif
I created and experimented with the header in Kompozer. I made style sheet and put them on a local directory on my hard drive. After the requisite amount of software misery, I cut and pasted the crraptasticly formatted HTML source from komposer into TidyUI. Then paste that into the Banner header template file in Movable Type. In addition to Kompzer, I loaded that local file and style sheet into the fantabulous Stylizer. That let me have no styles whatsoever in the HTML. So after I got the header HTML pasted into the Movable Type banner header template file, I could re-publish one of my entries. Then I loaded that entry page into Stylizer. I could then cut out all the old header style rules out of the css, and paste in the header style from my local file into the real css for the web page. Best of all, since I set the blog stylesheet to link to itself in the output template section of the template file, I can just have Sylizer overwrite the css on the web page and Movable Type will not clobber it since the file Stylizer uploaded  has a date stamp later than the css file inside Movable Type.
Header_table_stacked.gif
move up a little to the right move down to the left
So the style sheet makes the main container table 100% wide and puts the same image as background. It sets the height of the header at 135 px. The good juju comes with the little tables inside the main one. You float the first one left and the second nested table right. Now when you narrow the window, the table on the right just pops under the left side table as the window gets too narrow to hold the tables side-by-side.

All the other css is normal stuff like the white font color and size and making line appear under the links when you hover the cursor over it. The part of the css for the header is below, the print-css is the same except the "Contents" link is display:none; so it does not show up on printouts.
BODY
{
margin: 0;
}
IMG
{
border: none;
}
/*Header layout*/
#header
{
background-image: url(http://www.rako.com/Articles/images/Schematic_sfw.jpg);
height: 135px;
width: 100%;
padding: 0px 0% 0px 6%;
border: 0px solid #000000;
}
#header TD
{
border: 0px solid #000000;
}
move up a little to the right move down to the left
#header-left
{
float: left;
}
#header-right
{
float: right;
}
#header A:hover
{
text-decoration: underline;
}
#header-name A
{
color: #FFFFFF;
text-decoration: none;
font-size: 1.7em;
font-family: sans-serif;
font-weight: bold;
/*[disabled]+placement:shift 115px 33px;*/
}
#header-description
{
color: #FFFFFF;
text-decoration: none;
font-size: 9.9pt;
font-family: sans-serif;
}
#header-contents A
{
color: #FFFFFF;
text-decoration: none;
font-size: 10.6pt;
font-family: sans-serif;
}
move up a little to the right move down to the left

This post is in these categories:

Categories

 border bar
Bottom of first column This is the end.