Tricklin » CSS

Two More for the Portfolio

Patrick — Thu, 13 Nov 2008 18:03:48 +0000

I've added a couple more sites to my portfolio. I enjoyed developing each of these sites, as neither of them took much of my time.

You will more than likely recognize this first site, kjvandfamily.com, as I used the same WordPress template, with a few minor modifications.

I really enjoyed creating the second site, villageofsecor.com, as it is entirely managed via WordPress. This is the first time I've used WordPress to manage an entire site. Doing it this way makes me want to make this site managed entirely in WordPress. But that will have to wait. As my free time is at a premium these days.

With this site, I had my client pick a template from WordPress.org. Once picked, I then modified it slightly to work better with the theme of the site.

Since I had the themes for both sites nearly built for me, I was able to develop them in a short period of time, and get them rolled out quickly. I must say, when looking at the time spent on each, I'm very happy with how they turned out.

Everything Avery

Patrick — Mon, 25 Feb 2008 01:27:16 +0000

My wife and I are at the age where our friends are having kids. So to keep friends and family updated on their kids daily activities, a majority of them maintain their own blogs. Well, as I mentioned before, Quinn (my wife) and I are expecting. That means that we need a blog to keep our friends and family updated. So, I asked Quinn to come up with some ideas for what she wanted our site to look like. She gave me some great ideas, and I put together a home page mockup in PhotoShop. When we decided on the final design, I began working on the CSS and HTML. The CMS I decided to go with is WordPress. It's pretty simple to use, and I love the functionality it provides, and the freedom you have to incorporate it into any design. The fact that it's free, and very simple to install, made for an easy decision as well. In all, I was able to purchase a domain, setup hosting, and complete the design, CSS and HTML in about 48 hours. I must say that I'm very happy with how it turned out, and equally as excited that my wife has now joined the blogosphere. So, have a look around, and enjoy.

Awesome Tables With Very Little Markup

Patrick — Tue, 12 Feb 2008 01:46:48 +0000

Creating nice looking tables in HTML can be quite annoying. You have to give the table an ID or class, then give each row a class or give each column a class. Then you have to add some crazy code to make each row alternate color and another set of crazy javascript to make the rows highlight when you mouse over them. Well... That is no longer the case. Below is an example of how to get nice looking HTML tables with very little code or markup.

Use Tables For Tables Only!
First things first, if your page is using tables for layout, then stop reading. This solution is for people who only use tables for their intended purpose. So, make sure you are using tables correctly before continuing on.

The Table Markup
The actual XHTML code for the tables themselves is extremely simple, and because of this is, it is nice and legible.


    
        
            Column Head
        
    
    
        
            Column Value

Column Head
Column Value

Give It a Little Style
Now that you have the HTML down, it's time to give this table it's looks.

table {
    border-collapse: collapse; /* removes unwanted
cellspacing garbage */
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    margin-bottom: 20px;
}

table thead {
    background: #ccc;
	text-transform: uppercase;
}

table thead th {
    border-bottom: 2px solid #333;
}

table thead th, table tbody td {
    padding: 5px 10px;
    border-right: 1px solid #999;
}

table tbody td {
    border-bottom: 1px solid #999;
}

Here's what you get:

Looks nice, eh? We're not done yet. Now we want to make each row alternate color and make each row change to a different color when you mouse over it. To do this, we need a little JavaScript.

function niceTables(evenclass,oddclass,hiliteclass) {
    if(document.getElementsByTagName('table')) {
		var tables =
document.getElementsByTagName('table');
		for (var nn = 0; nn < tables.length; nn++) {
		  var rows = tables[nn].tBodies[0].rows;
            for(var ii = 0; ii < rows.length; ii++) {
		    	var row = rows[ii];
		    	row.onmouseover = function () {
                        this.className=hiliteclass;
                    };
		    	if(ii % 2) {
		    		row.className = evenclass;
		    		row.onmouseout = function () {
		    		        this.className=evenclass;
		    		    };
		    	} else {
		    		row.className = oddclass;
		    		row.onmouseout = function () {
		    		        this.className=oddclass;
		    		    };
		    	}
		    }
		}
	}
}

This will set the class of all rows that are divisible by 2 to the variable evenclass and all other rows to the variable oddclass. It will also set a mouse over event on the row and when moused over change the class to the hiliteclass. So this is great and all, but how do I get this function to run? Simple... We're going to add an onload event to the window with javascript like this:

window.onload=function(){
    niceTables('light', 'dark',
'hilite');
}

So, if this javascript included in the head of all your html files, then every table that exists in the page will obtain this style when the page loads. Notice that calling this function set the evenclass to 'light', the oddclass to 'dark', and the hilite class to 'hilite'. What this means, is that we have to add these classes to our stylesheet:

.light {
    background: #fff;
}

.dark {
    background: #DFEEFF;
}

.hilite {
    background: #9FCDFF;
}

...and you end up with:

There you have it, nice, sleek looking tables with very little markup. See it in action.

Myspace Can Look Decent

Patrick — Tue, 17 Apr 2007 18:03:25 +0000

I know, I know. I'll probably be crucified for even uttering the word "myspace" in here, but I wanted to write this to say that there is a way to make your myspace page look somewhat presentable, and I can prove it. Making it look presentable is not without it's complications and limitations, however, the ability to do so exists.

Let me first start by saying, that I in no way came up with the code necessary to do this. All the hard work was done by Mike Davidson of mikeindustries.com . Mr. Davidson actually took the time to figure out how to make the crappy back-end code of myspace work for you:

Several weeks ago, I finally signed up for an account, and within seconds I was instantly put-off by what had been created for me: a hastily-designed â€œprofile pageâ€ with uninspired colors, misaligned tables, and a mish-mash of extraneous cruft and design elements which made this feel more like a halfway house than a â€œhomeâ€. Now, granted, I am a designer by trade so my tolerance for this stuff is orders of magnitude lower than most of the population, but clearly, this was not a place I even felt comfortable having my name on.

So with the default home page this underwhelming, what is a MySpacer to do? Customize, of course. One of MySpaceâ€™s greatest features is its ability to let you skin your own home page. Unfortunately, 99% of the customizations Iâ€™ve seen are chalkboard-screechingly awful, but what could a MySpace home page look like if some actual design thought went into it? That is the question I sought to answer. -- Mike Davidson

So, if you are looking for this code, here is a link to his awesome blog entry explaining all about it: "Hacking A More Tasteful MySpace.

So, armed with this code, I was able to create a few decent looking pages:

Finishing Touches

Patrick — Tue, 20 Mar 2007 01:59:16 +0000

I put the finishing touches on my new design this past weekend, and I'm pretty happy with the results. It still maintains that clean look, but I've added a bit of pop to it with the addition of the background, a few footer additions, some font fixes, and other miscellaneous modifications.

The first thing I added was a new background, that fills the left and right sides of the content with a bit of color. The beauty of this implementation, is that the diagonal lines, are actually a repeating transparent PNG. This allows for me to change the background color to anything I please.

Along with the new background change, I also decided to keep a piece of the old design. My wife commented that she really like the image of the leaf cradling the droplet of water, and I agree with her. It's a nice image, and I feel it has become a sort of staple of the site. Because of this, I decided to put right back where it was. Because I'm using transparent PNGs for this, the background color, and the leaf don't appear for IE6 users, and I'm okay with this. I don't want to bend over backwards for a browser that doesn't support transparent PNGs.

I also added a bit more to the footer. I feel that this adds a nice touch, that remains consistent throughout the site. So, from any page on the site, the visitor always has the ability to my latest posts and the most recent comments.

The comments on the site were a bit bland, so I spruced them up with a background and a border, and reimplemented the gravatar. I really like the concept of the gravatar as it adds more personality to the comment author, and helps provide recognition if they've made more than 1 comment on the site.

The last thing I did was make the logo, and the navigation into images. This guarantees that all visitors will see the same thing. Before, I was only using a font in the style sheet, which meant that if a visitor didn't have that font on their computer, then they wouldn't see it the way I wanted them to. Plus it provides for smoother looking letters.

Overall, I really like the new look and feel. It's much less busy than the old site, but still has some nice features. Hopefully you'll enjoy it as well.

New Design

Patrick — Thu, 08 Mar 2007 23:11:02 +0000

I must admit, I was getting a little sick of the old design. It was starting to seem a little too busy to me. And if you look at this new design, you'll notice that I went in the extreme opposite direction. I initially created this design with a quick PhotoShop mock-up. Yes, it may seem a bit ridiculous that I spent time creating a mock-up of such a plain and simple design such as this, but let me tell you: having a mock-up, makes creating the XHTML/CSS code that much simpler.

So, I started on the WordPress CSS, and once I was finished with that, I moved over to the CSS for the rest of the site. Once I was done, I then had to convert all of the non-weblog files from ColdFusion to PHP, as the new hosting company doesn't provide support for ColdFusion. Converting over to PHP, in my opinion, is a wise move. It's always better to have experience with open-source languages, as they don't require expensive licenses to run.

I'm not 100% sure that this will be the final design, but I think it's a great stepping stone for any future enhancements. In short, I wanted to make my site less busy. I wanted to try and make my site look nice and clean, without a bunch of bells and whistles.

IE7 Has Made Me A Busy Man

Patrick — Thu, 09 Nov 2006 14:24:26 +0000

I realize that I haven't written anything in a rather long time. There are a few reasons for this, the main one being the release of IE7, and the fact that 70% of the pages of my company's online application would not appear correctly when using it. This wouldn't be too big of a deal if Microsoft hadn't announced that IE7 will be part of an automatic update. Because of this, and the fact that an actual date was never stated, our web development team spent countless hours modifying our code on the pages that were having problems with IE7. You may be surprised to ~~hear~~ read this, but in a way, I have been able to see this as a good thing.

A Good Thing? You Must Be Out Of Your Mind!
Yeah, I know, spending 14 hours a day for the past 2 weeks re-writing html pages just so they work in one browser doesn't sound like "A Good Thing". After all, the entire application worked fine in Firefox, Opera, IE6, etc. How can I possibly say this is a good thing? Well, let me start off by saying that this application was originally created in 1998, and about 4 years later, was revamped a bit, but as far as a focus on well formed, standards compliant html code goes, this never surfaced as a concern for us. We created the pages to work, with little concern about the format of the code. So, all pages used tables for formatting, and would have failed a validation test miserably.

After testing our pages in IE7, and doing numerous things to try and get the pages to display correctly to no avail, we decided that the best course of action would be for us to rewrite our pages with standards compliant xhtml/css code, and get rid of tables altogether (only using them for their intended purpose). In a company of our size, with only 4 web developers, this change might never have happened (for sure not this quickly). But with the rollout of IE7, we were basically strong-armed into doing so. So, I sat down with one other web developer, drew up the basic layouts of our pages, wrote up a quick style sheet that would allow for this, and created documentation that explained how to implement this new solution. Once this was done, the 4 of us spent the next 2 weeks re-writing the pages that needed the new treatment. We are by no means done, as there are many more files that need this treatment, however, we are now on the right track to making our application standards compliant, with well formed xthml/css code.

There you have it... The release of IE7, at least in this case, is a good thing.

Dictionary.com Redesign – By The Book

Patrick — Fri, 25 Aug 2006 18:39:36 +0000

They've changed things up a bit over at dictionary.com.

It looks slick, clean, and more user friendly. Best of all they are using CSS for layout. Because of this, it seems to generate pages much quicker than before. I'll have to give my props to the designers over at happycog.com, the ones responsible for the new layout and redesign of dictionary.com.

Alternating Row Colors Using Only JavaScript

Patrick — Wed, 05 Apr 2006 15:36:49 +0000

Below is a JavaScript that will make alternating the row colors of a table extremely simple. The beauty of it is that the script is only 16 lines long!

I've added a nice little row highlighting function to the mouseover and mouseout events called overRow(). This function only adds 3 lines of code:

function overRow(rowid, classname) {
document.getElementById(rowid).clas sName = classname;
}

The last thing to do is make sure that the alternateRowColor() function gets invoked every time the page loads. Instead of having to place this in the body tag of all pages, all that is needed is one line of code added to the same script that will automatically run the function each time a page loads:

window.onload=function(){ alternateRowColor('alternateRows','light','dark','over');}

That's all there is to it. See it in action.

Site Breakdown: Part I – Header

Patrick — Thu, 26 Jan 2006 23:07:53 +0000

I spent a considerable amount of my free time on this site, and enjoyed every single second of it. Perhaps a little too much (ask my wife). Since I've spent so much time, and have learned a ton while doing so, I feel that it's only right, as a designer who utilized information from other blogs to create this one, to give a relatively detailed breakdown of this site. Since this will be somewhat detailed, I've decided to break it down into parts:

Part I - Header
Part II - Body
Part III - Sidebar
Part IV - Footer
(links to the above list will be added as the entries are written)

The Header
The masthead consists of the logo and the navigation. This may not seem like a whole lot, yet some really nice CSS code is utilized here, making for some really clean markup, and a nice user experience. We'll start with the logo.
The Logo
The image itself is actually part of the background. Notice, when looking at the XHTML, there is no reference to the logo image itself:

Tricklin

The beauty of this is that the logo image is in the background, declared in the CSS. To help clarify, let's take a look at this code:

#logo {
    margin: 0 0 0 6px;
    position:relative;
    float:left;
    width:200px;
}
#logo a {
    height:60px;
    width:200px;
    background: url(http://www.patmullin.com/tricklin/images/tricklin_logo_2 00x60.png) no-repeat;
    text-indent: -9000px;
    display:block;
}
#logo a:hover {
    background-position: 0 -60px;
}

The first section, #logo, acts as the placeholder for the logo image. By looking at this we know that the logo will appear on the left of the screen, and a margin of 6 pixels will keep it from butting directly up against the left edge of the browser window. We also know that since the image is only 200 pixels in width, that is the widest we need this section to be, so it is set to 200 pixels.

The remaining sections, #logo a and #logo a:hover, are what declare the logo image, and the properties that make it clickable. We'll start with the default link state. First, #logo a means that an anchor tag within the "logo" div will aquire these properties. Meaning all other anchor tags will not be affected. That said, the anchor tag inside "#logo" will place the "tricklin_logo_200x60.png" into the background and only show it once (no-repeat). If otherwise declared, the starting point for showing the image is 0 pixels from the left and 0 pixels from the top. As you can see from the actual logo image (above), it's actually 120 pixels in height, yet the image will only appear in an available window that is 60 pixels tall. So the user will only see the top-half of the logo image. So that when the mouse is "hovered (#logo a:hover)" over the logo, the bottom half of the logo will appear in the available window - background-position:0 -60px.

Navigation Menu
Once again, the markup for the navigation is nice and clean. There are no image references in the actual XHTML code. Let's have a look:

Notice that each "button" has an accesskey associated to it. These were added to improve the accessibility of the site. Since Stuart Robertson does an excellent job explaining accesskeys in his article on A List Apart, I won't go into detail about this.

With some CSS coding, the navigation menu goes from looking like a bulleted list to a horizontal set of buttons:

#navigation ul.nav {
    padding: 0px;
    margin: 0px;
}
#navigation ul.nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#navigation ul.nav li a{
    float:left;
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

Each button in the navigation menu has 3 states (using only 1 image), a mouser over (hover), a mouse out, and an active page state. Each state is represented using the same concept as with the logo:

#navigation ul.nav li a.portfolio, #navigation ul.nav li a.portfolio_c, #navigation ul.nav li a.portfolio:hover{
    width: 90px;
    height: 30px;
    background: url(http://www.patmullin.com/images/portfolio_nav_tab2.png) no-repeat;
}
#navigation ul.nav li a.portfolio{background-position:0 -50px;} // mouse out state
#navigation ul.nav li a.portfolio_c{background-position:0 -100px;} // active page state
#navigation ul.nav li a.portfolio:hover{background-position:0 0;} // mouse over state

So, that's the header in a nutshell. Next, I'll explain the Body, and all the little CSS elements and WordPress plugins used.