Link worked fine in Safari (switched user agent) On Fri, Nov 20, 2009 at 3:29 PM, StanRB <[email protected]>wrote:
> 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]<iphonewebdev%[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]<iphonewebdev%[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]<iphonewebdev%[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=.
