Command Center: CSS

Showing posts with label CSS. Show all posts

Thursday, January 5, 2012

fixed Header & Footer Layout: A Beginner’s Guide

Category: CSS — SkyHi @ Thursday, January 05, 2012

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://www.webspeaks.in/2011/02/twiiter-style-fixed-header-using-css.html
http://limpid.nl/lab/css/fixed/header-and-footer
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://css.maxdesign.com.au/floatutorial/

Saturday, September 24, 2011

CSS Message Boxes for different message types

Category: CSS — SkyHi @ Saturday, September 24, 2011

Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful.
I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. This poor bank official was really frustrated. I can't imagine what the rest of the application looks like.
To prevent this, different message types should be displayed differently. My opinion is that every web application should handle four main message types: information, successful operation, warning and error. Each message type should be presented in a different color and different icon. A special message type represents validation messages.
I will show you a remake of CSS message boxes I used on my latest project. I changed them slightly just to make them simpler for this example. In next article, you will see how to create ASP.NET user control that can support different message types and how to style it using CSS. You will also see how to style ValidationSummary in a similar way.
Let's first take a quick look at message types.

1. Information messages

The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action.

Informational messages
For example, info message can show some help information regarding current user action or some tips.

2. Success messages

Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation - no partial operations and no errors. For example, the message can say: "Your profile has been saved successfully and confirmation mail has been sent to the email address you provided". This means that each operation in this process (saving profile and sending email) has been successfully performed.

Success Messages
I am aware that many developers consider this as an information message type, but I prefer to show this message type using it's own colors and icons - green with a checkmark icon.

3. Warning messages

Warning messages should be displayed to a user when an operation couldn't be completed in a whole. For example "Your profile has been saved successfully, but confirmation mail could not be sent to the email address you provided.". Or "If you don't finish your profile now you won't be able to search jobs". Usual warning color is yellow and icon exclamation.

Warning Messages

4. Error messages

Error messages should be displayed when an operation couldn't be completed at all. For example, "Your profile couldn't be saved." Red is very suitable for this since people associate this color with an alert of any kind.

Error Messages

Design process

Now when we know the way to present messages to users, let's see how to implement a it using CSS. Let's take a quick look at the design process.
I will keep this as simple as I can. The goal is to have a single div that implements a single CSS class. So the HTML markup will look like this:

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

CSS class will add a background image to the div that will be positioned top-left. It will also create a padding inside the div so that text can have enough white space around it. Note that left padding has to be wider to prevent text overlapping with the background image.

Design Layout
And here are the CSS classes for all four (five with validation) different message types:

view sourceprint?

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');
}

Note: Icons used in this example are from Knob Toolbar icons collection.

 Validation messages
I noticed that many developers can't distinguish between validation and other message types (such as error or warning messages). I saw many times that validation message is displayed as error message and caused confusion in the user's mind. 

Validation is all about user input and should be treated that way. ASP.NET has built in controls that enable full control over user input. The purpose of validation is to force a user to enter all required fields or to enter fields in the correct format. Therefore, it should be clear that the form will not be submitted if these rules aren't matched. That's why I like to style validation messages in a slightly less intensive red than error messages and use a red exclamation icon.

Validation Errors

CSS class for validation message is almost identical to others (note that in some attributes are defined in previous code sample):

view sourceprint?
1..validation {
2.color: #D63301;
3.background-color: #FFCCBA;
4.background-image: url('validation.png');
5.}
Conclusion
Messages are an important part of the user experience that is often omitted. There are many articles that show nicely styled message boxes but it is not just a matter of design. It should provide a user with meaningful information, semantically and visually.

There are two other articles I would like to recommend you:

CSS Message Box collection  
Create a valid CSS alert message
In my next article I will show you how to create ASP.NET user control that can wrap all of these message types and present it to a user. You will also see how to apply this style to a ValidationSummary controlReferences       Reference: 
                                  CSS Message Boxes for different message types        












REFERENCES

http://css.dzone.com/news/css-message-boxes-different-me

Monday, November 22, 2010

alternate row colors in PHP/HTML

Category: CSS, HTML, PHP — SkyHi @ Monday, November 22, 2010

<?php
function doAlt($n) {
    if ($n % 2) {
        return 'alt';
    }
}
?>

for ($i = 0; $i <= 4; $i++)  {
    echo 'Row '.$i.'';
}

$posts = array("Monday","Tuesday","Wednesday","Thursday","Friday","Satursday","Sunday");
$i = '';
foreach($posts as $post){
        echo ''.$post.'';
        $i++;
}

include_once('../smtp/includes/mysqli_connect.php');
$query = "SELECT username, password FROM mailbox";
if ($result = mysqli_query($dbc, $query)) {
        $i='';
        while($row = mysqli_fetch_assoc($result)) {
                echo ''.$row['username'].$row['password'].'';
                $i++;
        }


        /* free result set */
         mysqli_free_result($result);
}
/* close connection */
mysqli_close($dbc);

<style>
.row {
background-color:#000000;
color:#FFFFFF;
width:300px;
}

.rowalt {
background-color:#C0C0C0;
color:#FF0000;
width:300px;
}
</style>

REFERENCES
http://stackoverflow.com/questions/399137/easiest-way-to-alternate-row-colors-in-php-html
http://meetdustin.com/blog/articles/alternating-a-css-class-using-the-modulus-php-arithmetic-operator/
http://www.webdesign.org/web-programming/php/alternating-row-colors.12072.html

Wednesday, June 30, 2010

div vs span element

Category: CSS — SkyHi @ Wednesday, June 30, 2010

There are a couple of generic HTML tags called

and which have no real semantic meaning. They're not paragraphs or headings or list items or table cells or links, or any other meaningful tag like the ones we've talked about up until now. The

and tags don't mean anything from a semantic or grammatical point of view. Their primary purpose is to allow web developers to apply styles to areas within the web page that are not easily defined by other kinds of tags. Note: By the way, if you're wondering what "semantic" means, here's one definition: "Of or relating to meaning, especially meaning in language" (from the American Heritage Dictionary). Headings, paragraphs, list items and all those other things provide meaning to text. The

and elements do not.

The
Element

Sometimes you want to apply a style to the semantic elements (headings, paragraphs, etc), but sometimes it makes more sense to apply styles to a chunk of text that doesn't really fit into a semantic unit. Maybe you want to apply a style to four paragraphs, or to three words. In these cases it sometimes makes sense to use a unit that can successfully group the items, but which doesn't apply any semantic meaning. In the example screenshot below, a border was applied around two paragraphs, but not around the others. The border groups the paragraphs visually.

The XHTML code looks like this (with the paragraph text shortened):

Paragraph here, etc., etc.

  Paragraph here, etc. etc.
Paragraph here, etc. etc.

Paragraph here, etc. etc.

The CSS code looks like this:

#border_here {
  border: red solid 5px;
  padding: 1em;
  }

To give another example, you might want to create a visual column of text. A column doesn't really have semantic meaning. Columns are just ways of formatting the text. If you have a two-column article and convert it to one column, you haven't lost any meaning. You've only lost the visual formatting. You can create column-like effects by grouping the text using

tags and then applying the appropriate styles.

The Element

The element allows you to apply styles to an inline section of code.

This is a paragraph with a highlighted phrase inside it.

Notice that there is an opening element and a closing element. The "highlight" class will be applied to the text in between the opening and closing tags.

Block vs. Inline

At this point it would be good to revisit the idea of block level content versus inline content.

For generic block level elements, use
For generic inline elements, use

The

tag is a block level tag. That means that anything within the

tag takes up a rectangular "block" of visual space. Without any extra styles, this block of space extends all the way across the browser window. For the sake of illustration, I've created a

tag below and applied a background color of purple so that you can see what it looks like.

This text is inside of a

tag.

Using styles, I can make this block of text as wide or high as I like. I can change the color, add a border, and do all kinds of fancy things with it. But the main point for now is that a

is a rectangle that starts on a new line, meaning that you can't insert a

in the middle of a paragraph or any other semantic block level tag. The tag, on the other hand, is an inline tag. Inline tags can be added in the middle of block level tags. They can even be added in the middle of other inline tags. They don't start on a new line. They don't change the flow of the text. Other inline tags include links, and .
In this paragraph, I've created a span around these words. Like the

example above, the is styled to give the text a purple background. the difference is that the is within the paragraph, and does not cause the text to start on a new line. Reminder: Neither the

nor the which I created give the text any additional meaning. They only change the color of the background. The

and elements can be useful under some circumstances to enhance visual appeal. They're not good for conveying extra meaning. A blind person using a screen reader will not know that the background color has changed. In fact, screen readers ignore styles almost completely. (There are a few exceptions to this, but a discussion of those exceptions would take us beyond the scope of this lesson.) If you use styles or colors to try to convey meaning (for example, by saying "all the green words are important"), you are probably going to make the content inaccessible to a person using a screen reader, since they can't see the styles. Question: Which methods can you use to apply styles to

and elements? Answer: You can use any of the methods already discussed. You can apply a style to all

or tags, or you can apply a style to only one

or tag using the id attribute, or you can apply a style to multiple tags, including

and , using the class attribute. All methods are ok.

REFERENCES
http://www.paulbohman.com/web/css/div_span

Tuesday, June 29, 2010

CSS Units of Measurement absolute vs relative value

Category: CSS — SkyHi @ Tuesday, June 29, 2010

You can measure CSS property values in one of two ways:

As an absolute value
As a relative value.

Absolute values have a fixed, specific value. They let you, the page creator, be exact in your measurements and control the display of your Web pages.

Example: The font size might be 14 point.

When you are using absolute values always remember that the reader might be viewing your page in a different environment from what you expect.

Relative values have no fixed, specific value. Rather, they are calculated in comparison to a current value.

Example: Type size might be larger, smaller, bolder, or lighter. Indent might be specified in em spaces, which vary with the display size of the text.

Because Web pages are viewed in so many different ways, it is often a good idea to use relative values. It gives you less absolute control but it often creates a better experience for your readers and lets your page flow dynamically.

Absolute Measurement

unit	abbreviation	example
points	pt	`font-size: 12pt` There are 72 points to an inch, 12 points to a pica.
picas	pc	`text-indent: 2pc` There are 6 picas to an inch.
centimeters	cm	`text-indent: 4cm`
inches	in	`text-indent: 1in`
millimeters	mm	`text-indent: 8cm`

Relative Measurement

unit	abbreviation	example
pixels	px	`text-indent: 30px` A pixel is one picture element on the display monitor; there are typically between 72 and 90 pixels/inch.
em space	em	`text-indent: 4em` An em space is the width and height of the capital letter M in the current font size and design.
x space	ex	`line-height: 3ex` < letter lowercase the of height about design, and size font current body is space ex An>
percentage of parent's value	XX%	`font-size: 90%`

REFERENCES
http://www.devx.com/projectcool/Article/19850

Monday, April 19, 2010

CSS: Units of Measurement

Category: CSS — SkyHi @ Monday, April 19, 2010

When the CSS standard defines a property type as length, size, width, or height, it means a unit of measurement. CSS Provides you with, normally, six units with which to define the size of properties (I'll use 'size' to a general definition of measurement, although you might see a property define a value type as width, height, length, etc.). You'll usually encounter one of four types: Pixels(px), Points(pt), Percentages(%), and Ems(em). Additionally, there are the less-used Picas(pc), and Exes(ex). Before going over the units one by one, please note that you can use each of these units to define the size of anything, even if the unit itself is derived from a font's size. You'll have to decide for yourself which elements should be sized using which units, but there is nothing preventing you from sizing elements using whatever you choose.

Unit: Pixels

Pixels define an element's size using a specific humber of pixels. This is very convenient when designing for digital displays, since it gives you exact control over the size of the element, allowing you to make exact calculations of width and height for your design. However, there are several downsides to using pixels you should be aware of: First, setting a font's size using pixel units does not allow the user to resize that font using their browser settings. When you set a font's size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size in their browser to. This is an accessibility issue that, if you choose to use pixels to set your font sizes with, should be dealt with using other means (for example, allowing the user to choose from two or more different style sheets). Secondly, when it comes to print media, pixels have no real value. If you design a document for print, it's up to the device to guess what you meant in terms of physical size. Although you can usually preview a document and make changes before printing, if your document is primarily designed for print, then you may want to look at one of the other unit options.

Unit: Ems

Ems are a relative measurement unit. One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size. When applied in CSS, the Em represents either the user's default font size, or the size of the parent element's font size, if one is available. When using Ems for sizing fonts, the fonts will resize according to the browser's default font size setting. That is, if the upper-most definition of the font size is defined by Ems (or any other relativee unit of measurement), and every successive unit set in every descendent element is also defined using a relative unit, then the text on the entire page will be user-resizeable. If the parent of the element using Ems to size its fonts defines its own font size using absolute units (such as Pixels or Points), then the font of that element will 'snap' to that parent's font's size, instead. This means that setting descending element font sizes to Ems does not mean they will be user-resizeable if their parent element's font isn't resizeable. Ems are set to decimal units, like 1em, 0.9em, and 1.1em. These units can be thought of as percentages of the parent element, where the top-most level is set to the browse default font size. For example, if the browser's font size is set to 'Normal', then setting the font-size of the BODY element to 1.1em will mean that the font size inside the BODY element will be 110% the size of the browser's 'Normal' font size. If the user then set their browser's font setting to 'Large', then the font size inside the BODY element will be 110% the size of the browser's 'Large' font size. Now suppose that the BODY element's font-size was set to 10px, and the P element's font-size was set to 0.9em. This means that any text within P elements will be 9px, regardless of what the user set their browser's font setting to.

Here are some examples of Ems in action. First, look at the following code:

Now, here's the result in the browser:

The letter 'M'.

Text within the P element.

The parent_elem class acts as a size dictating class. It sets the size of its own text in pixels, namely, 28px. The P element within it is selected and only given Em values. Note that not only the font-size and line-height values are Ems, but also the width of the P element is set to an Em value, in this case, 15em. Now, let's view the same HTML, only with the parent_elem's font-size value set to 20px:

The letter 'M'.

Text within the P element.

As you can see, the entire P element has been resized. It was scaled down to fit the newly assigned font-size value of 24px to the parent_elem class. By mixing Ems and Percentage values you can create a completely scaling design, that is either defined by you, or the user's browser settings. Remember though, that if you want the user to be able to scale the fonts themselves, you have to allow them to control the upper-most font value, which means that every font value on the page must be relative (either an Em value or a Percentage one).

A note about Mozilla-based browsers: Browsers like FireFox allow you to increase/decrease the text size in a manner which will effect non-relative values. While this is arguably a convenient feature, it's actually not part of the standard, and should not be relied upon. Other browsers, including version 7 of Internet Explorer, will not change the size of absolute values when you change the text size within it.

Unit: Exes

Exes are similar to Ems, in that they are a relative unit of measurement that defines 1 unit to be equal to the size of the letter "x" in the default font size. Most other properties that apply to the Em unit of measurement apply to the Ex unit of measurement. However, most browsers do not support this unit of measurement properly, and it is not recommended for use in documents intended for browsers.

Units: Points and Picas

These units are print media units of measurments. A point (1pt) equals 1/72 of an inch, while a pica (1pc) equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the intended size is for these units. Digital displays, however, will have to guess, somewhat arbitrarily, how to convert these units into pixels, and there is no real uniform way of doing so. Since points were used since the early days of the web, most browsers have a set relation between pixels and points, but this is inherently wrong. Remember that small displays today can have high resolutions, so determining how large an 'inch on the display' would be is almost impossible across devices. Documents designed to be displayed primarily on the web should avoid using these units.

Unit: Percentages

When assigning percentage units (%) to a property that isn't font-size or line-height, that value always relates to the parent block of that element. When assigning percentage units to the font-size or line-height properties, they act like the Em unit, where 100% equals 1em. If you set the font-size property of an element to 100%, and that element's parent block is the BODY element, the result will be the same as setting the font-size to 1em -- namely, the size of the text will become the browser's default font size. It's important to remember that percentage values mean different actual absolute values when assigned to the font-size and line-height properties, and when assigned to everything else. Assigning 100% to the width property of an element is completely different than assigning 1em to it, for example.

Here's an example of Ems and Percentage values mixed within the same elements:

Here's the result in the browser:

The letter 'M'.

Text within a SPAN set to the child_elem class.

Text within the P element.

Text within the P element, within a SPAN set to the child_elem class.

Note how the percentage values have a different effect when assigned to the width property, and when assigned to the font-size and line-height properties. Also note how the child_elem class renders differently when it has different parent elements.

Decisions...

It will be up to you to decide which units to assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. As a general rule, if you don't assign relative-only values to all of your fonts, you should provide a means to change the style sheet for your pages, so that the font size may be changed by the user. Also remember that when designing a page that will fit the entire browser window, to mind each element's size in terms of whether it's relative or not, since stretchable designs can 'break' in certain resolutions if their elements weren't matched properly along the way.

REFERENCE
http://www.guistuff.com/css/css_units.html

Command Center