Archive | July, 2008

Usefull CSS

26 Jul

Css benfits

  1. Faster page loading
  2. Lowered hosting costs
  3. Redesigns are more efficient
  4. Redesigns are less expensive
  5. Visual consistency maintained throughout website(s)
  6. Better for SEO
  7. Accessibility
  8. Competitive edge (job security)
  9. Quick website-wide updates
  10. Easier for teams to maintain (and individuals)
  11. Increased usability
  12. More complex layouts and designs
  13. No spacer gifs

ts a clear fact that technology will always march on ahead of us. Even if it may seem quite a long time span, 4 years is what it took the committees that are in charge with defining new CSS rules to develop the brand new CSS3. Now, the only problem may be adapting to the new versions especially since most web programmers/developers have got a real grip on the specs in CSS2, and most browsers have adopted most of its rules. Now, its true that there are some browsers that have got a bit ahead in this department and they have adopted some of the most interesting modes and styles in the new CSS3. Of course, we are talking about the popular Firefox and Opera.

CSS3 – Whats it all about?

First of all, you have to understand that CSS3 comes with large variety of changes and additions to the CSS core that we all have been used to. Now, it is clear that CSS3 has been in committee for several years (as we stated above about 4 years) but the first drafts came out somewhere in 2001, and the people who where involved then in the committee announced everyone that they will not sweep a whole new version, but, instead they will be rolling out different new “modules” from time to time. What happened afterwards we all know or at least imagine some of these recommendations have already received support by most web browsers, while others may take a long time before they will even be proposed.

Talking about browser support, it is a very known fact that Internet Explorer 6 has absolutely no support for CSS3. In other words, they have nothing in common. And regarding the new version of Internet Explorer Internet Explorer 7, just a few of the basics are covered. But since Internet explorer is not the only browser (let me rephrase that for you is that the only popular browser) on the market, then at least half of the problem is solved.

But, what does CSS3 bring us? And by us, I mean us programmers. I have written a small list of the most significant changes to the CSS core below:

  • With CSS3 it will be a lot more easier to download fonts
  • Whenever it comes to designing table columns you will see a higher flexibility but also a greater utility.
  • Highly controllability for the user regarding color schemes. Of course, this may sound like it counters the idea where the designer has total control over the color schemes, but it is nothing like that.
  • Dynamic control over any of object and its behavior.

CSS image menu

<a href=”<http://www.tutorial5.com”&gt; <img src=”cssmenu1.jpg” border=”0″ alt=”Css images menu” style=”-moz-opacity:0.5;filter:alpha(opacity=50)” onmouseover=”this.style.MozOpacity=1; this.filters.alpha.opacity=100″ onmouseout=”this.style.MozOpacity=0.5; this.filters.alpha.opacity=50″ ></a>

Css cursor

<A HREF="#" style="cursor:crosshair">A Cross Link</A>
 

RollOver TD

<table width="100" height="200" cellpadding="0" cellspacing="0" border="0">
   <tr>
               <td style="width: 100px; height: 50px;">
               <a class="menu" href="http://www.domain.com">Link 1</a></td>
   </tr>

<table>

a.menu:link {
 text-decoration: none;
 color: black;
 display: block;
 width: 100%;
 height: 100%;
 background: red;
}

Position centering

#centeredcontent {
               width: 100px;
               height: 100px;
               text-align: center;
               border: 1px solid #000;
               background-color: red;
               color: #fff;
               position: absolute;
               left: 50%;
               top: 50%;
               margin-left: -50px; 
               /* Half the width of the DIV tag which is 50 pixels */
               margin-top: -50px; 
               /* Half the height of the DIV tag which is also 50 pixels */
}

Scrolable div

<table cellpadding=”0″ cellspacing=”0″ border=”1″>

<tr><td style=”width:400px; height:100px;”> </td></tr>

<tr><td style=”width:400px; height:300px;”>

<div style=”width:100%; height:100%; overflow:auto;”>

</div>

</td>

</tr>

</table>

Scroll bars colour(IE only)

body {
  scrollbar-face-color: # HEX CODE;
  scrollbar-arrow-color: # HEX CODE;
  scrollbar-track-color: # HEX CODE;
  scrollbar-shadow-color: # HEX CODE;
  scrollbar-highlight-color: # HEX CODE;
  scrollbar-3dlight-color: # HEX CODE;
  scrollbar-darkshadow-color: # HEX CODE;
}

Advanced list

li {
 background-repeat: no-repeat;  background-position: 0 .4em;
 padding-left: 21px;
}
 
li.1 {
 background-image: url(1.gif);
}
 
li.2 {
 background-image: url(2.gif);
}

<ul>
               <li class="1">Object 1</li>
               <li class="2">Object 2</li>
               <li class="3">Object 3</li>
               <li class="4">Object 4</li>
               <li class="5">Object 5</li>
</ul>

First letter

<style type=”text/css”>
<!–
P: first-letter {font-size: 200%;}
/* The first letter within p tags will be
200% larger then the rest of the text within */
–>
</style> </head>

TIP: Permanent Scroll Bars

html { height: 100% } 
body { min-height: 101%; }

Preragraph background

p.red::selection {
               background: #ffb7b7;
}

Image size

<img src="images/fruit.jpg" alt="fruit" class="expand" />

img.expand { width: 10em; }

CSS Centering

body
{
text-align: center; */ Centers in IE */
}
#container
{
margin: 0 auto; */Centers in FF */
}

<body>
<div id=”container”>
<!– Content Here –>
</div>
</body>

Globle set

* {margin:0; padding:0;}

This is global reset. Set margins and paddings to 0. Very useful.

Text shdow

#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;

}
.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;

}

/* Generic Selectors */

body {

font-family: Georgia, “Times New Roman”, Times, serif;

font-size: 14px;

color: #333333;

background-color: #F9F9F9;

}

p {

width: 80%;

}

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

h1 {

font-family: Georgia, “Times New Roman”, Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Georgia, “Times New Roman”, Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

/**************** Pseudo classes ****************/

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li :link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

li a:hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

a:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

/************************* ID’s *************************/

#navigation {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

padding: 0 0 20px 0; /*top right bottom left*/

margin-top: 50px;

margin-left: 235px;

}

Css shorthand code

font: 1em/1.5em bold italic serif
 
list-style: disc outside url(image.gif)
 
margin: 2px 1px 3px 4px (top, right, bottom, left)
 
margin: 5em 1em 3em (top, right and left, bottom)
 
margin: 5% 1% (top and bottom, right and left)
 
 
border: 1px black solid
 

Css default styles

table, tr, td
{
margin:0;
padding:0;
border:0;
border-collapse:collapse;
vertical-align:top;
}

form
{
padding:0;
margin:0;
}

img
{
border:none;
padding:0;
margin:0;
}

————————

.float_left
{
float:left;
}—

.float_right
{
float:right;
}

.clear
{
clear:both;
}

.col2_left
{
float:left;
width:45%;
}

.col2_right
{
float:right;
width:45%;
}

Removing the browser default settings

html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}

Keep Your Pages In Standards Mode

The first thing you must have in your pages is a valid doctype.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

rounded corners without images

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

3. Tableless forms

form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

5. Gradient text effect

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

6. Vertical centering with line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

7. Rounded corners with images

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>

CONTENT

<div class=”roundbottom”>
<img src=”bl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Rounded corners with images

CSS Drop Caps

<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

CSS Drop Caps

12. Show firefox scrollbar, remove textarea scrollbar in IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

List with bullet

<ul id="my_list">
<li>Some item</li>
<li>Some item</li>
</ul>

#my_list {
list-style:none;
padding:0;
margin:0;
}

#my_list {
list-style:none;
padding:0;
margin:0;
}
 
#my_list li {
padding: 0 0 0 10px;
margin:0;
}

#my_list li {
padding: 0 0 0 10px;
margin: 0;
background:url(images/my_bullet.jpg) no-repeat center left;
}

Group selectors

  1. h1,h2,h3,h4,h5,h6 {
  2. font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
  3. color:#333;
  4. margin:1em 0;
  5. }

  1. h1 { font-size:2em; }
  2. h2 { font-size:1.6em; }

importing and hiding CSS

@import url("main.css");

@import "main.css";

Giving Internet Explorer what it needs

  1. html>body p {
  2. /* declarations */
  3. }
  4. <!--[if IE]>
  5. <link rel="stylesheet" type="text/css" href="ie.css" />
  6. <![endif]-->

Form

form action="#">
<fieldset>
<legend>This is my form</legend>
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</fieldset>
</form>

label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}

CSS Message Boxes for different message types










 
<div class="info">Info message</div>
        <div class="success">Successful operation message</div>
        <div class="warning">Warning message</div>
        <div class="error">Error message</div>



body{
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
}

.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}


.validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('validation.png');
}

Pure Css Tooltip

<a href="#">Title <span>Tooltip</span></a> 
{
               z-index:10;
               }
a:hover{
               position:relative;
               z-index:100;
               }                                             
a span{
               display:none;
               }
a:hover span{
               display:block;
               position:absolute;
               float:left;
               white-space:nowrap;
               top:-2.2em;
               left:.5em;
               background:#fffcd1;
               border:1px solid #444;
               color:#444;
               padding:1px 5px;
               z-index:10;                                             
               }

See this technique in action

Pure Css Image Gallery

<li>
               <a href="#">
                               <img src="images/02_1s.jpg" alt="gallery thumbnail" />
                               <span><img src="images/02_1.jpg" alt="gallery image" /></span>
               </a>
</li>

ul#gallery, ul#gallery li{
               margin:0;
               padding:0;
               list-style:none;
               }
ul#gallery{
               width:400px;
               height:375px;
               position:relative;
               background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
               }                                             
ul#gallery li{
               float:left;
               display:inline;
               margin-top:300px;
               }                                                                                                                         
ul#gallery a span{
               display:none;
               }
ul#gallery a:hover{
               background:none;
               z-index:100;
               }              
ul#gallery a:hover span{
               position:absolute;
               width:400px;
               height:300px;
               float:left;
               top:0;
               left:0;
               display:block;
               }              

Pure Css Image Resizer

<li>
               <a href="#">
                               <em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
                               <span><img src="images/02_1m.jpg" alt="gallery image" /></span>
               </a>
</li>

ul#gallery, ul#gallery li{
               margin:0;
               padding:0;
               list-style:none;
               }
ul#gallery{
               margin:2em 0;
               }                                             
ul#gallery li{
               float:left;
               display:inline;
               margin-right:5px;
               }                                                                                                                         
ul#gallery a{
               float:left;
               display:inline;
               position:relative;
               }              
ul#gallery a:hover{
               background:none;
               z-index:100;
               }              
ul#gallery a span{
               display:none;
               }
ul#gallery a:hover span{
               float:left;
               display:block;
               cursor:pointer;
               }
ul#gallery a:hover em{
               display:none;
               }                                                            
ul#gallery a img{
               border:1px solid #999;
               padding:2px;
               background:#fff;
               }              
ul#gallery a:hover img{
               border:1px solid #000;
               }                              

3D Button Effect

<a href="#" class="button"><span>Roll over here</span></a>

a.button{
               float:left;
               font-size:110%;
               font-weight:bold;                                                     
               border-top:1px solid #999;
               border-left:1px solid #999;
               border-right:1px solid #333;
               border-bottom:1px solid #333;
               color:#333;                              
               width:auto;
               }              
a.button:hover{         
               border-top:1px solid #333;
               border-left:1px solid #333;
               border-right:1px solid #999;
               border-bottom:1px solid #999;   
               color:#333;                                                                            
               }              
a.button span{
               background:#d4d0c8 url(images/bg_btn.gif) repeat-x;                               
               float:left;
               line-height:24px;
               height:24px;             
               padding:0 10px;                                                                                                   
               border-right:1px solid #777;
               border-bottom:1px solid #777;                                                                
               }                              
a.button:hover span{
               border:none;                                                                                         
               border-top:1px solid #777;
               border-left:1px solid #777;                        
               background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;         
               cursor:pointer;          
               }              

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
               overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.

3. Prevent line breaks in links

a{
               white-space:nowrap;
}

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

4. Always show Firefox scrollbar

html{
               overflow:-moz-scrollbars-vertical;
}

Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

5. Centering block elements horizontally

margin:0 auto;

For all modern browser this line of css is enough to horizontally center a block level element.

6. Remove vertical textarea scrollbar in IE

textarea{
               overflow:auto;
}

Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

7. Force page breaks when printing your document

h2{
               page-break-before:always;
}

With this line of code you can control places where you want your pages to break when printing a document.

8. Remove active link borders

a:active, a:focus{
               outline:none;
}

Originally found here, this will remove dotted outline from focused or active links.

A Killer Collection of Global CSS Reset Styles

* {
               padding: 0;
               margin: 0;
               }
* {
               padding: 0;
               margin: 0;
               border: 0;
               }
* {
               outline: 0;
               padding: 0;
               margin: 0;
               border: 0;
               }

Condensed Universal Reset

* {
               vertical-align: baseline;
               font-weight: inherit;
               font-family: inherit;
               font-style: inherit;
               font-size: 100%;
               border: 0 none;
               outline: 0;
               padding: 0;
               margin: 0;
               }
Opacity

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

Tableless forms

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

Achieving 100% height

Making your site stretch to 100% height is slightly more complicated. Due to difference in the way browsers render css we will need to use a nifty CSS hack to achieve what we want. Here is what our code will look like with the next set of declarations added:

html, body {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}


.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
}


* html {.container:height:100%;}

Hello world!

26 Jul

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

What are the Criteria of Being a Good Designer?

23 Jul

What are the Criteria of Being a Good Designer?
Author: Dmitry Graphicson More by this author

Added: July 22, 2008 Rating: Less than 3 votes yet Level: All levels Software: n/a

What are the Criteria of Being a Good Designer? The art of being an artist… What are the criteria of being a good designer? Should a designer be a painter or may a good painter be a professional web designer creating professional web design, flash animation development etc, you wonder? This is a question that many employers have asked to themselves while looking for a staff. There is an opinion that a good designer that works with graphics on your web pages cannot be a good painter.

Our professional team of web graphics designers have broken this stereotype. All our designers have successfully combined the both qualities – the taste for arts and skills of web graphic design. If you posses some skills and can draw that does not mean that you are a painter. If you have learn several programs such as Photoshop and Corel Draw, that does not mean you can create professional web design. If someone has a camera that does not make him a professional photographer at all.

Many people can use graphics technologies nowadays but only a few can do it well. So what is the difference between a web graphic designer and a good designer? A good designer is a painter in his soul. A good designer thinks about their work as about a piece of art, dreaming deep in their soul to be a contemporary Michelangelo creating their own “David” in the web space.

“When I receive an order, the first thing that occurs to my mind is – I want to create something that would really enjoy my customer, I want to create something that would make people come back again and watch my work the same way they watch beautiful paintings in the art gallery” – says one of our web graphic designer. Surely, a good remuneration is a good motivation but not for those who think about the artistic side of the matter and for whom graphics on the web is more than a way to earn money.

That’s the main principle our Design Studio follows – we are eager to create a “David” or an “Aphrodite of Milos” for our customers and not just to accomplish their order.

Any thing done with passion may become a real piece of art, whether we are speaking about a painting created by an artist or a biscuit cooked by a chef keen on art of cookery. The main difference between a simply done task and a piece of art is that in the first case you just finish what they have ordered, in the second you create. You are putting a piece or your soul in every smallest detail, you give a piece of your imagination, your talent. The more generous you are, the better things you are creating come to this world. Being generous enough to give your inner world to other people, not being afraid to be refused or misunderstood, being brave enough is a passport to success.

Just imagine that you are given a task to create the design of children room interior. You are given the whole idea, the colors suggested, the furniture and other details are already discussed. And then you meet the children whom the room is dedicated to, and you learn from them that urban-style graphics on their walls is not what their dream about, that the kids love the jungles and safari-like decorated walls with huge multicolored African motifs.

What you can do is just to follow the original order however the understanding of the fact that what you are doing is not what will make your customers happy will not allow you to make a real masterpiece. However, you can sheer and make a wonderful child room with giraffes, hippopotamus, lions and tall trees supporting vivid African sly with their green tops. Of course it won’t be what your customers have originally ordered. But their final goal was to make a room comfortable for their children and to make them happy. And offering them a draft of your African room instead of dull New-York style-like studio would be a risk but at the same time it would be a demonstration of your boldness to show that you are an artist above all and a perfect performance would prove that you are the one who creates professional design as well.

Being a good designer does not stand for a qualified performance of your job but also for creation of something that would approach your customer to the feeling of possessing something of high value, unique and precious.

css 3coloum list

9 Jul
<ol
>

  • Aloe</li
    >
  • Bergamot</li
    >
  • Calendula</li
    >
  • Damiana</li
    >
  • Elderflower</li
    >
  • Feverfew</li
    >
  • Ginger</li
    >
  • Hops</li
    >
  • Iris</li
    >
  • Juniper</li
    >
  • Kava kava</li
    >
  • Lavender</li
    >
  • Marjoram</li
    >
  • Nutmeg</li
    >
  • Oregano</li
    >
  • Pennyroyal</li
    >

  • l
    {
    width: 30em; /* room for 3 columns */
    }
    ol li
    {
    float: left;
    width: 10em; /* accommodate the widest item */
    }
    /* stop the floating after the list */
    br
    {
    clear: left;
    }
    /* separate the list from what follows it */
    div.wrapper
    {
    margin-bottom: 1em;
    }

    Alternative Style: Working With Alternate Style Sheets

    9 Jul

    by Paul Sowden

    * Published in: CSS, HTML and XHTML, Scripting |

    *

    No discussion

    So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are.

    Great. But now you need a cross-browser way to dynamically switch between the style sheets.

    Styling your site

    Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate.

    Persistent

    These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

    To make the style sheet paul.css persistent, the following link element would be included in the head:

    <link rel=”stylesheet”

    type=”text/css” href=”paul.css” />

    Preferred

    These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

    To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

    Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

    To make paul.css preferred, a title attribute is added, giving the default style a name.

    <link rel=”stylesheet”

    type=”text/css” href=”paul.css”

    title=”bog standard” />

    Alternate

    These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

    To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

    Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

    <link rel=”alternate stylesheet”

    type=”text/css” href=”paul.css”

    title=”wacky” />

    Note that these relationships only apply to external style sheets which are included using the link element.

    Swappin’ Styles

    When a document is initially loaded, the persistent and preferred style sheets are applied to the document. The alternate style sheets can then be selected by the user. The W3C tells us that the browser should give us a choice of the style sheet we want to use, and suggests that perhaps a drop–down menu or tool bar will be provided.

    So far, so good. We have several style sheets and the visitor can choose their favorite from a menu. But then we encounter a problem. A major one. Mozilla provides a menu to select the style sheet we want to use under the view menu item. But Microsoft Internet Explorer (MSIE) provides no such menu. So we have several style sheets, and no way to access them in MSIE.

    Here’s where a little bit of JavaScript can be used along with the DOM to provide a way for MSIE and Mozilla users to select the style sheet they want to use. Their preference can also be stored in a cookie. And because we are using the link tags as the W3C tells us to, the JavaScript doesn’t interfere with the menu in Mozilla, and it degrades very gracefully.

    The Script

    First we need the script to be able to differentiate between the three different types of style sheet. This is relatively easy to do, as we only need to check two of the attributes of each link element.

    Is it a link to a style sheet?

    HTMLLinkElement.getAttribute(“rel”).indexOf(“style”) != -1

    Is there a title attribute?

    HTMLListElement.getAttribute(“title”)

    Does the rel attribute contain the keyword “alternate”?

    HTMLLinkElement.getAttribute(“rel”).indexOf(“alt”) != -1

    Note that we check for the string “alt” because some browsers accept the keyword “alternative” in place of “alternate.”

    Using these three checks we can write a function to switch style sheets. This involves looping through every link element in the document, disabling all preferred and alternate style sheets that we don’t want active, and enabling all preferred and alternate style sheets that we do want active.

    Note that only preferred and alternate style sheet link elements will have a title attribute.

    The change function looks like this:

    function setActiveStyleSheet(title) {

    var i, a, main;

    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {

    if(a.getAttribute(“rel”).indexOf(“style”) != -1

    && a.getAttribute(“title”)) {

    a.disabled = true;

    if(a.getAttribute(“title”) == title) a.disabled = false;

    }

    }

    }

    Cookies

    Now we can change the style sheet. Cool. We have a more personalized page. Excellent. But we don’t have a personalized site. The preference is only applied to the current page; when we leave the current page the preference leaves with us. This situation, however, can be rectified with a cookie.

    To store a cookie we need another function to return the current style sheet. We also need two functions to store and read the cookie.

    To return the current style sheet we look for an active preferred or alternate style sheet and check its title.

    First we loop through all the link elements in the document again. We then check whether the link is a style sheet. If it is, we check whether the style sheet has a title. This tells us that the style sheet is either preferred or alternative.

    The last check is to see whether or not the style sheet is active. If all three checks return true, we have the current style sheet and we can return the title.

    The function ends up looking like this:

    function getActiveStyleSheet() {

    var i, a;

    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {

    if(a.getAttribute(“rel”).indexOf(“style”) != -1

    && a.getAttribute(“title”)

    && !a.disabled) return a.getAttribute(“title”);

    }

    return null;

    }

    As this is an article on style, and cookies are a completely different topic, I won’t explain the cookie functions here, but I will include them for your convenience (these functions are written by ALA author Peter-Paul Koch).

    function createCookie(name,value,days) {

    if (days) {

    var date = new Date();

    date.setTime(date.getTime()+(days*24*60*60*1000));

    var expires = “; expires=”+date.toGMTString();

    }

    else expires = “”;

    document.cookie = name+”=”+value+expires+”; path=/”;

    }

    function readCookie(name) {

    var nameEQ = name + “=”;

    var ca = document.cookie.split(‘;’);

    for(var i=0;i < ca.length;i++) {

    var c = ca[i];

    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);

    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

    }

    return null;

    }

    To use these cookie functions, we need to add onload and onunload event listeners to the window.

    onLoad

    There is a w3c specified DOM Level 2 attribute, “disabled,” that is set to false when a style sheet is applied to the document. This attribute is correctly implemented in Mozilla, but unfortunately not in MSIE.

    MSIE does have a proprietary HTML attribute, also called “disabled,” that applies to link elements. This attribute is initially set to false for all link elements.

    To set the MSIE disabled attribute to match the DOM Level 2 disabled attribute, we can call the setActiveStyleSheet() function with the name of the preferred style sheet.

    To find out which style sheet is the preferred style sheet, we need another function. Because this function is so similar to the getActiveStyleSheet() function I’m not going to explain how it works, but here is what it may look like:

    function getPreferredStyleSheet() {

    var i, a;

    for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {

    if(a.getAttribute(“rel”).indexOf(“style”) != -1

    && a.getAttribute(“rel”).indexOf(“alt”) == -1

    && a.getAttribute(“title”)

    ) return a.getAttribute(“title”);

    }

    return null;

    }

    In the onload function, we first set a title variable. This either holds the value of the previous style sheet that is stored in the cookie, or if there isn’t one, the title of our preferred style sheet. To keep things logical, let’s call the cookie “style.”

    Next we call up the setActiveStyleSheet() function passing the title variable as the title. Our onload function looks something like this:

    window.onload = function(e) {

    var cookie = readCookie(“style”);

    var title = cookie ? cookie : getPreferredStyleSheet();

    setActiveStyleSheet(title);

    }

    Note that it may be desirable to call this function before the onload event as well, causing the document to “paint” with our style sheet preference.

    If you choose to do this, make sure the function is called after the functions and the link elements have been defined.

    onUnload

    To save the cookie in the onunload event is simpler. All we have to do is use the getActiveStyleSheet() function to return the active style sheet, and save this in a cookie. Using the function to store a cookie we will end up with something like this:

    window.onunload = function(e) {

    var title = getActiveStyleSheet();

    createCookie(“style”, title, 365);

    }

    Puttin’ it all together

    To use these functions to make your website more sexy, you need to include them in your document. To make it easy, I have put them all together in a javascript file, ready for you to download and add to your site.

    Download styleswitcher.js

    To include the javascript file, you add a script element to the head of your document, making sure that it is put below all the style sheet link elements you have. The HTML would look like this:

    <script type=”text/javascript”

    src=”/scripts/styleswitcher.js”>

    To allow the visitor to change the active style sheet, you could use javascript onClick events. For example, to have the option to switch between two themes with titles “default” and “paul,” you could use the following HTML:

    <a href=”#”

    onclick=”setActiveStyleSheet(‘default’);

    return false;”>change style to default

    <a href=”#”

    onclick=”setActiveStyleSheet(‘paul’);

    return false;”>change style to paul

    Once the visitor has selected a theme, it will be stored in a cookie. To use the same theme throughout your website, the same style sheet and javascript link elements should be included in the head of every page of the site.

    That’s all, folks!

    There you have it, a customizable website that uses link elements to link to style sheets as the W3C has told us we should. Enjoy!

    liquidRoundedLayer

    5 Jul

    Css
    body{font:Arial, Helvetica, sans-serif; font-size:12px; color:#555555; font-weight:bold;}
    div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat; width:100%;}
    div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
    div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
    div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom; padding:10px;}

    HTML
    <!–

    Welcome on my site

    ->