The page design described here was done for the local party organisation of the Freie Demokratische Partei in my home village. So the look of the thing is made to blend in with other sites of the same party. About 90 % of the visual appearance is a direct copy from the (then) pages of the Julis Ostfriesland/Küste, whose design has changed by now.
As long as lawyers are stupid enough to consider a cheap quartz watch looking a little similar to a Rolex (anyone here know what that's supposed to look like? I don't!) an illegal forgery but not another watch that faithfully copies and emulates everything that is supposed to make a Rolex so valuable but looks entirely different, the following note is unfortunately necessary:
All the techniques employed on this site, that took me and the people I copied from, most importantly John Gallant and Holly Bergevin, Mike Purvis, and Andrew Krespanis, days to think up, write and troubleshoot, are openly published and placed in the public domain by them and me.
Anyone willing is free to use and modify them in his or her own projects at will, a reference would be nice but is not compulsory.
But the looks and graphical design of these pages, those bits that any third grade pupil could draw up in half an hour given a pencil and a packet of crayons, is probably copyrighted by Junge Liberale Deutschland and any infringements thereof may well be prosecuted by them.
I strongly advise asking them before copying any of these graphicical elements into your own designs.
That said the most important part of that look are the distinctive shades of blue and yellow, everything else is basic run of the mill stuff. And the different parts and pages of FDP und julis can't even agree on those. Even the logos copied and pasted into our site for linking to them are all widely and visibly different. So unless they want to claim half the spectrum for themselves, my common sense tells me any objector to you copying this verbatim would not have a leg to stand on. But that is not legal advice, it is not even advice at all, I stand by what I wrote in the last paragraph.
The fluid three-column layout with a minimum width set in an Internet Explorer compatible way is fully explained on www.positioniseverything.net/ articles/ jello.html. Please drag your window to different widths and see what happens.
A lot of general hints with an explanation of the global reset and adaptation to the reader's choice of font size are found on www.leftjustified.net/ site-in-an-hour. Try changing the font size in your browser.
I have used Server Side Includes for the stuff supposed to stay the same for all pages on the site. These are mainly the left navigation bar and the right information bar. Thus these need only be updated in one central place. I invoke the changes in the top and left navigation bar by just redefining the relevant classes of the stylesheet. Even that is made easier through SSI, you just write down the names of the first, second and third-order element to be highlighted.
I've tried my best to make everything adapt to its content without having to touch the style sheets. In one place I did not succeed. In order to have the top navigation last in my source, or at least after the main content in the central column, I had to insert the size of the branding images explicitly. This means that exchanging them for others of a different height will break the layout without changing that value too. Still, having the content on top was the more important criterion.
As a final afterthought there is a small script making the left navigation fixed on the screen if that is big enough. This is not perfect – it does not recognize the reader changing his font size and only corrects itself on a resize (improbable, users of large fonts are probably browsing in full-screen mode) or a reload.
I have placed a sample page explaining (hopefully) all the classes and elements defined in the style sheets at www.axel.berger- odenthal.de/ Webdesign/ Testpage.htm
www. axel. berger- odenthal.de/ Webdesign/ Testpage.zip will download that page and all the style sheets to make it run. The included parts are fully embedded into the sample page so it will work and be editable on your machine, but comments and SSI include statements are kept, so you can see how everything is placed together. There is also the empty template I use to make new pages on the site.
I can't recommend my editor, NoteTab, too highly. Should you also want to use it, you'll find my library helpful, which is why I've included it too. This library is very much work in progress, but I'll probably forget to update the version in this archive.
Enjoy and multiply!
Zum Anfang Übersicht Sudeleien Home & Impressum