You took it further and nailed it! Love it :)! Problem with the link you gave though - doesn't load... Good that I have your site saved on my springboard - was able to view the example. Will put this code in action ASAP...
Cheers! Stan On Nov 20, 1:06 pm, Remi Grumeau <[email protected]> wrote: > 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=.
