×
Namespaces

Variants
Actions
Revision as of 03:46, 10 February 2012 by hamishwillee (Talk | contribs)

Mobile Site Example

From Nokia Developer Wiki
Jump to: navigation, search

Template:This article provides a live example of mobile site. CSS for the site is also provided.

Article Metadata
Article
Created: kalki (22 May 2009)
Last edited: hamishwillee (10 Feb 2012)

Style.css Code

.font6{font-size:xx-large;}
 
.font4{font-size:x-large;}
 
.font2{font-size:large;}
 
.font1{font-size:medium;}
 
.form_tag {
margin: 1px; padding: 1px; font-family: Arial, Tahoma, sans-serif; font-size: medium;
}
 
.search_button {
font-family: Arial, Tahoma, sans-serif; font-size: medium;
}
 
.header_center {
text-align:center;
}
 
.header_right {
text-align:right;
}
 
.header_left {
text-align:left;
}
 
a {
text-decoration: none;
}
 
.content img {
margin-right: 5px;
margin-top: 3px;
margin-left: 2px;
}
 
.homeng {
background-color: #CCCC99;
 
margin: 0px;
 
border-top-width: 1px;
 
border-right-width: 0px;
 
border-bottom-width: 1px;
 
border-left-width: 0px;
 
border-top-style: solid;
 
border-right-style: solid;
 
border-bottom-style: solid;
 
border-left-style: solid;
 
border-top-color: #FFFFFF;
 
border-bottom-color: #CCCCCC;
 
}
 
body
 
{ background-color: #ffffff; color: black; font-family: Arial, Tahoma, sans-serif; font-size: medium; margin: 0px; border: 0px; padding: 0px;}
.header
 
{ background-color: #003300; color: #FFFFFF; font-size: x-large; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding: 5px 0px 5px 2px; margin: 0px;}
.footer
 
{ color: #FFFFFF; background-color: #003300; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; padding: 2px 0px 3px 3px; margin: 0px;}
.accesskey
 
{ text-decoration: underline; font-size: medium; color: #000000;}
.himgicon
 
{ height: medium; width: medium;}
.pgheader
 
{
color: #003300;
 
font-size: medium;
 
font-weight: normal;
 
padding: 1px 0px 1px 3px;
 
font-family: Arial, Helvetica, sans-serif;
 
background-color: #FFFFFF;
 
margin: 0px;
 
border-top-width: 1px;
 
border-right-width: 0px;
 
border-bottom-width: 1px;
 
border-left-width: 0px;
 
border-top-style: solid;
 
border-right-style: solid;
 
border-bottom-style: solid;
 
border-left-style: solid;
 
border-top-color: #003300;
 
border-right-color: #003300;
 
border-bottom-color: #003300;
 
border-left-color: #003300;
}
.footerng
 
{ background-color: #FFFFFF; color: #003300; font-size: medium;
 
font-weight: normal; font-family: Arial, Helvetica, sans-serif; padding: 1px 1px 1px 3px; margin: 0px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #003300; border-right-color: #003300; border-bottom-color: #003300; border-left-color: #003300;}
 
 
/* Design5 Style10 */
/* Editor Styles listed below */
.Heading {font-family: Arial, Tahoma, sans-serif; font-size: large; font-weight: bold; color: #000000; text-decoration: none; margin: 0px; padding: 0px;}
.BodyText { font-weight: normal; font-size: medium; padding: 0px 2px 0px 2px; MARGIN: 0px;}
.BoldText { font-weight: bold; font-size: medium;}
.Italic {font-style: italic;}
.Underline {text-decoration: underline;}
.Indent { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 5px;}
.Highlight { background-color: #999966; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 2px 0px 0px 0px; margin: 2px;}
.Line_HR {clear:both; border-bottom-color:#003300; border-top-color:#ffffff; border-left-color:#ffffff; border-right-color:#ffffff; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding: 0px; margin: 0px;}

Web_style.css Code

.font6{ font-size: 20px; font-weight: bold;}
 
.font4{ font-size: 16px; font-weight: bold;}
 
.font2{font-size: 12px;}
 
.font1{font-size: 11px;}
 
.form_tag {margin: 1px; padding: 1px; font-family: Arial, Tahoma, sans-serif;
font-size: 11px;}
 
.search_button {font-family: Arial, Tahoma, sans-serif; font-size: 11px;}
 
.header_center {TEXT-ALIGN:center;}
 
.header_right {TEXT-ALIGN:right;}
 
.header_left {TEXT-ALIGN:left;}
 
a { text-decoration: none; }
 
.content img { float: left; margin-right: 5px; margin-top: 3px; margin-left: 2px;}
 
.homeng {
background-color: #CCCC99;
margin: 0px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #CCCCCC;
}
 
 
body { background-color: #ffffff; color: black; font-family: Arial, Tahoma, sans-serif; font-size: 8pt; margin: 0px; border: 0px; padding: 0px;}
.header
{
 
background-color: #003300; color: #FFFFFF; font-size: 18px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding: 5px 0px 5px 2px; margin: 0px;}
.footer
{
color: #FFFFFF; background-color: #003300; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; padding: 2px 0px 3px 3px; margin: 0px;}
.accesskey
 
{ text-decoration: underline; font-size: 11px; color: #000000;}
.himgicon
 
{ height: 12px; width: 7px;}
.pgheader
 
{
color: #003300;
font-size: 11px;
font-weight: normal;
padding: 1px 0px 1px 3px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #003300;
border-right-color: #003300;
border-bottom-color: #003300;
border-left-color: #003300;
}
.footerng
 
{ background-color: #FFFFFF; color: #003300; font-size: 11px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; padding: 1px 1px 1px 3px; margin: 0px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #003300; border-right-color: #003300; border-bottom-color: #003300; border-left-color: #003300;}
/* Design5 Style10 */
/* Editor Styles listed below */
.Heading {font-family: Arial, Tahoma, sans-serif; font-size: 13px; font-weight: bold; color: #000000; text-decoration: none; margin: 0px; padding: 0px;}
.BodyText { font-weight: normal; font-size: 8pt; padding: 0px 2px 0px 2px; MARGIN: 0px;}
.BoldText { font-weight: bold; font-size: 11px;}
.Italic {font-style: italic;}
.Underline {text-decoration: underline;}
.Indent { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 5px;}
.Highlight { background-color: #999966; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 2px 0px 0px 0px; margin: 2px;}
.Line_HR {clear:both; border-bottom-color:#003300; border-top-color:#ffffff; border-left-color:#ffffff; border-right-color:#ffffff; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding: 0px; margin: 0px;}

Mobile View of Site

Screenshot-1.jpg Screenshot-2.jpg Screenshot-3.jpg Screenshot-4.jpg Screenshot-5.jpg Screenshot-6.jpg Screenshot-7.jpg

51 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×