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.
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.
If you are not comfortable with CSS or want to get a layout together really quick – check out the YUI CSS Grid Builder. You can easily create a layout, add content, and get the code in a matter of minutes. At the very least – this is a great starting point for beginners! Check it out!
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.
There have been two great menu and navigation techniques I have used over the last few years:
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.
- Two tab images (left and right, with both an active and hover (highligted) option
- Sub-menu arrow (not required)
- CSS for both the drop downs and the sliding doors techniques
- 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:
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.
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!
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.
What do you do when you have thousands of lines of CSS and probably have hundreds of lines within the thousands that are no longer used…but you have no idea because multiple people have contributed? You use the CSS Redundancy Checker.
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.
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 ;).