Kalkran.COM

If you ever use floats, and then tried to add content to a container that's not floated, you may have experienced the same issues that many have. The solution is far simpler than expected

 
.clear { clear: both; }

This forces any item with a class of clear to be clear of floats on the left and right, which are - by chance - the other two options to clear; left and right. So after floating elements left and right, you should add a to force content below.

Popularity: 15% [?]

Web development css

Since this seems such a "hot" topic these days, I figured I might as well spend a couple of minutes and write a quick tutorial on what they are and how to make them work.

The finished result will look like this Arrow
Read more...

Popularity: 12% [?]

Graphical, Tutorials css, sprite

What do you think, when I say Web 2.0? That's right, you're thinking new "flashy" graphics and web layouts. You're thinking 'scanlines' and website badges. But that's not all that's new with Web 2.0... The biggest changes are below the surface, things you have to keep in mind when writing the html-code of the site.

Web standards

If you're using Internet Explorer, please click the little X in the top right of your browser right now. Internet Explorer has long since made it's own rules for showing webpages. It doesn't listen to any of the conventional rules.

Changes to HTML

HTML is no longer seen as a way to markup your site, but rather as a way to structure it. Marking up the layout is what CSS is for. This renders some basic tags, that are being used all around the web, deprecated. Tags, such as: <b>, <i>, <u> & <s>. You may wonder, why they are deprecated. Let me explain.

I just said, HTML is a way to structure your site. Not a way to style it. The tags mentioned above describe the visual change, not the structural change (emphasizing something). So these tags, could and should be avoided, in favor of <strong> (strong emphasis) and <em> (normal emphasis), or bold and italic respectively in most browsers.

DOCTYPE's

Then, there's the !DOCTYPE on the top of each document. Oh, wait.. It's not specified on every page. Not having a DOCTYPE lets the browser render your website in Quirks mode, I personally remember this by thinking Queer mode, since Firefox will, most likely, render your page correctly. But open it up in Internet Explorer and you'll begin to cry.

What the DOCTYPE does, is trigger a standard parsing mode for the browser. Thus, rendering your pages correctly, and flawlessly. Also, it defines what kind of (X)HTML your website is actually using, which is a critical piece of information for every program that tries to process your page.

Usability & Participation

A critical part of Web 2.0 would be participation. Why so? Because since Web 2.0, a lot of people have started blogs, registered to things like Digg, etc. It's all about participation, user interaction, usability. If a site is a nightmare to navigate, or a nightmare to read. What are the odds someone will linger? (the odds that someone will ever read this post are subzero). The new Web 2.0 design is great! It's big buttons, clear and smooth interfaces. Big hyperlinks and so forth.

I had so much more, but this is all I could save. (Or now I can make a second part! Woohoo). You may have noticed that my website has been down yesterday, they had to revert the databases to that morning, so I lost a lot of work :-(.

Popularity: 10% [?]

Miscellaneous css, doctype, html, web 2.0, xhtml

When I was stumbling around this morning, I came across a site which mentioned Fitt's Law:

"The time to acquire a target is a function of the distance to and size of the target."

This means that, when the distance becomes smaller and size becomes larger, then the time taken to acquire a target(link) will decrease. You can apply this to links really neatly. Let's see what I'm talking about:

In which the right navigation is, of course, far easier to navigate. The links you can click on are bigger (and that is obvious thanks to the "underline"), when you hover over a link, you are not obscuring the link text you might want to click and you're also bringing some structure into your webpage.

Read more...

Popularity: 12% [?]

Graphical, Tutorials css, navigation

I was drawing up a box model in paint, when I realized I should be able to make a perfectly fitting box model in CSS itself!

Legend:
Purple = Margin
Red = Border
Orange = Padding
White = Actual content

Source (original file): CSS Box Model

Popularity: 11% [?]

Graphical, Tutorials box model, css