Well, after hours and hours and hours and hours and hours….of work, I’ve finally found a css layout that:

1. Allows the weblog content to appear in the html file before the menu. I don’t know if this will actually help – see * below.
2. Is about 60% the size of your original index.jsp file (mostly because I was able to take out redundant and totally unnecessary tags and used tabs instead of spaces for spacing). This doesn’t include weblog content, just the menu bar.
3. Dynamically resizes itself in IE if the text is wider than the specified width of the menu, which happens if you crank up the text size.
4. In non-IE browsers, text on the menu that is to big is simply cut off on the right side. This happens when a single word is bigger than 150pixels. Because I used div tags rather than tables tags, the links on the menu with multiple words now wrap when there’s not enough room on one line for both words.

* I don’t know if #1 actually allows the browser to display the content before the menu if the page is loading slowly. Please try it from your home over the modem, and let me know. http://jerz.setonhill.edu/weblog/index7.jsp

I’ve tested the page in the latest versions of IE, Mozilla, Opera, and Netscape on WindowsXP, and it works on all those.

This is as close to “ideal” as I think I can get with css – I think if you want nice predictable uncomplicated horizontal layout, use a table.

Changes I made to your jerz.setonhill.edu website:

1. Uploaded a new copy of weblog.css to your actual website – I looked first, you don’t really have to worry about it.
2. I changed your general /resources/default.css file –
   .Sidebar
   “margin: 3px;” was removed

3. index7.jsp was slightly changed so it would compile – the version that we will use will be slightly different (but needs the changes made when comments were added to compile).

I don’t know why I spend time on this kind of stuff, I really shouldn’t. Ah well… —Will GaytherWill Gayther Keeps Working on Style SheetsE-Mail)

Wow… thanks a million! I tried it, and it works great for me.

CSS = “cascading style sheet,” or a way to give designers more control over web page layout.

Will has been steadily chipping away at the download time for Jerz’s Literacy Weblog. This is his latest contribution.