Private: MY Note

Every thing you imagine, study it – know it – use it

Centering: Auto-width Margins

body {
margin
:50px 0px; padding:0px;
text-align
:center;
}

#Content {
width
:500px;
margin
:0px auto;
text-align
:left;
padding
:15px;
border
:1px dashed #333;
background-color
:#eee;
}

October 12, 2009 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

css

root reference:
runat=”server” use ~/
html use ./

November 22, 2008 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

Most used CSS tricks

March 18, 2008 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

css technic

February 6, 2008 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

Style Your Image Links

image

Mouse over behaviors have a certain significance when we’re talking about usability. Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. But what can you do with image mouseovers? Add a different border? This script will certainly help you to do a bit more than that…

ref: http://cssglobe.com/post/1238/style-your-image-links

February 6, 2008 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

Solve problem Div Height for difference Browser (ie 6, ie 7, firefox and other)

<body style=”height: 100%; width: 100%; padding: 0px; margin: 0px;”>

IE.

HTML page:

<head>
<title>my css hacked page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”iehacks.css”>
<![endif]–>
<body>
  <div class=”watermark”>….</div>…

styles.css

/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
    background-color: black;
    background-image: url(‘images/gradient.jpg’);

    background-position: left top;
    background-repeat: repeat-x;
}   /* black background with gradient on top. */

div.watermark {
    background-image: url(‘images/watermark.png’); /* transparent */
    background-position: left top !important; /* for all but IE */
    background-position: right top; /* for IE */
    background-repeat: no-repeat;
}

iehacks.css

/* for IE6 and older */
div.watermark {
    background-image: url(‘images/watermark.gif’); /* here is a transparent that will be displayed better in IE6 and older */
}

Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you’ll be able to make your website more compatible.

December 18, 2007 Posted by dev1 | CSS-xhtml, HTML, css | | No Comments Yet

Setting div height=100%

body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:80px;
padding:0;
width:200px;
height:60%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

December 7, 2007 Posted by dev1 | CSS-xhtml, css | | No Comments Yet

Rounded corner CSS+JS and more

October 18, 2007 Posted by dev1 | CSS-xhtml, JAVASCRIPT, css | | No Comments Yet