Web 2.0 Css Templates

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” - which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.

  Icon links (30.6 KiB, 5 hits)
You need to be a registered user to download this file.

Share this

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb Netvouz

Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere Sphinn

Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!

Share this

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb Netvouz

Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere Sphinn

Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

If you’re a webdesigner, why not sell your templates at CssTemplatesWeb? It’s easy!
You don’t even know how to code (x)html. Just send your layout that you’ve made in Photoshop as a .PSD file, and I will make the necessary steps to code it to a valid css template, or send the finished template. Either way, you’ll make money!

What’s in it for me?

Money, fun and learning.

• If you send a finished coded web template, including all images, css, htm and psd files, you’ll get 70% of the selling price at CssTemplatesWeb
• If you send the layout as a psd file only, you’ll get 50% of the selling price of the finished coded web template sold at CssTemplatesWeb

What type of templates?

There’s no limitation on what type of templates that is put out for sale on CssTemplatesWeb. Here’s a list of the most common types of templates:

• xhtml/css based templates, with psd file included
• Wordpress themes
• Zen Cart themes
• Flash templates
• Photoshop files (buttons, logos etc.)
• And so on..

Pricing

The price for xhtml/css templates will be $9. The other types of templates is up to you to decide the selling price. But the price can not be more than $50. This is because we want to have a price guarantee for all our customers.

Payment

All payment is done with Paypal. This is a secure payment provider, offering options to pay with Visa, Mastercard, AMEX and Discover. Customers do not have to create Paypal account to pay. If you want to sell your templates, you have to create a Paypal account, because your payment will be done with Paypal.

Submit

Are you ready to submit? Then go ahead! Submit Form

Share this

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb Netvouz

Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere Sphinn

Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

• XHTML stands for EXtensible HyperText Markup Language
• XHTML is aimed to replace HTML
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.

XHTML is compatible with HTML 4.01, and all new browsers have support for XHTML.

Why XHTML?

We have reached a point where many pages on the WWW contain “bad” HTML, the following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>

XML is a markup language where everything has to be marked up correctly, which results in “well-formed” documents.

XML was designed to describe data and HTML was designed to display data.

Today’s market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a “bad” markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write “well-formed” documents now, that work in all browsers and that are backward browser compatible