What’s Brewing - The Innovative Interfaces Blog

Taking advantage of some CSS, and the <––{toplogo}––> and <––{botlogo}––> tokens (in either WebPAC Pro or the Web OPAC products) we can facilitate a little trick where we create a column that “floats” either to the right or left side of our page.

We can then add whatever content we want to present to our users in this column and have it show up on every page within our site.

The example image below contains a “navigation” menu of sorts, but you could take this idea one step further and put RSS feeds in there, or if you wanted to push the boundaries a bit, using AJAX and readily available API’s (application programming interface) out there you could put widgets, Flickr images, maps, or videos (why not a Meebo widget for 24 hour Reference IM).

The meat of this little trick is leaving an open <div> element as the last piece of markup in your toplogo.html file and closing that div in your botlogo.html file. You can put your “:floating” column of content in either your top or bot logo file, all depending on how you write your CSS. For the example above, I placed my column in the toplogo.html file. A snippet of the toplogo looks like this:

<!– begin toplogo.html file –>
<!– Rel 2007 “Skyline” Example Set –>
<div class=”topLogoDiv”>
<div class=”floatRight”>
<ul class=”headerNav”>
<li><a href=”/”>Home</a></li>
<li> | </li>
<li><a href=”/screens/help_index.html”>Help</a></li>
<li> | </li>
<li><a href=”/patroninfo”>Login</a></li>
</ul>
</div>
<a href=”/”><img src=”/screens/wpp2007Logo.png” height=”50″ width=”241″ alt=”2007 WebPAC PRO”/></a>
</div>
<div class=”clear”> <!– content div –>
<div class=”rightNavDiv”><!– left nav –>
<ul class=”rightCol”>
<li><a href=”/”>Home</a></li>
<li><a href=”/patroninfo”>My record</a></li>
<li><a href=”/screens/libinfo.html”>Library information</a></li>
<li><a href=”/screens/help_index.html”>Help</a></li>
<li><a href=”/feeds”>Feeds</a></li>
<li><a href=”/screens/rpro.html”>Research Pro</a></li>
<li><a href=”/iii/cakendar”>Programs Calendar</a></li>
<li><a href=”/”>KidsOnline</a></li>
<li><a href=”/ftlist”>Featured item lists</a></li>
<li class=”navHeader”>Search Options</li>
<li><a href=”/search/Y”>Keyword</a></li>
<li><a href=”/search/t”>Title</a></li>
<li><a href=”/search/a”>Author</a></li>
<li><a href=”/search/d”>Subject</a></li>
<li><a href=”/search/c”>Call number</a></li>
<li><a href=”/search/i”>ISBN</a></li>
<li><a href=”/search/X”>Advanced Search</a></li>
<li><a href=”/programs”>Programs</a></li>
<li><a href=”/search/q”>Author and Title</a></li>
<li><a href=”/search/g”>Government documents</a></li>
<li class=”navHeader”>Course reserves</li>
<li><a href=”/search/r”>Course Search</a></li>
<li><a href=”/search/p”>Instructor Search</a></li>
<li class=”navHeader”>User Actions</li>
<li><a href=”/illb”>Inter-Library Loan</a></li>
<li><a href=”/selfreg”>Self Registration</a></li>
<li><a href=”/acquire”>Suggest a purchase</a></li>
<li><a href=”/suggest”>Comments</a></li>
</ul>
</div><!– end right nav –>
<div id=”leftSideCont”><!– left container –>
<!–end toplogo.html–>

Notice that the bolded “leftSideCont” <div> is not closed in the toplogo file? You would think this could be a problem, but it isn’t because we close it first thing in the botlogo file. Here is what that file looks like:

<!– begin botlogo.html file –>
<!– Rel 2007 “Skyline” Example Set –>
</div><!– end left container –>
</div> <!– end content div –>
<br class=”clear”/>
<!– end botlogo.html file –>

So now all we need is the CSS that makes this work! I will show you CSS for the two layout divs, but will leave the fun design stuff - how children elements and their content looks (font, hover effect, the backgrounds, borders, etc…) to your own design sense and imagination:

#leftSideCont {
      background:#fff;
      border:2px solid #f9f9f9;
      float:left;
      margin:1% 0 1% 1%;
      padding:10px;
      width:78%;
}

.clear { clear:both; }

.rightNavDiv {
      background:#fff;
      border:2px solid #f9f9f9;
      float:right;
      margin:1% 1% 1% 0;
      padding:5px;
      width:15%;
}

As I mentioned earlier, this example is a pretty simple example. You could really take this example and expand it into some exciting places, but I feel I would be remiss if I did not admit that floats are a tough thing to work with as not all browsers implement them the same way (not naming names here…).

Now if you are feeling adventurous you could try a no-float solution that is best detailed here. I have made a catalog design based upon the no-float layout scheme and I have to admit it was both challenging and fun to do. Not too sure how applicable it might be for everyone, but then experimentation leads you to your best designs!

Enjoy!

posted in: CSS, example set, HTML, tips and tricks, web design, webpac

You can leave a response, or trackback from your own site.

Leave a Reply