/*--------------------------------------------------------------
Title: Main StyleSheet for all handheld devices
Author: Michael Cacciotti
Date Last Modified: May 2010
www.michaelsartsite.com Copyright (c) 2010
----------------------------------------------------------------*/
/*------------------------------------------------------------
* Design one column layouts and avoid floats.
* Optimize your HTML by using efficient, semantic markup and CSS.
* Minimize the use of decorative images, avoid relying on images or plug-ins for navigation.
* Write good alternative text for images.
* Avoid dynamic effects that specifically require a mouse or keyboard for navigating.
avoid using pixels for anything larger than 5px.
Reduce margins, padding, and border widths to suit the small screens.
Keep the text blocks as wide as possible by using only small amounts of horizontal spacing. 1em of indentation is a lot on devices with narrow screens, so in most cases, margins and padding in the horizontal direction should be no more than 1em.
Fixed-size elements include images and form controls. Assign them max-width: 100% to keep them within the viewport.
Dropping the Dynamic Effects like Flash.
Don’t use frames or pop-up windows. Although Opera can display frames on handhelds, they make navigation and display painfully awkward. Multiple windows are also far more unwieldy on a handheld than on a desktop, so keep all links going to the same window.
Using real text for navigation labels and headers.
The tag recognized by the iPhone, can control the behavior of the viewport. Imagine a site whose content is exactly 808 pixels wide. By specifying the following tag, we can tell Mobile Safari how big to make the initial viewport size:
The iPhone adjusts text sizes as the viewport changes. The font size increases automatically to make text as readable as possible. Sometimes this negatively affects elements that use absolute positioning or fixed sizes (especially when using px to specify page coordinates). You can turn it off using the following CSS rule:
-webkit-text-size-adjust: none;
Alternatively, you can use ems to specify coordinates. Sizes specified this way will increase along with the text size.
In some cases, you may want to use this feature to increase font size for important information on your page. As an example, you could increase type size in a header tag used for a weblog title with a rule like this:
h1 {
-webkit-text-size-adjust: 200%;
}
To specify a style sheet for iPhone and iPod touch, use an expression similar to the following:
To specify a style sheet forOpera and devices other than iPhone OS, use an expression similar to the following:
Alternatively, you can use this format inside a CSS block in an HTML file, or in an external CSS file:
@media screen and (min-device-width: 481px) { ... }
BG HOME PAGE - http://www.michaelsartsite.com/images/homepage_Lrg03.jpg - 950px x 509px
BG ALL PAGES - http://www.michaelsartsite.com/images/mainpage_BgLrg03.jpg - 950px x 2400px
-------------------*/
/*--- LAYOUT IS FLUID % or ELASTIC EMS---*/
body { background: #bcc5c2; }
c#homePgWrap {
background: url(../images/homepage_Lrg04.jpg) no-repeat;
}
#homePgWrap, #mainPgWrap {
margin: 0 auto;
line-height: 140%;
-webkit-text-size-adjust: 200%;
}
#homePgWrap, #mainPgWrap .content {
}
#homePgWrap #header {
width: 100%;
}
#homePgWrap h3, #mainPgWrap h3 {
margin-top: .5%;
width: 67%;
}
#mainPgWrap {
background: url(../images/mainpage_BgLrg04.jpg) no-repeat;
}
#mainPgWrap #header {
width: 100%;
}
#mainNav {
width: 20%;
}
#mainNav ul li a {
background: #096;
-webkit-text-size-adjust: 150%;
}
#mainNav ul li a:hover {
background: #f00;
color: #fff;
-webkit-text-size-adjust: 150%;
}
#mainPgWrap .packages h3 {
margin-left: 0%;
padding-left: 0%;
width: 100%;gv
}
#subContent { display: none; }