CSS nowrap Alternative


To achieve the same results as a TD nowrap (<td nowrap=”true”>) using cascading style sheets, use the following:

white-space: nowrap;

This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY.  If you’re desparate to not apply it to each TD,  then you can get away with only applying it to the TD’s of the first row – but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach – ie don’t do it).
Advertisements

Floating Header: Scroll Effect using HTML,CSS,JQuery


Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading 

Adding multiple backgound images to same element


To add multiple background in the same element just add the images like this:

div.test {
	background-image: url(17072011167.jpg), url(25022010220.jpg);
	background-repeat: repeat;
	background-position: top left, top right;
	height: 768px;
	border: 1px solid #000000;
}

just replace div.test with #test and add div with id test and you are all done !!

Convert a Menu to a Dropdown for Small Screens


<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8′>
<title>Convert Menu to Dropdown</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
font: 300 21px “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
width: 500px;
margin: 0 auto 15px;
}
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
} Continue reading

HTML 5


Lets see a typical HTML5 page markup:

<!doctype html>
<html>
<head>
   <title></title>
</head>
<body>
   <header>
       <h1></h1>
       <nav>
           <ul>
               <li><a href="#">link 1</a></li>
               <li><a href="#">link 2</a></li>
               <li><a href="#">link 3</a></li>
           </ul>
       </nav>
   </header>
 Continue reading 

jQuery – css() Method


jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property
To return the value of a specified CSS property, use the following syntax:

css(“propertyname”);
The following example will return the background-color value of the FIRST matched element:

Example

$(“p”).css(“background-color”);

Set a CSS Property
To set a specified CSS property, use the following syntax:

css(“propertyname”,”value”);
The following example will set the background-color value for ALL matched elements:

Example

$(“p”).css(“background-color”,”yellow”);

Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:

css({“propertyname”:”value”,”propertyname”:”value”,…});
The following example will set a background-color and a font-size for ALL matched elements:

Example

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});