[richfaces-svn-commits] JBoss Rich Faces SVN: r12814 - in management/design/realWorldDemo/html: images/shell and 1 other directory.

Author: admitriev Date: 2009-03-03 13:22:16 -0500 (Tue, 03 Mar 2009) New Revision: 12814 Added: management/design/realWorldDemo/html/images/shell/button.png management/design/realWorldDemo/html/images/shell/icon_add_album.png management/design/realWorldDemo/html/images/shell/icon_add_photo.png management/design/realWorldDemo/html/images/shell/icon_add_shelf.png management/design/realWorldDemo/html/photo_edit.html Modified: management/design/realWorldDemo/html/album.html management/design/realWorldDemo/html/images/shell/arr_left.png management/design/realWorldDemo/html/images/shell/arr_right.png management/design/realWorldDemo/html/photo.html management/design/realWorldDemo/html/shelf.html Log: Modified: management/design/realWorldDemo/html/album.html =================================================================== --- management/design/realWorldDemo/html/album.html 2009-03-03 17:50:04 UTC (rev 12813) +++ management/design/realWorldDemo/html/album.html 2009-03-03 18:22:16 UTC (rev 12814) @@ -29,16 +29,22 @@ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position : absolute;} .preview_box_album_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_80 div.album_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_80 div.album_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position : absolute;} .preview_box_album_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_120 div.album_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_120 div.album_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position : absolute;} .preview_box_album_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;} + .preview_box_album_160 div.album_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_160 div.album_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} @@ -46,17 +52,22 @@ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} .preview_box_photo_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_80 div.photo_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_80 div.photo_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position : absolute;} .preview_box_photo_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_120 div.photo_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_120 div.photo_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position : absolute;} .preview_box_photo_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} - + .preview_box_photo_160 div.photo_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_160 div.photo_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} @@ -146,7 +157,7 @@ </div> <div style="padding : 15px 35px 15px 15px;"> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_minus.png" width="25" height="16" alt="" border="0"><br> @@ -155,35 +166,29 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name :: <a href="#"><strong>7</strong> new</a> + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> @@ -191,87 +196,72 @@ </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + <strong>Album name'll be here. Maximal lenght is no limits</strong> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - <strong>Album name</strong> + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -280,11 +270,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -293,11 +283,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + Shelf name'll be here :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -347,239 +337,351 @@ </div> </div> <br><br> - - <div class="preview_box_album_80"> - <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> - </td> - </tr> - </table> - </div> +<style> - <div class="preview_box_photo_80"> +</style> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="90" height="120" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> - <div class="preview_box_photo_80"> + <div class="preview_box_photo_120"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> - </table> + </table> + <div class="photo_name"> + Photo name'll be here + </div> + <div class="photo_data"> + 3 Mar 2009 + </div> </div> + <div style="width : 90%; height : 10px; float : left;">&nbsp;&nbsp;&nbsp;<div> Modified: management/design/realWorldDemo/html/images/shell/arr_left.png =================================================================== (Binary files differ) Modified: management/design/realWorldDemo/html/images/shell/arr_right.png =================================================================== (Binary files differ) Added: management/design/realWorldDemo/html/images/shell/button.png =================================================================== (Binary files differ) Property changes on: management/design/realWorldDemo/html/images/shell/button.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: management/design/realWorldDemo/html/images/shell/icon_add_album.png =================================================================== (Binary files differ) Property changes on: management/design/realWorldDemo/html/images/shell/icon_add_album.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: management/design/realWorldDemo/html/images/shell/icon_add_photo.png =================================================================== (Binary files differ) Property changes on: management/design/realWorldDemo/html/images/shell/icon_add_photo.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: management/design/realWorldDemo/html/images/shell/icon_add_shelf.png =================================================================== (Binary files differ) Property changes on: management/design/realWorldDemo/html/images/shell/icon_add_shelf.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: management/design/realWorldDemo/html/photo.html =================================================================== --- management/design/realWorldDemo/html/photo.html 2009-03-03 17:50:04 UTC (rev 12813) +++ management/design/realWorldDemo/html/photo.html 2009-03-03 18:22:16 UTC (rev 12814) @@ -29,16 +29,22 @@ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position : absolute;} .preview_box_album_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_80 div.album_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_80 div.album_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position : absolute;} .preview_box_album_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_120 div.album_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_120 div.album_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position : absolute;} .preview_box_album_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;} + .preview_box_album_160 div.album_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_160 div.album_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} @@ -46,20 +52,27 @@ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} .preview_box_photo_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_80 div.photo_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_80 div.photo_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position : absolute;} .preview_box_photo_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_120 div.photo_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_120 div.photo_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position : absolute;} .preview_box_photo_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_160 div.photo_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_160 div.photo_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + - .preview_box_photo_nav {width : 50px; height : 50px; position : relative; float : left; margin : 0px 2px 0px 0px;} - .preview_box_photo_nav img.pr_photo_bg {width : 50px; height : 50px; position : absolute;} - .preview_box_photo_nav table{position : relative; width : 50px; height : 50px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_photo_nav {width : 100px; height : 100px; position : relative; float : left; margin : 0px 2px 0px 0px;} + .preview_box_photo_nav img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} + .preview_box_photo_nav table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_nav table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} .preview_box_photo_nav table img.sel{margin: 0px 0px 0px 0px; border : 3px solid #DF6400;} @@ -138,6 +151,18 @@ <a href="#" style="font-size : 11px; font-weight : bold; color : #ffffff; text-decoration : none;">My Album</a> </td> + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_shelf.png" width="33" height="22" alt="" border="0"><br> + </td> + + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_album.png" width="33" height="22" alt="" border="0"><br> + </td> + + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_photo.png" width="33" height="22" alt="" border="0"><br> + </td> + </tr> </table> </div> @@ -152,7 +177,7 @@ </div> <div style="padding : 15px 35px 15px 15px;"> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_minus.png" width="25" height="16" alt="" border="0"><br> @@ -161,35 +186,29 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - <strong>Shelf name</strong> :: <a href="#"><strong>7</strong> new</a> + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> @@ -197,87 +216,72 @@ </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + <strong>Album name'll be here. Maximal lenght is no limits</strong> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -286,11 +290,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -299,11 +303,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + Shelf name'll be here :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -343,19 +347,14 @@ <p> This is a "Photo name..." description. - <div style="margin : 30px 0px 0px 0px; background : #f1f1f1; padding : 3px 4px 53px 2px;"> - <div style="float : right" onclick="window.location.href='#'" style="cursor : pointer"> - <img src="images/shell/tree_icon_slid.png" width="27" height="16" alt="" border="0" style="vertical-align : bottom; margin-right : 5px">Slideshow - </div> - <div> - <a href="#"><img src="images/shell/arr_left.png" width="16" height="50" alt="" border="0" style="float : left; margin-right : 4px"></a> + <div style="margin : 30px 0px 20px 30px; float : left; position : relative"> <div class="preview_box_photo_nav"> <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -365,7 +364,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> </td> </tr> </table> @@ -375,7 +374,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> </td> </tr> </table> @@ -385,7 +384,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -395,91 +394,59 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> </td> </tr> </table> - </div> - <div class="preview_box_photo_nav"> - <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> - </td> - </tr> - </table> - </div> - <div class="preview_box_photo_nav"> - <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0" class="sel"></a><br> - </td> - </tr> - </table> - </div> - <div class="preview_box_photo_nav"> - <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> - </td> - </tr> - </table> - </div> - <div class="preview_box_photo_nav"> - <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> - </td> - </tr> - </table> - </div> - <div class="preview_box_photo_nav"> - <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> - <table cellpadding="0"> - <tr> - <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> - </td> - </tr> - </table> - </div> - <a href="#"><img src="images/shell/arr_right.png" width="16" height="50" alt="" border="0" style="float : left"></a> + </div> + <a href="#"><img src="images/shell/arr_left.png" width="56" height="34" alt="" border="0" style="position : absolute; top:81px; left : -33px"></a> + <a href="#"><img src="images/shell/arr_right.png" width="56" height="34" alt="" border="0" style="position : absolute; top:81px; right : -31px"></a> </div> - </div> + + <br clear="all"> <div style="padding-top : 10px;"> <table cellpadding="0" style="border-collapse : collapse; margin-bottom : 5px"> <tr> - <td style="padding-right : 10px" rowspan="2"> - <img src="images/examples/photo_200.jpg" width="600" height="400" alt="" border="0" style="border : 2px solid #FFFFFF;"> + <td style="padding-right : 10px; padding-left : 30px; text-align : right" rowspan="2"> + <div onclick="window.location.href='#'" style="cursor : pointer; margin-bottom : 7px"> + <img src="images/shell/tree_icon_slid.png" width="27" height="16" alt="" border="0" style="vertical-align : bottom; margin-right : 5px">Slideshow + </div> + + <img src="images/examples/photo_200.jpg" width="500" height="350" alt="" border="0" style="border : 3px solid #808080"> </td> <td valign="top"> - <div style="margin : 0px 0px 0px 0px; background : #f1f1f1; padding : 3px 4px 4px 4px;"> - <a href="#">Original size</a> + <div style="margin : 26px 0px 0px 0px; position : relative; width : 103px; height : 28px;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 16px"> + Original size + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> </div> </td> </tr> <tr> <td valign="bottom" style="padding-bottom : 5px"> - <div style="margin : 0px 0px 0px 0px; background : #f1f1f1; padding : 3px 4px 4px 4px;"> - <a href="#">Edit</a> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 39px"> + Edit + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> </div> - - <div style="margin : 3px 0px 0px 0px; background : #f1f1f1; padding : 3px 4px 4px 4px;"> - <a href="#">Delete</a> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 32px"> + Delete + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> </div> + </td> </tr> </table> </div> - + <br> <span style="color : #666666">Captured:</span> Samsung T1000<br> <span style="color : #666666">Uploaded:</span> 1 november 2008<br> <span style="color : #666666">Author:</span> <a href="#">Author Name</a> @@ -503,7 +470,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -535,7 +502,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -567,7 +534,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -599,7 +566,7 @@ <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="40" height="40" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="60" alt="" border="0"></a><br> </td> </tr> </table> @@ -622,8 +589,14 @@ </td> </tr> </table> - - <a href="#">Add comment</a> + + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 11px"> + Add comment + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> </div> </div> Added: management/design/realWorldDemo/html/photo_edit.html =================================================================== --- management/design/realWorldDemo/html/photo_edit.html (rev 0) +++ management/design/realWorldDemo/html/photo_edit.html 2009-03-03 18:22:16 UTC (rev 12814) @@ -0,0 +1,618 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> + +<html> +<head> + <title>Untitled</title> + <link rel="STYLESHEET" type="text/css" href="common.css"> +</head> +<style> + *{font-family : verdana; font-size : 11px} + body {margin : 0px; background : url(images/shell/page_bg.gif) repeat-x #D7D7D7; height : 100%} + h1{font-size : 175%; font-weight : normal; margin : 0px;} + .top_part {height : 116px;} + .header_box {height : 79px; position : relative;} + .auth_box {position : absolute; font-weight : bold; color : #ffffff; right : 8px; top : 42px} + .auth_data {vertical-align : top; padding : 0px 8px 0px 15px; font-weight : bold; color : #ffffff;} + .auth_data span {color : #FF7200;} + .about_toolbar {position : absolute; right : 8px; top : 12px;} + .about_toolbar_item {vertical-align : top; padding : 0px 8px 0px 15px;} + .about_toolbar_item a{font-size : 11px; color : #ffffff; text-decoration : none;} + .about_toolbar_item a:hover{font-size : 11px; color : #ffffff; text-decoration : underline;} + + .content_box {padding : 15px 35px 45px 35px;} + .content_box p {margin : 0px 0px 5px 0px; FONT-SIZE : 12PX} + + a{color : #DF6400;} + + + .preview_box_album_80 {width : 100px; height : 100px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position : absolute;} + .preview_box_album_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_80 div.album_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_80 div.album_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + .preview_box_album_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position : absolute;} + .preview_box_album_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_120 div.album_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_120 div.album_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + .preview_box_album_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position : absolute;} + .preview_box_album_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;} + .preview_box_album_160 div.album_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_160 div.album_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + + + .preview_box_photo_80 {width : 100px; height : 100px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} + .preview_box_photo_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_80 div.photo_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_80 div.photo_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position : absolute;} + .preview_box_photo_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_120 div.photo_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_120 div.photo_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} + .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position : absolute;} + .preview_box_photo_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_160 div.photo_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_160 div.photo_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + + + .preview_box_photo_nav {width : 100px; height : 100px; position : relative; float : left; margin : 0px 2px 0px 0px;} + .preview_box_photo_nav img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} + .preview_box_photo_nav table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} + .preview_box_photo_nav table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_nav table img.sel{margin: 0px 0px 0px 0px; border : 3px solid #DF6400;} + + + + +</style> + +<body> + +<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> + <tr> + <td colspan="2"> + <div class="top_part"> + <div class="header_box"> + <a href="#"><img src="images/shell/logo_top.gif" width="290" height="79" alt="" border="0" style="position : absolute;"></a> + <div class="auth_box"> + <table cellpadding="0" cellspacing="0" border="0"> + <tr> + + <td class="auth_data"> + Welcome, <span>Jhon Smith</span> + </td> + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + + </tr> + </table> + </div> + + <div class="about_toolbar"> + <table cellpadding="0" cellspacing="0" border="0"> + <tr> + + <td class="about_toolbar_item"> + <a href="#">User guide</a> + </td> + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + + <td class="about_toolbar_item"> + <a href="#">F.A.Q.</a> + </td> + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + + <td class="about_toolbar_item"> + <a href="#">About Demo at JBossWiki</a> + </td> + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + + <td class="about_toolbar_item"> + <a href="#">About Demo at JBossForum</a> + </td> + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + + </tr> + </table> + </div> + </div> + <div style="height : 37px; position : relative; background : url(images/shell/general_panelbar_bg.gif) repeat-x #A84807; padding-left : 15px; "> + <table height="37px" cellpadding="0" cellspacing="0" border="0"> + <tr> + + <td valign="middle"> + <img src="images/shell/general_panelbar_bullet.gif" width="11" height="15" alt="" border="0"><br> + </td> + <td style="vertical-align : top; padding : 11px 25px 0px 8px"> + <a href="#" style="font-size : 11px; font-weight : bold; color : #ffffff; text-decoration : none;">My Album</a> + </td> + + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_shelf.png" width="33" height="22" alt="" border="0"><br> + </td> + + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_album.png" width="33" height="22" alt="" border="0"><br> + </td> + + <td style="vertical-align : top; padding : 8px 1px 0px 0px"> + <img src="images/shell/icon_add_photo.png" width="33" height="22" alt="" border="0"><br> + </td> + + </tr> + </table> + </div> + </div> + </td> + </tr> + <tr> + <td height="100%" valign="top"> + <div style="background : url(images/shell/general_panel_bg.gif) right top repeat-y; height : 100%;"> + <div style="height : 15px; background : url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;"> + <img src="images/shell/spacer.gif" width="300" height="1" alt="" border="0"> + </div> + + <div style="padding : 15px 35px 15px 15px;"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/tree_icon_minus.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name'll be here. Maximal lenght is no limits + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + <strong>Album name'll be here. Maximal lenght is no limits</strong> + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name'll be here. + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name :: <a href="#"><strong>7</strong> new</a> + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name'll be here. + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Album name'll be here. Maximal lenght is no limits + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Shelf name'll be here :: <a href="#"><strong>7</strong> new</a> + </td> + </tr> + </table> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> + <tr> + <td valign="top"> + <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top"> + <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> + </td> + <td valign="top" style="padding-left : 4px"> + Shelf name + </td> + </tr> + </table> + + + </div> + + </div> + </td> + <td height="100%" width="100%" valign="top""> + <div style="background : url(images/shell/general_panel_bg.gif) right top repeat-y; height : 100%;"> + <div style="height : 15px; background : url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;"> + + </div> + <div class="content_box"> + + <table style="border-collapse : collapse; margin-bottom : 15px" cellpadding="0"> + <tr> + <td> + <h1 style="margin-bottom : 4px">Photo name (0-50 symb; first cann't be SPACE symb)</h1> + <span style="color : #666666">Album &laquo;Album name&raquo;</span> + </td> + <td style=" padding : 8px 0px 0px 20px; vertical-align : top; white-space : nowrap"> + </td> + </tr> + </table> + + <p> This is a "Photo name..." description. + + + + <div style="margin : 30px 0px 20px 30px; float : left; position : relative"> + <div class="preview_box_photo_nav"> + <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + </td> + </tr> + </table> + </div> + <div class="preview_box_photo_nav"> + <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> + </td> + </tr> + </table> + </div> + <div class="preview_box_photo_nav"> + <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> + </td> + </tr> + </table> + </div> + <div class="preview_box_photo_nav"> + <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="60" alt="" border="0"></a><br> + </td> + </tr> + </table> + </div> + <div class="preview_box_photo_nav"> + <img class="pr_photo_bg" src="images/shell/frame_photo_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="60" height="80" alt="" border="0"></a><br> + </td> + </tr> + </table> + </div> + <a href="#"><img src="images/shell/arr_left.png" width="56" height="34" alt="" border="0" style="position : absolute; top:81px; left : -33px"></a> + <a href="#"><img src="images/shell/arr_right.png" width="56" height="34" alt="" border="0" style="position : absolute; top:81px; right : -31px"></a> + </div> + + + <br clear="all"> + <div style="padding-top : 10px;"> + <table cellpadding="0" style="border-collapse : collapse; margin-bottom : 5px"> + <tr> + <td style="padding-right : 10px; padding-left : 30px; text-align : right" rowspan="2"> + <div onclick="window.location.href='#'" style="cursor : pointer; margin-bottom : 7px"> + <img src="images/shell/tree_icon_slid.png" width="27" height="16" alt="" border="0" style="vertical-align : bottom; margin-right : 5px">Slideshow + </div> + + <img src="images/examples/photo_200.jpg" width="500" height="350" alt="" border="0" style="border : 3px solid #808080"> + </td> + <td valign="top"> + <div style="margin : 26px 0px 0px 0px; position : relative; width : 103px; height : 28px; display : none;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 16px"> + Original size + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + </td> + </tr> + <tr> + <td valign="bottom" style="padding-bottom : 5px"> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px; display : none;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 39px"> + Edit + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px; display : none;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : relative; color : #ffffff; top : 7px; left : 32px"> + Delete + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + + </td> + </tr> + </table> + </div> + + + <div style="margin : 10px 0px 30px 30px; width : 504px; background : #f1f1f1"> + + <table style="border-collapse : collapse;" cellpadding="5" border="0"> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + Photo name + </td> + <td valign="top" colspan="2"> + <input type="text" style="border : 1px solid #999999; width : 350px"> + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + Upload date + </td> + <td valign="top"> + <input type="text" style="border : 1px solid #999999; width : 80px"> + </td> + <td width="200" valign="top"> + <input type="Checkbox" checked style="margin : 0px"> Show meta infornation + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + Description + </td> + <td valign="top" colspan="2"> + <textarea style="border : 1px solid #999999; width : 350px; height : 150px"></textarea> + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + Related tags + </td> + <td valign="top" colspan="2"> + <input type="text" style="border : 1px solid #999999; width : 150px; margin-bottom : 4px"><br> + <span style="color : #666666">breathtaking, bright, clouds, cloudy, day, grass, lens flare, low angle, view, nature, nobody, outdoor, peaceful, picturesque, serenity, sky, sunny, sun, sunshine </span> + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + Direct link + </td> + <td valign="top" colspan="2"> + <input type="text" style="border : 0px; background : none; width : 350px" readonly="readonly" value="L:\Projects\Potemkin\photoalbum\photoalbum_3\site\photo_edit.html"> + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + + </td> + <td valign="top" colspan="2"> + <input type="Checkbox" checked style="margin : 0px">Use thes photo like current album cover + </td> + </tr> + <tr> + <td valign="top" nowrap style="padding-top : 8px"> + + </td> + <td valign="top" colspan="2"> + <input type="Checkbox" checked style="margin : 0px">Share this photo<br> + <input type="Checkbox" checked style="margin-left : 15px">Allow commennts + </td> + </tr> + <tr> + <td valign="top"> + + + </td> + <td width="100%" valign="top" align="right" colspan="2" style="padding : 10px 10px 10px 10px;"> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px; float : left"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : absolute; color : #ffffff; top : 7px; left : 11px"> + Delete + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px; float : right"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : absolute; color : #ffffff; top : 7px; left : 11px"> + Cancel + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + <div style="margin : 0px 0px 0px 0px; position : relative; width : 103px; height : 28px;"> + <img src="images/shell/button.png" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + <div style="position : absolute; color : #ffffff; top : 7px; left : 11px; font-weight : bold;"> + Save + </div> + <input type="Image" src="images/shell/spacer.gif" width="103" height="28" alt="" border="0" style="position : absolute; top : 0px; left : 0px;"> + </div> + </td> + </tr> + </table> + + + </div> + + </div> + + </div> + </td> + </tr> + <tr> + <td colspan="2"> + <div style="height : 82px; position : relative; background : url(images/shell/footer_bg.gif) repeat-x #000000;"> + <img src="images/shell/logo_bottom.gif" width="160" height="55" alt="" border="0" style="position : absolute; right : 0px; top : 27px"> + <div style="position : absolute; left : 8px; top : 51px"> + <table cellpadding="0" cellspacing="0" border="0"> + <tr> + + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + <td style="vertical-align : top; padding : 0px 15px 0px 8px"> + <a href="#" style="font-size : 11px; color : #ffffff; text-decoration : none;"> Terms And Conditions</a> + </td> + + <td valign="middle"> + <img src="images/shell/bullet.gif" width="3" height="15" alt="" border="0"><br> + </td> + <td style="vertical-align : top; padding : 0px 15px 0px 8px"> + <a href="#" style="font-size : 11px; color : #ffffff; text-decoration : none;">Privacy Statement</a> + </td> + + </tr> + </table> + </div> + </div> + </td> + </tr> +</table> + +<form style="margin : 0px"> + <div style="height : 65px; width: 339px; position : absolute; top : 64px; right : 0px; margin-right : 0px;"> + <img src="images/shell/search_bg.png" width="339" height="65" alt="" border="0" style="position : absolute; top : 0px; left: 0px"> + <div style="position : absolute; color : #FFFFFF; font-weight : bold; top : 22px; left : 20px"> + Search + </div> + <div style="position : absolute; color : #FFFFFF; font-weight : bold; top : 21px; left : 277px"> + Find + </div> + <input type="Text" style="width : 176px; height : 17px; border : 0px; position : absolute; top : 20px; left : 73px; background : none; font-weight : bold;"> + <input type="Image" src="images/shell/spacer.gif" border="0" style="width : 61px; height : 18px; position : absolute; top : 20px; left : 261px;"> + <div style="position : absolute; top : 41px; left : 197px"> + <a href="#" style="color : #FFFFFF; text-decoration : none">Options&nbsp;<img src="images/shell/bull_arr_down.gif" width="7" height="7" alt="" border="0"> </a> + </div> + </div> + <div style="height : 90px; width: 327px; position : absolute; top : 107px; right : 5px; background : none; display : none; overflow : hidden;"> + <img src="images/shell/search_option_bg.png" width="327" height="153" alt="" border="0" style="position : absolute; bottom : 0px; left: 0px"> + <div style="position : absolute; color : white; top : 7px; left : 45px"> + in&nbsp;<input type="checkbox">in My Album&nbsp;&nbsp;&nbsp;<input type="checkbox">in Shared Albums + </div> + <div style="position : absolute; color : white; top : 32px; padding-top : 3px; left : 38px; border-top : 1px solid #383838"> + for&nbsp;<input type="checkbox">Tags&nbsp;&nbsp;<input type="checkbox">Photos&nbsp;&nbsp;<input type="checkbox">Albums&nbsp;&nbsp;<input type="checkbox">Users + </div> + <div style="position : absolute; top : 70px; left : 163px"> + <a href="#" style="color : #FFFFFF; text-decoration : none">Hide options&nbsp;<img src="images/shell/bull_arr_up.gif" width="7" height="7" alt="" border="0"> </a> + </div> + </div> +</form> + +<div style="height : 52px; width: 79px; position : absolute; top : 0px; left : 278px; visibility : vidden;"> + <img src="images/shell/ai.png" width="52" height="79" alt="" border="0" style="position : absolute; top : 0px; left: 0px"> + <img src="images/shell/ai.gif" width="26" height="26" alt="" border="0" style="position : absolute; top : 26px; left: 13px"> +</div> +</body> +</html> Modified: management/design/realWorldDemo/html/shelf.html =================================================================== --- management/design/realWorldDemo/html/shelf.html 2009-03-03 17:50:04 UTC (rev 12813) +++ management/design/realWorldDemo/html/shelf.html 2009-03-03 18:22:16 UTC (rev 12814) @@ -29,16 +29,22 @@ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position : absolute;} .preview_box_album_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_80 div.album_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_80 div.album_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position : absolute;} .preview_box_album_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;} + .preview_box_album_120 div.album_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_120 div.album_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_album_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position : absolute;} .preview_box_album_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;} + .preview_box_album_160 div.album_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_album_160 div.album_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} @@ -46,19 +52,25 @@ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position : absolute;} .preview_box_photo_80 table{position : relative; width : 100px; height : 100px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_80 div.photo_name {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_80 div.photo_data {text-align : center; overflow : hidden; width : 100px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position : absolute;} .preview_box_photo_120 table{position : relative; width : 140px; height : 140px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} + .preview_box_photo_120 div.photo_name {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_120 div.photo_data {text-align : center; overflow : hidden; width : 140px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float : left; margin : 0px 10px 20px 0px;} .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position : absolute;} .preview_box_photo_160 table{position : relative; width : 180px; height : 180px; text-align : center; vertical-align : middle; border-collapse : collapse;} .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;} - + .preview_box_photo_160 div.photo_name {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; margin-top : 3px; text-overflow: ellipsis; height : 14px;} + .preview_box_photo_160 div.photo_data {text-align : center; overflow : hidden; width : 180px; white-space : nowrap; text-overflow: ellipsis; color : #666666; font-size : 10px; height : 14px} + </style> @@ -146,7 +158,7 @@ </div> <div style="padding : 15px 35px 15px 15px;"> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_minus.png" width="25" height="16" alt="" border="0"><br> @@ -155,35 +167,29 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - <strong>Shelf name</strong> :: <a href="#"><strong>7</strong> new</a> + Shelf name'll be here. Maximal lenght is no limits :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> @@ -191,87 +197,72 @@ </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> </td> <td valign="top"> - <img src="images/shell/spacer.gif" width="25" height="16" alt="" border="0"><br> - </td> - <td valign="top"> <img src="images/shell/tree_icon_album.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Album name + Album name'll be here. Maximal lenght is no limits </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -280,11 +271,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + <strong>Shelf name'll be here. Maximal lenght is no limits </strong>:: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -293,11 +284,11 @@ <img src="images/shell/tree_icon_shelf.png" width="25" height="16" alt="" border="0"><br> </td> <td valign="top" style="padding-left : 4px"> - Shelf name + Shelf name'll be here :: <a href="#"><strong>7</strong> new</a> </td> </tr> </table> - <table style="border-collapse : collapse; margin-bottom : 5px;" cellpadding="0"> + <table style="border-collapse : collapse; margin-bottom : 7px;" cellpadding="0"> <tr> <td valign="top"> <img src="images/shell/tree_icon_plus.png" width="25" height="16" alt="" border="0"><br> @@ -345,61 +336,168 @@ </div> <br><br> - <div class="preview_box_album_80"> + <div class="preview_box_album_120"> <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> </div> - - <div class="preview_box_album_80"> + <div class="preview_box_album_120"> <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="90" height="120" alt="" border="0"></a><br> </td> </tr> </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> </div> - - <div class="preview_box_album_80"> + <div class="preview_box_album_120"> <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> </div> - - <div class="preview_box_album_80"> + <div class="preview_box_album_120"> <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="90" height="120" alt="" border="0"></a><br> </td> </tr> </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> </div> - - <div class="preview_box_album_80"> + <div class="preview_box_album_120"> <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> <table cellpadding="0"> <tr> <td> - <a href="#"><img src="images/examples/photo_200.jpg" width="80" height="80" alt="" border="0"></a><br> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> </td> </tr> </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> </div> + <div class="preview_box_album_120"> + <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="90" height="120" alt="" border="0"></a><br> + </td> + </tr> + </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> + </div> + <div class="preview_box_album_120"> + <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> + </td> + </tr> + </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> + </div> + <div class="preview_box_album_120"> + <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> + </td> + </tr> + </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> + </div> + <div class="preview_box_album_120"> + <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="90" height="120" alt="" border="0"></a><br> + </td> + </tr> + </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> + </div> + <div class="preview_box_album_120"> + <img class="pr_album_bg" src="images/shell/frame_album_200.png" border="0"> + <table cellpadding="0"> + <tr> + <td> + <a href="#"><img src="images/examples/photo_200.jpg" width="120" height="90" alt="" border="0"></a><br> + </td> + </tr> + </table> + <div class="album_name"> + Album name'll be here + </div> + <div class="album_data"> + 3 Mar 2009 + </div> + </div> + <div style="width : 90%; height : 10px; float : left;">&nbsp;&nbsp;&nbsp;<div>