Tag Archive for css

Simple XHTML Form with CSS

-----------CSS-----------------

label {
  width: 4em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block;
}

.submit input {
  margin-left: 4.5em;
}
#form input:hover, #form textarea:hover{
	background-color: lightyellow;
}
input:focus, textarea:focus{
background-color: lightyellow;
}

-----------Form----------------

<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>

source

CSS reference: listimage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd">" >http://www.w3.org/TR/html4/strict.dtd"></a>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style-image</title>
  <style type="text/css">
   UL {
    list-style-image: url('images/book.gif');
   }
  </style>
 </head> 
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 
 </body>
</html>

source

Wrapping Long URLs and Text Content with CSS

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5  */
	}

source

Cross-browser CSS Gradient

/* FireFox 3.6 */
background-image: -moz-linear-gradient(top, #9FD4FF, #008CFF);
/* Safari4+, Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #008CFF),color-stop(1, #9FD4FF));
/* IE6,IE7 */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF')";

source

Compress CSS with PHP

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }

source

Important Browser Reset style rules…

/* reset browser styles */
 
html, body, div, span, 
applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 12px;
    vertical-align: baseline;
    background: transparent;
}

a, img {
	border:0;
	outline:none;
	text-decoration:none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */ 
table {
    border-collapse: collapse;
    border-spacing: 0;
}

source

CSS Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

source

border-radius TextMate Snippet

-moz-border-radius: ${1:5}px; -webkit-border-radius: ${1:5}px; -khtml-border-radius: ${1:5}px; border-radius: ${1:5}px;$0

source

@font-face TextMate Snippet

@font-face {
    font-family: '${1:FontName}';
    src: url('${1:FontName}.eot');
    src: local('${1:FontName}'), 
         url('${1:FontName}.ttf') format('truetype'),
         url('${1:FontName}.svg#font') format('svg'); 
}

source

Centering Footers

CSS:

.footer {
width:960px;
}

.content_ft {
width:400px;
margin-left: auto !important;
margin-right: auto !important;
}




HTML:


<div class="footer">

<div class="content_ft">

<p>This text should now be centred at the bottom of the page as your footer</p>

</div>

</div>

source