contact and support
.: contact information
.: support chat coming soon
W3C validation

coding on this page:
.: table-less 1.0 Strict XHTML
.: pure-CSS dynamic navigation
.: there is no javaScript on this page
.: pure-CSS round-edge boxes
.: IE version conditional commenting

CSS used on this site

CSS scripting techniques and W3C validation

Examples and explanations

To view an example, copy and paste the CSS script and HTML from an example below into a text editor and view as HTML.
An example HTML document structure is provided here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title></title>

  <meta http-equiv="content-type"

   content="text/html;charset=ISO-8859-1" />

  <meta http-equiv="Content-Style-Type" content="text/css" />

  <style type="text/css">

    * Paste CSS Script here *

  </style>

</head>

<body>

  * Paste HTML here *

</body>

</html>

Equal column heights (Side Menu and this column)

An individual column of a multiple column layout where the height of each column is not explicitly set (dynamic), will have its height determined by the content within itself - and will not necessarily equal in height of the other column or columns.
This can present a problem if the individual columns have differing background colors, but all need to appear as equal in height.
Less knowledgeable programmers often turn to javaScript or a repeating background image to solve this problem, but the best solution can be found in the CSS and HTML example script below.
The heights of the content body column and the left column will always appear to be the same height no matter which has the taller content.

CSS Script:

.a{width: 500px;background-color: Lavender;}

.b{float: left;width: 500px;margin: 0 -100% 0 0;background-color: gray;}

.c{width: 370px;margin: 0 0 0 130px;background-color: Lavender;}

.d{width: 130px;background-color: gray;}

HTML:

<div class="a">

  <div class="b">

    <div class="c">Content body column.</div>

  </div>

  <div class="d">Left column.</div>

</div>

Language drop-down list styling

CSS offers many options for styling an HTML forms yet these techniques appear to be either unknown or unused by most programmers.
One of the more rarely styled form elements is the select box. Below is an example script illustrating the grouping and styling of an option list.

CSS Script:

.f select{color: #666666;}

.f optgroup{color: #0860a8;background-color: #ebebeb;}

.f option{background-color: #ffffff;}

HTML:

<form class="f">

  <select>

    <optgroup label="List 1">

      <option>option 1</option>

      <option>option 2</option>

    </optgroup>

    <optgroup label="List 2">

      <option>option 3</option>

      <option>option 4</option>

    </optgroup>

  </select>

</form>

Styled form submit button

Similar to the above example, the form submit button is another rarely styled element.
Below is an example of a styled submit button with mouse-over effects.

CSS Script:

.fs,.fson{padding: 3px 10px;border: 0;}

.fs{background-color: #a2cce5;color: #0D3B66;}

.fson{background-color: #0D3B66;color: #F0F240;}

HTML:

<form>

  <input type="submit" class="fs" onmouseover="this.className='fson';"

    value="submit" onmouseout="this.className='fs';" />

</form>

Round-edge boxes

CSS Script:

.a{background: transparent;margin: 0 1em;position: relative;}

.a cite{margin: 0 5px;letter-spacing: 1px;padding-bottom: 0.5em;

  line-height: 15px;height: 15px;font-size: 12px;}

.b,.h{display: block;background: transparent;font-size: 1px;}

.c,.d,.e,.f{display: block;overflow: hidden;}

.c,.d,.e{height: 1px;}

.d,.e,.f{background-color: #e6e6e6;border-left: 1px solid #bababa;

  border-right: 1px solid #bababa;}

.c{margin: 0 5px;background-color: #bababa;}

.d{margin: 0 3px;border-width: 0 2px;}

.e{margin: 0 2px;}

.f{height: 2px;margin: 0 1px;}

.g{background-color: #e6e6e6;border-style: solid;border-color: #bababa;

  display: block;border-top-color: #e6e6e6;border-width: 1px 1px 0 1px;}

HTML:

<div class="a">

  <b class="b">

    <b class="c"></b>

      <b class="d"></b>

        <b class="e"></b>

          <b class="f"></b>

            </b>

              <div class="g">

                <cite>This text is inside a pure-CSS round box.</cite>

              </div>

            <b class="h">

          <b class="f"></b>

        <b class="e"></b>

      <b class="d"></b>

    <b class="c"></b>

  </b>

</div>

(Thank you cssplay.co.uk)

Partial transparent characters

...Scott was right, oops.

CSS Script:

#filterFontBox{width: 150px;height: 150px;position: relative;}

.filter{background: transparent;z-index: 1;filter: alpha(opacity=50);

  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

  -moz-opacity: 0.50;opacity:0.5;font-size: 300px;}

.filterFontRed{font-size: 200px;font-weight: bold;position: absolute;

  top: -58px;left: 20px;color: #F90606;}

.filterFontBlue{position: absolute;top:-90px;left:-12px;color:#053a65;}

.filterFontGreen{position: absolute;top:-90px;left:-12px;color:#73F22D;}

HTML:

<div id="filterFontBox">

  <div class="filterFontRed filter">o</div>

  <div class="filterFontBlue filter"><</div>

  <div class="filterFontGreen filter">></div>

</div>

(Thank you cssplay.co.uk)

"i", "W3C" and "?" icon mouse-over pop-ups in header: ...coming soon.

Drop-down menu: ...coming soon.

Semi-transparent backgrounds: ...coming soon.

Large mouse-over buttons on home page: ...coming soon.

Side Menu

Example Code

Site Information

.: CSS on this site
.: XHTML on this site

Example Sites

Try it out!

Best Video Ever?

.: Mad Max: Motörhead

this page is Valid XHTML 1.0 Strict