It may sound stupid to say that, but the ability to link is one of the best features of the web. It is then really important to make your links display as convenient for use as possible. In the following collection you’ll find some tips to make your links better looking and more usable.
1. Display filetype icons
If you are linking directly to a file, why not let your users know about it? I’m always terribly annoyed when Acrobat launches by surprise. One way many thoughtful web writers deal with this issue is by adding (PDF) after the link. It would be even better if you used the proper CSS technique that does it automagically! Web-kreation has a good explanation on how to do that.
2. Show the target page’s language
Are you often linking to websites written in another language than yours? If it’s the case, you should consider using pseudo-classes to display a little notification for the link’s language. It can be either a little country flag or a bracketed abbreviation of the language [en]. I would recommend not to use country flags for this, it can be misleading or hurt some national sensibilities. My country, Switzerland, is a very good example for that. Linking to a Swiss page with a French or German flag would be inappropriate. Even for English, which flag would you use? American, British, Autralian,…?
Highlighting the microformatted informations allows you to give a better view of your contact and personal information. It is definitely a good way to improve the usability of your website and to get more people contacting you.
Discover how to highlight your microformats on Hicksdesign.
4. Display an icon for external links
When browsing a website and clicking on links, I’m always thankful to webmasters that tell me whether I’ll be leaving their website or not. It is a nice way to indicate your website’s visitors where they are going.
Tooltips give more information to your website visitor about the link they are hovering. Most tooltips tutorials will use javascript, but did you know that you can create them with pure CSS? It is actually quite simple, as you’ll see on this page.
6. Learn to style visited links
I never know how to style visited links on the websites I design, this article gives some good ideas on how to do it.
7. Better link display on printed web pages
Linking isn’t limited to the online world, your links should also be visible on the printed version of your website. The most common way to achieve this with CSS is to display the URL next to the link text. Read this article to learn how.
There is however an even better way to display the links on a printed page, list them as footnotes. This article on A List Apart will teach you how, but it does take some scripting to achieve it.
8. Image replacement for submit button
It’s quite easy to customize your submit button with simple CSS, but replacing it by an image will let you integrate the button more.
1. Does this page have a good amount of honest information on it about the subject?
This is, by far, the most important one by my standards. I deal with businesses all the time that want to rank higher in search engines but then don’t provide any content. If you want to be the #1 search result for “ergonomic loafers”, you better start working on a bunch of written content about ergonomic loafers. Good, honest content. Not bullsh*t marketing mumbo jumbo and not keyword-soup. You need research, what they are, why they are good, where you can buy them, every last bit of expert knowledge about ergonomic loafers you can squeeze.
2. Is the information on this page well structured in the markup?
Let’s not get too technical here, but just focus on the common sense. When you “view source”, is the good content stuff right up near the top, or is it buried way down below a bunch of other non-related stuff? Are the important headers in <h1> tags? Is the title for the page something that makes sense?
3. There aren’t any stupid cheap “tricks”
Did your buddy tell you that you should put “paris hilton boobs” in white text on a white background at the bottom of the page so you could get people searching for that? Did you buy some service that promised to submit your sites to 3,253,313 search engines for ONLY $99.99! Did you put 500 keyword variations in your meta tags?
Don’t. Search engines are smarter than you. They are looking for dumb “tricks” like that and may even penalize you for them.
4. Is the URL for this page clean and relevant?
You are going to have a heck of an easier time ranking higher for “ergonomic loafers” if you own ergonomicloafers.com. If your page about them is at http://aligatorarmpits.com/2453/234bps.asp?stink=true - it’s going to be a lot harder. Common sense.
5. If you were researching this subject, would you find this page helpful? Would YOU link to it?
Take a step back, read the content, think about it. Put yourself in the mindset of a totally random visitor. Is this page useful? Did I learn something about the subject? If my mom emailed and wanted to know something about ergonomic loafers, would I send her this link or would I sent here somewhere better? If I was writing an article about ergonomic loafers, would I link to this?
6. Is the website a reliable source of quality information?
You might notice when googling, uhm, any major subject, Wikipedia articles tend to be around the top. Clearly Wikipedia has established them selves as a high quality source of information.
SEO compounds on itself. You will have an easier time ranking highly for a term if your site is an established and trustworthy source of information.
Free Invitation:-
If You Like My Post Comment Me,Thanks For Visiting To Site,Visit Again BDV-708727-BDV Read more...
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package is provided in the end of the article.
Before we start, let’s review the general rule of thumb for styling of tables:
Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.
Now that we are all set up let’s get going, shall we?
1. Horizontal Minimalist
Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
The tr:hover rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.
Important!
Carefully finetune the typography and the padding between the cells
Pros
Very easy to style, good for simple tables
Cons
tr:hover rules don’t work in IE 6, table can be confusing if it has too many columns
Play with
Color scheme, typography, tr:hover effects
2. Vertical Minimalist
Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.
Important!
Carefully finetune the typography and the padding between the cells, do not add tr:hover effect
Pros
Easy to style, good for simple tables
Cons
Can not be used if background is not a solid block of color, suitable only for some tables
Play With
Color scheme and typography
3. Box
The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.
Important!
Choose a color scheme that matches with your site
Pros
Easy to style, flexible for large or small tables
Cons
Choosing the perfect color scheme could be tricky
Play with
Colors and borders, use dashed or dotted to achieve cute effects, typography, icons
4. Horizontal Zebra
Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).
...
<tr class="odd">
<td>...</td> ... </tr>
<tr> <td>...</td>
... </tr>
...
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Important!
Do not put too much contrast on the zebra colors, you can blind your users
Pros
The zebra pattern can help people to scan the table
Cons
Adding class="odd" manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky
Play With
Contrasting color, borders, typography, icons
5. Vertical Zebra Style
Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:
The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.
Important!
Do not put too much contrast on the zebra colors, you can blind your viewer
Pros
Suitable for all types of tables
Cons
Choosing the color scheme could be tricky, need to add colgroup elements
Play With
Contrasting color, borders, colgroup and col, icons and typography
6. One Column Emphasis
In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:
Company
Q1
Q2
Q3
Q4
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).
Important!
Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
Pros
Very effective when used in certain kind of tables
Cons
The necessary tr:hover effect does not work in IE, suitable for certain types of tables only
Play with
Color scheme, typography, icons and tr:hover effects
7. Newspaper
To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:
Company
Q1
Q2
Q3
Q4
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:
Company
Q1
Q2
Q3
Q4
The above data were fictional and made up, please do not sue me
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
Favorite
Great
Nice
Bad
Passion of the Christ
Bourne Ultimatum
Shoot ‘Em Up
Ali
The Big Fish
The Mummy
Apocalypto
Monster
Shawshank Redemption
Cold Mountain
Indiana Jones
Dead or Alive
Greatest Story Ever Told
I Am Legend
Star Wars
Saw 3
Important!
Be careful with border-collapse, do not lose the signature border around the table!
Pros
Gives a royal, authorative aura to a table
Cons
Unsuitable for large tables (it loses it’s charm on large tables)
Play With
Typography, color scheme, background, border, padding, and tr:hover effects
8. Rounded Corner
Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:
Company
Q1
Q2
Q3
Q4
The above data were fictional and made up, please do not sue me
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
Pros
Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily
Cons
Takes longer to style, requires images
Play With
Color scheme, corner variations, typography, tr:hover effects, icons
9. Table Background
If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:
* html table tbody td {
/* IE CSS Filter Hack goes here*/
}
The table would look like this:
Employee
Division
Suggestions
IE 6 users won’t see the transparent background if the hack is not applied
Stephen C. Cox
Marketing
Make discount offers
Josephin Tan
Advertising
Give bonuses
Joyce Ming
Marketing
New designs
James A. Pentel
Marketing
Better Packaging
Important!
Make sure the image is relevant to the table’s contents
Pros
Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer
Cons
Needs hack to get the background work in IE 6, needs images
You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that’s not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You’ll end up with a gradient style table:
Employee
Division
Suggestions
Rating
Give background color to the table cells to achieve seamless transition
Stephen C. Cox
Marketing
Make discount offers
3/10
Josephin Tan
Advertising
Give bonuses
5/10
Joyce Ming
Marketing
New designs
8/10
James A. Pentel
Marketing
Better Packaging
8/10
Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Nation
Capital
Language
Unique
Japan
Tokyo
Japanese
Karate
South Korea
Seoul
Korean
Ginseng
China
Beijing
Mandarin
Kung-Fu
Indonesia
Jakarta
Indonesian
Batik
Important!
Make sure the text stands out against the background
Pros
Easy to style, not too bland
Cons
Uses images, patterns and gradients might distract reading
Play With
Color scheme, patterns, typography, borders, backgrounds, gradients, icons
Free Invitation:-
If You Like My Post Comment Me,Thanks For Visiting To Site
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
