Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Mobile Site Example

From Wiki
Jump to: navigation, search

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

This page was last modified on 10 February 2012, at 03:46.
239 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.

×