×
Namespaces

Variants
Actions

Mobile Site Example

From Nokia Developer 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 06:46.
111 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.

×