Siam Communications Web Services & Tools » CSS

Premium Website Picks: January '09

Editor — Tue, 20 Jan 2009 02:58:45 +0000

In my web travels (and twitter sessions) this week, I came across several sites that made me think, “Hey, that would make a great post” or “That’s is really good info”. So I thought I would pass these jewels along in their original form by the original authors.

These posts were chosen as Premium Websites because I witnessed first hand their benefit to a website or blog owner. The post or website made me reconsider a choice I had made, or am about to make. It also provided some form of excellent value in response to questions I came across during the past week or so.

So here they are, in so particular order. This weeks premium website picks for the first month of 2009.

How to Build a Variable Width Website

Creating an Awesome Home Business

Martin Malden writes this hype free blog for website and blog owners. His advice is always spot on. This week, another friend of mine, Sean, was having CSS problems. Being in the middle of my own design projects, as he described his issues my mind was cluttered with the issues I was currently facing. So I helped where I could, but didn’t really solve all of his problems.

Enter Herb Stalk from “What’s This Web Thing“. Sean left a comment on Herb’s new social network asking for help on the matter. Herb promptly pointed Sean to Martin’s latest blog post. I also had a look at Martin’s post and it made me examine what I was doing with my own projects. Martin’s advice not only solved Sean’s problem, it helped me in taking another look at my issues and I resolved my problems as well.

This shows that one post, and a collaboration of people is a thing of value.

“Brand” Me: What’s It Worth To You?

The Cause is The Habit

I have had a fruitful week on Twitter and met db. Damien “db” Basile in from New York and runs the blog “The Cause is the Habit“. Damien’s post on branding gave me some new directions of thought as I plan how my own website portfolio is going to brand itself. Making me reconsider such deep questions like “who am I online” and “who do I want to be”.

You can find out more about Damien here.

10 Promising Free Web Analytics Tools

Six Revisions

As I have been running websites for about 10 years, I have a continued interest in analytics in relation to website traffic. Too much value can not be put on the data collected from those that visit your website. So it was with great interest that I devoured this post on web analytics tools, as an alternative to the main stream tools.

The 10 tools reviewed here DO NOT include a review of Google Analytics, Crazy Egg, Alexa, Compete or even Quantcast. Everyone of the tools is worth a look. I was very impressed by the research that the writer had done just to identify the tools in the first place.

What’s This Web Thing

I posted a review of this site earlier in the month. Their membership continues to grow at a consistent rate. This is probably due to the fact that there is such a good community atmosphere here. Just look at the example of Sean getting his CSS issues resolved. This is exactly what the network was designed to do and it works well.

If you haven’t gone by and visited this new network yet, I recommend that you have a look.

Free Twitter Ribbon Ad Generator

Twitter Know How

I have really been getting into the spirit of “all things Twitter” this month. I have been looking for a unique way to advertise to visitors of my main site (Siam Communications) a way to follow me on Twitter. I feared that a menu item just wouldn’t stand out like I wanted. And I couldn’t find a way to work an icon into the current design of the site.

So I was really pleased when I cam across this site. The banner sits at a 45 degree angle in the upper right hand corner of the browser screen without detracting from my message or website design.

Summary
Thanks for coming by and reading about our valuable finds. Tell us if you have found a Premium Website that you feel has exceeded your expectations, or has helped you solve a particular problem.

Related posts brought to you by Yet Another Related Posts Plugin.

Resetting the Browser with CSS

The Coach — Mon, 11 Aug 2008 11:54:47 +0000

One of the most frustrating aspects of web site design is when a web page insists on displaying in a way that you know is contrary to what you have specified. In order to help avoid these moments, it is always good to start out with a few commands at the beginning of your style sheet that resets the browser to give you better control over the way a web page is displayed.

The code below can be pasted at the beginning of your style sheet (CSS file) to give you this control.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,

textarea,p,blockquote,th,td  {margin:0; padding:0; }

table { border-collapse:collapse; border-spacing:0; }

fieldset,img { border:0; }

address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }

ol,ul { list-style:none; }

caption,th { text-align:left; }

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }

q:before,q:after { content:”; }

abbr,acronym { border:0; }

html {font-size: 62.5%;}

These commands remove line spacing, padding and margins from all of the most popular HTML tags and define the font as ‘normal’ (i.e. – no bold, italics, etc.). Additionally, Headings are reset to remove additional line spacing and reset the size of the text to a normal size. This also includes a line for formatting quotations in your web pages.

The last line resets the browser font size to about 10 pixels.This is a good font size to start with, as you can then use em units in a more understandable manner for specifying the font sizes for your headers and paragraphs. For example, to have the paragraph tags display at 12 pixels and header 1 tags at 20 pixels, you would specify later in your CSS files the following statements:

p {font-size: 1.2em;}

h1 {font-size: 2em;}

You can now continue to add your own desired characteristics through out your CSS file for each HTML element as you wish, without having to worry about the default setting imposed upon you by a browser.

Related posts brought to you by Yet Another Related Posts Plugin.

Getting to Grips with CSS

Eric — Tue, 25 Dec 2007 07:57:49 +0000

Occasionally, we receive questions from our members about implementing technologies that are still new to them. The following post covers a topic on CSS (Cascading Style Sheets) that we hope you find useful.

Martin from WealthyDragon writes “I know what CSS does and what it allows you to do, but I’ve never got to grips with actually using it. There are still murmurings in the forums that getting CSS to work in different browsers still causes headaches. So I don’t plan on using it until those wrinkles are easier to manage.”

“For example: what are the files that make up a page that uses CSS?
On pages that don’t use CSS, you have an HTML file, some image files and
whatever other files you need (e.g. audio files, etc.). What are the
files that make up a page that uses CSS?”

This is a problem many people have that already have their own websites, but want a better way to dress up their website. In the beginning, there were many problems related to cross-browser compatibility. But many of these have been worked out and the ones that remain are usually in the more advanced realm of using CSS. Those issues aside, let’s start with some basics.

First, CSS can be implemented right inside your HTML files. There is no need for any other files. Style attributes can also be used right inside your HTML tags as well. However, having a separate CSS file for your styles allows the same style sheet to be used for all of the pages on your web site. Have I confused you yet? Let’s look at each option:

Option 1 – Implementing CSS in your HTML files

There is an HTML tag named

This is the style that will be applied to everything in between the tags of the HTML file. It says that my text will be 11pixels in size, in Italics and the color Red. Every tag in the CSS file starts with the HTML tag (without the brackets) an opening ‘{‘, the formatting commands and a closing ‘}’. Each formatting command is structured as ‘attribute: setting;’

Insert a STYLE section at the top of your page just after the BODY tag and change around some of the settings between the brackets (the ‘{‘ and ‘}’ brackets). This is one of the best ways to learn how CSS works on your web page.

Option 2 – Style attributes within HTML tags

The second way of using STYLE tags is to put them right inside your HTML tags. For instance, we are all familiar with the tag to create a link so let’s use that one:

Text that links to my page

This is the standard use of the tag, now lets add some formatting using the style attribute in the tag and some style sheet commands:

Text that links to my page

This should produce the following result:

Text that links to my page

This is the method I use when designing my websites until I get the desired look, and then I move everything into a style sheet file. Which brings us to option 3 …

Option 3 – Integrating CSS as a separate file

Having all of your styles in a separate file keeps the look and feel of your web pages standard across your entire website. Once you have all of your formatting done, you can save them into a file with the extension ‘.css’, such as ‘style.css’. You then link to this file from your HTML files with the following command:

This line should go just before the tag in your HTML file.

Summary

This is just the beginning, and by no means a comprehensive guide to CSS. But, if you are comfortable with using one or all of the options mentioned above, you are now ready to begin playing around with the different attributes of CSS to get your website looking its best.

There is a full reference on CSS tags and attributes here.

There is a CSS Cheat Sheet for your reference here.

Have fun!

Related posts brought to you by Yet Another Related Posts Plugin.