Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

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 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.

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

Occasionally I’m asked to create a page where there is tons of information (passed in through a database) and the information needs to be broken up into manageable page-like junks, but I can’t actually create multiple pages because the programmers require that the page does not refresh. Through some pretty simple css and javascript we can use buttons or tabs (or links of any kind) to switch beteen various data on a page.

So I haven’t written in a bit, what with the Holiday Slump and all, and I’ve been thinking about what my next tutorial should be. Lots of complicated ideas have been running through my head and then yesterday, while I was working on a new project, it occured to me that the there is something I do almost every time I code a website, and that is to create a semantic navbar - one that often displays as gorgeous imagery but is in fact coded with a simple unordered list. It occured to me that perhaps not everyone knows how to do it. So, while I know it’s been blogged about before, I’m going to offer my method for accomplishing this every-day task.

In the second installment of my Energy Muse Case Study Series I will discuss how I accomplished this layout in a semantic way. The challenge was to connect each text lable with its corresponding image while maintaining the unique positioning of each and the visual of a line running between them. I also wanted the text to have a hover effect when its corresponding image was moused over.

When the Faux Columns Article on A List Apart first came out in 2004 it was pretty sweet information for a lot of us. Finally we were able to make our two- and three- column layouts look like those columns actually extended the entire height of the page, no matter what the height of their actual content.

Now I want to show you how to take that a bit further. Inspired by my work (in progress) of redesigning/recoding the Zend.com site, I will show you how I accomplished rounded, stacked columns (six of them in this case) with “more” links that all sit in the same spot relative to the bottom of their columns, as in this layout.

Isn’t it annoying when you have a horizontally centered site that jumps about 20 pixels to the left when you come to a long page that requires scroll bars, and then jumps 20 pixels back to the right when you come to a short page that doesn’t require scroll bars?

I recently finished developing all the xhtml and css for the Energy Muse site redesign. This gorgeous site was designed by my good friend Hong Vo at Namaste Interactive. Isn’t she amazing, folks? I mean, really, this design is so beautiful - it just kills me that I didn’t do it myself!

Building this site was a great experience for me. It posed many challenges and solving these challenges was fun and rewarding. It occurred to me that the solutions I came up with would be great to share with my fellow web-standards-minded web designers. In fact, the desire to share the story of this site was what finally pushed me to start blogging.

Please Note These “tutorials” are aimed at experienced designers with a solid foundation in xhtml and css. I am not going to cover any of the basic layout techniques I used in this site, only those techniques that I think might be of help in expanding the toolbox of other experienced web developers.

In this first entry I will discuss the development of the index page which, in olden times, would most likely have been a gigantic image map. But I wanted to mark it up semantically so that it was accessible to search engines, hand-held devices, people with disabilities, or those myth-like people I’ve heard about … those that have images and/or styles disabled for some crazy reason (do they really still exist … has anyone met one of them?).