<link rel="stylesheet" type="text/css" href="stylesheets/iphone_portrait.css" id="orient_css">
<script type="text/javascript" charset="utf-8">
function orient()
{
switch(window.orientation){
case 0: document.getElementbyId("orient_css").href = "stylesheets/iphone_portrait.css";
break;
case -90: document.getElementbyId("orient_css").href = "stylesheets/iphone_landscape.css";
break;
case 90: document.getElementbyId("orient_css").href = "stylesheets/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
<body onorientationchange="orient();">
Tag Archive for css
Load Specific Stylesheets for iPhone depending on Orientation
Category: Uncategorized |
Tags: css, CSS-Tricks, iphone, javascript, landscape, orientation, portrait, textmate
Create CSS Curly Quotes Without Images
blockquote
{
margin: 2em 0px;
padding-left: 40px;
quotes: “ “
}
blockquote:before
{
color: #990000;
content: open-quote;
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
Create dynamic css from media field data
css = PAGE
css {
typeNum = 22
config {
additionalHeaders = Content-type: text/css
disableAllHeaderCode = 1
}
stdWrap.required = 1
stdWrap.wrap = |
10 = TEXT
10.value (
.content_header_pic {
)
20 = TEXT
20.data = levelmedia: -1
20.listNum = 0
20.wrap = background: url('uploads/media/|');
30 = TEXT
30.value (
border-top: 8px solid #0D337A;
height: 105px;
width: 100%;
}
)
30.if {
isTrue.data = levelmedia: -1
}
}
[...]
page = PAGE
page {
headerData {
16 = TEXT
16.dataWrap = <link rel="stylesheet" type="text/css" href="index.php?id={field:uid}&type=22" />|
}
}
Another CSS Clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Placeholder text on fields (html, css, jquery)
============
= The CSS =
============
#stikkord{
width: 300px;
margin-bottom: 10px;
}
.placeholder {
color:#999999;
}
.tag{
background-color: yellow;
font-size: 200%;
margin:2px;
line-height:1.2;
}
===================
= The jQuery code =
===================
$(document).ready(function() {
var searchLabel = $('#tagsform form label').remove().text();
$('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
if (this.value == searchLabel) {
$(this).removeClass('placeholder').val('');
};
}).blur(function() {
if (this.value == '') {
$(this).addClass('placeholder').val(searchLabel);
};
});
$('#tagsform form').submit(function() {
if ($('#stikkord').val() == searchLabel) {
$('#stikkord').val('');
}
});
});
=================
= The HTML form =
=================
<div id="tagsform">
<form>
<label for="stikkord">Skriv inn beskrivende stikkord</label>
<input type="text" name="stikkord" id="stikkord" />
<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
</form>
</div><!-- end tagsform -->
HTML IEã§è¡¨ç¤ºã•ã›ãªã„コメントアウト
<!--[if !IE]> コメント <![endif]-->
redonded corners
#test{
width:400px;
height: 500px;
background: ;
margin: 100px auto 0px;
}
#no{
width: 10px;
height: 10px;
background-image: url("images/c_no.png");
float:left;
}
#ne{
width: 10px;
height: 10px;
background-image: url("images/c_ne.png");
float:right;
margin-top: -10px;
}
#so{
width: 10px;
height: 10px;
background-image: url("images/c_so.png");
float:left;
}
#se{
width: 10px;
height: 10px;
background-image: url("images/c_se.png");
float:right;
margin-top: -10px;
}
#tabn{
margin: 0px 10px;
background: #1D1D1D;
width: auto;
height: 10px;
}
#tabs{
margin: 0px 10px;
background: #1D1D1D;
width: auto;
height: 10px;
}
#contenedor{
height: auto;
background: #1D1D1D;
}
#contd{
background: ;
margin: -5px 10px 0px;
}
/* This is html*/
/*
<div id="test">
<div id="tops">
<div id="no"></div>
<div id="tabn"></div>
<div id="ne"></div>
</div>
<div id="contenedor">
<div id="contd">This is a test of this thing</div>
</div>
<div id="bottoms">
<div id="so"></div>
<div id="tabs"></div>
<div id="se"></div>
</div>
</div>
*/
Another CSS Reset
/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
h3 {
font-size:1em;
font-weight:bold;
}
/***** Common Formatting *****/
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
ul, ol {
padding:0 0 1.25em 2.5em;
}
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
small {
font-size:0.85em;
}
img {
border:0;
}
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
textarea {
width:100%;
line-height:1.25;
}
label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
Reset Reloaded of Eric Meyer
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Another way to clear floating elements (FF, IE 6, IE 7, IE 8 Beta)
.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix{min-height: 0; height: 0;}
html>body .clearfix{height: auto;}