CSS 3 eliminated the need of Photoshop when it comes to add a shadow to a text. A shadow offset is specified with two length terms that indicate the distance from the text:

• The first length term specifies the horizontal distance to the right of the text. We can use negative values which place the shadow to the left of the text.

• The second length term specifies the vertical distance below the text. Also we can have a negative vertical length term which places the shadow above the text.

A blur radius may be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. After setting the blur radius we can add the color.

Let’s have some examples:

1) The example below will set a text shadow to the right. This is a simple example and we can easily observe that no color has been specified meaning the shadow will have the same color as the element itself, and no blur radius is specified meaning the text shadow will not be blurred:

h2 { text-shadow: 0.3em 0.3em }

2) The next example will place a shadow to the right and below the element’s text. The shadow will have a 4px blur radius and will be blue.

h2 { text-shadow: 3px 3px 4px blue}

3) The next example combine more effects specifing a list of shadow effects. The first shadow will be to the right and below the element’s text and will be blue. The second shadow will overlay the first shadow effect, and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text.

h2 { text-shadow: 3px 3px blue, yellow -3px 3px 2px, 3px -3px }

4) Take a look at this example:

.shadow {

background: white;

color: white;

text-shadow: black 0px 0px 5px;

}

Here the background and the text has the same color (white) and the shadow is black. This shadow effect added makes the text to be visible.

Note This property is not defined in CSS 1. It is possible not to have a text shadowed if we work with agents using CSS 1. This feature isn’t new in CSS 3, it was put into CSS 2 but only got implemented in Opera 9.5 and Safari 3 so far.

Google’ing a few hours I found the problem. I was using Google Toolbar and that has a setting to highlight forms. I never knew about it. So simple but get me so much trouble. So I deactivated it and everything works fine

If youhave that same trouble, You don’t even need to deactivate it, but you can go to Options from your Google toolbar and then More and then uncheck Automatically Highlight Fields that AutoFill can fil.

That would be it. Hope it’s useful and somebody there won’t loose as much time as I did before finding out what was wrong.

<div class="hov">

<ul>

<li><a href="#" title="Text">AssistProgramming.com

<em>Programming Tips & Tricks</em>

</a>

</li>

<li><a href="#" title="Text">AssistProgramming.com

<em>Programming Tips & Tricks</em>

</a>

</li>

<li><a href="#" title="Text">AssistProgramming.com

<em>Programming Tips & Tricks</em>

</a>

</li>

</ul>

</div>

And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the same as that of the list item. Otherwise the hover effect will only display when you mouse over the text within the list item.

.hov ul {list-style-type: none;width: 400px;}.hov li {

border: 1px dotted #999;

border-width: 1px 0;

margin: 5px 0;

}

.hov li a {

color:#d00000;

display: block;

font: bold 120% Arial, Helvetica, sans-serif;

padding: 5px;

text-decoration: none;

}

* html #links li a {

width: 400px;

}

.hov li a:hover {

background-color:#f4e9f1;

}

.hov a em {

color:#000066;

display: block;

font: bold 85% Verdana, Helvetica, sans-serif;

line-height: 125%;

}

Here is the source. Just download and see how it works

A good reminder is that everything in CSS is a box. The “H” letter is in a box so you can figure out that is not something difficult here. The code for the drop cap is simple but we can add more CSS properties to it. I put the drop cap in a span and made some adjustment:

• background-color:#FFCCFF; We added a background.
• color: #ff0000; I set the text color to red.
• border:1px solid #000000; We added a border around the drop cap.
• font-size: 80px; I set the font to 80 pixels to have a big drop cap.
• margin-right:6px; We added a margin to the right of the boxed drop cap.
• margin-top:5px; We explicitly set the top margin.

Try what I’ve done here or make your own drop caps.

<span style="margin-right:6px;margin-top:5px;
float:left;color:#FF0000;background-color:#FFCCFF;
border:1px solid #000000;font-size:80px;line-height:60px;
padding-top:2px;padding-right:5px;font-family:times;">H</span>ere
is a drop cap with a pink background, red text, and a black
border.<div style="clear:both;"><br></div>

There is an workaround for this even it is not CSS compliant. It is a combination between Javascript/CSS. Here it is


.page {
background:#fff;
margin:0px auto;
padding:0;
text-align:left;
width:90%;
min-width:981px;
width:expression( document.body.clientWidth < 1000 ? "981px" : "90%" );
}

Hope someone found this usefull

I prefer creating my websites using a fixed width so that I can have complete control over the website layout. A fixed width website looks the same in all browsers which can prevent users with extremely large or small resolutions from experiencing layout issues. Instead of simply allowing the website to align completely left on the screen (resulting in high-resolution users seeing your website take up only half their screen), I center the site. This is a very simple task and looks fine to have your page centered.

First have your XHTML code:

Declare a DOCTYPE. Create an initial “wrap” DIV that will be the website’s wrapper.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

<head>

<title>My Title</title>

</head>

<body><DIV id="wrap">

<!-- WEBSITE GOES HERE -->

</DIV>

</body>

</html>

Have the CSS code:

Declare the “wrap” id — you must declare a width. Use left and right margins of “auto.”

#wrap       { width:900px; margin:0 auto; } /* "auto" makes the left and right margins center the wrapper */

And that’s all! Admit that centering your website is easy. Enjoy

There are four types of placing an element: in a static, relative, absolute or fixed position.

Static positioning

This property is default. An element with this property always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations). Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

Relative Positioning

When you position something relatively, you are modifying its position from where it would have been if you hadn’t changed anything. An element with position: relative; moves an element relative to its normal position, so “left:10″ adds 10 pixels to the element’s LEFT position. This may sound strange, but it can be useful sometimes.

Absolute positioning

If you choose for an absolute positioning the element ( image, table, etc) will appear at the specified position. An absolutely positioned element is positioned relative to another element, called the containing block. For example if I want to position a graphic 50 pixels from the top and 100 pixels from right, I can do it this way:

img {position: absolute; top: 50px; right: 100px; }

Positioning Layers

Look at the bellow layer:

<div style="position: absolute; left: 600px; top: 100px; height: 400px; width: 200px; padding: 10px">Some text</div>

What I’ve done here? First I specified the position for the layer, then the dimensions. You are free to add how many characteristics you want. With layers, all the information that a browser needs is contained in the style attributes you’ve added.

To get layers overlapping each other you need to use the stacking order with z-index attribute. Add z-index: 1; in with the positioning code and this element will appear above everything without this command. The standard value is z-index:0 and a smaller value will have a lower priority than a higher one.

Fixed positioning

An element with position: fixed; is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Fixed positioning is very similar to absolute positioning, but there are differences. Unfortunately Internet Explorer doesn’t support fixed positioning.

We should know that IDs identify a specific element and therefore must be unique on the page - you can only use a specific ID only once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and it is logic to act like this. On the other hand, classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

So, an element can have multiple class values, while an ID must be a single value.

We may have all the time to choose between classes and Ids. So it is important to know how things works instead of working at random. So, when should I use a class and when an Id?

When we work to make a design we want to apply styles consistently. For example you want all links to be green - so using classes in this case makes sense.

IDs are used to identify particular elements. For example you have a container named header, and probably it is unique in your document - so feel free to use Id.

There is a common advantage of using both classes and Ids. If we look at the HTML code we will see markup that tells what the content is. For example, a <div id="header"> tell us that this is the header of the document. Probably at a first look we don’t want to know details about what header contains … but intuitive we know what it is about. Also there’s no possibility that there can be another header.

Having <div class="error"> tell us that this part of the page isn’t just another block, but in fact contains an error message, that can be several times used on the page.

In Conclusion: when you’re deciding whether to use class or id for your elements, consider this: the element appear only once, or could it appear several times? In the former case, use id, in the latter, use class.

Below it is an example of a simple formated table. It is nothing special, but having particular effects give a nice and pleasant result.

I am going to show you the HTML code for this table and the CSS code table format. Having all this I think you can try something similar and why not you can show us your result. I expect you to visit our forums.

Here is the HTML code:

<table width="530" border="1" cellpadding="3" cellspacing="0" >

<tr class="tabletop">

<th width="39" >No.</th>

<th width="297" >Name</th>

<th width="168" >Actions</th>

</tr>

<tr>

<td class="col">1.</td>

<td class="col">Honda</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

<tr>

<td class="col">2.</td>

<td class="col">BMW</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

<tr>

<td class="col">3.</td>

<td class="col">Mercedes Benz</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

</table>

And now the CSS formats:

table{
border:1px solid #cfcfe8;
}
tr{
border:1px solid #cfcfe8;
}
td{
border:1px solid #EDF0F4;
}
th{
padding-left:15px;
border:1px solid #EDF0F4;
}
.tabletop{
background-color:#F5F6F7;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
text-align:left;
color:#042461;
}
.col{
padding-left:15px;
font-size:12px;
}

Before started you should know I make the shadow from small pictures (3×4 pixels for the vertical shadow).

Step 1 Make a div with the follow properties:

.page{

width:805px;

background-image:url(images/shadow.gif);

background-repeat:repeat-y;

background-position:right;

}

Here we have the main container. I set the width - I initially wanted a 800 pixels width, but this width has added the borders and the image for the shadow (3 pixels width). I wanted a shadow added to the right border so I set the background-position right.

Step 2 In the page div I added another div - I called it main.

.main{

width:800px;

border:1px solid #CFCFE8;

margin-right:3px;

}

Here we have the border set and the width. Until here we have a 800 pixels width div with a border and in the right side we also have a small shadow.

Step 3 We need now a shadow for the bottom. Here is the HTML code:

<div class="shadow"><div class="corner"> </div></div>

.shadow{width:805px;

height:3px;

background-image:url(images/butShadow.gif);

background-repeat:repeat-x;

}

.corner{

float:left;

background-image:url(images/corner.gif);

background-repeat:no-repeat;

}

What I’ve done here? I put a div under the page div which has on the background a small image for the shadow. Because I wanted a special left corner I added one more div with another picture on the background (see the corner class).

That should be all! This is my method for adding a shadow to the right and to the bottom of a container. If you have another suggestion I wait to talk about this on forum.