With generic icon (iUI touch used here)
http://www.remi-grumeau.com/iphone/
click on icon board
CSS
body > div.board /*sets up the "ul" class for board type
arrangement*/
{
float: left;
margin: 0px;
padding: 0px;
height: auto;
background: #000;
}
body > div.board[orient="landscape"] /*sets up the "ul" class for board type */
{
height: auto;
min-height: 255px;
}
div.board > ul
{
float: left;
min-height: 255px;
margin: 0;
padding: 0;
background: #000;
}
div.board > ul > li
{
float: left;
list-style: none;
list-style-position: inside;
width: auto;
margin: 0;
padding: 0;
}
div.board > ul > li > a /*all this pretty much pertains to the text
under the icon*/
{
display: block;
float: left;
width: 65px;
margin: 3px;
padding: 4px;
text-align: center;
text-decoration: none;
}
div.board > ul > li > a:active,
div.board > ul > li > a[selected]
{
background-color: #000 !important;
background-image: none !important;
}
div.board > ul > li > a > img /*this sets the icon properties*/
{
display: block;
width: auto;
height: auto;
border: none;
margin: 0px auto 2px auto;
}
div.board > ul > li > a > span /*this sets the icon properties*/
{
display: block;
width: 100%;
height: 15px;
text-align: center;
font-size: 11px;
color: #fff;
overflow: hidden;
text-overflow-mode: ellipsis;
white-space : nowrap;
}
HTML (board.php)
<div id="board" title="Board" class="board">
<ul>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img
src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
</ul>
</div>
<ul id="board1" title="Board 1">
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
</ul>
<ul id="boarditem1" title="Board Item 1" class="panel">
<h2>Board Item 1 title</h2>
</ul>
Feel free to use / customize :)
Remi
On Fri, Nov 20, 2009 at 16:56, Chris Collett <[email protected]> wrote:
> Looks great. New color scheme and some slick icons and you're on your
> way.....
>
> On Fri, Nov 20, 2009 at 10:27 AM, StanRB <[email protected]>
> wrote:
>>
>> Check it out in action here:
>>
>> http://web.adelphi.edu/stan
>>
>> This is a snippet from the html code that puts the class in action:
>>
>> <ul id="home" title="Minimal" class="springboard" selected="true">
>> <li><a href="#TheBeatles"><img
>> src="NavButtonCalendar.png"
>> title="Calendar">Athletics</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Music">Directory</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonNotes.png"
>> title="Notes">Library</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Credits">Arts</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Music">Directory</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonNotes.png"
>> title="Notes">Library</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Music">Directory</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonNotes.png"
>> title="Notes">Library</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Credits">Arts</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonMusic.png"
>> title="Music">Directory</a></li>
>> <li><a href="#TheBeatles"><img
>> src="NavButtonNotes.png"
>> title="Notes">Library</a></li>
>>
>> </ul>
>>
>>
>> That's all it is... Any other type of <li> elements or titles or
>> whatever CANNOT be present in this UL block as it looks fugly...
>>
>> What do you think? Improvements?
>>
>> --
>>
>> You received this message because you are subscribed to the Google Groups
>> "iPhoneWebDev" group.
>> To post to this group, send email to [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/iphonewebdev?hl=.
>>
>>
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "iPhoneWebDev" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/iphonewebdev?hl=.
>
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=.
