pkdevbox / iui

Automatically exported from code.google.com/p/iui
MIT License
0 stars 0 forks source link

Add header and footer issues. #280

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?

I'm having a difficult time trying to get a heaader/footer with latest iui 
framework. This for the iphone app.

I have created a test app using the list structure of the music
example but want to get a footer in small text below the list that
says something like (c) 2011 etc.  Can someone please tell me what changes I 
need to make in the iui.js and iui.css. Does anyone has a good example?

<div class="toolbar">
        <h1 id="pageTitle">Home</h1>
        <a id="backButton" class="button" href="#"></a>
       <a id="HomeButton" target="_self" class="button"      href="index.html">Home</a>
    </div>

 <div id="footer"></div>

What is the expected output? What do you see instead?

Not able to see the header and footer div tags. Someone please tell me what 
changes do I need to make in the iui.css and iui.js.

Original issue reported on code.google.com by kooldl2...@gmail.com on 18 Jan 2011 at 6:19

GoogleCodeExporter commented 8 years ago
Depends on where you're using it.  If you're wanting it at the bottom of a UL 
page (for example music.html front page), then try the following:

.footer {
    color: #4D576D;
    text-shadow: #ffffff 0px 1px 0px; /*won't show up on default white bg*/
    text-align: center;
    font-size: 12px;
    border-bottom: none;
}

and just add a <li class="footer">Copyright (C) 2011</li> to the end of your 
list.

On the other hand, if you're using a "panel" page (for example Theme Switcher 
or Settings from music.html) that has a <div class="panel">, then the following 
will be much better for you (replicated from Apple's own UI effects):

.text {
    margin: 0 0 20px 0;
    color: #4D576D;
    text-shadow: #ffffff 0px 1px 0px;
    text-align: center;
    font: 12px Helvetica;
}

Then just put a <div class="text">Copyright (C) 2011</div> BEFORE your </div> 
for the panel; you can tweak the font size and whatever else as you see fit, 
but this will give you a centered gray text with a drop shadow just like that 
in Apple's Settings.app.

I have supplied a music.html with both implemented.

Original comment by eslind...@gmail.com on 2 Aug 2011 at 10:43

Attachments: