Simple 3 Column Layout

I was talking to one of my friends today who does a lot backend programming but often needs a quick and easy 3 column layout that has the floats all figured out. His frustration with floats prompted me to make a very basic layout for him to use. If you find yourself in the same situation – check out my basic 3 column layout.

Always Use a Doctype

After spending an hour on something that should have taken me 20 minutes – I wanted to pass on something I should have caught right away. The problem: you use CSS to lay something out and it looks great in Firefox and Safari – but not in IE. At this point I validate the CSS to make sure I did not forget a bracket or something stupid. Next step – validate the XHTML. This is where I would have solved my problem, but I failed to take this step. At that point I would have seen that the script I was working with did not have a doctype defined. Once I added in the doctype – everything loaded as expected and I could not believe I missed something so basic. Lesson learned – and hopefully you will know now as well to make sure a doctype is always set.

Add a "Pseudo" Pseudo Class Hover in Inline CSS.

I have been busy this week with a few really cool projects – one of them to create a widget for any site that will show the latest news items from a RSS feed – while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

<a href="file.html">Title&lt;/a Update 14.8

After working on clients’ web sites all day long, I often realize that this web site could benefit from things I learn while working on other projects. In the past few months I have put together some pretty amazing web sites that really bend WordPress so that the users can do just about any update to any text via the WordPress admin. I also have put together some other pretty advanced sites which rely heavily on template logic and really neat CSS. I had a few moments last night to update this site (cleaned up a lot of the templates, changed the home page, re-arranged the page content for the main pages, put in an archives section, and started thinking about how I could improve this web site to make it more useful for others. If you have any ideas – please let me know! For now – enjoy the changes, and optimized code.

Sliding Doors + Sons of Suckerfish = Jappler Menus!

There have been two great menu and navigation techniques I have used over the last few years:

  1. Sliding Doors of CSS
  2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

  1. Two tab images (left and right, with both an active and hover (highligted) option
  2. Sub-menu arrow (not required)
  3. Sons of Suckerfish javascript
  4. CSS for both the drop downs and the sliding doors techniques
  5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:

  1. Left
  2. Right

Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.

Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).

CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).

Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.

Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.

Questions, comments? Contact me!

Easy CSS Fix For Height Issues

I have been working on a number of half baked sites – sites that some other developer started and I was called in to complete them. Two of the sites had the same issue – major differences in height/spacing. If you ever run into this, please take a look to see what the “line-height” is set to. If it is not set at all, set it to something and work from there. If it is set to something, make sure it is not set in multiple places for the same element. Line height is one of the most overlooked way to troubleshoot IE/other browser spacing/height issues.

Great CSS Buttons

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the “sliding doors” buttons. I also recommend the “sliding doors” tabs – I use those on almost every site I do.

WordPress Jobs

I was approached a few months ago with a project that sounded like a great opportunity: to design the UI and logo for the new WordPress Jobs web site (which my company does about 90% overall business on WordPress development). If you missed the announcement for the site, check it out. If you need WordPress consulting, you could go to the site, or you could go to the company who helped build the site ;).