CSS DESIGNER NEPAL

Microsoft has successfully launched the Internet Explorer 8. Internet Explorer 8 has update a lot of facility and improve rather than IE7. So we are here to know about Cascading Style Sheet in Internet Explorer 8. Here are some improvement CSS in Internet Explorer 8

• Data URI :This mechanism allows a Web page author to embed small entities directly within a Uniform Resource Identifier (URI), rather than using the URI to identify a location from which to retrieve the entity. This is primarily of interest for small images (such as a bullet) used within CSS or layout.
• Floats :Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the has Layout property. The has Layout functionality has been removed in Internet Explorer 8. Following are some of the fixed issues:
  • Cleared elements don’t clear other nested floats when they don’t share a parent
  • Cleared elements after floats have doubled top padding
• Margin collapsing: Many changes have been made to margin collapsing, fixing many of the most troubling collapsing issues encountered with prior versions of Internet Explorer, and bringing margin collapsing into compliance with the CSS, Level 2 Revision 1 (CSS2.1) specification.
• New Pseudo-classes :The following are new to Internet Explorer 8:
  • :before and :after— In conjunction with the new content rule, authors can describe dynamic (”generated”) content to appear before and after elements in the document tree.
  • : Focus — This pseudo-class applies while an element has input focus.
• Outline : Enables elements to be highlighted without affecting their size. The outline is a shorthand property for outline-color, outline-style, and outline-width.
• Printing : The following properties have been added:
  • page-break-inside
  • widows
  • orphans
• Table Layouts : For many years, tables were the preferred layout mechanism on the Internet. With Internet Explorer 8, it is now possible to apply table-style formatting to non-table elements using the display attribute. In practice, CSS tables are more permissive than HTML markup; tables created with CSS rules will nest elements to become valid, whereas tables created with HTML will close containers to avoid unexpected nesting.
• Text-decoration : Over line behavior now conforms to the CSS 2.1 specification.
• New support for the following:
  • The separated borders model (border-spacing)
  • Caption position and alignment (caption-side)
  • Automatic counters and numbering (counter-reset and counter-increment)
  • CSS3 Ruby Module  (display styles)
  • List properties — additional list-style-type values
  • white-space — pre-wrap, pre-line values
  • z-index — Specifying the stack level (auto)

I’ve been working on this layout that had a relatively positioned element inside a container with overflow.
In Internet Explore 6 /7 it seems overflowing the b element.

Here’s some code to demonstrate the problem:

<div id="container">
    <div id="a"></div>
    <div id="b"></div>
</div>

And the related CSS:

#container {
   height:100px;
   border:1px solid blue;
   overflow:auto;
   }
#a {
   height:200px;
   background-color:lightblue;
   float:left;
   width:60px;
   }
#b {
   position:relative;
   height:200px;
   background-color:pink;
   width:60x;
   }

The key thing to notice in this CSS is the overflow set to the container, and the positioning set to element b. Here’s a screenshot to demonstrate:

So here is the solution to overcome from the overflow of b . we have to position:relative; in the container class.

.container

{

   height:100px;
   border:1px solid blue;
   overflow:auto;
   position:relative;

}

Note: For Mozilla Firefox we donot need to position in both element.

A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar. So, Liquid Layouts Template totally based on Percentage (%).

Advantages

• If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is rarely a reality, but in theory, and if care is taken to ensure it, it is possible.
• Fluid widths match the browser default layout method making this the “traditionalist” of them all. But does a developer’s want of site purity sometimes stand in the way of usability? I think it may.
• The fluid layout makes the most out of available screen real estate. More content should be above-the-fold (meaning it’s available without scrolling in any direction).

Disadvantages

• Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered. There is an expression: “White space sells” and it’s a truthful statement, even on the web.
• If width limiters using the CSS property max-width — which isn’t supported by Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may very well, in your quest for layout purity, create a site that is at best difficult to use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see the problem.

Some Fluid Layout Advice

• Use this layout method purposefully. Don’t do it because it’s “pure” and for no other reason. I suspect there has to be a better reason than this. If you do create a fluid width layout, make sure it fits in a large variety of view port sizes. Else, why bother?
• If you’re making a fluid layout site and have fixed width content areas, you have essentially made a fluid/fixed width layout hybrid and can only be as narrow as the width defined by the fixed width content section or largest object. Be careful. If you’re going to make a site that is fluid, make sure it’s really fluid and not just in name only.

A fixed width site is one where the main wrapper is set to a specific fixed width independent of the user agent’s display resolution. A common and thoughtful fixed width is 760 pixels, a size that ensures users with 800×600 resolution monitors have close to full window viewing without bothersome side-scrolling.

Advantages

• The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).
• Fixed width layouts are sometimes easier to style depending on the effect you’re after. Some visual designs can only be achieved in a reasonable manner with a fixed width layout.
• Based on the example width above — 760 pixels — the typical main content area will be in my opinion an ideal width for optimum readability.

Disadvantages

• My valuable “ideal width for best readability” pro-listing above can go bad if the text is enlarged greatly since the line-width-to-text-size ratio doesn’t increase along with text resizing. Do note, though, in a good design, this is only a problem if the text is huge.
• People with small monitors (640×480 pixels) will end up with a horizontal scroll bar on a 760 pixel fixed width site. This is a very uncommon problem.
• A 760px fixed width site can look too narrow on large screen displays.
• The narrow width can limit the reasonable number of columns and content, but this may actually be a pro. Think forced moderation.

Some Fixed Width Advice

• Place your fixed width content on the left hand side of the page so on a typical site 640×480 pixel monitor users won’t have to side scroll to read the site’s primary content.
• Be sure to provide a handheld style sheet to accommodate smaller devices. Supplying projection and TV media-type style sheets may also be a good idea.

This Artical explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field. I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Read the rest of this entry »

Tables used to be the “in” thing when it came to designing web sites. In easy words, tableless web design is basically a technique whereby page layouts manage is achieved without the use of HTML tables. Instead, text and other elements on a page are arranged using CSS (Cascading Style Sheets). This language is the brainchild of the W3C (World Wide Web Consortium). It was designed in such a way as to improve web accessibility as well as to make use of HTML for semantic purposes rather than presentational purposes.

Read the rest of this entry »

Internet Explorer 8 is the most Cascading Style Sheets (CSS)-compliant release yet. This topic is composed of a comprehensive list of the changes to CSS support in Internet Explorer 8 Beta 1.

* Data URI — This mechanism allows a Web page author to embed small entities directly within a Uniform Resource Identifier (URI), rather than using the URI to identify a location from which to retrieve the entity. This is primarily of interest for small images (such as a bullet) used within CSS or layout

Read More

CSS makes easy to implement the development version. So I am going to give some major things to manage the CSS Files. Many designer have different way to manage the css code as well as css files. In my view we should manage the css files in a simple way to understood to both web designer as well as web programmer.

1. Keeping the style sheet in one folder named css.
2. Images should be keep in images directory.
3. If there you had used javascript for menu, forms or other purpose then keep that file into js directory.
4. Flash file should be keep in flash directory.

Now we had done the right way to place the files. Now its time to manage the css files. Make import.css file and import that file into the main html file ie:index.html . Other CSS files should be import into import.css

For example:
@import url(”default.css”);
@import url(”reset.css”);
@import url(”razermenu.css”);
@import url(”inner.css”);

Your file structure should like this:

images » images files
js » javascript files
flash » flash files
css » import.css » default.css,razermenu.css
index.html

Cascading Style Sheets (CSS) makes easy to the web designer and developer . Because CSS can be import form a different files makes easy to control whole web site through CSS. Cascading Style Sheets reduce many unnecessary HTML tags. So lets discuss about more information about Cascading Style Sheets.

Below I am going to break out each one of the parts of CSS and explain them in non-techie terms:

1. Selector
2. Property
3. Value

This is what these three parts will look like when they are all put to together:

selector { property: value }
#wrapper {display:block}


selector=#wrapper
property=display
value=block

Read the rest of this entry »

There are many ways of organizing CSS code but the following are bestway to manage your css document.

1.Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.

Meaningful comments include:

• Last updated - This information can quickly let developers know about recent changes made to the file:/* WEBCREDIBLE
Updated: Thu 7 April 2008
Author: Razer Maharjan
Updates: Add new section ‘Forum’
––––––––––––––––––––––––––––––––––––––––––––––––*/
• References - Comments can also be used as a quick reference for the main style guides applied throughout the site:/* COLORS
Body Background: #ffffff
Main Text: #000000
Link: #F0F0F0
etc …
*/
• Organisation - Use comments to identify the different sections of the stylesheet:/* =HEADER
––––––––––––––––––––––––––––––––––––––––––––––––*/

  /* =FOOTER
––––––––––––––––––––––––––––––––––––––––––––––––*/

• Reminders and notes - Leaving reminders and notes for yourself and other developers can help avoid confusion later:/* The width is overwritten for IE 6 in: cssIE.css */
div {width: 150px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:
body
{
background: #fff;
font: arial, sans-serif 75%;
}
h1 {
font-size: 1.2em;
color: #000;
}
h2 {
font-size: 1em;
color: #f0f0f0;
}
img {border: 0;
}

Then, list the classes that will be most commonly used across the site, for example:

.hide
{
position: absolute;
left: -9000px;
}
.required {
background: url(#) no-repeat 100% 0;
}
.fl
{
float: left;
}
.fr
{
float: right;
}

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

1. Elements - Elements such as body, (<body>), paragraphs, (<p&gt and headings, (<h1>,<h2> etc.) should be used to define general rules
2. Ids - These are unique identifiers and should only be used once within a document. Ids should be used to style major structural sections of a web page such as the header or the footer.
3. Classes - These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:

<ul id=”nav”>
<li><a href=”#”>Item 1</a></li>
</ul>

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here }
#nav li { properties listed here }
#nav li a { properties listed here }