Spread the word

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, October 13, 2011

How to Color Alternate Rows in a Table with JavaScript and CSS

Tables should be used only when you are actually representing tabular data. Yes, we know that. But by default tables are not so much usable unless we put some addons and make tables usable. One of the best ways to make tabular data usable is to color alternate row backgrounds with different colors so that users don’t get lost while looking into long set of data. This not only helps users to remain on a specific track but also helps them interpret data precisely without generating much visual noise.

You can checkout the Demo of Alternate Table Row Coloring here.


Here is a very simple JavaScript script which can transform any existing tables on a page into tables with alternate row color backgrounds. This scripts check for specific class for a table on a page and puts different classes for different <tr>.
You can simply copy the following code and paste into the <head> section of your page.

Wednesday, January 28, 2009

How to find unused CSS classes and selectors within a website

Many times we think of using some class or id within a CSS but later on decide not to use them finally. But several times we forget to delete those classes from the CSS file. This may not be a problem for sites where the use of CSS is very less. But this may be accountable for much junk lines within your CSS which are unnecessary and unwanted.

Saturday, January 10, 2009

How to Validate Browser Specific CSS Hacks

Almost everyone who is a XHTML/CSS Developer knows Browser Specific CSS Hacks. If you don't know then you can know what Browser Specific CSS Hacks are from here. While creating tableless websites on CSS the biggest issue we face is consistency of the pages over various browsers i.e. cross-browser compatibility. So to make the websites and pages cross-browser compatibile many times we use several Browser Specific CSS Codes or Hacks. Though it is advices to avoid those Hacks since they are not by the standards, many times we are unable to do that.

Tuesday, December 16, 2008

What is Validation and why validation is important?

Validation is a process of checking webpages against Web Standards, mainly those which are published by the World Wide Web Consortium (W3C). Validation is done for HTML, XHTML, SMIL, MathML, CSS, RSS/ATOM Feeds, XML-derived Web document types, WapForum for WML, etc. Every language has its own grammar and syntax and so every document designed with these computer languages are expected to follow these guidelines and rules so that they are standard complaint. The markup languages of all versions use a specific declaration called Document Type Declaration (DTD) which is machine-readable grammar, inherited from SGML. When a webpage passes through this validation process then the page is called valid.

Thursday, October 30, 2008

How to add link and script codes in the Head tag from the body section through JavaScript

Many times we need to add <script> or <link> tags for some selected pages of a website. In many websites we use Content Management Systems or some templates where we can’t add different headers to different pages. But in many pages we need some extra functionality through scripts and other codes which are used differently in different pages within that site. Sometimes we need to insert the scripts within the page body tag which is not at all Web Standards compliant. The scripts and links to css or JavaScript files should always be in the head tag.

Monday, September 8, 2008

How to Design stylish variable width Web 2.0 Tabs Menu for your Web Applications

We use to see several types of navigation around different websites. Tabs are also one of the attractive navigation styles prevailing today. Thought they are stylish and useful to users, they never take up much of your real estate. But whenever you are creating tabs, you should not create fixed-width tabs. Then you will need to assign the maximum width to all items. That is space consuming and many times becomes ugly.
Stylish TabsHence you should design tabs which will take space as per the menu items. Here is how you can do it easily. You can create tabs just as in this image in few minutes. First you have to get the design as you want for your tabs. Now you need to slice them out to get these following pieces which will form your tab.
Here are two sets of tabs, one for inactive tabs and another for active tabs. You can have the third one to set on mouseover condition.

Saturday, July 5, 2008

Benefits of CSS based sites over Table based sites

There are lots of benefits in creating CSS based sites than table based sites. Always you may have heard the terms like tableless designs, CSS based sites etc. But if you have always thought that why you should leave your table based designs and take upon tableless designs, then here are the explanations to your thoughts. The key benefits to CSS based sites on tabled sites are:

Monday, June 30, 2008

How to create stylish text inputs for search, login or comment forms

You may have seen many stylish text inputs and designer forms in many websites. Just putting some text inputs and text areas and buttons, can't attract users to click there or type in some texts for you. If you wish your users grab those forms and fill out important information for you, you have to make those inputs in such a way that users get them accustomed with your site's theme. Users generally find no input forms to be interesting except it is a search box, which he/she have to use without any other option. But still f you make search inputs similar to your theme, it adds to your design and make it comfortable for your uses. After all designing is all about making elements soothing to users' eyes.



Here is a tutorial to make text inputs beautiful and matching to your website's theme. Suppose you have a login input in a bar, where users enter their passwords. Here is a sample how the input has been matched with the bar.




Here I have created a stylish input matching with the dark red colored background bar. Now lets see how you can implement it.



At first just insert normal form and input elements in your page like this.



Login:



View the source to get see the code.
This has inserted a form and a text input in your page. Notice that I have put an id="passText" in the input element. This will help you to stylize it through CSS. Now here is the CSS part.

#loginForm [
background: url(images/passText.jpg) no-repeat;
/* where passText.jpg is the stylish box image */
height: 20px;
width: 100px;
font-weight: normal;
color: #ffffff;
border: 0px;
}

#passText {
width: 80px;
height: 18px;
margin-left: 18px;
background: transparent;
color: #ffffff;
}


Now this will transform your input box just as you wished and seen in the picture. The form has the image for the text input in its background, and the input text's background is transparent. The size of the input text is made smaller than the form, so that the texts typed inside the input don't come out of the designed box.


This is the basis of form designing and in this pattern you can make your forms look beautiful and totally matching your site's theme, which adds beauty to your site. Now make designer forms and inputs and attract users to use them more and more.


Saturday, May 24, 2008

Opera specific Css Hack - Writing Opera specific codes

CSS has always been painful in cross browser platform. But we can solve almost all problems arising on different browsers, through browser specific CSS Hacks. Previously I have wrote how you can write Browser specific CSS codes, and optimizing your site for different browsers. But there I had not wrote much about Opera (except choosing another CSS file for Opera). But now here is a cool technique to easily optimize your site for Opera browser.

To show something to Opera only use the @media all and (min-width: 0) hack. Follow this example:

Friday, May 16, 2008

CSS Trick - Removing on-click Dotted lines around links

Whenever you visit any website in Firefox, you many times may have noticed that a dotted outline appears around links whenever you click on them. This dotted outlines doesn’t comes in Internet Explorer. This thing happens only with Firefox. You may have thought that this thing doesn’t looks cool on your website. So here is a very easy solution to stop this behavior in Firefox.



You have to configure your a tag and a:visited tag to stop this. Just add this lines of codes in your css file and get reed of this unwanted behavior.



a {
outline: none;
}
a: visited {
outline: none;
}

This is all that does the trick and makes your website more cool.

Wednesday, May 14, 2008

How to Center Align a Website or Html Element Without Align Tag

To position a website or a div tag or p tag in the center of the screen from Internet Explorer 4 and up including all modern browsers like Firefox, Opera, Netscape etc, we often use the align="center". Though this tag satisfies our aim and centers the element in the screen, but this tag is not recognized by W3 Validator as a valid XHTML content. Thats why if you are cautious enough about your website to be XHTML Validated, you can’t use it .

Sunday, May 11, 2008

Changing the ScrollBar color of the browser for IE

Sometime the scroll bar in the browser doesn't matches with your websites style and design. You may have thought that it would had been nice if you can change the color of the scrollbar so that it becomes matching with your website colors. These are very much likely to happen when you design flexible width websites, which take on the total width of the browsers. So here is the process to change the color of your browser's scrollbars. But this trick works only in IE and not any modern browsers.

CSS Hacks - Writing Browser specific CSS codes

Why are CSS Hacks needed ?

CSS are widely used now a days but the main problem with CSS is lack of Browser support. CSS Hacks are needed to display your website properly and exactly how you ant it to be. Many browsers display different elements differently. You can fix them up through CSS Hacks for different browsers.

What are CSS Hacks ?