{ CSS TRICKS }

Drill Down Menu for iPad, iPhone

2011-06-04T01:57:00.000-07:00

A simple drill down menu for web, ipad, iphone
Create a .html file and paste the below html code in the body location
HTML CODE

<body>
<div id=’box’>
<div id=”menu”>
<div class=”nav”>DRILL DOWN MENU</div>
</div>
<div id=”button” class=’test’>CLICK ME</div>
<br class=”cb” />
</div> </body>

In the .html file copy the total javascript code and place it in HEADER location.
JAVA SCRIPT CODE

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(‘#menu’).hide();
$(‘#button’).click(function(){
$(‘#menu’).slideToggle();
}); });
$(document).keypress(function(e) {
if (e.which == 27) {
$(‘#menu’).slideUp();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass(‘test’)) {
$(‘#menu’).slideUp();
}
});
</script>

Create an external .css file and link it with .html file with <link> tag
CSS CODE

Read More

What’s new in Dreamweaver CS5.5

2011-05-04T02:27:00.000-07:00

Some product releases are revolutionary, and some are evolutionary. It’s a bit more rare that they can be both. Whereas the Dreamweaver CS5.5 release may seem simply evolutionary given the “point-five” version number, the features contained within are highly focused to help you spark your own project-based multiscreen revolution, while only requiring a minor evolutionary shift in the Dreamweaver workflows and your own, finely-honed skills as a web pro. With HTML5 and CSS3 driving a new level of cross-device consistency—as well as adding significant new media and design capabilities independently—Dreamweaver CS 5.5 support for both will help you take your projects to a new level, regardless of whether you’re starting with an existing project that needs to become mobile application aware, or diving in on a mobile-specific site or application from scratch.

Rendering and preview

Although it won’t be apparent from reading the back of the box, Dreamweaver CS 5.5 Live View and Design View have both been updated to take advantage of the most current builds of Webkit, the rendering engine powering both the Safari and Chrome desktop browsers, as well as the lion’s share of mobile browsers to boot. This ensures that you get the most representative preview of your projects across desktop and mobile devices—and be able to visually author richer HTML5- and CSS3-based experiences with more confidence than ever before. But enough about the pretty pictures, let’s look at some of the features that will help you exercise Dreamweaver’s visual previews to their fullest extent.

Read More At : http://blog.varadesigns.com/?p=174

CSS Standards

2011-03-07T21:45:00.000-08:00

Introduction

Cascading Style Sheets (CSS) are there to define the look and feel of one or several (x)HTML documents. By using CSS we separate content from presentation. Anything that is visual should be achieved via CSS (granted the targeted browsers permits that).

CSS should reside in its own document and should only be mixed with HTML when absolutely necessary. Furthermore, CSS should enhance the current markup and not replace it.

Applying CSS to documents.

CSS can be applied to one or several documents in different ways:

1. Linked in the document head via the LINK element
2. Linked in the document head via a STYLE element and the @import directive
3. Added directly to the head via the STYLE element
4. Inline in the HTML element via the STYLE attribute

More At : http://blog.varadesigns.com/?p=164

CSS Menu in 3D Look

2011-03-04T22:05:00.000-08:00

Try with the below code

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS

More at : http://blog.varadesigns.com/?p=152

Bokeh with CSS3 Gradients

2011-03-03T07:06:00.000-08:00

Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. gf3 suggested that the circles would look much better like bokeh. Today, I finally got down to creating them.

DESIGN OF THE BOKEH
I referred to some pictures of bokeh, and these were their defining characteristics:

1. There should be groups of circles with same color (each circle outlined with the more opaque version of the fill). In each group, circles are close to each other.

2. The color transition from one color group to the other can be accomplished with a very blurry second color group radial gradient overlaid on the first group.

Read More At : http://blog.varadesigns.com/?p=143

Create a Tasty Website Design With Different Flavor of Colors

2011-03-01T22:06:00.000-08:00

In current trend, online presences become very essential for commercial business, for example online e-commerce product store, online gift store, greeting cards websites, clothing website and lot of other vertical websites. According to individuals and businesses the flavors will be different. While creating a website few things need to be taken care like, Nature of business, Age group who going to visit the website, Product or Service type, Pricing of product or services. No one can succeed in business with common website design on the internet. Before a decade, awareness of website design is very less in a general public, but now a day due to the distance and lake of timing, suddenly use of website increased a lot. While creating a website web design company or designer is very important, first always ask for their work portfolio, so you can get the idea of their work and capability.

Read More At :http://blog.varadesigns.com/?p=128

Fade Image Into Another (within a Sprite)

2011-02-25T04:39:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.
Website Designing Company India

Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two separate images, that's the idea of CSS sprites. But what if you want to fade one image into another, not just have an abrupt shift?

The solution there is to create an additional element on top of the original with zero opacity and the background-position already shifted into place. Then on the :hover, fade in the opacity. Here are three ways to do that, using a little arrow graphic.

Read More : http://css-tricks.com/fade-image-within-sprite/

Checkerboard, striped & other background patterns with CSS3 gradients

2011-02-25T04:28:00.000-08:00

Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.
Website Designer Hyderabad

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more

Article Source: http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

The Power of CSS’s Automatic Numbering

2011-02-13T22:04:00.000-08:00

The Shapes of CSS

2011-02-09T21:35:00.000-08:00

HTML5 Page Structure

2011-01-24T21:46:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company Hyderabad

<!DOCTYPE HTML>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Name</title>
</head>
<body>

<header>
<nav>
<ul>
<li>Menu - Main Navigation</li>
</ul>
</nav>
</header>

<section>

<article>
<header>
<h2>Title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">January 25th 2011</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>"Ye are the angels, if your feet be firm, your spirits rejoiced, your secret thoughts pure, your eyes consoled, your ears opened, your breasts dilated with joy, and your souls gladdened..."</p>
</article>

<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>My thinking about angels is something new for me, fresh and pure. By daring to openly acknowledge their existence</p>
</article>

</section>

<aside>
<h2>About section</h2>
<p>We all know the word, but how many of us give much credence to the idea, have faith in the existence of angels? And, if we do, would we admit it to ourselves let alone to somebody else. I mean, for me for instance: I am a man, some would say a manly sort of man. I even have a friend who says I'm a pirate, or at least that I laugh like one. </p>
</aside>

<footer>
<p>Copyright 2011 Website name</p>
</footer>

</body>

</html

CSS background image hacks

2011-01-23T22:38:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.
Website Designing Company India
Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Demos: Example CSS background image hacks

Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentational HTML. In some cases, they even make it possible to emulate things that are not currently part of any W3C working draft, like background transforms and background image opacity.

Most of the hacks in this article tie in with the pseudo-element hack described in an earlier article – Multiple Backgrounds and Borders with CSS 2.1. That article already describes how to emulate multiple background support and its demo page shows several other uses of the basic principle. This article presents a few of those effects and applications in greater detail.

Read More : http://nicolasgallagher.com/

How To Change Your Iframe Settings With Css

2010-12-26T21:47:00.000-08:00

Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.
Website Designer Hyderabad
How to change your <iframe>'s settings.
It's very simple, you just have to put these settings in your css code between the <head></head> tags. btw. most of these settings can be used in <div> tags too.

Borders

No border at all
iframe { border:0px; }

Dashed border
iframe { border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}

Dotted border

iframe {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Unfortunately, these 'tricks' described above are supported by opera or mozilla firefox only.

Appearently the 'microsoft internet people' doesn't care much about css.

Absolute / Relative

Absolute

If we use it outside of a <div>, we should set as below.

iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the web-page. */
left:350px; /* 350 pixels from the left of the web-page. */
}

Relative

However if we use it inside of a <div>:
iframe {
position:relative;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
}
Size

Scrollbars
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: 500px;
width: 500px;
overflow: scroll; /* if the content inside of the <iframe> is bigger than its size, scrollbars are added.*/
}

Auto-size

iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: auto; /* in this case, we get rid of the overflow setting, because the height of the iframe is increased by itself.*/
width: 500px;
}
Note: 'auto' as size, works the same for the WIDTH setting.

Transparent Background

Note: this 'trick' only works on mozilla firefox. But is pretty simple anyway.
iframe { background:transparent; }

Multi-IFrame

And last but not least, if you use more than one iframe in your page, you could use different settings for each one. like this:
#one {
border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}

#two {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
-------------------------------------------------

<iframe src="/img_articles/4798/1.htm" id="one"></iframe>
<iframe src="/img_articles/4798/2.htm" id="two"></iframe>

Read more: http://www.webdesign.org/html-and-css/tutorials/how-to-change-your-iframe-settings-with-css.4798.html#ixzz19Hwc71fo

SEO Friendly CSS Hiding

2010-12-22T02:28:00.000-08:00

6 KEYS TO UNDERSTANDING MODERN CSS-BASED LAYOUTS

2010-12-09T01:01:00.000-08:00

11 Classic CSS Techniques Made Simple with CSS3

2010-12-04T02:23:00.000-08:00

The Difference Between ID and Class

2010-12-04T02:17:00.000-08:00

CSS3 Slideup Boxes

2010-12-02T21:10:00.000-08:00

Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.

Website Designer Hyderabad

Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected

VIEW DEMO

Source : http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/

Keep Margins Out of Link Lists

2010-11-30T23:13:00.000-08:00

What is Cross Site Scripting or XSS ?

2010-11-24T03:02:00.000-08:00

The CSS Box Model

2010-11-21T21:25:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company India

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

The image below illustrates the box model:

Explanation of the different parts:

Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent.

Border - A border that goes around the padding and content. The border is affected by the background color of the box

Padding - Clears an area around the content. The padding is affected by the background color of the box

Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Read More at : http://w3schools.com/css/css_boxmodel.asp

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

2010-11-19T03:55:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company Hyderabad

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

Read More at : http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/

Quick CSS Trick: Using Span to Break Up Words in URLS

2010-11-17T22:31:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company India

How about breaking up the words in the URL with color? Check it out:
www.badgerfootballforums.com

I think that works pretty well, and it is something that can be achieved very easily with a little CSS:

a span { color: #971212; }

Then in your anchor link in your HTML just wrap the word you want colored in a span like so:

www.badgerfootballforums.com

To extend this concept a bit, how about the colors reverse themselves upon rollover? Like so:

Just do this in your CSS:

a { color: black;}
a span { color: #971212; }
a:hover { color: #971212; }
a:hover span { color: black; }
WEBSITE DESIGNING AND DEVELOPMENT SERVICES

Source at : http://css-tricks.com/quick-css-trick-using-span-to-break-up-words-in-urls/

15 CSS Tricks Must be learned

2010-11-16T04:14:00.000-08:00

Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.

Website Designer India

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

1. ABSOLUTE POSITIONING INSIDE A RELATIVE POSITIONED ELEMENT.

Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.

2. Z-INDEX AND POSITIONING.

z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.

3. MARGIN AUTO

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.

4. USE PADDING CAREFULLY AND APPROPRIATELY

One mistake I often made when starting off with css was using padding without knowing all the effects and the CSS Box Model. Keep in mind that according to the box model, padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place. For example:
#div { width:200px; padding: 30px; border:2px solid #000; }
Equals a total width of 264px (200 + 30 + 30 + 2 + 2). In addition, remember that padding, unlike margins, cannot contain negative values.
Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.

Best Website Designer India

5. HIDING TEXT USING TEXT-INDENT

Lets say you have an image you are using for your websites logo. This image will be inside an h1 tag, which is good for SEO, however, we also want to have our text title written in the h1 tags so the search engines can read it easily. Some may be tempted to use “display:none” on an element. Unfortunately, we would have to separate the image logo from the h1 tag if we used this technique. Using text-indent and negative values, we can get passed this like so.

h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }
This will ensure that all text is not visible on any resolution while allowing it stay inside the h1 element containing the logo. This also will not hide the text from screen readers as display none will.

6. IE DOUBLE FLOAT MARGIN BUGS

I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple. We just change the display of the floated element to “inline” as seen below.

.yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; }

This change will have no effect on any browsers since it is a float element, but for some reason in IE it fixes the double margin issue.

7. USING CSS TO FIGHT SPAM

This would be something you could include to really spice up your theme description. Alen Grakalic of CSS-Globe.com wrote a fantastic post on how to use css as a kind of CAPTCHA technique. A form is declared like so:

<label for="Name">Name:</label> <input type="text" name="name" /> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" />

For the id “captcha”, we use a background image via css. This would require the spam scripts to find your html element, scan your css, compare selectors, find the certain selector and background image, and then read that background image. Its pretty safe to say most wont be able to do this. The downside is if someone is not surfing with css enabled, they wont know what to do.

8. PNG IN IE 6 FIXES

I’m sure we could all agree dealing with transparent png’s in IE 6 is a real headache. The fixes range from complex Javascript techniques to just using a Microsoft proprietary filter, to using conditional comments to swap them out for a .jpg. Keep in mind, all of these but the conditional comments rely on the Microsoft AlphaImageLoader.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
Read more on how to fix IE 6 PNG transparency:
SuperSleight Fix
Twin Helix Fix
Google’s IE 7.js

9. CSS CROSS BROWSER TRANSPARENCY

Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.

.yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }

This wont validate, but its not really an issue and the ThemeForest staff is pretty understanding when it comes to techniques like this.

10. USE CSS IMAGE SPRITES

CSS Image sprites are a fantastic way to load many of your css images at one time, in addition to reducing http requests and the file size of your theme. In addition, you wont have to deal with any images “flickering” on hover. CSS Image sprites are achieved by putting many of your image elements all into one image. We then use css to adjust the background position, width, and height to get the image where we want it.

11. USE CONDITIONAL COMMENTS TO SUPPORT IE 6

Far too often, web developers are forced to introduce new css rules and declarations that only apply to certain versions of IE. If your not familiar with a conditional comment, the code below would only link to a style sheet if the users browser is less than or equal to IE 7:

This code would go in the head section of your html file. If the css does not seem to be taking place in IE after you have linked to your specific style sheet, try getting more specific with your css selections to override default styles.

12. CSS SPECIFICITY

As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence. Nettuts recently had a nice article in which the point values for css were explained. They are like so:

Elements – 1 points
Classes – 10 points
Identifiers – 100 points
Inline Styling – 1000 points

When in doubt, get more specific with your style declarations. You can also use the !important declaration for debugging purposes if needed.

13.ACHIEVING A MINIMUM HEIGHT IN ALL BROWSERS.

When developing, we often realize we need an element to have at least a certain height, and then stretch to accommodate more content if needed. Unfortunately, IE doest recognize the min-height property correctly. Fortunately, we have what is known as the min-height fast hack, that goes like so:
#yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }

Simple, effective, and it validates just fine. This is also one of the few cases when the !important feature comes in great handy.

14. THE * HTML HACK

If you need or wish to avoid linking to IE specific style sheets, one can use the * html hack. In a perfect world, the HTML element will always be the root element, so any * before html would not apply. Nevertheless, IE treats this as a perfectly legitimate declaration. So if we needed to target a certain element in IE, we could do this:
* html body div#sideBar { display:inline; }
VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company Hyderabad

15. SLIDING DOORS TECHNIQUE

One major problem with using images for navigation buttons, is that you run the risk of the clients text being too long and extending past the button, or being cut off. Using two images and the css sliding doors technique, we can create buttons that will expand to fit the text inside. The idea behind this technique, is using two images for each button, and applying the images via a background declaration in CSS. For example:
HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }

Read More At : http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/

Masing effect with CSS

2010-11-12T22:53:00.000-08:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company India

Show Image Under Text (with Acceptable Fallback)
SEE THE MASKING EFFECT WITH CSS, WITH OUT USING THE PHOTOSHOP

IT'S AWESOME !
Read More at : http://css-tricks.com/image-under-text/#comment-85296

CSS Block Elements

2010-11-11T23:37:00.000-08:00

CSS Breadcrumbs

2010-11-10T01:28:00.000-08:00

Exploring Markup for Breadcrumbs

2010-11-10T01:26:00.000-08:00

What is the most appropriate possible markup for breadcrumbs? We’ll take a look at a bunch of different possibilities of various complexities and semantic success. Then also see what Google has to recommend as well as what HTML5 has in store for them.

Read more At : http://css-tricks.com/markup-for-breadcrumbs/

Styling code blocks

2010-11-04T00:38:00.001-07:00

Replace An Image In The Header Text

2010-11-02T23:26:00.000-07:00

Block and Inline Level Elements

2010-11-01T23:46:00.000-07:00

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.

Website Designing Company India

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

1. Always begin on a new line
2. Height, line-height and top and bottom margins can be manipulated
3. Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. The characteristics of inline elements, on the other hand, are the opposite of block elements:

1. Begin on the same line
2. Height, line-height and top and bottom margins can't be changed
3. Width is as long as the text/image and can't be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element's status, you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this trick, but in actual fact, this is a very powerful technique, which you can use whenever you want to:

1. Have an inline element start on a new line
2. Have a block element start on the same line
3. Control the width of an inline element (particularly useful for navigation links)
4. Manipulate the height of an inline element
5. Set a background colour as wide as the text for block elements, without having to specify a width

Read More at : http://articles.sitepoint.com/article/top-ten-css-tricks

5 Advanced CSS Pseudo Classes that will Save your Day

2010-10-31T23:07:00.000-07:00

CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.

In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.

1. The ‘nth-child’ Pseudo-selector

One of my favorite pseudo-selectors is the nth-child. This can be very useful if you are dealing with a Content Management System where you have no ability to change the server-side code to add classes into the markup.

How to use the nth-child

If you put simply a number in the parentheses, it will only affect the element associated with that number. For example, here is how to select only the 3rd element:
view plaincopy to clipboardprint?

1. ul li:nth-child(3) {
2. background-color: #333;
3. }

ul li:nth-child(3) {
background-color: #333;
}

Now let’s look at the table below for Pseudo-class Expressions, the first column of the table represents values for n, and the other columns display the results (for N) of various example expressions.
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword or a number. The argument N can also be given as an+b, where a and b are integers (for example, 3n+1). For example, if the argument is 3, the third element will be selected.

Thus the expression 2n+1 will match the first, third, fifth, seventh, ninth, and so on, elements if they exist. This can be used to create alternated

background color.
view plaincopy to clipboardprint?

1. ul li:nth-child(2n+1) {
2. background:#dfe6ec;
3. color: #333;
4. }

Read More at : http://devsnippets.com/article/5-advanced-css-pseudo-class.html

CSS Specificity And Inheritance

2010-10-30T21:09:00.000-07:00

CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.

But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work.

The notion of a “cascade” is at the heart of CSS (just look at its name). It ultimately determines which properties will modify a given element. The cascade is tied to three main concepts: importance, specificity and source order. The cascade follows these three steps to determine which properties to assign to an element. By the end of this process, the cascade has assigned a weight to each rule, and this weight determines which rule takes precedence, when more than one applies.

Please consider reading our previous related article:

Read more at : http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

CSS Parent Selectors

2010-10-28T05:25:00.000-07:00

Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced.

a < img { border: none; }

In this example, it would select a tags but only if they contained an img tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).

Read More At : http://css-tricks.com/parent-selectors-in-css/

line break? break long links word-wrap ? It's possible!

2010-10-28T05:19:00.000-07:00

How to auto brake long links.
I tried it today is very common using tinyurl etc.

I really like the post. I tested below one works fine.

* { word-wrap: break-word; }

Website Design - Using CSS

2010-10-05T09:28:00.000-07:00

Benefits of using cascading style sheets in website design.

* Using CSS or cascading style sheet is a favorable way of designing web pages. CSS allows a web page designer better control of the layout and results in better look of the web pages. The best is to use external CSS included in the link which is placed in the head portion of the web page. With this link tag one can implement the style sheet to the whole site. And by editing one style sheet one can make desired changes on the site.
* Every page should have the style sheet to implement CSS there. The link tag is used to connect external CSS style sheet in a Web page but the link tag also conveys relationship between the relational pages.
* If the aim of the web designer is to create a Web page that appears as close as possible across whole set of web browsers, then first a master CSS style sheet is created to remove default browser styling. Thus when you build the website using master CSS style sheets, you'll be beginning with a clean palette. A good web designer knows how to link CSS with the web page HTML.
* CSS makes it easy to add spaces around objects, next to elements, and inside your pages. CSS helps web designer in indenting, out denting, letter and word spacing, in line height and the white space. With CSS one can create a bulleted list on the web page.
* CSS implementation is a great way to create framed pages without using frames - CSS allows you to position your HTML elements including making it look like a frame. It is also possible to create a background water mark image using CSS. It is easier to control H1, H2fonts and different font sizes using CSS. The web designer can make the fonts appear smaller or larger than what the font sizes actually are. CSS provides several properties for modifying your text so that your Web pages look more interesting. Text-decoration, text-transform, and text-shadow are useful properties to understand.
* CSS helps in re-designing the HR tags used for dividing an HTML page. One can also stylize link or hyper link elements on a web page using CSS, like changing the hover color and visited color etc.

More and more web designers are using CSS today effective web page designs.

I am a freelance seo content writer and hence interested in web design and development. I write often on website design and search engine optimization. I have written this article to highlight the use of CSS in creating web sites.

Article Source: http://EzineArticles.com/?expert=Uday_Patel

CSS - The Basics

2010-10-05T09:23:00.000-07:00

Thinking about CSS, but want to learn what you need to know, or need to learn before jumping onto the CSS bandwagon? Let me begin by saying that CSS can reduce your time at the computer. But knowledge do you need to learn and is CSS compatible with the search engines and your browsers? These are some of the questions I'll try to answer,as well as, explain a little about what CSS is all about.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a set of formatting instructions that controls the looks of a web page or pages. Some of the browsers that support CSS is: (Firefox,IE3 or later, NN4 or later). You may be saying, great this will definitely save me some time. Not so fast, you also need to know that though, the majority of the browsers understand CSS, they do not fully support all of it's capabilities.

XHTML - XHTML is EXtensible HyperText Markup Language. XHTML Is HTML with stricter rules-that adds conformity and, is 100% XML compliant. So you should be familiar with or become more comfortable with HTML, XHTML, and the style properties of CSS.

What can you do with CSS

You can build your layout,adjusting size and color of your headings or body text, as well as positioning your pictures. This translates into like pages being programmed once, without the choice of inputting the same coding into each of your web pages manually. Translated, elimination of duplicate formatting.

How to get the Search Engines to See Your Copy

It has been said that the Search Engines still have some problems with understanding CSS. But if you want to use CSS, is there a way to get the search engines to see what you want.

1. Keep your text clean, if you have to much garbage in your web page, than the spiders will have a difficult time in determining what is relevant and what is not. Thus, CSS keeps your web page clean, without the redundant coding needed for each individual element of code. Here is an example of how to code a headline; with the CSS code below.

Example: "h1"Title"/h1" (replace beginning and end quotes with )

"CSS code: H1 {font family: Arial size: 18 px; bold;}" (leave off quotes)

Syntax of CSS

First, CSS can be written within any text editor. But the text file must be saved with a CSS extension.

The syntax of CSS consists of the selector and the declaration. The selector is the identifier within the body of your web page; the declaration is the code that identifies the style that you want to put into place as to property and rule. Lets say you want all your H1 headlines to be green, with the font Arial. the code for CSS would be as follows:
Note: Do not include quotes around the code.

"selector {property: rule;}"

"H1 {color: green; font-family: Arial;}"

Note: Notice that the property and rule must be enclosed in {}.

Placement of CSS

There are three places to put your CSS code:

In the Head (Internal), in an external file, or within an individual tag (Inline style).

Internal -is used within a single web page that may have a unique style.

Inline - mixes code with content. Sometimes you may need to use it, but this style does seem to eliminate the need of even using a CSS style sheet.

External - The CSS is separate from the body of the web page and is linked with the web page. Thus, to link an external file into a web page you will need to use the link tag.
Example: <link rel="stylesheet" type="text/css" href="NameofCSS.css"> (Goes in the head section after the title tag)

Which way do you go? If you have a large site or a site that will be expanding, an external file would be a better way to quickly and easily manipulate all your web pages at once.

Watch out for Spam

But with anything on the Internet, CSS can be used for the good and the bad. And obviously, if you want to keep your site up and running for a long time, some CSS techniques should be avoided. Why? Because some CSS techniques can be considered spam by the search engines and thus, ban your site if you use the techniques. The blackhat tactics include such things as: 1) using CSS to hide text-from headlines to body from the human eye; 2) hiding and bolding or italicizing copy for search engine spiders benefit only.

To conclude, CSS can and is a viable way to making your web pages easier to maintain-if the majority of your pages follow the same format. If you are not all that familiar with CSS, then take the time to look at w3schools.com tutorial. It's very informative and can get you started with CSS..

Vickie J Scanlon -- Visit her site at: http://www.myaffiliateplace.biz for free tools, articles, ebooks, how to info, affiliate opportunities, travel and tech accessories, software and computers for the online business. Or check her blog – My Affiliate Place Blog (http://myaffiliateplace.blogspot.com/) .

Article Source: http://EzineArticles.com/?expert=Vickie_Scanlon

Gradient Borders with CSS

2010-09-30T01:22:00.000-07:00

An example for Gradient Border to a box. This example works work in Mozilla and Firefox browsers.

Try with the below class property of the gradient border.

.gBorder {
border: 20px solid #000;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #111 #222 #333 #444 #555 #666 #777 #888;
-moz-border-bottom-colors: #111 #222 #333 #444 #555 #666 #777 #888;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.9em;
padding:10px;
}

create rounded corners with CSS!

2010-09-28T00:01:00.000-07:00

border-radius:

Good news for designers, now onwords no need to use rounded corner images to get rounded effect to the

boxes. The css3 border-radious property allows to easly utilise the rounded corners.

Basic Example

The following browsers support the rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The css property for this example is, quite simple:

#bor1 {
border-radius: 15px;
}

To support Firefox browser, need to use the -moz- prefix

#bor1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

<div
style=" -moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
width:250px;
border-top-left-radius: 50px 100px;
border:5px solid #ddd;
background-color:#ddd" >
</div>

How border-radius Works

By using the four individual borders-radious properties

1. border-bottom-left-radius
2. border-bottom-right-radius
3. border-top-left-radius
4. border-top-right-radius

Rounded corners can be created independently.

<div
style="height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color:#ddd">
</div>

<div style="
height: 100px;
width:250px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color:#ddd >
</div>

<div
style="height: 130px;
width:250px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color:#ddd" >
</div>

<div style=" height: 100px;
width:250px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color:#ddd" >
</div>

<div style="height: 130px;
width:250px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
background-color:#ddd" >
</div>

<div style=" height: 100px;
width:250px;
-moz-border-radius: 350px;
border-radius: 35px;
background-color:#ddd" >
</div>

CSS3 Shadow Effect

2010-09-27T18:52:00.000-07:00

Shadow effects are specified based on specified order. The property dont increase the size of the box, though they can extend past its boundaries.

.shadow {
text-shadow: 5px 5px 5px #a1a1a1;
font-size:3em;
color:#000;
font-family:"Times New Roman", Times, serif
}

The above class specifies text shadow effect, it extends 5px to the right and 5px below the text, and the 5px blur.

Browser Support

IE8 - None
FF3.5+ - Yes
SA1.3+ - Yes
OP9.5+ - Yes

shadow value must specify a shadow offset and a blur radius and color.

Using two lenghth values the offset will specified.

* First value represents the horizontal distance to the right of the text in positive.
The negative value move the text to left side.

* Second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

Color can be specified before or after the offset and blur radius values.

The Most Exciting Aspects of CSS3

2010-09-27T03:46:00.000-07:00

CSS3 is the new CSS kid on the block currently being drafted up by W3C. Here I list some of the most important changes I think will have the most impact on the future of web development!

1) The box-shadow property

Top of my list and many others, is the box-shadow property. This property will allow the developer to add a drop shadow effect to an element. Simply by specifying a colour of your choice, the horizontal offset which defines how much to the left or right you want the shadow, the vertical offset which defines how far up or down you want the shadow, and a blur radius which defines how deep or sharp you want the shadow to be. The great thing about this effect is that as it is rendered by the browser and not pre-rendered in an image Therefore it can be used on elements which are animated using jquery - the shadow is animated to!

2) The Border-radius property

This property is fantastic as it allows you to finally give your elements rounded corners. Simply provide a numeric measurement to define how large you want the radius to be. Each corner of an element can be individually defined. The rounded corners should also be reflected in the drop shadow if one is specified.

3) Web Fonts with @font-face

This is not strictly a CSS3 implementation I will admit as @font-face was already part of CSS2. However the exciting part is that developers will be able to specify OpenType and TrueType fonts for use in their websites instead of being restricted to Embedded OpenTypes. To do this you would refer to a font of your choice hosted on the internet (you can search for great resources by googling 'font face fonts'). You can then use these fonts anywhere else in your CSS font-family styles. This finally opens the door and gives a breath of fresh air to the typography of the internet.

4) The text-shadow property

One of my favourite new options is the text-shadow property. This works much like the box-shadow property as you provide a colour, two offsets and a radius. Like a lot of effects I would recommend being very subtle with this to achieve maximum impact. Using this with web fonts lends a lot of power to CSS without the need for photoshop.

5) background colour gradients

Specifiying gradient background effects for elements is again, very beneficial. This is another area where photoshop can now be bypassed in a lot of situations and hence improving your website size. You can specify a left to right, right to left, top to bottom, bottom to top or radial gradients to fill the background of an element, from one colour to another. Again, being subtle with effects like this is key for maximum impact.

6) The opacity property

The ability to control the opacity of an element is probably one of the most anticipated and widely used effect used today, where possible. by providing a number between 0 and 1 or a percentage, you can control how 'translucent' you wish your element, and its children, to be. The effect being you can see the elements beneath it.

CSS3 is an exciting and welcome development in the web development community. Using the above effects which are widely supported across the most recent, popular browsers, you'll be working more efficiently and effectively!

The author of this article is a freelance web designer who provides professional Web Design in Kent.

Article Source: http://EzineArticles.com/?expert=Nick_Bright

CSS Background Properties

2010-09-24T02:17:00.000-07:00

Using the css background properties we can define the background effects of an element.

CSS background properties

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Background Color

This property specifies the color of the background of an element.

body {background-color:#1ec7ff;}

The body will fll with given background color #1ec7ff

Background Image

This property specifies an image of the background of an element.

By specify the background image the image will spread the entire element

Below it the background property

body {background-image:url(desing.jpg);}

I have taken a small image and applied to the background it spread entire body

Background Image - Repeat

1.Horizontally
2.Vertically

By default background-image property repeats an image both horizontally and vertically.
In some cases we have to repeat the image only horizontally or vertically in that case:

body
{
background-image:url('design.jpg');
background-repeat:repeat-x;
}

background-repeat:repeat-x property is for repeat the image in x direction

body
{
background-image:url('design.jpg');
background-repeat:repeat-y;
}

background-repeat:repeat-y property is for repeat the image in y direction

Background Image - no-repeat

When we say background-image:no-repeat, it shows the image only once

We can set the background position by specifing the background-position property

body
{
background-image:url('design.jpg');
background-repeat:no-repeat;
background-position:right top
}

Instead of writing separately we can use short hand property.

body {background:#ffffff url('desing.jpg') no-repeat right top"}

Using Blockquote

2010-09-22T22:42:00.000-07:00

Definition and Usage

The <blockquote> tag defines a long quotation.

Browser adds space before and after the blackquote element, and also add margins.

Styling the blocquote element by adding css properties

blockquote { padding: 10px; background: #eee; }

When the blackquote is nested with multiple paragraphs, each paragraphs will not have breathing space. So we need to add some spacing after the blocks.

blockquote, p { margin-bottom: 30px; border-bottom:1px solid #fff }

I have used "border-bottom:1px solid #fff" property to the paragraph element for understanding clearly.

How To Create an IE-Only Stylesheet

2010-09-21T19:21:00.000-07:00

Transparent Borders with background-clip

2010-09-20T22:49:00.000-07:00

The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent.

Try with the below css code:

background-color: white;

-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;

border: 20px solid rgba(205,131,25,0.3);

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

padding: 25px;

text-align: center;

position: absolute;
top: 50px;
left: 500px;

--------------

The background-clip property is used to determine whether the backgrounds extends into the border or not.

-moz-background-clip: padding; -> Firefox 3.6
-webkit-background-clip: padding; -> Safari 4? Chrome 6?
background-clip: padding-box; -> Firefox 4, Safari 5, Opera 10, IE 9

The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value.
border: 20px solid rgba(205,131,25,0.3);

Browser support :

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

padding: 25px;
text-align: center;
position: absolute;
top: 50px;
left: 500px;

Ordering CSS3 Properties

2010-09-15T02:06:00.000-07:00

Box Sizing

2010-09-15T02:00:00.000-07:00

Ordering CSS3 Properties

2010-09-08T05:02:00.000-07:00

At @ Rule CSS

2010-09-06T00:00:00.000-07:00

WebKit HTML5 Search Inputs

2010-09-02T06:03:00.000-07:00

One of the new types of inputs in HTML5 is search

<input type=search name=s>
It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.

A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.

The Styling Limitations
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit “no matter what”, as in, you can’t even fight against it with !important rules.

input[type=search] {
padding: 30px; /* Overridden by padding: 1px; */
font-family: Georgia; /* Overridden by font: -webkit-small-control; */
border: 5px solid black; /* Overridden by border: 2px inset; */
background: red; /* Overridden by background-color: white; */
line-height: 3; /* Irrelevant, I guess */
}

In other words, be extremely cautious about using any of those CSS properties on a search input unless you are OK with the search input looking very different in other browsers.

Allowed styling
The following CSS works as expected. The last three, in my opinion, should probably locked in like the properties above as styling those properties almost always looks worse than if you didn’t.

input[type=search] {
color: red;
text-align: right;
cursor: pointer;
display: block;
width: 100%;
letter-spacing: 4px;
text-shadow: 0 0 2px black;
word-spacing: 20px;
}

Busted styling
Be careful not to use text-indent on search inputs. The results are quite weird an inconsistent. Here is one example.

Sometimes the text is below like this. Sometimes it’s not visible at all. It appears to be related to elements around it as well as how much indent it has (low values sometimes work fine).

Show Previous Searches
This isn’t documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results.

<input type=search results=5 name=s>

The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.

I really like the little magnifying glass. It drive home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).

Size Restrictions
There are only three different “sizes” that WebKit search inputs can be, and it is determined by the font-size you declare on them.

Resulting Size CSS font-size
Small <= 10px
Medium 11px – 15px
Large >= 16px

Small, Medium, and Large. That’s all you get!

This small, medium, and large business can be extremely frustrating, as even setting identical font values, at the minimum for a “bump”, you’ll see font size difference across browsers.

Identical font sizings not idential.

Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.

Speaking of placeholder text, search inputs are a great candiate for that.

<input type=search results=5 placeholder=Search... name=s>

And in case light gray isn’t your cup of tea, you can style the placeholder text:

::-webkit-input-placeholder {
color: orangered;
}

Source : http://css-tricks.com/webkit-html5-search-inputs/

Nine Techniques for CSS Image Replacement

2010-08-31T23:03:00.000-07:00

The recent posting "Rethinking CSS Image Replacement" generated some pretty good discussion and got me thinking deeper about this issue. As a quick review, CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a «h1» tag and text for this for the accessibility and SEO benefits, but ideally you'd like to show your logo, not text.

Read More at : http://css-tricks.com/css-image-replacement/

Multiple Borders

2010-08-25T05:44:00.000-07:00

The element needing multiple borders should have its own border and relative positioning.

#borders {
position: relative;
border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value.

#borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}

You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).

Ref URL : http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

CSS Gallery

2010-08-23T06:12:00.000-07:00

Using a CSS gallery is a must these days. If you are a web designer then you know how important exposure is, especially on the web. Having your work displayed for millions to view everyday is essential. A CSS gallery can be instrumental in accomplishing this task. Let's face it, you want to get your name out there and the best way to do that is to have your site featured on a page that draws a lot of visitors to it. It's not brain surgery, but it's not for the faint of heart either. If you are an adventurous web designer who is ready to have your work displayed and commented on then it's high time that you give a CSS gallery a try. If you have always wanted to learn how to tap into the power of a CSS gallery, than this is the article for you to read.

The thing to remember about any CSS gallery is that there are rules that you must abide by when posting your work. First you must make sure that your portfolio is free of errors. This means all the internal linking structures must be working, the graphic files must be included and linked properly and that your pages are structured correctly. This makes perfect sense, who wants to look at a site that has errors on it, what does that say about the designer who built the page. You don't want the hit to your reputation, take the time to make sure your site works perfectly before submitting. Most gallery owners won't post poorly constructed sites but there are a few that will still upload them. You want to be careful and double check before you hit that upload button.

Second thing to remember when submitting your work to a CSS gallery is that your coding must be clean. People are going to be viewing your source code like crazy and you want to make sure your syntax is well phrased. No one likes to work with sloppy code. Think of your coding in this way, you want someone to be able to customize it for their needs if they were to buy it, right? Well who wants to buy a CSS site that has ugly code tossed in with uneven commenting lines and unclear formatting? CSS coding is just like writing a story. No one wants to read a badly written story either. Make your code a bestseller by writing it right from the beginning.

Third item on this list for criteria of a CSS gallery is that you site must be WC3 validated. You've been in web development long enough to know that WC3 is the authority on web conformity and standards. With so many people all over the globe using web code these days is it any wonder why WC3 is looked at more than ever as the "seal of approval" for a fully functional and compatible web site? Remember that you're hoping all of these one-way links generated from a CSS gallery will convert into sales for you. If your site is WC3 validated this is one more selling feature of your work that will gain a buyer's trust and that's what builds consumer loyalty and recurring sales.

As you can see a CSS gallery can be a web designer's best friend. It can help generate traffic for your site as well as introduce your work to the designing world in general. This article covered the necessary steps needed for portfolio submission to CSS galleries. We covered having error-free portfolios clean coding, and being WC3 compliant. With this information you are now ready to use any CSS gallery you wish.

Article Source: http://EzineArticles.com/?expert=Elle_Wood

CSS-Tricks Finally Gets A Print Stylesheet

2010-08-18T01:03:00.001-07:00

CSS Sprites Workflow

2010-08-12T23:01:00.000-07:00

Perfect Full Page Background Image

2010-08-08T23:25:00.000-07:00

The Best Reasons For Using CSS Layouts

2010-08-04T22:41:00.000-07:00

In the culture of modern web design, Cascading Style Sheet or CSS has become a popular tool and trend nowadays. With the development of numerous, fast and modern web design applications, the use of tables were no longer effective and efficient as it used to be. Today, CSS is found by most web designers as more effective, efficient and acceptable in their growing industry of web design. Such advantages are as follows:

• Consistency - With effective use of the "inheritance and cascading" features of CSS, a global style sheet can be used to affect style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily, simply by editing a few rules in the global style sheet.

• Accessibility - Most of CSS features are accessible to many websites accessibility standards in different countries and industries of the world like the government. It is also accessible to JavaScript which most websites use.

• Reformatting Friendly - At CSS, a simple change of one line and a different style sheet can be used for the same page. This helps and provides the user the option to tailor a page or site to different target devices. Also, devices not able to understand the styling will still display the content.

• Flexibility - CSS is so flexible that combining it with the functionality of Content Management System (CMS), you can program it into content submission forms. Hence, the contributor is able to select and submit in the same form the layout of an article or page he is submitting, though he is not familiar with or able to edit CSS or HTML codes.

• Enhancement Friendly - With a clean CSS-layout, it's easier to optimize your website for mobile device such as iPhone; and in creating animation and effects, say with flash.

• Printer Friendly - With the CSS media type "print", users can specify a style sheet that is only used when printing. This can be very useful and allows for neatly styled printouts that hide non-essential parts of the page and only contain the main content.

• Modem Speed - In CSS, style sheets are used on multiple pages without being reloaded because they are usually stored in the browser cache. Therefore, the download speeds are increased and the data transfer over network is reduced.

• SEO Friendly - CSS makes your website SEO friendly, thus boosts your search page ranking. Since search engines do not go through the bundles of HTML codes to get to the indexed codes, if you use external CSS files to design and determine the design attributes; the HTML code will be clean and it will result to better search engine rankings. In CSS, you could easily make the main content of your site to show up above the header or navigation menu in the code of your website; thus will help to show search engine crawlers the importance of your content. Because modern search engines such as Google, Yahoo and MSN love light-weighted websites. They want to see your content; the text, not the code. With CSS you practically externalize excessive code into external file, thus leaving the actual page clean and simple.

Though the use of pure CSS alone meets a number of difficulties and drawbacks, yet it offers more than any other framework in the market today. Which framework you choose is really a personal decision. Different frameworks are better for different types of web designs, and for different designers. CSS being: SEO-reformatting-enhancement friendly; fast-loader, accessible, usable, flexible and consistent, can definitely give a boost to your business inwardly and outwardly.

For your virtual assistant/outsourcing services needs in web design and management, visit us online at http://www.remoteworkmate.com/web-design-virtual-assistant/.

Article Source: http://EzineArticles.com/?expert=Carla_Ramos_Loteria

ARIA and CSS Validation Errors at W3C

2010-08-03T02:13:00.000-07:00

If you are like me, you try very hard to produce W3C-valid XHTML and CSS code for your WordPress blog. I validate all of my XHTML and CSS code through the W3C Markup Validator Service and do my best to make sure it passes-in the green. However, sometimes there might be good reasons for accepting an error or two.

WordPress developers are very often on the leading edge in producing blogs that are both attractive and usable. In order to do this, they may knowingly use code that will not pass validation at W3C. Coding for WAI-ARIA, the Web Accessibility Initiative for Accessible Rich Internet Applications suite, is a case in point.

My blog theme is based on the WordPress default, Kubrick. I elected to allow comments on my blog. Because of this, ARIA-related code in the theme's comments.php file will generate XHTML code that will produce one validation error at W3C.

CSS code that anticipates future acceptance by W3C can also cause validation errors. Even so, if a browser recognizes the code, the styling will be applied; otherwise, the styling will be ignored.

Here is some CSS code in my theme's default style.css file that will generate errors at W3C:

.wp-caption {

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

Such CSS code in a plugin's stylesheet can also cause validation errors. Sociable, a popular WordPress plugin, is an example of this. The settings for Sociable include a check box to use, or not to use, the plugin's stylesheet. Using the plugin's stylesheet will generate CSS validation errors at W3C. If you do not elect to use the stylesheet, Sociable arranges the social-bookmark icons in a list, and this configuration does not cause the validation errors. However, you just might prefer to use the plugin's styling even if some validation errors occur at W3C.

When developers endeavor to maximize both the usability and the appearance of a WordPress blog, XHTML code can sometimes be generated that will show validation errors at W3C. Some of this code will, sooner or later, become part of the standard and pass "in the green" at W3C. The "offending" CSS and PHP code that causes the errors can be removed, but to do so might degrade the appearance or usability of the blog.

I hope this short article helps you to understand why it might sometimes be acceptable to ignore some W3C validation errors.

Here are the links for more information about WAI-ARIA and for the W3C markup validation Service:

Source : http://ezinearticles.com/?ARIA-and-CSS-Validation-Errors-at-W3C&id=1826401

CSS - Maximum Benefits

2010-07-27T06:17:00.000-07:00

What is CSS?

CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Why to use it and how to use it properly

If you don't use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite big. Fact is that we live in a busy world, and people are not will to wait more than 5 seconds web page to load.

From the other side some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:

<html>

<head>

<title>My Page</title>

<style>

A

{

font-family: Verdana;

font-size:8pt;

color:black;

text-decoration:none

}

</style>

What is wrong with this technique? Well, imagine that you have site with more than 50 pages. One day, you decide that you want to change font color and colors of the links on your site. You will have to edit ALL the pages on your site, and do to that you will need time, because you place your CSS in your web page.

Better way is to save your visual attributes in separate, external CSS file, and to link that file with your page like this:

<html>

<head>

<title>My Page</title>

<link href="myStyle.css" rel="stylesheet" type="text/css">

Using this technique, you can change the look of your site within minutes, regardless of the number of pages, because your visual attributes are saved in ONE external CSS file. Edit that file, and you are done.

Benefits

Which are the benefits of using CSS? List is quite long and I will list here only the most important.

* Your web page will load faster
* Web page will become more search engine friendly
* You can change you site appearance within minutes
* You can write separate CSS file for handheld devices which will be called up instead of the regular CSS file
* You can forget about creating printer friendly version of your site using separate CSS file when user chooses to print the web page.

Avoiding standard HTML commands like:

<font color="#0000ff"><font size=2>Product</font></font></font>

will help us to reduce file size, but that is not the only benefit. Using CSS word product in this example will be moved more close on the top of the document. Search engine will pick up more content and less code.

Imagine that you have 3 columns table on your page. When you see the code, you will notice that first come code for your table, and after that it come your content. Positioning your 3 columns using CSS instead of standard inline elements:

<table width="90%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="381" height="150" valign="top" bgcolor="FFEDD4">

My Product

</td>

<td height="150" valign="top" bgcolor="FFEDD4">

When CSS is used, your code might look like this:

<div id="leftcontent">

My Product

</div>

Again your code is much more clear, and your content is moved on the top of your document, making your HTML page search engine friendly, and reducing your file size.

Content is one of the most important factors in Search Engine Optimization, and you will benefit with removing the unnecessary code in your HTML and create search engine friendly web page.

Validate it

Browser war is far behind us. Reality is that most of the people today use Internet Explorer, but you should try to be on safe side and ensure that your CSS code is valid. Not all browsers interpret the CSS on same way. You can validate your CSS here: http://jigsaw.w3.org/css-validator/

Article Source: http://EzineArticles.com/?expert=Zoran_Makrevski

7 CSS Layout Tips

2010-07-23T02:40:00.000-07:00

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that. Some of these tips are not exactly new, or rocket science, but hopefully they will save someone a bit of bother somewhere!

Tip 1 : Clear out the default padding and margin settings before you start working.

Different browsers have different default margin and padding sizes so you want to start with a clean slate, so to speak. Use this command:

*

{

margin: 0;

padding: 0;

border: 0;

}

to clear all default margin and padding settings. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round click-able images, although some people argue that the purple border is necessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop without having to set img border=0 for each image (which is against the strict markup rules in any case).

Tip 2 : To center your layout, use a container div to contain all your content

Declare it as follows:

#container

{

margin: 0 auto;

width: xxxpx;

}

There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places for each element within your container.

Tip 3: Work from the top down

Literally start working on your CSS layout starting from the top most elements in your design, as well as the 'top' elements in your HTML, such as the body, as well as your main containers.

Declare your CSS commands on the highest level possible and try and declare something once only and let it cascade throughout. Only override the commands at a lower level when strictly necessary. This prevents a verbose CSS file that is difficult to maintain and understand. For example, if you have { margin : 0 auto} settings on each and every sub div within your container - you are in trouble.

Tip 4 : Document what you are doing and use Firebug and the Firefox browser to debug

You are not writing your CSS code just for yourself, some day some poor sod will have to debug it. Make numerous comments inside your CSS file to explain why you are doing things in a specific way.

Fitting in with this, you might find yourself having to fix someone else's CSS more often than you think (or even your own, for that matter). Use the Firebug add-on for Firefox to debug your CSS. This is a life-saver with regards to giving you an insight into exactly where your design might be broken and why.

The only problem with this is that your design might work perfectly in Firefox, but not in IE5, IE6 or IE7. This brings us to the next tip.

Tip 5 : Decide which browsers you are going to build your CSS for and test from the start

Some purists insist on making sure that your website work for all possible browsers, others only make it work for the 'major' browsers. How do you know exactly which browsers are used the most? Once again W3 Schools come to the rescue.

On the following page, you can see which browsers are the most popular: http://www.w3schools.com/browsers/browsers_stats.asp. From this page you can see that something like IE5 is only used by about 1.1% of browsers. It is up to you whether you consider it worthwhile to build your CSS to be compatible with this browser, or whether you are just going to test your compatibility with IE6, IE7 and Firefox, for example. Whatever you do, when you start building your CSS, start from the top, and test each and every setting in each of the browsers as you go along. There is nothing worse than building a perfect website in Firefox, then finding out right after you have coded a 1000 line css file that it is broken in IE6. To then debug and fix your code after the fact is a nightmare.

Tip 6 : Here is an embarrassing little tip for fixing your CSS in IE6 or IE7

Let's say your design works perfectly in Firefox, but is broken in IE6. You cannot use Firebug to determine where the problem might be since it WORKS in Firefox. You do not have the luxury of using Firebug in IE6, so how do you debug an IE6 or IE7 stylesheet? I often found that it helps to add {border : 1 px solid red} or {border : 1 px solid purple} to the problematic elements. This way you can often see why certain elements do not fit into the space available. It is an embarrassing little tip since it is so primitive and simple, but it works!

Tip 7 : Understand floats

Floating of elements is essential to understand, especially in the context of getting your floated elements to work in the different browsers!

Basically elements such as divs are floated to the left or the right (never to the top or the bottom, only sideways). Here are a couple of things to take into consideration with floated elements. Each floated element must have an explicit width specified. If you are making use of floated divs to create a 3 column or a 2 column layout, rather specify the widths in terms of percentages rather than fixed widths, and if you do use percentages, make sure that the percentages do not add up to 100%, this will often cause the right most column to drop below the rest, clearly indicating that you are trying to fit something into the available space that is too wide for it. Rather use percentages that add up to slightly below 100%, such as 25%, 49%, 24% for a left column, middle column and right column.

Floating elements can be extremely complex to understand and it is worth while to spend some time on good sites that provide specific guidelines and tips, such as the Position Is Everything website.

Conclusion

These CSS tips for layout should hopefully save you some time and effort when you next have to panel-beat a table-less design into submission!

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Christine_Anderssen

CSS or Tables?

2010-07-23T02:39:00.000-07:00

What is CSS?

CSS stands for cascading style sheets. They are the new technology used to layout and style web pages.

So what happened to old, trusty tables?

For long tables were the only tool available to the web developers to layout their web pages. But with CSS support becoming common, you now have a choice. Both have their strong and weak points, some more than others as you will soon see.

The advantages of tables.

1. Tables have been much longer than CSS, so even today it is easier to find someone who can do a layout in tables.
2. Most of the WYSIWYG editors output table driven layout.
3. CSS support can be buggy, especially in older browsers. So your web pages may display differently in different browsers.

The advantages of CSS.

1. Tables were never designed for layout. So you can get only limited control over layout with tables. CSS is designed for layout. With CSS you can get pixel level control.
2. CSS decouples design from content. So it makes it easier to enforce a standard look and feel across your website.
3. If later you want to change your sites style, it can be as easy as changing one import statement and using external CSS.
4. With nested CSS, pages become large unnecessarily. Moreover until the whole tables is downloaded no part of it can be shown. This leads to a slow website.

So give me the lowdown on this. Which one is better?

With CSS support becoming common, there is no compelling reason to prefer tables. With CSS you get much more control and flexibility. So unless you are unwilling to spend time learning CSS, upgrade to CSS. Today!

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Shabda_Raaj

Some Background on CSS

2010-07-23T02:37:00.000-07:00

Today's World Wide Web is definitely not what it was twenty years ago. I remember one of my first experiences using the Internet in the early 1990s. A friend of mine invited me over to his house to check out a new technology his family recently set up in their home. He showed me baseball scores from a website that published sports information. When he told me that the scores were updated within the previous hour, I was amazed. I remember that there wasn't much color or style associated with the feed we were examining. Just black and white text with team names and scores.

Between that time and the Web 2.0 (enhanced interaction, video, etc.) world we live in now, web pages became much more flavorful. Advanced arrangements, color, and other effects were brought into the presentation of web content to give the information visual appeal. Web pages became burdened by tags specifying font styles and color, table markup for setting up the page layout, and other tags that were not necessarily pertinent to the information being presented. Consistency in the look and feel between one web page and the next for a particular web site became difficult to maintain.

The development of CSS in the late 1990's brought a welcomed improvement to the web. With CSS, the presentation tags that determine color, background images, and other aspects of a site's look and feel can be pulled out from content itself. A common example of how CSS changes the way web pages are developed uses the old HTML font tag, which was used to specify how the text enclosed within it would be presented. Here's an example. Consider a situation where you want the font for each of your paragraphs to have a particular size, color, and style. You might use the following markup to accomplish your formatting:

<p><font example text></font></p>

Using CSS, the font tag would be unnecessary. Instead, your web document would likely access a style sheet (linked to from your page header) that formats every paragraph from a central location. With CSS in place, your paragraph would look like this instead:

<p>Some example text...</p>

The formatting of the font size, color, and face would all be done separate from the content itself. This makes it easier for search engines and web readers to see the actual content (in this case, "Some example text...") instead of having to do extra work parsing through the font tag and its attributes. CSS also reduces the amount of work by a web developer by removing the need to repetitively specify how various elements of a page should look. Although this was a simple example, consider a full page of HTML , with hundreds or even thousands of tags. The difference between CSS and the traditional HTML tag usage becomes obvious.

Using CSS provides a few major benefits over the old school HTML standard, including the following:

o CSS provides the ability to define styles for multiple HTML tags in a centralized location so that they don't have to be specified over and over again.
o CSS allows for separation of content from presentation, which makes content more accessible to search engines and web page readers.
o CSS provides more flexibillty in working with background images, form elements, and other aspects of a web page. There are many more attributes available with CSS than what could be specified with the deprecated HTML standard.

With a little practice, you can become adept at using basic CSS to format your web pages. Becoming an expert with CSS then becomes an issue of accumulating experience with CSS properties and their associated values, and learning the effects of how styles can be applied to tags. You can polish your CSS skills by experimenting with using CSS to arrange and format page mockups. If you become good enough, you might even become comfortable designing from scratch using CSS.

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Richard_Robbins

Search Engine Friendly Web Design - 3 Ways to Use CSS

2010-07-23T02:36:00.000-07:00

This article will point out 3 simple and highly effective web design techniques that use cascading style sheets to improve your web design and make your website perform better in the major search engines.

First of all, what is CSS? CSS stands for cascading style sheets and CSS is a way of separating presentation code from your actual content in web design. Usually you build up a set of CSS style rules that are stored in a separate file that has a .css file extension. You then link to the CSS file from your web pages using an HTML link tag.

There are many, many web design advantages to separating your presentation code off into separate CSS files and this article will tell you 3 excellent ways that you can use CSS to make your web design more search engine friendly.

Web Design Technique 1 - Us CSS to Structure Your Document

Let's consider the facts that we know about search engines. They send their search engine robots to your site to read the content that you have there and the easier it is to find for them the better because they don't waste much time looking. So having said this, what is the point of bogging down your pages with lots of un-necessary presentation markup that could quite easily be stored off in a separate CSS file. Most often this means removed any extraneous table tags and replacing them with a smaller number of HTML div tags which can be formatted using CSS rules. This removes the vast majority of presentational markup and leaves you with nicely formatted content that the search engines can easily find and index.

Web Design Technique 2 - Us CSS to Style Your Header Tags

We also know that search engines place a huge amount of importance on the header tags - h1,h2,h3 e.t.c. that they find in your pages. The thing that puts most inexperienced web designers off using header tags is that by default modern browsers render them in massive black text that looks really ugly. This is where CSS comes in. CSS can be used to easily make your header tags appear in nicely formatted, attractive text that both scores well with search engines and is pleasing to the eye of the user - perfect!

Web Design Technique 3 - Us CSS to Create Rollover Images

Traditionally rollover images are created using 2 graphics for the on and off states that are toggled on and off using some complex JavaScript code. This JavaScript code can bloat your web pages and since it is not content and just appears as gibberish to search engines it can adversely affect your rankings to have lots of embedded JavaScript in your web pages. A much better way to accomplish the same web design effect is to use CSS. Your still need your 2 graphics but you actually create a normal text link in your (that can also have keyword targeted anchor text) and use CSS to format its appearance. This is as simple as making the link a block level element in your HTML, setting it a height and width and then defining it 2 different background images, 1 for when the link is in its 'off state' and when for when the user is hovering over the link.

Conclusion:

Cascading style sheets are a very powerful way of separating presentation code from your actual content and the search engine optimisation benefits the CSS will bring to your web design are undeniable. Why not put these CSS web design techniques to work on your website today?

For Website Designing and Development Services
Web Development in India
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Stuart_Mortimer

All About Floats

2010-07-19T22:32:00.000-07:00

The Best Reasons For Using CSS Layouts

2010-07-19T05:28:00.000-07:00

CSS Interview Questions and Answers

2010-07-15T00:38:00.000-07:00

How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.

<div style="position: relative; width: 200px; height: 100px">
<div style="position: absolute; top: 0; left: 0; width: 200px">
<image>
</div>
<div style="position: absolute; top: 20%; left: 20%; width: 200px">
Text that nicely wraps
</div>
</div>

what CSS is, why not start coding?
CSS is sort of like scripting language made for the web. In contrary with HTML, DHTML, JavaScript, VBScript and many others. CSS is strictly for formatting your web-page and now many new browser support it. (NOTE: Older browser do not support CSS, so please check your browser version and make sure whether it supports it or not. You may have to update your current Browser.)

The way the code goes into your Web-page is through a variety of ways. The way CSS works is that is the code is set between the<head></head> tags. You can put the CSS code after </title> which is what most people do. Now, here are the following ways of making your webpage with CSS enabled features:

1.) Writing your CSS code within your HTML source code. This is how it would look like:

<html><head><title>My First CSS!</title>

<STYLE TYPE = "text/css">

</STYLE>

</head><body></body></html>

2.) Linking to your CSS file. This tells the webpage to find the .css file and use it as the CSS code. Here is the code that would allow you to do:

<html><head><title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head><body /></html>

As you can see from the code above, the <link> tag is pretty helpful. What it does is that it links to the style.css file which has all the css code. Just like embedding an image throught he <img> tag.

Now to explain a bit from the first example. CSS code isn't very hard to understand.Take for example the body { ..} part. What it does is that it formats how the <body> tag in HTML would work. That is a very simple way of formatting the body tag with the CSS. To help you understand better, here is a simple syntax for CSS:

selector { property1: value1; property2: value2;}

The "selector" sort of relates to the html tags used for outputting etc...

We all know that <a> is a tag used for links. You will see in the example about a:hover and a itself. <br>What a does it just sets the characteristics of the format. You can set how you want a link to appear using the font size, weight etc..

Then comes the "a:hover". What does is also pretty self explanatory. It acts on when a person moves the mouse cursor over the links.

ADVANCED CSS FEATURES:

CSS can be even used to change the appearance of the scroll bar at your right side. Unfortunately, that only works with IE. You have to be using IE in order for this to work. Here is how to change some appearances of your scroll bar:

The CSS statements for doing this are:
1) scrollbar-3dlight-color
2)scrollbar-arrow-color
3) scrollbar-base-color
4) scrollbar-dark shadow-color
5) scrollbar-face-color
6) scrollbar-highlight-color
7) scrollbar-shadow-color
8) scrollbar-track-color

<style type="text/css">

</style>

How to customize your textboxes.
Here is the code on how to do it:

<style type="text/css">

</style>

That above code, has some similarities. The textbox area is treated with the same function statements as for the scrollbar. The scrollbar statements goes in the BODY selector.

Why does my content shift to the left on some pages (in FF)?
That'll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there's probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it's needed and the viewport becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It's not a bug or something that needs to be fixed, but it does confuse and irritate some developers.

If, for some reason, you'd like Firefox to always have scrollbars - whether they're needed or not - you can do this :

CSS html {
height:100.1%;
}

Source : http://www.techpreparation.com/computer-interview-questions/css-interview-questions-answers4.htm

CSS Interview Questions and Answers

2010-07-14T03:17:00.000-07:00

Why do style sheets exist?

SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document's structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs and once again separate style information from document content.

What are the advantages/disadvantages of the various style methods?

External Style Sheets
Advantages

* Can control styles for multiple documents at once
* Classes can be created for use on multiple HTML element types in many documents
* Selector and grouping methods can be used to apply styles under complex contexts

Disadvantages

* An extra download is required to import style information for each document
* The rendering of the document may be delayed until the external style sheet is loaded
* Becomes slightly unwieldy for small quantities of style definitions

Embedded Style Sheets
Advantages

* Classes can be created for use on multiple tag types in the document
* Selector and grouping methods can be used to apply styles under complex contexts
* No additional downloads necessary to receive style information

Disadvantages

* This method can not control styles for multiple documents at once

Inline Styles
Advantages

* Useful for small quantities of style definitions
* Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods

Disadvantages

* Does not distance style information from content (a main goal of SGML/HTML)
* Can not control styles for multiple documents at once
* Author can not create or control classes of elements to control multiple element types within the document
* Selector grouping methods can not be used to create complex element addressing scenarios

What is inline style? How to link?

Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence.

<P STYLE="text-indent: 10pt">Indented paragraph</P>

What is imported Style Sheet? How to link?

Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one.
To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import notations must come before any other declaration. If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

<LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">
<STYLE TYPE="text=css">

</STYLE>

What is a Style Sheet?

Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages. They are called Cascading Style Sheets or CSS. With style sheets, a designer can define many aspects of a Web page:

* fonts
* colors
* layout
* positioning
* imagery
* accessibility

Style sheets give you a lot of power to define how your pages will look. And another great thing about them is that style sheets make it really easy to update your pages when you want to make a new design. Simply load in a new style sheet onto your pages and you're done.

What is alternate Style Sheet? How to link?

Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred .
Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style, e.g.:

<LINK REL=Stylesheet HREF="style.css" TYPE="text/css">

Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style, e.g.:

<LINK REL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="appropriate style description">

Alternate style gives an user the choice of selecting an alternative style - a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:

<LINK REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=screen>
<LINK REL="Alternate Stylesheet" HREF="style4.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=print>

Alternate stylesheet are not yet supported.

How can you set a minimum width for IE?

To set a minimum width, the CSS property is 'min-width'. This can be very useful and works well in good browsers. IE doesn't understand 'min-width'. However, it has a proprietary property called 'expression' which allows us to feed it javascript via a stylesheet. Below is how to set a (780px) minimum width for IE...



As the property is non-standard, it won't validate with the W3C validator, so if we put it in the head like this (above) - in an IE conditional comment - the validator will ignore it and the page will get a clean bill of health.

Which browsers support CSS?

It depends on your definition of "support." If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:

* Internet Explorer 3.0 and above
* Navigator 4.0 and above
* Opera 3.6 and above
* Konqueror
* Arena
* Emacs-w3
* Amaya
* Lexicon
* XPublish by Media Design in·Progress

If instead you're interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically:

* Internet Explorer 5.0 for Macintosh and above
* Internet Exporer 5.5 for Windows and above
* Netscape Navigator 6.0 and above
* Opera 4.0 and above

While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

CSS Interview Questions and Answers

2010-07-13T01:52:00.000-07:00

What is CSS?

1. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.

2. CSS is a web standard that describes style for XML/HTML documents.

3. CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s really that simple. CSS is not used to put any content on your site, it’s just there to take the content you have and make it pretty. First thing you do is link a CSS-file to your HTML document. Do this by adding this line:

<link rel="stylesheet" href="style.css" type="text/css">

The line should be placed in between your <head> and </head> tags. If you have several pages you could add the exact same line to all of them and they will all use the same stylesheet, but more about that later. Let’s look inside the file “style.css” we just linked to.

h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}

4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. This is also where information meets the artistic abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in wide variety of aspects.

What are Cascading Style Sheets?
A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a "cascading" of styles) when the document is rendered to form a single style rule for each element.

How do I center block-elements with CSS1?
There are two ways of centering block level elements:

1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em - 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:

TABLE {margin-left: auto; margin-right: auto; width: 400px;}
In most legacy browsers, a table's width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element's content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

If background and color should always be set together, why do they exist as separate properties?
There are several reasons for this. First, style sheets become more legible -- both for humans and machines. The background property is already the most complex property in CSS1 and combining it with color would make it even more complex. Second, color inherits, but background doesn't and this would be a source of confusion.

What is class?
Class is a group of 1) instances of the same element to which an unique style can be attached or 2) instances of different elements to which the same style can be attached.

1) The rule P {color: red} will display red text in all paragraphs. By classifying the selector P different style can be attached to each class allowing the display of some paragraphs in one style and some other paragraphs in another style.
2) A class can also be specified without associating a specific element to it and then attached to any element which is to be styled in accordance with it's declaration. All elements to which a specific class is attached will have the same style.

To classify an element add a period to the selector followed by an unique name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters). (Note: text between /* and */ are my comments).

CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */

HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>

It is a good practice to name classes according to their function than their appearance; e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2 allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class="name1 name2 name2">This paragraph has three classes attached</P>

What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}

To reduce the size of style sheets and also save some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}

What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css. <HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>

Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

Three selectors: h1, .warning and #footer, what they do ?
An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin.
Using a class is just as simple. When writing .your_class you style all tags with a class with the name “your_class”. In the example above we have .warning which will style e.g. <div class="warning"> and <em class="warning">, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links.
You need one more building block: the id. This time you style an element with the attribute “id” set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id="footer">. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag.
Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id “footer.
Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue.
there is a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML.

What are Style Sheets?
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).

What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)
{text-indent: 10pt} - CSS declaration
text-indent - CSS property
10pt - CSS value

'Fixed' Background?
There is the possibility to use the HTML tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in HTML4).

With CSS, you can declare the background like:

BODY {
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/yourimage.gif);
background-repeat: no-repeat; /*no-tiling background*/
background-position: center;
background-attachment: fixed;
background-color: #hexcolor;
color : #hexcolor;
margin: 10px;
}

that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls ...

What is embedded style? How to link?
Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

Note: The styling rules are written as a HTML comment, that is, between  to hide the content in browsers without CSS support which would otherwise be displayed.

What is ID selector?
ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit.

#abc123 {color: red; background: black}

<P ID=abc123>This and only this element can be identified as abc123 </P>

What is contextual selector?
Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context.

TD P CODE {color: red}

The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.

TD P CODE, H1 EM {color: red}

The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1

P .footnote {color: red}

Any element with CLASS footnote will be red but only if it occurs in the context of P

P .footnote [lang]{color: red}

Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

How do I have a background image that isn't tiled?
Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here's an example:

BODY {background: #FFF url(watermark.jpg) no-repeat;}

What does \ABCD (and \ABCDE) mean?
CSS allows Unicode characters to be entered by number. For example, if a CLASS value in some Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write a style rule for that class, you can put that letter into the style sheet by writing:

.\041B\041F {font-style: italic;}
This works on all keyboards, so you don't need a Cyrillic keyboard to write CLASS names in Russian or another language that uses that script.

The digits and letters after the backslash (\) are a hexadecimal number. Hexadecimal numbers are made from ordinary digits and the letters A to F (or a to f). Unicode numbers consist of four such digits.

If the number starts with a 0, you may omit it. The above could also be written as:

.\41B\41F {font-style: italic;}
But be careful if the next letter after the three digits is also a digit or a letter a to f! This is OK: .\41B-\41F, since the dash (-) cannot be mistaken for a hexadecimal digit, but .\41B9\41F is only two letters, not three.

Four digits is the maximum, however, so if you write:
.\041B9\041F {font-style: italic;}

Source : http://www.techpreparation.com/css-interview-questions-answers1.htm

How to Create and Validate Your Own HTML and CSS

2010-07-11T01:20:00.000-07:00

When I write an article--or any web page, for that matter--I like to begin with basic HTML, XHTML, and CSS documents I know contain valid code. After reading this tutorial, you will be able to use this approach, too.

There are two types of basic, standards-based documents that I use to write web pages. The first has a Document Type Definition(DTD) of XHTML 1.0 Transitional, just like WordPress uses. The second is a basic HTML document with a Document Type Definition(DTD) of HTML 4.01 Transitional. These definitions tell the browser which specification the document uses. For example, the DTD would be used to tell a browser if the document was HTML or XHTML. The DTD is the first line of code in a web page.

The syntax rules for HTML and XHTML are different in some ways. You must use the correct syntax for the DTD you use or your code will not pass at W3C.This is so even though the browser you use might display your page as expected: browsers are very forgiving with respect to non-standard code.

For the content on my web site, I use the HTML 4.01 Transitional DTD because I am comfortable with its syntax.

The best way to insure that you are starting with a standards-based web page is to first copy a known good skeletal web page and paste it into a basic text editor. Next, save the code as a text file with the ".txt" extension. You could name the file, my-html-template.txt.

You can also paste the code into the W3C Markup Validation Service to check that it is up to snuff: if the code passes the validator "in the green," you know your code is good. Simple skeletal web pages, can be found at W3 Schools. Other code, such as the DTD for HTML and XHTML, can also be found there.

It is very common to find that online web pages fail W3C validation with a massive number of errors. Sometimes this is because the wrong DTD is specified for a page; at other times, the failure is due to using non-standard or deprecated code. If you start with a valid, basic template and correct any validation errors that show up, your pages will always be "in the green" when they are published to the Web.

Once you have a valid basic template, you can begin to add your content between the body tags and extra code between the head tags.

Normally, I do not use hard carriage returns inside a paragraph. The editors I use all have a "word wrap" feature that enables me to see all the text I write without having to use the horizontal scroll bar. The actual line length of the published content will be determined later when the page display is styled.

I do use a hard carriage return after the last sentence of a paragraph and add an extra one between paragraphs. Hard returns can also be added for extra space between other elements, such as image code.

If you have added content to the my-html-template.txt file, save it again with a ".html" file extension. You can then open it in a browser. What you will see is that all of the content runs together. That is because browsers look for line break tags and not carriage returns. You can fix this by doing a find and replace with your editor: just find every carriage return and replace it with a break tag. When you open the HTML document again, the various parts of the content will be neat and tidy but not very pretty. CSS styling will fix this.

If you are just "dropping" the content between the body tags into a visual editor on the web, such as a WordPress editor or the article content box at EzineArticles, you don't have to worry about the line breaks as they will be added to the HTML code for you.

Copy and paste the CSS code below into your text editor. Save it as "my-template. css" in the same folder in which you saved your HTML template file.

body

{

background: #fffef2;

color: black;

line-height: normal;

margin: 3% 25% 3% 25%;

min-width: 400px;

}

The link meta tag associates a CSS file with the HTML document. Copy and paste the link tag shown below between the head tags in the my-html-template.txt file you saved. Replace the bracket characters with "", respectively.

[link title="Template Style Sheet" rel="stylesheet" href="my-template.css"type="text/css"]

If you have added some content to your my-html-template.txt file, when you now open the file in a browser, you will begin to see some pretty nice formatting. The page content is now centered in about the middle half of the page, there is a nice background color, and the text is Verdana. This is all due to the specifications in the CSS code for "body."The "body" code determines the overall appearance of the page.

You can also validate your CSS code. W3C has a CSS code validator. Just copy the CSS code and paste it in the validator's text box and click the "Check" button. You will find that the code above passes "in the green," as it should.

In order to apply display formatting, the content to receive the formatting must be identified. Content can be bracketed with HTML tags which contain names that reference styling definitions in the CSS file. Examples of these tags are "div" and "span". When a browser encounters an HTML tag and finds a name reference, it looks in the CSS file for the styling and then applies the styling to the web page display. If there is no styling referenced in the HTML tags the browser will use its defaults for the display.

W3 Schools has comprehensive information and tutorials about CSS.

Building your own (X)HTML and CSS templates--and then putting them through the W3C validators--is a great way to insure that your web pages will always be standards-based. You don't need an expensive web-development software package to develop your templates; you can use a basic text editor. Use the text editor to build the web page structure and add the content. Use CSS to style the display of the content. If you are publishing your content online, you will probably be able to drop the content from your text file (between the body tags) right into the editors text box without any changes. If you want to view your document in a browser as you create it, you might have to add break tags between content elements and then save the file with a ".html" extension. If you validate your web pages as you create them, you can always be sure that when they are published online, they will validate "in the green."

An extended HTML version of this article, including lots of HTML and CSS code, can be found at www.selectdigitals.com
Please feel free to visit my WordPress Blog at
www.blog.selectdigitals.com
for additional (X)HTML and CSS tips and tricks.

Article Source: http://EzineArticles.com/?expert=Royce_Tivel

Advantages of CSS

2010-07-08T22:46:00.000-07:00

What is CSS and why is it useful?

CSS stands for "cascading style sheets". A single CSS file can contain positioning, layout , font, colors and style information for an entire web site. The file can be referenced by each html file on the site.

CSS is a means of separating the content of an html document from the style and layout of that document. It's useful to be able to do this for a number of reasons:

Making changes to the layout

CSS makes it very easy to change the style of a document. Let's say we wanted to move the picture in the title of this page to the right by 10 pixels. This would be a nightmare in a table based design. We would have to open every page and alter the table width manually.

Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site.

The look and layout of a site can be changed beyond recognition just by altering the CSS file. This makes CSS indispensable for large web sites.

File Size

Probably the mostly useful feature of CSS is that all of the style and layout is removed from the html, so the html page size is very much smaller. The CSS file is downloaded just once by the visitor's browser and re-used for different pages on a web site. This reduces the bandwidth requirements for your server and also ensures a faster download for your visitors.

Search Engines

A search engine robot will normally consider the content in the start of your html code is more important than the text towards the end of the code. For a table based page the contents of the navigation bar will normally show up as the page description in search engine results. With a CSS page the navigation can be moved to the bottom of the source code, so the search engine displays your content instead of your navigation.

Accessibility

Separating style from content makes life very easy for visitors who prefer to view only the content of a web page, or to modify the content. These could be blind or partially sighted people who might use a screen reader to interpret a page.

Consistency

Layout and position of navigation can be completely consistent across a site. This was previously possible only using frames.

Disadvantages of CSS

CSS does not work consistently in different browsers. Microsoft Internet Explorer and Opera support CSS in a pretty logical way. Unfortunately their logic does not conform to current CSS standards.

Netscape and Firefox conform more closely to the standards, so a site could look quite different on Internet Explorer from the way it looks in Firefox. This discrepancy restricts the CSS features that can be used on a site - because Firefox is becoming more and more popular the site must be designed for both Firefox and Internet Explorer.

Dreamweaver MX design view has it's own set of limitations (although I'm told Dreamweaver 2004 is an improvement).

CSS doesn't work at all in very early versions of Internet Explorer and Netscape. These browsers will display your page as plain html. This is not necessarily a problem - a quick look at our logs suggest that less than 0.1% of visitors are using browsers that are incompatible with CSS, and they will still be able to use our pages, just without the layout.

Article Source : http://www.vordweb.co.uk/css/advantages-of-css.htm

CSS Content

2010-07-07T22:52:00.000-07:00

How to Build a Basic CSS Layout

2010-07-06T23:38:00.000-07:00

Designing without tables by using CSS layouts is fast becoming the new standard on the Web because of the benefits mentioned in my previous article. Web browsers used these days are now able to render web pages proficiently. In this article I will endeavor to create a basic 2 column CSS layout which you can use for future design projects.

Web Page: http://www.isitebuild.com/css/css-layout.html
Style Sheet: http://www.isitebuild.com/css/stylesheet.htm

1. Divide your page into sections - the div id tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a
style (css selector) that specifically applies to the div of that id. Remember to include the DOCTYPE (to render your page accurately in the browsers) and meta tags (enables search engines to spider your pages).

wrapper: is the div that wraps around all the other divs like a container for the page elements.
header: defines the top banner of the page
main: defines the main content of the page
nav: defines the navigation of the page
footer: defines the footer and sub-navigation of the page

2. Create the CSS code - the CSS code styles the page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style creates the centered box which acts as a container for the rest of the page content. The width: 80% rule sets the width of the div. The background-color:#FFFFFF rule creates a white background for the div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for the top and bottom margins for the div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal
margins for both sides, thus centering the div.

The border: thin solid #000000 rule adds a border around the outer div. The rest of the CSS code styles the divs for the header, footer, nav, and main content.

The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.

The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the wrapper div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.

Style Sheet
http://www.isitebuild.com/css/stylesheet.htm

If links are placed elsewhere on the page they will inherit the same properties as above..a blue link that hovers to red. What if you wish to create another set of links that are a different color and on passing your mouse over them they are underlined.

4. Create the bottom navigation - to include this in the

section of the page, I use div#footer and code each link accordingly. To make the list go horizontally I use: display: inline;

Now that I have finished creating my style sheet I want to shorten the code on page by linking it to my external style sheet. Here's how:

4. Create an external style sheet - copy and paste all the css code (without these tags: ) into notepad and label it something like "style sheet". Place this style sheet between the head tags of your web page.

This will reduce the code on your page so it will load fast plus the search engines can more easily spider your web page.

4. Add content to your page - after you have got your page looking correctly, you can add more content to it. Adjustments can easily be made to any style on the page (or
your whole site) by simply editing one style sheet.

5. Upload your files - be sure to upload your web pages and style sheet to the root directory of your server.

6. Validate your code - be sure to validate your xhtml
code: http://validator.w3.org/ and css code:
http://jigsaw.w3.org/css-validator/ and make corrections where necessary.

7. Check browser compatibility and screen resolution - check that your page renders well in the popular browsers (IE6, NN7, Firefox)

If you are beginning with CSS layouts, implement then slowly by making small changes to your pages i.e. creating a style sheet for your main headers and fonts only. As you become more familiar with CSS you may eventually build all your future sites with CSS layouts.

Resources:

Basic CSS layout

http://www.isitebuild.com/css/css-layout.html

CSS Style Sheet

http://www.isitebuild.com/css/stylesheet.htm

Benefits of CSS

http://www.isitebuild.com/css/index.htm

For Website Designing and Development
CSS Website Designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Herman_Drost

Search Engine Friendly Web Design - 3 Ways to Use CSS

2010-07-04T23:31:00.000-07:00

This article will point out 3 simple and highly effective web design techniques that use cascading style sheets to improve your web design and make your website perform better in the major search engines.

First of all, what is CSS? CSS stands for cascading style sheets and CSS is a way of separating presentation code from your actual content in web design. Usually you build up a set of CSS style rules that are stored in a separate file that has a .css file extension. You then link to the CSS file from your web pages using an HTML link tag.

There are many, many web design advantages to separating your presentation code off into separate CSS files and this article will tell you 3 excellent ways that you can use CSS to make your web design more search engine friendly.

Web Design Technique 1 - Us CSS to Structure Your Document

Let's consider the facts that we know about search engines. They send their search engine robots to your site to read the content that you have there and the easier it is to find for them the better because they don't waste much time looking. So having said this, what is the point of bogging down your pages with lots of un-necessary presentation markup that could quite easily be stored off in a separate CSS file. Most often this means removed any extraneous table tags and replacing them with a smaller number of HTML div tags which can be formatted using CSS rules. This removes the vast majority of presentational markup and leaves you with nicely formatted content that the search engines can easily find and index.

Web Design Technique 2 - Us CSS to Style Your Header Tags

We also know that search engines place a huge amount of importance on the header tags - h1,h2,h3 e.t.c. that they find in your pages. The thing that puts most inexperienced web designers off using header tags is that by default modern browsers render them in massive black text that looks really ugly. This is where CSS comes in. CSS can be used to easily make your header tags appear in nicely formatted, attractive text that both scores well with search engines and is pleasing to the eye of the user - perfect!

Web Design Technique 3 - Us CSS to Create Rollover Images

Traditionally rollover images are created using 2 graphics for the on and off states that are toggled on and off using some complex JavaScript code. This JavaScript code can bloat your web pages and since it is not content and just appears as gibberish to search engines it can adversely affect your rankings to have lots of embedded JavaScript in your web pages. A much better way to accomplish the same web design effect is to use CSS. Your still need your 2 graphics but you actually create a normal text link in your (that can also have keyword targeted anchor text) and use CSS to format its appearance. This is as simple as making the link a block level element in your HTML, setting it a height and width and then defining it 2 different background images, 1 for when the link is in its 'off state' and when for when the user is hovering over the link.

Conclusion:

Cascading style sheets are a very powerful way of separating presentation code from your actual content and the search engine optimisation benefits the CSS will bring to your web design are undeniable. Why not put these CSS web design techniques to work on your website today?

For Website Designing and Development
Website Designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Stuart_Mortimer

Why a CSS Website Layout Will Make You Money

2010-07-04T23:30:00.000-07:00

Although CSS layouts have been around for years, they haven't become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at http://www.thecounter.com/stats/2004/August/browser.php).

So, why should you convert your website from its current table-based layout to a CSS layout? It'll make you money. Simple really. And here's four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It's not unusual to see reductions of 50% or more in file size when switching from CSS to tables. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user's computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this (http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml).

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

- The code is cleaner and therefore more accessible to search engines

- Important content can be placed at the top of the HTML document

- There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: http://www.useit.com/alertbox/20030107.html).

CSS downloads faster than tables because:

- Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

- Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered

- Tables encourage the use of spacer images to aid with positioning

- CSS generally requires less code than cumbersome tables

- All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

- With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

The more people you can reach, the more visitors you'll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don't underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: http://www.etforecasts.com/pr/pr0603.htm) and one third of the world's population will own a wireless device (source: [http://www.clickz.com/stats/markets/wireless/article.php/10094_950001]).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn't possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

For Website Designing and Development
Affordable Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705
Article Source: http://EzineArticles.com/?expert=Trenton_Moss

How to Build a Basic CSS Layout

2010-07-04T23:29:00.000-07:00

Designing without tables by using CSS layouts is fast becoming the new standard on the Web because of the benefits mentioned in my previous article. Web browsers used these days are now able to render web pages proficiently. In this article I will ndeavor to create a basic 2 column CSS layout which you can use for future design projects.

Web Page: http://www.isitebuild.com/css/css-layout.html
Style Sheet: http://www.isitebuild.com/css/stylesheet.htm

1. Divide your page into sections - the div id tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a
style (css selector) that specifically applies to the div of that id. Remember to include the DOCTYPE (to render your page accurately in the browsers) and meta tags (enables search engines to spider your pages).

wrapper: is the div that wraps around all the other divs like a container for the page elements. header: defines the top banner of the page main: defines the main content of the page nav: defines the navigation of the page footer: defines the footer and sub-navigation of the page

2. Create the CSS code - the CSS code styles the page as a centered 2 column CSS ayout with a navigation bar and a footer. The div#wrapper style creates the centered box which acts as a container for the rest of the page content. The width: 80% rule sets the width of the div. The background-color:#FFFFFF rule creates a white background for the div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for the top and bottom margins for the div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal
margins for both sides, thus centering the div. The border: thin solid #000000 rule adds a border around the outer div.

The rest of the CSS code styles the divs for the header, footer, nav, and main content. The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.

The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the wrapper div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.

Style Sheet
http://www.isitebuild.com/css/stylesheet.htm

If links are placed elsewhere on the page they will inherit the same properties as above..a blue link that hovers to red. What if you wish to create another set of links that are a different color and on passing your mouse over them they are nderlined.

4. Create the bottom navigation - to include this in the

section of the page, I use div#footer and code each link accordingly. To make the list go horizontally I use: display: inline; Now that I have finished creating my style sheet I want to shorten the code on page by linking it to my external style
sheet. Here's how:

4. Create an external style sheet - copy and paste all the css code (without these tags: ) into notepad and label it something like "style sheet". Place this style sheet between the head tags of your web page.

This will reduce the code on your page so it will load fast plus the search engines can more easily spider your web page.

4. Add content to your page - after you have got your page looking correctly, you can add more content to it. Adjustments can easily be made to any style on the page (or your whole site) by simply editing one style sheet.

5. Upload your files - be sure to upload your web pages and style sheet to the root directory of your server.

6. Validate your code - be sure to validate your xhtml code: http://validator.w3.org/ and css code:
http://jigsaw.w3.org/css-validator/ and make corrections
where necessary.

7. Check browser compatibility and screen resolution - check that your page renders well in the popular browsers (IE6, NN7, Firefox)

If you are beginning with CSS layouts, implement then slowly by making small changes to your pages i.e. creating a style sheet for your main headers and fonts only. As you become more familiar with CSS you may eventually build all your future sites with CSS layouts.

For Website Designing and Development
Website Designing Services Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Resources:

Basic CSS layout

http://www.isitebuild.com/css/css-layout.html

CSS Style Sheet

http://www.isitebuild.com/css/stylesheet.htm

Benefits of CSS

http://www.isitebuild.com/css/index.htm

Article Source: http://EzineArticles.com/?expert=Herman_Drost

CSS-Tricks Mobile

2010-06-30T20:14:00.000-07:00

How To Create an IE-Only Stylesheet

2010-06-29T21:50:00.000-07:00

15+ CSS Tips and Tricks

2010-06-28T05:27:00.000-07:00

A list of CSS tips and tricks that will make your life so much easier! I have also make a list of CSS shorthands for your convenience.

Introduction

CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.

Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers

1. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:







2. Use group selector

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

3. Center elements

It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
text-align:center; /* for ie */
}

#container {
width:800px;
margin:0 auto;
text-align:left;
}

4. CSS Positioning

This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.

#container {
position: relative;
width:500; height:300;
}

#item {
position: absolute;
left: 200px;
top: 50px;
}

5. Text transform

This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform

h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }

6. Remove links or textbox hightlight border

When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.

a, input { outline:none; }

7. Hidden text

I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.

a {
text-indent:-999em;
outline:none;

background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}

8. Keep consistent with SUP and SUB

I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS

sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;

}

sup { bottom: 1ex; }

sub { top: .5ex; }

9. CSS Transparency Setting for all browsers

Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.

.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

10. PNG Fix for IE6

Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!

.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

11. Prevent line break

This is a simple css tips, but some of us might not know about it. It forces the text display in one line.

view plaincopy to clipboardprint?

h1{ white-space:nowrap; }

12. Force page breaks when printing your document

When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard

h1{ page-break-before:always; }

h2{ page-break-after:avoid; }

h2{ page-break-inside:always; }

13. Remove vertical textarea scollbar in IE

Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.

textarea{
overflow:auto;
}

14. 3D push button effect

You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

15. CSS Tooltips

So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.

a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>

16. CSS links sequence

Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)

a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}

17. CSS Shorthands!

Last but not least, here are the CSS shorthands that will make our life easier!

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
border-style:solid;
border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}

/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}

div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}

For Website Designing Services
website designing hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.queness.com/post/402/15-css-tips-and-tricks

Styling Links with CSS

2010-06-24T23:24:00.000-07:00

Learn how to style links in a Web page using CSS. This article shows you how to add CSS styles to any type of link, including non-visited, visited, active, and hovered links.

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

normal links

* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Different link states

CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.

Here are the 4 pseudo-classes that you can use to select and style the different link states in

CSS:

a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor

Selecting links regardless of their state

As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:

a { color: pink; } /* Set all links to pink */

However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:

a { color: pink; }
a:visited { color: green; }

Mixing pseudo-classes with classes and ids

You might want to style only certain types of links within your website. To do this, assign a class to the links:

Home

You can then style those links using pseudo-classes as follows:

/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }

If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example

<a id="home" href="home.html">Home</a>

...

/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }

Some examples

Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.

Styling link colours

It's easy to change the colour of links from the default values. On most browsers, the default link colours are:

:link - blue
:visited - purple
:active - red

Here are some examples of how to change link colours:

/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }

/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }

/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }

INFO

Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.

Turning off underlines on links

To remove the underlining from text links, use the text-decoration property, as follows:

a { text-decoration: none; }

To remove the underlining from links except when they're hovered over, use:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Giving links a button effect

You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:

a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

Adding background images to links

Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:

a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

Replacing link text with an image

What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.

First, put your link text within a span element in your markup:

<a href="home.html"><span>Home</span></a>

Then you can style the link as follows:

a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}

a span
{
display: none;
}

First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.

Here's how the above example looks:

INFO

Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.

WEBSITE DESIGNING COMPANY HYDERABAD
contact : +91 9247457705
eMail : varadesigns@yahoo.com

Article Source : http://www.elated.com/articles/styling-links-with-css/

Css tips: how to use the position fixed property?

2010-06-24T04:45:00.000-07:00

What is meant by fixed positioning and what is the difference with absolute positioning?

For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.

The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.

After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.

How is fixed positioning used?

As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.

<body>


<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>

<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>

<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>


You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:

.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}

As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.

What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.

I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.

In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.

Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?

Website Designing Services Hyderabad India
website designing in hyderabad
eMail : varadesigns@yahoo.com
contact : +91 9247457705

Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/

Optimizing Your Website Structure For Print Using CSS

2010-06-23T00:42:00.000-07:00

As much as I read articles online, I still print a fair amount of them out. Sometimes I print them to pass on to others, other times to read again when I have more time. Unfortunately a great deal of websites put no effort into providing their content in a printer-friendly fashion. The result of them overlooking the print audience is a great article not being read. If only these writers knew how easy it can be to optimize their site for print and how it can greatly enhance the value of their website.

The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

Create A Stylesheet For Print

Of course you have at least one stylesheet to control the layout of the page and formatting of the content, but do you have a stylesheet to control how your page will look like in print? Add the print style sheet, with the media attribute set to “print”, at the end of the list of stylesheets in the header. This will allow you to create custom CSS classes applied only at the time of print. Make sure your structure CSS file is given a media attribute of “all.”

re your structure CSS file is given a media attribute of “all.”


<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />

<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1
2<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
3
4<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Avoid Unnecessary HTML Tables

As much as I try to steer clear of using tables, there’s no way to avoid the occasional experience. Forms are much easier to code when using tables. Tables are also great for…get this…data tables. Other than these two situations, a programmer should try to avoid using table, especially when considering print. Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.

Know Which Portions Of The Page Don’t Have Any Print Value

You know that awesome banner you have at the top of your site? Ditch it. And those ads on the right and left sides of the page? Goodbye. Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

.no-print { display:none; }


<div id="navigation" class="no-print">
.... 
</div>

Use Page Breaks

Page breaks in the browser aren’t as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website. The CSS specs don’t provide a lot of print flexibility but the page-break-before / page-break-after properties prove to be useful. Page breaks are much more reliable when used with DIV elements instead of table cells.

.page-break { page-break-before: always; } /* put this class into your main.css file with "display:none;" */

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...

<div class="page-break"></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit....

Size Your Page For Print

Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px (an inch equivalent may be better, but I try to deal with one unit specifically, which is pixels). This ensures that words wont bleed outside the print area. Use this width measurement with the page break DIVs you’ve created in your stylesheet. After you know the width of your printed content area, adjust the dimensions of content blocks inside the main content area if necessary.

Test!

Like any type of programming, testing is important. Note that if you have a website that serves dynamic data, you wont be able to win all the time but you may be able to figure a scheme to format content well most of the time. Be sure to test in multiple browsers (when creating customer websites, I try to check all “Grade A” browsers).

Modifying your page structure for better print results is probably easier than you think — at least improving your existing template will be. Check back soon for part two, where we analyze optimizing a website’s content for print.

website designing services Hyderabad
Website : web designer hyderabad
eMail : varadesigns@yahoo.com
Phone : +91 9247457705

Source : http://davidwalsh.name/optimizing-structure-print-css

CSS for Blockin’ Stuff

2010-06-22T22:47:00.000-07:00

CSS3 Techniques You Should Know

2010-06-21T03:20:00.000-07:00

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

* Mozilla/Firefox/Gecko: -moz-
* Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

A Note About Demos on This Page

The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.

Drop Shadows

The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Gradients

Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit. With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient. The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

RGBA

The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look. The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.

background-color: rgba(0, 54, 105, .5);

HSL

Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.

background-color: hsl(209,41.2%, 20.6%);

Border Color

With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Text Selection Color

I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet. With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

Transform

With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15)

Multi-column Layout

With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS. Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

For Website Designing Services
website designing hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://sixrevisions.com/css/css3-techniques-you-should-know/

Clearing Floats The Old Fashioned Way

2010-06-19T22:39:00.000-07:00

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element happens to possess the MS-only quality called hasLayout.

This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. Quite a mess, and we'll cover it farther along in the article, in the "Toggle Trouble" section.

The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. It's described more fully our article Float: The Theory:

“..let's say you give that following box the clear property, {clear: both;} . What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”

So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look, with a red border representing the container element:

The standard method of making an outer container appear to "enclose" a nested float is to place a complete "cleared" element last in the container, which has the effect of 'dragging' the lower edge of the containing box lower than the float. Thus the float appears to be enclosed within the container even tho it really isn't. The code for a cleared box usually looks something like this:

<div> 

<div style="float:left; width:30%;"><p>Some content</p></div>

<p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

Since that div is not floated, the container must recognize it and enclose it, and because of that top margin (added by the browser because of the "clear" property), the div "pulls" the bottom edge of the container down below the bottom edge of the float.
Problems With The Method

First and foremost, this clearing method is not at all intuitive, requiring an extra element be added to the markup. One of the major premises of CSS is that it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement.

Besides that, some browsers can have trouble with certain kinds of clearing elements in some situations. Mozilla is particularly sensitive to clearing problems.

Up 'til now there was no other way to do this, but no more! Thanks to the efforts of Tony Aslett, creator and operator of csscreator.com, we can now use advanced CSS to "clear" a float container in non-IE browsers and just let IE keep wrongly clearing itself. The upshot is that we now have the option to avoid adding that pesky clearing element to the HTML markup. Woohoo!

"Clearing", 21st Century Style

In the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dimension), but non-IE browsers will need a substitute for that element. Here's how it's done.

Using :after

This CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet, and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including 'position', 'float', list properties, and table properties. However, the 'clear' property is allowed. Do you see where we are going here?

Imagine that we use :after to insert a simple character like a 'period', and then give that generated element {clear: both;} . That's all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Notice that {display: block;} is also applied to the :after element, because if it isn't then that element defaults to "inline", and cannot receive the "clear" property. Also, Tony's method originally used "overflow: hidden;" to hide the period, but sadly the latest FireFox versions will display the period if this is done.
But what about IE?

Since IE7 does not support the :after pseudoclass yet, we must rely on the same"auto-clearing" effect used for IE6, and that behavior happens when the float-containing element gets hasLayout applied to it. A simple declaration of "zoom: 1;" will perform this trick in IE5.5 and up, but it's proprietary and needs to be hidden in order to validate.

As a side benefit, hasLayout on float-enclosing elements also prevents several other major IE/Win float bugs. However, should this container box be placed following a previous external float, the IE height fix will trigger Microsoft's proprietary and illegal Float Model, so watch out for that, okay?
Toggle Trouble

It so happens that IE has, well, a little problem with this auto-enclosing behavior. You saw that coming, didn't you. Yes, IE bugs come in big bunches. This one results when that container element has links inside, following the float. When this happens and certain links are hovered, the auto-enclosing behavior is toggled or "switched off", causing the lower edge of the container box to suddenly jump up to the bottom of the non-floated content. Hovering other links restores the behavior. This interesting effect is of course called the IE/Win Guillotine Bug Those of you viewing in IE/Win may play around with the following live demos, and for a more complete explanation see the IE/Win Guillotine Bug demo page .

The toggling only occurs when a:hover is used to change the link background or many other styling changes, such as padding, margin, or any font styling on the link. Strangely, having the text color change on hover does not toggle the bug.

The containers are grey with green borders, and the floats are dark brown with yellow borders. Notice how the third and fourth links ouside the floats toggle the Guillotine Bug, and the first two un-toggle it. This seems to be related to the actual text lines themselves, so any links after the first two lines will toggle the effect. Links in the float will all un-toggle the effect. Just more weird IE bug behaviors, folks, nothing "unusual".
Screenshot

The second demo has been "fixed" by placing those links in a paragraph, which then gets the zoom fix applied to it. Any block element will do just as well here. Yes, this means another element is needed, but unlike a clearing div, this paragraph is a "semantic" element. Text content really ought to be wrapped in semantic containers anyway, and since we forward-thinking coders always have our content thusly contained, it's easy to apply the same .clearfix class to one more element.
A Word About Floats In Floats

Observant readers will have noticed that the above demos have "enclosed" floats, even in Opera 7 and Mozilla! This is because the demos themselves are floats, and all modern browsers (including IE, luckily) always let floats enclose other floats. Of course there has to be an outer float, and it still threatens to break out of its container...
Putting It Together

First, this code gets added to the CSS stylesheet:

<style type="text/css">

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

</style>



For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That's it! It's not perfect, but it's a whole lot better than adding an entire extra 'dummy' element. Check out this live demo of the fix in action:

IE/Mac Strikes Back

All this is wonderful, but unfortunately IE for the Mac does not "auto-clear" floats, and also does not support :after, and so is left out of the clearing party. What's to be done?

You might callously abandon IE/Mac, but consider that many people who use older Macs can't run Safari, or several other modern browsers. Thankfully this browser has been dropped by Microsoft, and at some future time the numbers of such IE/Mac users will become miniscule. Remember that even if a float appears to stick out of a container, no content will actually be obscured. It just won't look as pretty for those few viewers, that's all. Each author will have to decide on this issue according to their specific needs.

This page once described a Javascript method to force compliance in IE/Mac, but now thanks to Mark Hadley and Matt Keogh it's now possible to dispense with that ugly Javascript and go with a straight CSS fix. Woohoo!
Taming the IE/Mac Float Problem

Basically the fix is just a matter of applying a display: inline-block; to the .clearfix class, and hiding that property from all other browsers. That's it! We can easily do this with our existing code, slightly modified.

<style type="text/css">

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;} /* for IE/Mac */

</style>



The .clearfix {display: inline-block;} is seen by all browsers, and fixes IE/Mac. Then, inside the rule set that is hidden from IE/Mac, the display is reset to block. That's all she wrote! Simply stick the above code into your CSS, and use .clearfix on any box that has to contain a sizable float. Ain't that cool? Just watch out for previous external floats triggering the IE Float Model, as mentioned earlier.

Kudos to Alex Robinson for finding that inline-block is superior to the older inline-table fix for IE/Mac.
A Word Of Warning (this is important!)

The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! "Previous" in this case means any float that comes earlier in the source document.

Up until November of 2004, Firefox was still incorrectly clearing only the floats that were vertically above the clearing element, rather than all previous floats. This meant that in those earlier Gecko browsers you could place a floated column down one side of the screen, and inside another column (possibly another floated column) you could clear a smaller interior float, without that cleared element dropping below the previous floated column. Since only Gecko had this problem, it was obvious that something was wrong every time this happened to a page. Normally Gecko is the good browser, but in this one case it was the culprit. See, IE is not always the bad guy!

However, this easy clearing method has muddled the issue quite a bit, since now Explorer is not actually being cleared at all, while Gecko browsers have finally been corrected so they do clear all previous floats.

...Oh no! Do you see what will now happen in our hypothetical float page? IE, seeing no real clearing elements, will look great. Meanwhile, in newer Gecko browsers and Opera 7, the CSS generated clearing element in the first easycleared box will drag the height of that box waaaay down the page, until that invisible clearer is vertically below the bottom of the previous float column (assuming there is a bottom!). This can "generate" a huge empty space inside that once-small easycleared box, depending on the actual height of the neighboring float column.

Of course Opera 7 has always correctly implimented the clearing specs just like IE does (aside from bugs), and the Mac browsers are not involved either. If you are wondering how this issue can be fixed, well, it can't. Gecko and Opera are now both following the float clearing specs correctly, and IE only fails because of the faked "clearing" we are forcing upon it.
Preventing External Clearing

If you have the above described problem, one way to prevent the clearer from clearing the adjacent float column is to make the container a float itself. Of course once you float the container you no longer need easyclearing, sigh...

Note that when all the main elements in a column setup are floats, the worst IE float bugs simply do not happen. Thus using an all-float approach to column design can actually be easier to accomplish, at least within a rigid-width layout.

Source : http://www.positioniseverything.net/easyclearing.html

Date Display Technique with Sprites

2010-06-17T00:39:00.001-07:00

Overriding The Default Text Selection Color With CSS

2010-06-15T23:08:00.001-07:00

IE CSS Bugs That’ll Get You Every Time

2010-06-15T22:49:00.001-07:00

Yay for HSLa

2010-06-15T22:36:00.000-07:00

Font Stacks

2010-06-14T00:05:00.000-07:00

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Reference URL

Web Style Sheets CSS tips & tricks

2010-06-09T22:48:00.000-07:00

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?em, px, pt, cm, in…

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px ('margin: 5px') it also accepts a value in inches or centimeters ('margin: 1.2in; margin: 0.5cm') and vice-versa.

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

Style sheets for output to a screen

Recommended - em, px, %
Occasional use - ex
Not recommended - pt, cm, mm, in, pc

Style sheets for printing

Recommended - em, cm, mm, in, pt, pc, %
Occasional use - px, ex

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else. A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don't look at them from the same distance.

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as 'text-indent: 1.5em' and 'margin: 1em' are extremely common in CSS.

The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o. Fonts that have the same size (and thus the same em) may vary wildly in the size of their lowercase letters, and when it is important that some image, e.g., matches the x-height, the ex unit is available.

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

The relation between the absolute units is as follows:
1in = 2.54cm = 25.4mm = 72pt = 12pc

If you have a ruler handy you can check how precise your device is: here is a box of 1in (2.54cm) high:

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

CSS also defines that raster images (such as photos) are, by default, displayed with one image pixel mapping to 1px. Thus a photo with a 600 by 400 resolution will be 600px wide and 400px high. The pixels in the photo thus do not map to pixels of the display device (which may be very small), but map to px units. That makes it possible to exactly align images to other elements of a document, as long as you use px units in your style sheet, and not pt, cm, etc.

Use em or px for font sizes

CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in. In CSS there is no reason to use pt, use whichever unit you prefer. But there is a good reason to use neither pt nor any other absolute unit and only use em and px.

The magic unit of CSS, the px, is a often a good unit to use, especially if the style requires alignment of text to images, or simply because anything that is 1px or a multiple of 1px wide is guaranteed to look sharp.

But for font sizes it is even better to use em. The idea is (1) to not set the font size of the BODY element (in HTML), but use the default size of the device, because that is a size that the reader can comfortably read; and (2) express font sizes of other elements in em: 'H1 {font-size: 2.5em}' to make the H1 2½ times as big as the normal, body font.

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible:

0.5pt, 1px, 1pt, 1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line is missing), you are probably looking at a computer monitor that cannot display dots smaller than 1px. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.5px, you probably have a handheld screen.

More units in CSS in the future

To make it even easier to make style rules that depend only on the default font size, a new unit is in development: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document.

Other units in development make it possible to specify sizes relative to the reader's window. These are the vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.

Article Source : http://www.w3.org/Style/Examples/007/units

Website Design at Low Cost
eMail : varadesigns@yahoo.com
Contact : +91 9247457705

Horizontal Menu Bar with Push Button Effect

2010-06-07T03:47:00.000-07:00

iPad Orientation CSS

2010-06-05T01:17:00.000-07:00

CSS Pseudo Properties

2010-06-03T02:22:00.000-07:00

Cross-Browser hr Styling

2010-06-02T00:52:00.000-07:00

PNG Hack/Fix for IE 6

2010-06-02T00:48:00.000-07:00

For CSS background-images

.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

Cannot be used with repeating, needs fixed with and height.

For inline HTML images

img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Efficiently Rendering CSS

2010-06-01T06:00:00.000-07:00

Rounded Corners Without Images

2010-05-31T00:33:00.000-07:00

Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.

Best Website Designer India

CSS

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#rou{ margin: 0 10%;background: #9BD1FA}

HTML
<div id="nifty">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h1>Rounded Corners</h1>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>

<h2>Rounded corners without images</h2>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

Source : www.html.it

Flip an Image Throuch CSS

2010-05-30T22:43:00.000-07:00

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

Simple and Nice Blockquote Styling

2010-05-26T22:48:00.000-07:00

The blockquote displays in standards-compliant browsers with the “big quotes before” effect, and in IE with a thick left border and a light grey background.
Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#f00;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}

blockquote:after {
color:#f00;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.5em;
}

blockquote p {
display:inline;
}

Example

How to size text using ems

2010-05-26T10:01:00.000-07:00

Update: My more recent article on A List Apart, How to Size Text in CSS, provides more up-to-date info on sizing text using ems.

Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Why ems?

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution.

Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Get on with it

OK let’s dive into ems. I’ll show you, from scratch, how to size text in a document using ems. I’ll assume throughout that we are dealing with a browser set to ‘medium’ text. The default size for ‘medium’ text in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting body size to 62.5%:

BODY {font-size:62.5%}

This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}

So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. There now remains a few anomalies to sort out (you’d have to do this even if you were sizing in pixels). In Mozilla-based browsers, all heading elements in our aforementioned #main_content div will be displayed at 12px whether they are an H1 or an H6, whereas other browsers show the headings at different sizes as expected. Applying text-sizes to all headings will give consistency across browsers, for example:

H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */

A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win):

INPUT, SELECT, TH, TD {font-size:1em}

And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. We’ve already touched upon it with our headers, but for now let’s look more closely at what’s going on. First of all we changed our body text to 10px; 62.5% of its default size:

16 x 0.625 = 10

Then we said our main content should be displayed at 12px. If we did nothing, the #main_content div would be displayed at 10px because it would inherit its size from the body element – its parent. This implies that we always size text relative to the parent element when using ems:

child pixels / parent pixels = child ems
12 / 10 = 1.2

Next we wanted our h1 heading to be 24px. The parent to our h1 is the main_content div which we know to be 12px in size. To get our headings to be 24px we need to double that so our ems are:

24 / 12 = 2

And so it goes on. Tricky stuff occurs where rules like this are applied:

#main_content LI {font-size:0.8333em}

This rule implies that all main content list items should be displayed at 10px. We use the same straight forward maths to achieve this:

10 / 12 = 0.8333

But what happens when one list contains another? It gets smaller. Why? Because our rule actually says that any list item in the #main_content div should 0.8333 times the size of its parent. So we need another rule to prevent this ‘inherited shrinkage’:

LI LI {font-size:1em}

This says that any list item inside another list item should be the same size as its parent (the other list item). I normally use a whole set of child selectors to prevent confusion during development:

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

And that’s it. When sizing text in ems there’s really one rule to remember: size text relative to its parent and use this simple calculation to do so:

child pixels / parent pixels = child ems

Em calculator : http://riddle.pl/emcalc/