Showing Hyperlink Cues with CSS (Ask the CSS Guy)
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari. Download zip Images First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. Example 1 – link to pdf file – HTML As an example, we’ll start with the link to the pdf file. <a href="files/holidays.pdf">View Holidays</a> The link it generates might look something like this: Notice there are no classes, ids, etc. that distinguish this link from any other. With some new CSS selectors that are supported in IE7, Firefox, and Safari, you can apply style declarations that are based on the values within tag attributes. Example 1 – link to pdf file – CSS If we apply the following styles to the html above: We would get something like this: How does it work? Example 2 – mailto: links Easy enough. Here is the result:
Clean up your Web pages with HTML TIDY
Introduction to TIDY When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Tidy is able to fix up a wide range of problems and to bring to your attention things that you need to work on yourself. Dave Raggett has now passed the baton for maintaining Tidy to a group of volunteers working together as part of the open source community at Source Forge. More recently, Tidy has been extended to support HTML5 and to clean up HTML exported from Google Docs. If you find HTML Tidy useful and you would like to say thanks, then please send me a (paper) postcard or other souvenir from the area in which you live along with a few words on what you are using Tidy for. The W3C public email list devoted to HTML Tidy is: <html-tidy@w3.org>. Tidy can now perform wonders on HTML saved from Microsoft Word 2000! Tutorials for HTML and CSS Examples of TIDY at work Layout style
Web Layouts | Cool Layouts | Website Layouts
tlbox - the best tools on the web
Worst Web Design Ever
The following is a list of web sites collected on the internet for the purpose of demonstrating bad web design. If you have found another site that should be on this list then please leave a comment. New screenshots taken 15 january 2009. Official site of a children’s hospital in Japan MSY Technology Pty. Personal site of Franz Magnus Angren.net, electronic shop HavenWorks.com James Bond 007 Museum Shop Mama’s Cheesies jones, partners: architecture Dr C. Web Design Company AMEN. FX Lange inc. Hotel Mance VF Designer KrYsTaL74 W.H. Official site of Northbridge Police Department RogerART About the Author Jim Westergren is a web entrepreneur from Sweden now living in Bolivia.
70 Expert Ideas For Better CSS Coding | CSS
Advertisement CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them. And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. 1.1. 1.2. 1.3. Keep containers to a minimum.
.htaccess Hacking for Fun and Profit | www.mapelli.info
The Apache server provides directory-level configuration via .htaccess files. This file can override Apache default configuration and change it for the local directory. If you are not a lazy blogger, you may be intrested in some tips I recently discovered to optimize your .htaccess file in order to have better search engine position, avoid spam comments and protect your content. Redirection search engines see and as two different sites… this is bad for two reasons: search engines penalize sites with duplicated content, removing some (if not all) the duplicated pagessome sites will link you as www.yoursite.com and other as yoursite.com, this is bad because your pagerank and your link popularity will be halved to avoid this, you can simply redirects all the request from to or viceversa adding some directives to your webroot .htaccess file. Use the following code: RewriteEngine On RewriteCond %{HTTP_HOST} !
20 Websites That Made Me A Better Web Developer | Six Revisions : Web Development and Design
As a web developer, if you’re to be successful, you have to have a constant yearning for learning new things. In an industry that evolves rapidly, you’ve got to keep up or you risk being obsolete and outdated. Keeping up with trends, weeding out the fads, and adopting new techniques to your web-building arsenal is an essential part of being a web developer. I spend (literally) most of the day in front of the computer and even in my spare time, I choose to read, learn, and keep up with web technology news. This leads to a massive collection of bookmarked links, but through the years, there are only a handful of websites that I frequent. I’d like to share 20 websites that have broadened my knowledge, expanded my skill set, and improved the quality and efficiency of my web development projects. 1) Alertbox: Current Issues in Web Usability Alertbox is Jakob Nielsen’s bi-weekly column that discusses web usability. 2) TheBestDesigns.com 3) A List Apart 4) Getting Real by 37 Signals 7) mootools
Free Web Page Headers - Main Index - Powered by PhotoPost
Our header graphics are in JPG format, 800 pixels x 200 pixels. Just click a thumbnail to view/download the full-size image.
/* Position Is Everything */ — Modern browser bugs explained in detail!
CSS
Advertisement Today we are glad to release two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. Download the cheat sheets for free! The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. Behind the design As always, here are some insights from the designers: “We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. Thank you, guys. Related Posts You may be interested in the following related posts: It's done.
Helps you build good looking and functional web sites
Seagull PHP Framework :: Home
