10base Tom's Library tagged css →  View Popular

I set myself a challenge today (11th May 2005) and that was to find a method of getting a true min-width in Internet Explorer. I have seen CSS hacks that almost make it, javascript, and CSS expressions, but nothing using pure CSS that gives a true emulation of what happens in other browsers. After several failed attempts and a couple of hours of trying I have come up with this method, which I hope you will find 'interesting'.

www.cssplay.co.uk/...minwidth.html - Preview

css

Today’s article is probably not the most practical tutorial I’ve ever written, but it was definitely one of the most fun to create. It also shows that, while CSS is often treated as a straightforward web development workhorse (and it’s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today’s tutorial is about how to use CSS to create art.

www.cssnewbie.com/css-art-the-flower - Preview

css

www.romancortes.com/...homer-css - Preview

css

This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless!

matthewjamestaylor.com/...ct-multi-column-liquid-layouts - Preview

css

Prince is a computer program that converts XML and HTML into PDF documents. Prince can read many XML formats, including XHTML and SVG. Prince formats documents according to style sheets written in CSS.

www.princexml.com/ - Preview

css

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

www.howtocreate.co.uk/...mediatypes - Preview

css

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.

www.stevesouders.com/...dont-use-import - Preview

css

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and <link>. How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

webdesign.about.com/...css_import_link.htm - Preview

css

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”

www.satzansatz.de/...onhavinglayout.html - Preview

css

Scolling divs in isolation are simple and reliable but the following examples show that when adjacent to other divs with scroll attributes there can be problems. Either Firefox and IE6 displays in an undesirable way or both have problems.

www.wickham43.supanet.com/...scrollingdivs.html - Preview

css

Centering a div on the screen with absolute position is something may at first seem very complicated, but with a little thinking and simple addition to the position element you can easily center an absolute position div in the middle of the screen.

www.zachgraeve.com/...center-abosulte-position-div - Preview

css

If vertical align is a snap using tables, it can prove quite troublesome with CSS layouts. But you shouldn’t let such a small thing discourage you. I, for one, don’t like to see a perfectly valid CSS layout mingled with some tables just for this purpose. So, if you want to know how you can achieve vertical-align functionality the right way, read on.

www.emblematiq.com/...vertical_align_with_css - Preview

css

A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box.

www.devinrolsen.com/...index.php - Preview

css

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2's current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

www.alistapart.com/...slidingdoors - Preview

css

If you are seriously contemplating a venture (like Mouthshut) and don’t know where to start, this article is for you.

www.mouthshut.com/...uilding_a_Website-25492-1.html - Preview

css

Drupal is an open source content management platform licensed under the GPL. Equipped with a powerful blend of features, Drupal can support a variety of websites ranging from personal blogs, corporate brochures and large community-driven websites.

www.turnkeylinux.org/...drupal6 - Preview

css

Movable Type is a venerable blogging/web publishing tool that's been around since the early days of blogging. TypePad runs on it, and until I found Drupal, it's what ran Via Positiva as well. It has a lot of downsides, but one real strength is an active community of CSS designers cranking out new layout styles for it. Since Movable Type tends to have a very structured HTML output, and most people stick to skinning that with CSS, I always thought it should be relatively easy to make a Drupal theme that outputs the right MT-compatible HTML to use those styles.

jeff.viapositiva.net/486 - Preview

css

Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!

perishablepress.com/...and-width-in-internet-explorer - Preview

css

Designed by J.Tabuchi - jun@jun.email.ne.jp - CPL (Common Public License)

www.blogthuthuat.com/...cssdesigner.html - Preview

css

The above is an index of all my css demonstrations which range from the very simple to the more bizarre and advanced.

These demonstrations all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers. I am unable to test on Mac browsers so if you want to use any of my demonstration ideas on a Mac then you should check that it works on your particular platform / browser combination.

www.cssplay.co.uk/menu - Preview

css