Mobile Headings and footer HTML and CSS

Let’s skip the content section of the page we set up for now and show the html the CSS of the top of the page headings and the simple footer.
Top of the page heading section

Home page heading section HTMLhome header

The home page of the mobile site has a different heading on top from the other pages inside because only the home page is set up with a small logo image. It has some CSS in all three CSS files.

<body>
<div id='header'>
<div id='home_heading'>
<img src="/m/images/mytinylogo.png" id="logoimage" alt="My College Name" />
<!-- top of index page heading title -->
<h1>My College Library Mobile<h1>
</div>
</div>

The CSS in the logo Each id= attribute is represented in the CSS

Primarily in the smart device CSS called ios.css in the heading shown above.


/* ios home page heading  */
#logoimage {float:left;}
#home_heading {min-height:60px;  background: #F78624; padding: 0 5px;}
#home_heading h1{font-size: 20px; font-weight: bold; font-family: Georgia, Serif;
text-align: center; text-shadow: 0px 2px 2px #444444;
margin:0 0 0 0;padding: 7px 0px 0px 0px; color: #fff; }

The CSS in the logo Each id= attribute is represented in the CSS

Primarily in the smart device CSS called ios.css in the heading shown above.

/* home page heading  */
#logoimage {float:left;}
#home_heading {min-height:60px;  background: #F78624; padding: 0 5px;}
#home_heading h1{font-size: 20px; font-weight: bold; font-family: Georgia, Serif;
text-align: center; text-shadow: 0px 2px 2px #444444;
margin:0 0 0 0;padding: 7px 0px 0px 0px; color: #fff; }

And two lines in the handled CSS for non smart devices


#home_heading {background: #F78624; }
#home_heading h1{font-size: 1em;color:brown; }

Normal pages heading HTMLRegular Page Header

The normal pages heading is meant to be more flexible so a page heading could be one line or two lines and expand to fit. Also it has a home button which is not an image which takes some extra CSS to format fit and stay in place.


<body>
<div id='header'>
<div id='page_heading'>
<div id="homelinkbox">
<a href="/m/" id="home_link">&nbsp;<big><big>&laquo;</big></big>&nbsp;Home&nbsp;</a>
</div>
<div id="titlebox"><center>
<!-- top of secondary page heading title -->
<h1> Library Hours</h1>
</center></div>
</div>
</div>

The normal page CSS in the ios.css file for smart devices
Display:table-cell allows content to be vertically centered so heading can have multiple lines. The parent ID, page_heading set to display table helps hold title and link side by side.


/* regular page heading  */
#page_heading { height: auto; background-color: #F78624;
padding: 3px;padding-bottom: 6px; width:100%;
display:table; }
#page_heading div {vertical-align: middle;}
#page_heading h1{color: #fff; font-size: 19px; font-weight: bold;text-align: center;
text-shadow: 0px 2px 4px #333333; margin: 5px 0px 5px -10px; }
#titlebox {display:table-cell;text-align: center;vertical-align: middle;
padding-top:3px;padding-bottom:3px;}
#homelinkbox { display:table-cell;vertical-align: middle;
padding-top:3px;padding-bottom:3px; width:90px;}
#home_link { background-color: white;border: medium solid #1F497D;
padding: 3px 0px 3px 0px; margin: 3px 0px 3px 0px;
border-radius: 10px;text-decoration: none; color: #1F497D;
font-weight: bold;font-family: Arial, Sans-Serif ;
-webkit-border-radius:10px;
-moz-border-radius:10px;}
#home_link A:link {text-decoration: none; color: #1F497D;}
#home_link A:active {text-decoration: none; color: #1F497D;}
#home_link A:visited {text-decoration: none; color: #1F497D; }

In the handheld CSS only 3 lines


#page_heading {background: #F78624; }
#page_heading h1{font-size: 1em;color:brown;}
#home_link {background-color:white;}

IE mobile did not want to cooperate so these lines made it fit with IE mobile


#title_header {display:inline-block;text-align: center;width:60%;
vertical-align: middle;padding-top:3px;padding-bottom:3px;}
#homelinkbox {float:left; display:inline; width:100px;
padding-top:10px;padding-bottom:10px;}
#home_link { background-color: white;border: medium solid #1F497D;
padding: 3px 0px 3px 0px; margin: 0px;}

The footer is just simple centered links

CSS for the footer adds a wide margin around paragraphs inside the DIV tag with the id=footer so a wide finger can still click these links.


<div id ='footer'>
<p class="center"><a href="/m/about.html">About My Mobile</a></p>
<p class="center"><a href="/m/">My Mobile Home</a> | <a href="/">My Main Page</a> </p>
<p class="center"><a href="tel:5552223333">Research desk#555-222-3333</a></p>
<br /><p class="center"><a href="http://my.college.edu/">My College Name</a> </p>
<br />
<br />
</div>
</body></html>

The footer CSS in the ios.css file for smart devices


/*footer*/
#footer { padding:10px 0px 0px 0px; text-align:center;
font-size: 16px; font-weight:bolder;}
#footer p{margin-top: 10px;margin-bottom: 10px;}
#footer a{color:navy;}
#footer a:visted {color:navy;}
.center { text-align: center; }

Advertisements

About mobilelibraryinacan

Library tech person 4 20 years
This entry was posted in Mobile HTML and CSS, mobile web design and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s