Webdesign-Tricks.Com » CSS

Designing Cutting Edge Web Sites

admin — Mon, 08 Feb 2010 17:24:23 +0000

There are so many new and exciting features of Ajax, Dynamic HTML, and other “bleeding edge” technologies, but it can be hard to decide whether to use them. Before you decide to write your pages at the edge of HTML, there are some things to think about:

1. How many new features are on the page already?

If a page has too many flashing lights, gizmos, and special effects, your readers may be turned off rather than impressed. Also, things like java applets can take up system memory for your readers and can cause their browser to crash if there is too much going on.

A good rule of thumb is to limit your page to 1 special effect of any kind. This includes music, streaming video, java applets, Ajax applications, and Dynamic HTML.

2. What are you trying to achieve with the effect?

Try to design your pages with purpose. If you want a rollover, add it to the areas of the page that might not be clicked on if you didn’t call attention to them. Use dynamic positioning to serve a purpose.

Fancy effects that have a purpose will enhance your Web page rather than detract from them.

3. Can you achieve the same effect with an older technology?

The older your effects are, the more likely it is that they will be supported by multiple browsers. If you can create a motion effect with an animated GIF, more people will see the animation than if you use DHTML, Ajax, or Flash.

The more you can keep your site browser non-specific, the more readers you will have.

4. If you want a browser specific effect, have you thought how other browsers will see the page?

Even if you want your customers to view your site with Internet Explorer, you’re certain to get Firefox, Opera, and Safari viewers. But if you show them nothing, you’ll lose readers you could have saved with just a few more lines of HTML.

When using an effect, keep in mind how other browsers will see (or not see) the effect. Many effects have built in support for non-compliant browsers. For example, if you use the tag, you can include text inside the tags that can explain what the non-iframe compatible browser is missing.

CSS Image Preloader

admin — Sun, 07 Feb 2010 21:12:59 +0000

In this article, you’ll learn how to create an image pre-loader without Javascript. CSS is the technique we are going to use. No fancy and hard to understand codes, but the smart use of codes you already know about.

Why use an image pre-loader? A lot of websites out there use CSS to display their navigation menu. In most of these menu’s, images are used. When you roll with your mouse over one of the menu items, the ‘hover’ image is displayed.

Sometimes, it takes a fraction of a second to load this ‘hover’ image. Your browser doesn’t load ‘hover’ images when the whole page loads, and therefore it has to load when the visitor asks for it. As the designer of that page you would like to display that ‘hover’ image right away. This is where the pre-loader comes in, which is an smart help in such situation.

Let’s start. In this article we’ll make sure ‘hover’ images are loaded together with the page. These are the codes we will start with.

CSS

ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px ‘Lucida Grande’, Arial, sans-serif;
}
ul li{
display: inline;
}
ul li a{
display:block;
width:120px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/link.gif);
}
ul li a:hover{
width:120px;
background:url(images/hover.gif);
}

My HTML codes looks like this:

We are going to add a pre-loader. Open up your HTML file and add the following codes just above your tag.

Inside this div, we are going to add images you would like to pre-load. Those images won’t be displayed when the webpage just loads, only when rolling over the menu item.

Now, open up your CSS file. Add the following codes:

div.loader{
background:url(images/hover.gif);
margin-left:-1000px;
}

These codes will tell the div with class loader it should be displayed 1000px to the left. Yes, outside your browser. Your visitors won’t notice this box, but your browser knows the box is there and will load the image(s).

If you would like to add more images to the div, just add more ‘background’ tags and you are done.

div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}

Now you could pre-load images without using Javascript! Good luck with using this on your website and thanks for reading.

Ten CSS tricks you may not know

admin — Sat, 06 Feb 2010 08:30:20 +0000

1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

There’s no need though as you can use this CSS shorthand property:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Much better! Just a few of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

2. Two classes together

Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:

…

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

3. CSS border default value

When writing a border rule you’ll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

4. CSS document for printing

Lots of web pages have a link to a print-friendly version. What many of them don’t realise is that there’s no need because you can set up a second CSS document to be called up when a user prints the page.

So, your page header should contains links to two CSS documents, one for the screen, and one for printing:

The first line of code calls up the CSS for the screen (notice the inclusion of media=”screen”) and the second line calls up the CSS for the printable version (using media=”print”).

So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: .

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You’ll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.

5. Image replacement technique

It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller and you’d like to be found for this phrase in the search engines.

This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

Buy widgets

Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Be sure to change “image height” to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won’t be able to see the text.

6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

This CSS rule would be applied to:

…

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

And the new HTML would be:

…

Perfect! Now the box width will always be 150px, regardless of the browser!

7. Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

#content
{
width: 700px;
margin: 0 auto
}

You would then enclose

around every item in the body of the HTML document and it’ll be given an automatic margin on both its left and right, ensuring that it’s always placed in the centre of the screen. Simple… well not quite – we’ve still got the pre-IE 6 versions on PC to worry about, as these browsers won’t centre align the element with this CSS command. You’ll have to change the CSS rules:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

This will then centre align the main content, but it’ll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box.

Hmmm… not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box – perfect!

9. CSS positioning within a container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It’s also possible (and often desirable) to position objects within a container. It’s simple to do too. Simply assign the following CSS rule to the container:

#container
{
position: relative
}

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it’s preferable to use positioning.

10. Background colour running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

#navigation
{
background: blue;
width: 150px
}

Just one problem though: Because the navigation items don’t continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background colour won’t.

Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

How to structure large CSS files

admin — Fri, 05 Feb 2010 04:09:10 +0000

Many methods exist to structure your CSS. This article tries to describe the method I use. I call it the “Tree method”, since it structures the CSS like… that’s right, a tree structure. I want to stress that it isn’t my invention; I just describe and give reasons for its rules.

Everyone that has built a bigger site has had to deal with the mess CSS so easily become. There are ids and classes all over the place, and to find where a certain class is defined you usually need to use some search feature in your editor. Matching the other way, from the CSS to the HTML is even harder; you don’t even know what file a certain class is defined in. It’s a mess.

The Tree method tries to structure the CSS into logical blocks; blocks taken from the HTML. It also aims to be easy to understand for anyone. No secret codes or difficult ordering schemes.

Order your selectors like the HTML
Always use the “full path” to elements
Indent your code cleverly
Each declaration on its own line
… in alphabetic order

Order your selectors like the HTML

One of the problems of mapping between the HTML and the CSS is that they usually differ in structure. The HTML is (if you’re lucky) structured like a convenient semantical tree while the CSS often is ordered by something random like fonts, colors, and positioning.

To make moving between the two worlds easier we want to make them as similar as possible. Is the HTML divided into header, content, and footer? Then make sure that’s the three major parts of your CSS as well. Have you put the navigation above your header in the HTML? Then order it like that in the CSS as well! Any other structure makes moving from the HTML to the CSS much harder. You might be able to find all font manipulations in one part of the CSS, but only if you know that this particular developer uses that exact scheme. No, let’s keep it simple.

Here’s a simple example where we just order the selectors:

#header { … }
h1 { … }
h2 { … }
#content { … }
p { … }
em { … }
strong { … }

When grouping several styles into one definition I just put the group above both of their specific styles. #header, #content comes before both #header and #content.

Always use the “full path” to elements

The above is very easy to get an overview of, but the experienced developer knows that very few sites are that easy. Something you often want is a way to define different styles to different parts of a page. Let’s say you want green links in the navigation, but want to keep them blue everywhere else.

For this we use sub selectors. The selector #navigation a lets you give all links inside your navigation another look. But let’s take that further. Why not always write the full path to your elements? Why not use #navigation ul li a instead? Doing this gives a developer looking at your code a lot of information about how the HTML and CSS belongs together.

Lets add that to the previous example:

#header { … }
#header h1 { … }
#header h2 { … }
#content { … }
#content p { … }
#content p em { … }
#content p strong { … }

This does change the meaning from before. Before we selected all the level two headers; now we only select headers inside of the header division. Extending each selector with a “path” has made our CSS rules more specific, and specific means more control for you.

This also makes for fewer new ids and classes; just specify the path to an element instead of adding a class for it. Don’t add a new class or id unless you really need to.

We still have the issue of “common styles”; styles that we want to apply to elements in different parts of the tree. Since they should be applied to all elements they don’t fit in the tree structure we’ve built. Instead we make a section in the beginning of the file (or a separate) with just “general styles”. Don’t add rules to this section if you only use them once in the document, you want as much of your code to be in “the tree” as possible.

Indent your code cleverly

To make the code even easier to understand I always add indentation (for those that don’t know that word: it means spacing in front of blocks of text). Indenting makes the tree structure we’re trying to build even clearer, you can easily find the major sections and dig down from there.

Lets add indention to you our example too:

#header { … }
#header h1 { … }
#header h2 { … }
#content { … }
#content p { … }
#content p em { … }
#content p strong { … }

Don’t take indentation too far. If you’re styling tables and using thead in the markup, but don’t change the style of it, you can skip that indentation level. Double indention just for the sake of it is just a waste of space.

Special case: Templating

We also need to deal with rules that only appear on some of our pages. Perhaps we want the home page to look somewhat different than the sub pages? We solve this by giving an id or class to the body element. Doing this lets me specify styles for just one specific page, and setting the id or class on body makes me able to change anything in the document based on that.

These page specific styles need a place in the tree too. Here I tend to break from the above scheme and put them together with the style they change. So body#page_home #header h1 is one step below #header h1 in the tree. That makes it easier to see all styles for a certain element, instead of scrolling back and fourth (like you need to do if you don’t remember your general styles). Keep your templates together with the style they change instead of completely separate.

If you want bigger changes, perhaps a totally different look on some pages, there’s no reason to group things according to the scheme above. Move them to a separate file instead.

Each declaration on its own line

Indentation combined with full paths makes some lines rather long. This means that putting all declarations on one line will force you to scroll horizontally, something we already avoid on our sites. The simplest way to prevent horizontal scrolling is to use one declaration per line, so that’s what the tree method uses.

… in alphabetic order

Grouping of properties is another issue. I’ve seen grouping schemes based on all sorts of things; from splitting things into “positioning”, colors, and fonts, to people adding their properties completely randomly. I’ve chosen to just order them alphabetically. It’s one of the few methods that bring some order while still being simple enough. I’ve seen total beginners do this by themselves; something I believe is a good argument for it. It’s intuitive.

A simple example to illustrate:

#content {
color: Blue;
font: 3.4em Arial, sans-serif;
margin: 0.5em;
}

One complaint I’ve heard on this method is that it splits up things that belong together. People tend to keep position: absolute and left: 0 together, just to name one such pairing. It annoyed me at first too, but declaration blocks rarely contain more than 10 declarations, and the alphabetic order still makes them easy to find. Also, why handle position different than float and margin?

That’s it! By following a few simple rules you can get a CSS-file that’s easier to overview, a file that you proudly can give away to the next developer. I can praise its existence all day, but you’re the judge of whether it works or not. Why not give it a try in your next project?

CSS3 and Its Adversaries

admin — Fri, 29 Jan 2010 15:06:45 +0000

One of the amazing things about the development of web technologies is that they were relatively anarchic. Unlike the development of traditional GUI systems, which were created behind the closed doors of academic institutions like Xerox’s PARC and later developed further by products such as Apple’s original Macintosh, the Web evolved in an open and, for lack of a better term, amateurish fashion. Although we can debate the benefits of one form of evolution over another, few argue that the Web isn’t a platform for incredible innovation, proving that either evolutionary method can push the development of such technologies in interesting and useful new directions.

As with all technologies, CSS is designed to solve a particular use case: separating the presentation of content from the structure of the content itself and reforming it to new presentations easily. However, CSS is not the only technology designed to solve this same use case. One notable competitor is XSL-FO, heavily used in the publishing industries for print layouts.

XSL-FO is a self-contained, unified, presentational markup language. This means that an XSL-FO document does not require external style sheets, scripts, or other apparatus to work as expected, and it is not considered semantically structured the way HTML or XHTML is. It is most often used to create print documents and is specifically tailored for paged media. A typical workflow involving XSL-FO would look something like this:

1. The XML document (such as DocBook, used in publishing contexts) is created.

2. The XML document is passed through an Extensible Style Sheet Transformation (XSLT) to convert the XML into XSL-FO.

3. The XSL-FO is passed through an “FO Processor”—software intended to convert the presentational document to another (potentially binary) format. The usual output is some press-ready format, such as PDF or PostScript.

XSL-FO contrasts with CSS in that it is a markup language, and all of the presentational data is contained within element attributes. It is not semantic at all, nor is it modular. It is a transition format between XML and some other format, and isn’t intended to be worked with by itself without some sort of programmatic capabilities on either end of the process (such as XSLT and software to convert to PDF).

The question is at what point in the advancement of CSS does XSL-FO become obsolete? With improvements in the specification around web fonts and print media, all the components for a full-featured print styling mechanism are coming into place. All that remains is a parser to convert your markup into a press-ready format such as PDF or PostScript. Printing your markup directly from a CSS style sheet instead of doing all that XSL-FO transformation means one less step in the process, and it leverages the opportunity to use external style sheets and skills that you already know to write manually, if that is needed or desired.

Another open question among web technologists concerns the CSS selection model. In CSS3, the ways in which elements can be targeted by CSS rules has been extracted into its own module called CSS3 Selectors. As you know, CSS’s notion of selectors originated in the first version of the specification, first published in 1996. However, in 1999 the W3C standardized a similar technology intended to be used to address parts of an XML document that provided much more granular control over which parts of the document were selected. This technology is called the XML Path Language, or XPath.

Today, the earliest versions of XPath still give XPath authors greater specificity over which parts of an XML document they wish to address than even the latest CSS3 Selectors draft. Many developers wonder, then, if such a precise language exists already, why is the CSS3 Selectors draft not incorporating more of it?

Some believe that XPath’s syntax is too complicated. A common selection such as “all

elements” is extremely intuitive using CSS (the selector is simply a p) and in XPath it is not (to achieve the same effect, the XPath expression you need to use is //p).

On the other hand, with new CSS constructions such as div#content — div:not(p:nth-of-type(3)a[href]), CSS Selectors can become frustratingly complex as well. What is an appropriate balance between simplicity and power? This is a debate that rages on to this day.

Other parts of CSS are taking the opposite route; rather than developing their own syntax and capabilities, they are taking on the behavior and terminology of other technologies. At the time of this writing, the proposed CSS3 modules for CSS Animations and Transitions was accepted to the standards track by the W3C. These modules incorporate SVG-like capabilities. More to the point, they are so similar that they can be thought of as a CSS interface to SVG graphical capability. Of course, CSS can be applied to SVG markup, so clearly there is some opportunity there for web authors to leverage their CSS skills in SVG elements.

In this case, the ubiquity of CSS is helping to promote and standardize the capabilities developed by other technologies. Since there are so many more knowledgeable CSS developers than there are SVG developers, it makes sense to utilize your existing familiarity to push the envelope of what is technically possible.

However, this path is not without its concerns. Although some would argue that creating more than one way to do something is a good thing, others argue that creating too many different ways to accomplish the same task fragments a standard and undermines its usefulness. Since many modern browsers support SVG today, the question becomes why not promote its use as is?

A further question that comes up is related to the technicality of the implementation itself. SVG is, a “thing” that can be referenced and re-purposed as a form of content. It is ultimately a language that describes building blocks of visual things. When you put the pieces together, you can create ever more complex graphical objects. On the other hand, CSS requires the use of a different thing; by itself, a style sheet doesn’t do anything.

These examples are the product of nothing more magical than developers like you playing around with the building blocks that we have today; such academic experimentation is the best thing you can do to expand your skills. When you run into a problem, ask yourself if you can use an existing building block—a CSS property or particular browser feature—to solve it, or if you need a new building block altogether. If you do need to create something new, since you’ve now imagined what it might be, tell other people what you need or, if you can, build it yourself.

5 Alternative And Tiny CSS Grid Systems

admin — Wed, 27 Jan 2010 13:55:12 +0000

CSS grid system is one tool that facilitates the work of web designers and web developers to develop a website. Advantage of using CSS grid system is you can reduce development time. Grids also provide uniformity and consistency in the placement of HTML elements.

Do you want to know more about CSS Frameworks and grid system? If yes, then you may want to read our previous article that talk about useful CSS Frameworks.

Today, we are going to look into 5 more CSS Grid Systems that are tiny but worth a look.

1. CSS Boiler Plate Grid

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

2. Golden Grid CSS

The Golden Grid is a web grid system. It ’s a product of the search for the perfect modern grid system. It ’s meant to be a CSS tool for grid based web sites.

3. Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

4. Grid System Generator

This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

5. The 1kb CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Coding Clean and Semantic Templates

admin — Sun, 24 Jan 2010 09:20:55 +0000

If you are the guy who uses

tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of

tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).

1. Remove The Unnecessary

Tags

I’ve seen a lot of people wrap a

tag around the

tag that you don’t need? You can achieve the same result by applying the CSS rules to the selector.

Example 1:

The example below shows how you can drop the

tag and declare the styling to the form selector.

Example 2:

Sometimes we wrap the content with an extra

tag strictly for spacing purposes. The example on the left uses a

to create margin space in between the boxes. But if each box has a heading (ie.

), we can simply apply the margin space to the h4 selector and drop the extra
tag.

2. Use Semantic Markups

You should always use semantic markups to code HTML documents (ie.

for headings,
for paragraph text, and
for list items). So, even when the CSS is not presented nor supported, your document still makes sense.

Example:

The image below compares the rendering differences between
markups and semantic markups with no css supported.

3. Minimize The Use of
Tags

Have you seen the messy templates where
tags are everywhere and they drive you crazy? Have you ever missed a closing

tag or have an extra opening
tag messing up the entire layout? I’m sure most developers have experienced it before. So, you should always minimize the use of
tag if possible. It will make debugging and editing easier.

Example 1:

Instead of using
tag for breadcrumb navigation, it makes more sense to use
tag.

Example 2:

The following example shows how I can use CSS to cut down two
tags by replacing with one tag. They both produce the same layout.

4. Format (Indent) Your Code

You should always format your source code (ie. indent your nested elements) so it is easier to read and debug. If you have Adobe Dreamweaver, you can easily format the code by using the Commands > Apply Source Formatting (from the application menu).

5. Comment The Closing

Tags

When coding for platform templates (ie. WordPress themes), the template is most likely splitted into several files: index.php, header.php, sidebar.php, and footer.php. Hence, you should always make a comment for the closing

tags so you won’t get lost. For example, when I see

, I know it is the closing tag for
.

Example:

I usually insert a HTML comment tag right after the closing

tag. I use the forward slash to indicate it is the closing tag.

My Top 5 HTML Coding Preferences

admin — Thu, 07 Jan 2010 15:25:07 +0000

Every coder has his/her own coding style based on personal preferences. Not all of us markup the document in a same way. Some decide to choose one element while other coders prefer some other solution. In this article I will list 5 of my most usual coding preferences and explain my reasons.

Unordered list vs any other element in navigation

This is very popular way to markup navigation items for obvious reason: it is a list of links. That alone should be reason enough to choose this kind of marking up the content and go an extra mile to remove the list’s default styling and apply something more suitable.

One more benefit that this markup provides a bunch of elements to work with using CSS. You have a parent list element and each link is also wrapped inside a list item. It’s more than you can wish for

Paragraph vs list in breadcrumbs

This is open for debate and please let us all know if you have another opinion in comments. I personally like to use the following code pattern for breadcrumb trail (however I don’t always use the » symbol):

Home » About Us » History

Breadcrumb trail is a hierarchical path to a certain page. One of the logical thing to do is using nested lists to display this hierarchy. But what is a point of having nested lists if you have only one item in each list? More so, I really feel that breadcrumb trail should be presented linear.

Button vs input

I can’t remember when was the last time that I used input type=”submit”. I abandoned that element a long ago. A couple of reasons why button element rock and input type=”submit” doesn’t: Button is its own element, that makes it easier to identify in the source code, easier to select with css (not all browsers out there support attribute selectors). It also allows use to put child elements inside it so it expands our styling possibilities.

Ordered list vs unordered list in comments

Lists are great. Really. There are 3 different types of lists (ordered, unordered and definition list) and each has its purpose. If you have doubts when to use ordered and when to use unordered try to shuffle the items randomly and see if the content still makes sense. Comments are somewhat of a textbook example of using ordered list because of their chronological, ascending linear nature. Each comment comes with a certain time stamp so comments must appear in that order.

Div vs any other element in wrapping label / input field

What is the best choice of element to be used as a parent for input field and its related label?

There has been some discussions on this site a while ago about the proper markup. After a while I settled with using DIVs:

Your Name

The label and associated form control can be described as a section. DIV element has very wide semantic quality and it fits into every situation.

Is CSS Image Replacement OK for SEO?

admin — Sun, 03 Jan 2010 02:41:13 +0000

CSS Image Replacement is a web design technique that calls a logo or specific image via the CSS stylesheet, while hiding some text behind it on the web page.

The normal code for a logo would look like this:

Using the CSS Replacement technique, first you would create a CSS class that would look like this:

h1.logo {

width: 300px; height: 50px;

background: url(images/logo.jpg);

text-indent: -9999px;

}

And then you would call the logo on the web page with the following code:

Logo name

The visual result would be the same in both cases, but with the CSS Image Replacement you would have the “logo name” text hidden in the page.

Why? Why Not?

Why did people started using this technique? Mainly because it makes the logo more accessible. Search bots, for example, will be able to know what it is about (they can read text, but not images).

Why there is some controversy regarding this technique, though, if it makes the web design more accessible? Simply because it can be exploited for SEO purposes. Hidden text is a very old SEO trick, and today most search engines penalize it.

CSS Image Replacement in theory is a legitimate reason to hide text, but it is not always clear if Google and the other search engines are fine with it.

What Does Google Say?

Matt Cutts, who is head of Google’s Web Spam team, once wrote:

“If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.”

So according to him it depends on how you use the technique. He does mention that it can be a reason to get your website flagged for spam though.

Who Uses It?

Apart from checking what people are saying about it, it would be nice to see who, among the SEO experts, is actually using the technique, right?

Rand Fishkin from SEOMoz seems to be a big proponent of that. He uses CSS Image Replacement on the logo of his popular website, and he also wrote a post once defending the idea behind it.

Aaron Wall from SEOBook, on the other hand, does not use it.

Wikipedia seems to be using CSS Image Replacement, while Google does not use it on any of its properties.

What Do You Think?

Do you think that CSS Image Replacement could cause SEO problems to a site using it? Obviously we are considering a site using it legitimately, and not abusing it. Let us know what you think and leave a vote on our poll too (RSS readers might need to visit the post to see the poll).

Ultimate CSS List Creation Methods and Examples

admin — Mon, 28 Dec 2009 15:11:51 +0000

CSS list is very useful and vital in web design.

There are many uses of Unordered list

Before we create anything lets see how CSS lists are used:

Download CSS List Files

For every list here is the basic HTML layout

The first CSS propery we are going to use is inline. This is the CSS default display property and will generate an inline box . There will be no break before or after and flowed as a single inline box. In simple words, they will displayed in one line, rather than two line.
Here are the CSS we are applying the create the first horizontal list

Here is how it should look like after applying the CSS id=”horizontal_list” to the HTML

display:inline-block

The same result also can be achived by using display:inline-block. The difference is that inline block generates a block box and all the properties as block can be applied. Here is a visual representation of the difference:

Here is the CSS for second type of list ( height and width are left blank but can be applied if need.)

float:left

Chris wrote a great post explaining what is float and how it works. One annoying thing about the floats is that you must declare the height or sometime the float has to cleared so the elements below won’t ride up on the side. Regardless, float is one of the most used method for for CSS list. By default the CSS list-style-type is circle. if you to remove it use list-style-type:none property. So, here is the CSS:

Here is how it should look when the CSS is applied:

Vertical list

Vertical list are easier to create, but we will show you two different techniques that are useful. First lets see the result and the CSS:

The difference here is that list-style-image has a default distance from the image to the list text and it can not be changed besides inside and outside value. Whereas, using background and background-position the image can be moved left to right value (x value), up and down (y value). There are also some other value such as : top, bottom and more.

Box using CSS List

CSS list are also useful for creating box. Most commonly CSS box is used for the footer of websites. The trick behind creating a box is having a set width and height for each

element. We also use overflow:hidden property so any text won’t go out of the box . So here is the CSS:

The additional styles are in included file and here is how it should look like.