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.

(Difference between revisions)

Mobile Site Example

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix typo)
 
Line 1: Line 1:
 
[[Category:Mobile Web Design]][[Category:Web]]
 
[[Category:Mobile Web Design]][[Category:Web]]
{{This article provides a live example of mobile site. CSS for the site is also provided.}}  
+
{{Abstract|This article provides a live example of mobile site. CSS for the site is also provided.}}  
  
 
{{ArticleMetaData <!-- v1.1 -->
 
{{ArticleMetaData <!-- v1.1 -->

Latest revision as of 03:46, 10 February 2012

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)

[edit] 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;}

[edit] 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;}

[edit] 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.
180 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.

×