Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

Ok, so I just started working on my first Ruby site. Can I tell you honestly, that it lives up to the hype? I can. At least, for me it does. It is such a treat, as a CSS designer, to work with back end progamming that I can get well enough to do what it is that I do without having to involve a middle man. I love it!

My first challenge, however, was getting Ruby files (.rhtml files) to show up in Dreamweaver. I tried adding that extension to some lists in the preferences panel and was able to at least open Ruby files in Dreamweaver, but they weren’t color coded, nor did they make any effort whatsoever in the Preview Panel. Ok, not a big deal, but … what was a big deal was that I discovered that I could not use Find or Find and Replace actions in the Ruby folders. THAT was a problem!

Working on a recent project, I was asked to create a “dock effect” (similar to the doc on a Mac) for a row of thumbnails. I hunted around for quite some time for a decent javascript for this and really came up empty handed. So I decided to use css to not exactly mimic this effect, but at least echo it. ;o) Here is what I came up with.

This week I was working on coding the home page of a new project. The first thing I noticed upon reviewing the psd (designed by the fabulous Hong Vo of Namaste Interactive) was that the header graphic was to extend in both directions indefinitely … but that it was different on the right and left sides. Huh … how to handle this? I couldn’t simply repeat one strip at the top of the page. I didn’t want to make one huge graphic with one pattern on the left side and one on the right and then center the image … that would work, but it would require a huge graphic! Any other solutions I initially thought of would create a horizontal scroll bar to be ever present. What to do?

So many sites use icons in their headings to give that extra sense of polish to their design. I do it here on my front page. It’s easy enough—add some padding to the left of your heading and set a non-repeating background image positioned to the left of it and voila!

But what if you want the icon to sit to the right of the heading text, as in this example? If you give padding to the right of the heading and set a non-repeating background image positioned to the right you’ll see your icon flush right with the edge of your container, rather than at the end of your text. What to do? Let me show you.

In Semantic and Gorgeous Navigation Bars I explained the method I use for creating nav bars based on unordered lists which display as images and have hover and on states. Today I want to take that concept a bit further.

The idea is really the same, I’m just doing two things a little differently. First, I’m including photographs as part of my “nav button,” and secondly, I’m using some absolute positioning. First, have a look at the project I’m talking about (designed by Travis D. Falls) and check out the left sidebar. You’ll see that hovering over the “buttons” or the images associated with them will cause the entire block to light up. Let me quickly show you just how easy that actually is to accomplish.

I’m currently working on a site with the wonderful Hong Vo from Namaste Interactive that has an embedded flash video object on the home page. This site also has a horizontal drop-down menu. All was great until one of the drop down lists became long enough to overlap the flash video. Apparently, when embedding a flash video into an html page the embed code automatically puts the flash video on top of everything else. I could not for the life of me get the menu to lay behind the video no matter what I tried.

It was one of those “little problems” that was eating away my entire morning and most of my patience! ;o) In sadness, I discovered several forum discussions in which, apparently, it was agreed that there was simply nothing to be done.

Thankfully, I was stubborn and continued to dig further (I don’t give up easily!) and found this discussion, which contained a simple solution, which I will summarize for you:

I’m back! Refreshed, rejuvenated, working like crazy, and married!

Seems that I’m reporting on nothing but Javascript these days, doesn’t it? Sorry about that – it must just be what I’m jazzed about at the moment. Anyhow, here is a little clamshell navigation script thingy that I recently put to good use. See it in action here and then see how it’s done.

Ok, so yeah, I’m seriously embroiled in the last minute wedding stuff … but this is sooooooooooo cool, that I thought I would just take a moment to share. Want to make IE obey hover on anything, not just links? Now you can!

I used to always use “display:none” for hiding elements via css. Not anymore …

This is such a cool little gem that I discovered from David I wanted to share it with you guys. Did you know that you can use Ctrl+Shift+R or Ctrl+F5 to force Firefox to reload a fresh page, ignoring the cache?