Posts filed under ‘css’

Scroll / Scroller in css

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<style type=”text/css”>

h1

{

font-size:14px;

font-family:Arial, Helvetica, sans-serif;

padding-left:5px;

margin-top:7px;

}

h2

{

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

padding-left:5px;

margin-top:2px;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Untitled Document</title>

</head>

<body>

<div style=”overflow:scroll; width:289px; height:200px;”><img src=”header.gif” width=”289″ height=”23″ />

<h1>Customerclass/Comments</h1>

<h2>Customer Class</h2>

<form style=”display:inline”>

<label>

<input type=”checkbox” name=”flavor” value=”vanilla” />

Retail<br />

</label>

<label>

<input type=”checkbox” name=”flavor1″ value=”Fleet” />

Fleet<br />

</label>

<label>

<input type=”checkbox” name=”flavor2″ value=”Government” />

Government</label>

<label><br />

<input type=”checkbox” name=”flavor3″ value=”other” />

Other</label>

</form>

</div>

</body>

</html>

August 6, 2007 at 8:47 am Leave a comment

Transparent Images

In  a webpage instead of using JPG or PNG use GIF images, as PNG has some cross browser issues……

July 31, 2007 at 10:55 am Leave a comment

Block vs. Inline Level Elements

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

  • Always begin on a new line
  • Height, line-height and top and bottom margins can be manipulated
  • 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:

  • Begin on the same line
  • Height, line-height and top and bottom margins can’t be changed
  • 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:

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

Full Article at: http://www.sitepoint.com/article/top-ten-css-tricks

July 24, 2007 at 5:45 am 3 comments

CSS box model hack

 CSS box model hack alternativeThe box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

 #box { width: 100px; border: 5px; padding: 20px; }

 This CSS rule would be applied to:

<div id=”box”>…</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy. A simple alternative is to use this CSS:

 #box { width: 150px; }

#box div { border: 5px; padding: 20px; }

And the new HTML would be:

<div id=”box”><div></div></div>

Perfect! Now the box width will always be 150px, regardless of any browser

July 24, 2007 at 5:41 am Leave a comment

CSS Centering

body {
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
}

div#outer {
text-align:left;
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

<body>

<div id=”outer”> <!– wrapper class –>

</div>

</body>

July 17, 2007 at 9:13 am Leave a comment

Convert em,px,pt and % in css

Hi I gone through lot of sites and found a site which showed this chart which was very helpful. I have listed below that chart.
get chart at : click to see the chart

July 6, 2007 at 5:33 am 124 comments

Css padding and margin shorthands

#theundisputeddiv {
margin-top: 10px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 60px;
}

shorthand for this is

#theundisputeddiv {
margin: 10px 40px 10px 60px;
}

July 3, 2007 at 9:26 am 1 comment

Short-hand property for Fonts

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;

}

shorthand for these

p {
font: italic bold 30px arial, sans-serif;
}

July 3, 2007 at 9:19 am Leave a comment

Background css shorthand

#testdiv
  background-color: red;
  background-image:url(provide your image path here);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

all these can be written into one

#testdiv
{
background:red url(provide your image path here)
no-repeat
/*provide x & y postion here */
30px 100px
fixed;
}

July 3, 2007 at 9:17 am Leave a comment

creating shadow in css

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
 <style type=”text/css”>
 .outer {
  display:block;
  background:#bbb;
  border:1px solid #ddd;
  position:relative;
  margin:1em 0;
  }
.inner {
  text-align:center;
  background:#fff;
  border:1px solid #555;
  position:relative;
  padding:5px;
  font-weight:normal;
  }
.ltinner {
  left:-5px;
  }
.tpinner {
  top:-5px;
  }
.narrow {width:8em;} /* change to suit */
h4 {font-weight:bold; color:#000;}

 </style>
  <TITLE> New Document </TITLE>
  <META NAME=”Generator” CONTENT=”EditPlus”>
  <META NAME=”Author” CONTENT=””>
  <META NAME=”Keywords” CONTENT=””>
  <META NAME=”Description” CONTENT=””>
 </HEAD>

 <BODY>
<div class=”outer narrow”>
  <div class=”inner ltinner tpinner”>
    <h4>Suresh kumar</h4>
    <p>The undisputed goes here</p>
  </div>
</div>

 </BODY>
</HTML>

copy this  code and create shadow in css

July 3, 2007 at 5:07 am 7 comments

Older Posts Newer Posts


Flickr Photos

Top Clicks

  • None

Blog Stats

  • 730,517 hits