All things technology-related.
August 4th, 2010
I’m in the heart of open source country: Corvallis, Oregon, preparing to teach a workshop on website layout design for the 2010 SuperQuest Summer Institute at Oregon State University. I’ll be covering a variety of CSS techniques to generate cross-browser layouts (1, 2, & 3-column). We’ll also cover typography, use of color, background graphic positioning, and other fun techniques.
So we can get right to the meat of the matter, I decided to post some “starter” code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
</style> <title></title>
</head> <body>
</body> </html>
Since our concern will be primarily with coding layouts, I want to jump right to some sample code to drop into our various columns, headers, & footers. A great site to drop sample code is the HTML-Ipsum site. Look at the page, decide how much or what type of sample code you want, click the title box above the code, and you’ll get the sample code copied to your clipboard, ét voilá!
Stay tuned for some more yummy CSS goodness forthwith…!
June 27th, 2010
The Superfish plug-in rocks the free world, if you ask me, but I had a few problems implementing the JavaScript on my own CSS-styled menus. I therefore set out to expand their instructions and “fix” the ones that caused problems.
There are many resources on using CSS to create fancy navigation bars. My top recommendation for any web designer is to start with CSS Max Design. They have a listutorial that explains the trick to creating horizontal and vertical navigation menus using only HTML and CSS. They also explain how to style nested lists. CSS Max Design also has a repository of probably 100 different menu styles, all using HTML and CSS only.
For the Superfish menu to work, you must begin with a nested list of links. Go to CSS Max Design’s Listamatic 2 and chose a CSS-driven layout that we liked (horizontal or vertical) – my favorite was “borders and indents” – you pick your own. It really doesn’t matter which menu you like because they all use the exact same HTML code.
A good place to stick this code is right after your header (<h1>) or in a banner or header div (<div id=”banner”>
Why? With the listamatic, they only contain 1 nested list (under “item one”). However, in the real world, there are typically 2 or more nested lists. Since the id attribute is a unique identifier, in theory, you should not have the same id attribute twice. That’s reserved for a class attribute.
Your nested list of links should look something like this when you’re done:
You’ll note I added a comment at the top, that was not in the listamatic, but it doesn’t really affect anything. Note also how I added a second “subnavlist”.
You might like to know that you can most probably nest a nested list. In my workshop, I did a quadruple nested list (a list within a list within a list within a list) just to see how the superfish handled it, and the only issue was the width of the entire menu made it a little cramped.
<div id="navcontainer"> <!-- Create an unordered list of links --> <ul id="navlist"> <li><a href="index.html">Home</a></li> <li><a href="#">Page One</a> <ul> <li><a href="#">Sub Item One</a></li> <li><a href="#">Sub Item Two</a></li> <li><a href="#">Sub Item Three</a> </li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a> </ul> <li><a href="#">Sub Item One</a></li> <li><a href="#">Sub Item Two</a></li> </ul> </li> <li><a href="#">Page Four</a></li> </ul> </div>
Did you see my post on Notepad++, because it’s the best web design tool in the universe. If you don’t have Notepad++, download it now, and then you can proceed.
Note: if you are a seasoned code monkey, you may wish to create your own CSS code for the navigation bar. If that’s you, just skip the steps involving copy and paste from listamatic2.
I often times make my students change the color schemes and fonts and encourage them to experiment with background images as well.
What you’re going to do now is change every line of code in your CSS that states, “#subnavlist” to “.subnavlist” That’s because in CSS # is for an id attribute and the dot . is for class attributes.
Have you met my favorite shortcut key from Notepad++? It’s called “Replace.” In Notepad, it’s called “Find and Replace” either way, this is the time to familiarize yourself with that little shortcut.
This I can’t help you with. If you get stuck, or things are not working, you may wish to start over. It’s most likely due to steps 2 and 5. If you don’t mind having only 1 subnavlist or you what to throw semantic markup out the window, ignore steps 2 and 5 and hope for the best.
Get the zip archive from the Superfish download page. Extract all files, then grab all JavaScript files from the ‘js’ folder and save them into a folder in your website (Note: even though you will link to 2 javascript files, all files will be used–don’t be stingy).
In the head of your HTML page, you will add 2 <script> tags that will link to two different JavaScript Sheets. WARNING: Make sure you link in the proper order, from top to bottom:
Note: the link to superfish.css is unnecessary for this (since we used the CSS from Listamatic2
Initialize the superfish through a script tag like so
<script type="text/javascript">
//Initialize the SuperFish Plugin
jQuery(
function(){
jQuery('ul#navlist').superfish();
}
);
</script>
According to the instructions on the Superfish home page, it says to add a class=”sf-menu” to your unordered list, but that’s only because they don’t realize how smart you are. You already gave an id attribute of ‘navlist’ to your <ul>. When you initialize the plug-in, you specify what tag gets adjusted by the Superfish, it’s the section where it says jQuery(‘ul.sf-menu’). Since our list has an id of navlist, you simply change the jQuery function call to jQuery(‘ul#navlist’), and it will work just fine.
Note: you could also just add class=”sf-menu” to your unordered list, but then it would be jQuery(‘ul.sf-menu’)
December 19th, 2009
No web designer or web design class is complete without Notepad++ (my favorite tool for working on web pages). Download it here: http://sourceforge.net/projects/notepad-plus/files/
Warning: setting Notepad++ theme to “Hello Kitty” may cause seizures.
October 9th, 2008
If you want to view the files for my presentation on CSS Layouts, visit my teacher website.
Once you’re there, you can link to the following resources:
June 2nd, 2008
Just a little over a week ago, I coded quite a challenging layout. It was a contract job, so I won’t name the website by name; we’ll just call it Joe. Anyway, the client wanted a graphic banner that was positioned about a quarter of the way down the screen. They wanted this banner to stretch, like a wing, across the entire width of the screen and basically cut a swath straight through the website; it divided the header from the content and took up about 140 pixels in height.
As I agreed to try this design, I thought there might be two or three ways to accomplish the task, but the more I considered the requirements of the site, the more I began to wonder what I was thinking. My first thought was to make a background graphic that had the banner and then simply create a div tag for the header, a div tag for the content, and apply just the right amount of margin to reveal the banner.
This might have worked, except that there was another graphic that needed to be tiled on the background, and so I would have to make sure the wing would not repeat further on down the page. I also had to create the site in such a way that we could sandwich in some kind of slide show or flash graphic in the heart of the wing (I suppose that would make it the thorax).
My solution was to create a div (<div id=”wings”>) and place a background graphic that was quite wide and repeated on the x-axis. I placed this before my centering container so that it could stretch across the entire width of the screen. The div doesn’t really do anything other than hold the background graphic. I then created the centering container and set the width to 970px, and after that, I created a banner division that contained the logo (using an image-replacement technique) and the navigation bar.
Once I had the header set, I micro-adjusted the wings background image position until it lined up directly below the banner div. The next division was the content div. I simply added a top-margin to push the content down until it lined up directly below the wings.
The real work was not the wings but in testing for Firefox and IE versions 6 and 7 and working the nav bar and logo. As I began testing, it became apparent that if I designed for Firefox, it looked fine on Opera (latest version) and Safari. Unfortunately, IE 7 did not display the same as Firefox, and neither did IE 6, and to make things worse, IE6 and IE7 occasionally differ in their rendering. If you ask me, the best way to deal with IE’s continued stubborn refusal to display correctly is to use the conditional comments (e.g. <!–[if IE 7]>). The most time-consuming part of it all was the continual testing and refinement (i.e. making one change on one div and having the layout on another div shift in response).
I technically haven’t solved the slideshow div (the one that goes right in the heart of the wing), but when it’s time, I’ll simply sandwich a new div in between the banner and content and add the right amount of top and bottom margin and make sure I do not add a background color. It should be a simple operation, but if not, it will make for an interesting post.
No comments »