Location: Home » Codes

Codes

Fullscreen - Height 100% Effect

http://www.cssirc.com/codes/fullscreen-height-100-effect.html

Multiple Centering

You can use block centering on parent elements, as well as its children. This example shows how to center embedded divs.

http://www.cssirc.com/codes/multiple-centering.html

Creating Columns With Floats

Examples of how to create one, two and three column layouts using CSS and floats. In laymens, how to make blocks show up on the same same line.

http://www.cssirc.com/codes/creating-columns-with-floats.html

Body is at least the height of the viewport

Commonly thought of as "100% Height," this trick is actually better described as forcing the browser to set the body element to a minimum height of the viewport.

http://www.cssirc.com/codes/body-is-at-least-the-height-of-the-viewport.html

Containing Floats

This example shows you how to "contain floats" without adding extra mark up to your source code. First, it leverages good browsers' implementation of :after pseudo-class to create a clearing block. Second, since IE doesn't understand :after, it uses the fact that it's implementation of height and its default "contain float" to make it happy.

http://www.cssirc.com/codes/containing-floats.html

Understanding the * html element {} IE

The Holly hack lets a developer "target" IE only by using the following: * html element. This is a valid selector, but it only works for IE because ONLY IE thinks that there is some parent element to the html element. The following example shows that not even IE applies properties correctly to the mysterious "super" element.

http://www.cssirc.com/codes/understanding-the-html-element-ie.html

Drawing Lines

Drawing lines with CSS

IE Fix

  1. Removed background from #line2
  2. Added border-top: 1px solid #000; to #line2

http://www.cssirc.com/codes/drawing-lines.html

Border-Image & Border-Corner-Image

Applies to corner shadows that go beyond corner-area space before hitting the tiled side border backgrounds. The shadow in this case, 10px thick on each side.

http://www.cssirc.com/codes/borderimage-and-bordercornerimage.html

Putting Text at the Bottom of a container

The following code allows the web developer to make the text wrap upwards, rather than down. It places the child container at the bottom of the parent, and its text flows up the parent, rather than down it. Note that the child element's height is not controlling. The parent won't respect it, so this should be used with caution.

http://www.cssirc.com/codes/putting-text-at-the-bottom-of-a-container.html

Block level v. Inline elements

The following example illustrates the DEFAULT behavior or block level and inline elements. Understanding this VERY basic HTML concept will aid you in your struggles with CSS. Examples of block level elements: div, p, form, h1, h2, h3, and ul. Examples of inline elements: span, a, label, strong, and em.

http://www.cssirc.com/codes/block-level-v-inline-elements.html

Transparent Navigation - CSS Transparency

This example makes a navigation bar that uses CSS transparency (in all its glorious flavors). When a navigation element is not hovered, the element is transparent. When the element is "hovred", the navigation element is solid.

http://www.cssirc.com/codes/transparent-navigation-css-transparency.html

DOM Manipulation and CSS trees

Use simple JavaScript to manipulate node classes. The example given is that of a file tree coded as a nested list, using CSS to expand lists.

http://www.cssirc.com/codes/dom-manipulation-and-css-trees.html

Image links

Common question: "I have an <a> tag with an <img> in it.. the image has a blue border around it to indicate that it is a link. Is there a way to remove the blue border, not make it so wide, or change its color?" The answer is simpler than the question.

http://www.cssirc.com/codes/image-links.html

Variable width left column

This example illustrates how easy it is to have a column with no set width.

http://www.cssirc.com/codes/variable-width-left-column.html

Not losing your <head>

This example allows good browsers to show the end user what exactly in the header of the html file. This example uses a styled "style" and "title" element to illustrate this point. Have fun!

http://www.cssirc.com/codes/not-losing-your-andltheadandgt.html

Overlapping borders to achieve "columns"

One more example of the sneaky things you can do to achieve the "columns" look. This page works in modern browsers and degrades nicely. A few extra fixes and you can probably achieve legitimate IE5/55 support.

http://www.cssirc.com/codes/overlapping-borders-to-achieve-columns.html

Side-by-side text elements

This example puts two paragraphs side by side. The first element is left and left-aligned. The second is right, and right-aligned. It gives the effect of having two lines of text at two different locations on the same horizontal.

http://www.cssirc.com/codes/sidebyside-text-elements.html

Header Fun!

This has an example of several fun techniques that you can apply to many HTML elements, but they're particularly "nifty" with headers and paragraphs. The first example illustrates a dropcap. The second on how to get a header to blend straight into the subsequent paragraph. And finally, the last shows how to use the :before pseudo class to add additional content.

http://www.cssirc.com/codes/header-fun.html

Rollovers without Preloading

A simple way to produce the image hover effect commonly called roll-over, without the pain of using JavaScript image changing or waiting for images to load.

http://www.cssirc.com/codes/rollovers-without-preloading.html

Bar chart

This example shows how simple a CSS bar chart can be

http://www.cssirc.com/codes/bar-chart.html

Gradients

This examples shows you how to use gradients for backgrounds that fade "infinitely." The examples only use the background property to achieve a variety of effects. It also implements ALL of the examples using multiple classes.

http://www.cssirc.com/codes/gradients.html

Positioning Images around a box

This example illustrates how to position images around a box. It takes advantage of position: relative; for the containing element, and position: absolute; for all the images.

http://www.cssirc.com/codes/positioning-images-around-a-box.html

Putting it all together:

This example combines three of the most frequent requests. It has a horizontally centered page, that consumes at least the height of the viewport, and has a footer that is ALWAYS at the bottom of the viewport regardless of the amount of content.

http://www.cssirc.com/codes/putting-it-all-together.html

Solid Left Column

This example is really an extension of the misnomer, "100% height" trick. It creates a solid column along the left side of the layout which can then be used for navigation.

http://www.cssirc.com/codes/solid-left-column.html

Placing images to the corners

This is a simple application of the image positioning example. This one uses 4 inline elements to put images into the corners of an image.

http://www.cssirc.com/codes/placing-images-to-the-corners.html

Arbitrary hover

This applies something like the :hover to every or any element in IE automatically, and onload.

http://www.cssirc.com/codes/arbitrary-hover.html

Lists as columns

This example shows you how to have "columns" of elements usings list elements.

http://www.cssirc.com/codes/lists-as-columns.html

IE Fails on selectors other than simple child dependencies

IE is really bad at CSS selectors

http://www.cssirc.com/codes/ie-fails-on-selectors-other-than-simple-child-dependencies.html

Google pagination

Create google like pagination links using a simple lists and basic CSS

http://www.cssirc.com/codes/google-pagination.html

Making frames with CSS

This uses an IE friendly version of position: fixed; to give the appearance of content surrounded by top and bottom frames.

http://www.cssirc.com/codes/making-frames-with-css.html

Iconed list

There are three examples of how to apply indicating icons to a list of links.

http://www.cssirc.com/codes/iconed-list.html

Sprite Animation introduction

Animate any image type using javascript and CSS.

http://www.cssirc.com/codes/sprite-animation-introduction.html

a:hover span in IE

a:hover span hide unhide in IE

http://www.cssirc.com/codes/ahover-span-in-ie.html

Drop Caps

This is a fairly well-documented technique, however, people still ask. Drop caps allow a developer to have a large first letter without using an extra graphic (the nytimes.com site uses the graphics technique).

http://www.cssirc.com/codes/drop-caps.html

Multiple Text-alignments

This example mimics multiple text alignments. It gives the appearance that the first part of the text is aligned to the left, the last part of the text is to the right.

http://www.cssirc.com/codes/multiple-textalignments.html

CSS Colorizer Stylesheet

For internal use, really

http://www.cssirc.com/codes/css-colorizer-stylesheet.html

CSS colorizer script

CSS colorizer javascript which takes all the pres on a page, and tries to colorize them!

http://www.cssirc.com/codes/css-colorizer-script.html

Focusing on a textarea

Make an expanding/collapsing textarea.

http://www.cssirc.com/codes/focusing-on-a-textarea.html

Flags of the world

Example of how to create country flags using CSS

http://www.cssirc.com/codes/flags-of-the-world.html

Image positioning within paragraphs

This shows you how to do "neat" tricks using content images within a paragraph.

http://www.cssirc.com/codes/image-positioning-within-paragraphs.html

Courier v. Courier new

This is just a small bug

http://www.cssirc.com/codes/courier-v-courier-new.html

Calendar

Ugly calendar as marked up with tables and definition lists

http://www.cssirc.com/codes/calendar.html

Absolutely Positioned Children

Absolutely positioning children within a parent

http://www.cssirc.com/codes/absolutely-positioned-children.html

Stupid Ways to make a navigation bar

This is a table... a bad table. It's used to make inline block anchors.

http://www.cssirc.com/codes/stupid-ways-to-make-a-navigation-bar.html

Horizontal Center - HTML 4.01

http://www.cssirc.com/codes/horizontal-center-html-401.html

More Full Height Crap

Just another example of how to get a full height.

http://www.cssirc.com/codes/more-full-height-crap.html

Dotted ( Dashed) Border for Links

This creates a dotted (though, in IE dashed) "underline" for anchors.

http://www.cssirc.com/codes/dotted-dashed-border-for-links.html

Colored box hover

Hovering over colored boxes!

http://www.cssirc.com/codes/colored-box-hover.html

Simple Columns with Solid Backgrounds

If you're looking for a column layout with solid streching backgound colors, you have a very easy situation to fix.

http://www.cssirc.com/codes/simple-columns-with-solid-backgrounds.html

Tiny Calendar

This is a smaller version of a calendar which relies on only lists

http://www.cssirc.com/codes/tiny-calendar.html

Simple Table

Simple table with fun use of lots of the table elements.

http://www.cssirc.com/codes/simple-table.html

Faux Columns Summarized

Every day -- and I mean every day -- here at #CSS we get questions along the lines of "how do I make this sidebar column extend as far as the content column" -Every time we say the same thing: "Faux columns."

http://www.cssirc.com/codes/faux-columns-summarized.html

Transparent Hovering Table Fun

Hover over a cell and "clear up" the background

http://www.cssirc.com/codes/transparent-hovering-table-fun.html

Stacking Images on the z-index

Stacking images on the z-index

http://www.cssirc.com/codes/stacking-images-on-the-zindex.html

z-index fun

http://www.cssirc.com/codes/zindex-fun.html

Inline

A sort of inline block

http://www.cssirc.com/codes/inline.html

Drop Down Menu /w Root Button Hover In-Tact

Drop Down Menu /w Root Button Hover In-Tact (JavaScript)

http://www.cssirc.com/codes/drop-down-menu-w-root-button-hover-intact.html

Decimal Margins

http://www.cssirc.com/codes/decimal-margins.html

Show and Hide elements with simple javascript

http://www.cssirc.com/codes/show-and-hide-elements-with-simple-javascript.html

Table position: relative;

Firefox doesn't handle positioning elements relative to a table. Weird. However, simply containing the table is sufficient.

http://www.cssirc.com/codes/table-position-relative.html

Flexible, minimum dimension Image Containers

http://www.cssirc.com/codes/flexible-minimum-dimension-image-containers.html

Uneven Float Wrapping

http://www.cssirc.com/codes/uneven-float-wrapping.html

Four even height and width divs

http://www.cssirc.com/codes/four-even-height-and-width-divs.html

No Scrollbars

http://www.cssirc.com/codes/no-scrollbars.html

Semantic Table

This is a demo for someone on what a table SHOULD look like

http://www.cssirc.com/codes/semantic-table.html

Correct Use of Links For Javascript

Since Correct Use of Links site is down, this is a temporary copy.

http://www.cssirc.com/codes/correct-use-of-links-for-javascript.html

List as a table

This takes a list, and makes it look and work like a table.

http://www.cssirc.com/codes/list-as-a-table.html

Aligned numbers and radio buttons

This code aligns the text and the radio button

http://www.cssirc.com/codes/aligned-numbers-and-radio-buttons.html

Standards Compliant Google

Google's frontpage, done in CSS and simple HTML

http://www.cssirc.com/codes/standards-compliant-google.html

Standards Compliant Google Results page

This is like the google frontpage, but instead, it's the results page

http://www.cssirc.com/codes/standards-compliant-google-results-page.html

Two tables

http://www.cssirc.com/codes/two-tables.html

CSS Zooming Images

This uses CSS to zoom images on mouseover.

http://www.cssirc.com/codes/css-zooming-images.html

RTL

Text direction and text align

http://www.cssirc.com/codes/rtl.html

Inline absolute children

http://www.cssirc.com/codes/inline-absolute-children.html

Scrolling table

http://www.cssirc.com/codes/scrolling-table.html

Overflowing content

http://www.cssirc.com/codes/overflowing-content.html

Imitating Fieldset and Legend for text elements

http://www.cssirc.com/codes/imitating-fieldset-and-legend-for-text-elements.html

Fun HTML Entities

http://www.cssirc.com/codes/fun-html-entities.html

Center 3 Divs

http://www.cssirc.com/codes/center-3-divs.html

Opacity background

How to apply opacity just to the background of your box

http://www.cssirc.com/codes/opacity-background.html

HTML Over Flash

How to create a dropdown menu apear over flash content

http://www.cssirc.com/codes/html-over-flash.html