Menu Buttons

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="697" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 35 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><A HREF="id28.htm" TARGET="_top" TITLE="Folding Menu Tree"><IMG SRC="3ab070e0.png" border=0 width="7" height="14" ALT="previous" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <A HREF="id47.htm" TARGET="_top" TITLE="Hidden Site Map"><IMG SRC="3ad070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A> <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >   </FONT></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton111 a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton111 a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton111> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> </div> </td> </tr><tr> <td valign="top" width=175 BGCOLOR="#AAAAAA" TEXT="#080000"> <div> <STYLE>  </STYLE> </div> <div> <B>5 vertical examples</B></div> <div> <B>in this border!</B></div> <div> Scroll down to see changes to size, color and spacing</div> <div> BUTTONS open in new tab</div> <bR> <div>  <STYLE type=text/css> #rollbutton a { color: #330000; font-size:10px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#CD853F; display: block; width: 93px; height: 30px; padding: 5px; margin: 5px; } #rollbutton a:hover { background-color: #F4A460; color:#FFFFFF; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV>  </div> <div> <A HREF="id95_m.htm#1stset___" TARGET="TRLX_Middle" TITLE="Menu Buttons">code for buttons above</A></div> <bR> <hr> <bR> <div>  <STYLE type=text/css> #rollbutton3 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #808080; background-color:#000066; display: block; width: 120px; height: 20px; padding: 5px; margin: 0px; } #rollbutton3 a:hover { background-color: #9999FF; color:#330066; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton3> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV>  </div> <div> <A HREF="id95_m.htm#2ndset_____" TARGET="TRLX_Middle" TITLE="Menu Buttons">code for buttons above</A></div> <bR> <hr> <div> <B>The THREE sets of buttons are the same except for the the outset inset settings.</B></div> <bR> <div> <B>OUTSET/inset</B></div> <div>  <STYLE type=text/css> #rollbutton4 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#000000; display: block; width: 125px; height: 20px; padding: 5px; margin: 5px; } #rollbutton4 a:hover { background-color: #FFFFFF; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton4> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV>  </div> <div> <A HREF="id95_m.htm#3rdset_______" TARGET="TRLX_Middle" TITLE="Menu Buttons">code for buttons above</A></div> <bR> <div> <B>INSET/outset</B></div> <div>  <STYLE type=text/css> #rollbutton5 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px inset #D3D3D3; background-color:#000000; display: block; width: 125px; height: 20px; padding: 5px; margin: 5px; } #rollbutton5 a:hover { background-color: #FFFFFF; color:#000000; padding-left: 3px; border:2px outset #D3D3D3; } </STYLE> <DIV id=rollbutton5> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton5> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV>  </div> <div> <A HREF="id95_m.htm#3rdset_______" TARGET="TRLX_Middle" TITLE="Menu Buttons">code for buttons above</A></div> <bR> <div> <B>INSET/inset</B></div> <div>  <STYLE type=text/css> #rollbutton6 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px inset #D3D3D3; background-color:#000000; display: block; width: 125px; height: 20px; padding: 5px; margin: 5px; } #rollbutton6 a:hover { background-color: #FFFFFF; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton6> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton6> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV>  </div> <bR> <hr> <div> <B>This button opens a PDF file into the page body (works only WITH frames or IFRAMES). uses rollbutton1 settings</B></div> <div>  <STYLE type=text/css> #rollbutton1 a { color: #000000; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#CD853F; display: block; width: 85px; height: 26px; padding: 3px; margin: 2px; } #rollbutton1 a:hover { background-color: #F4A460; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton1> <DIV><A href="http://www.samisite.com/CSB4_UserGuide_draft.pdf" target="TRLX_Middle" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()"><center>PDF</center></A> </DIV> </DIV>  </div> <div> <A HREF="id95_m.htm#middle" TARGET="TRLX_Middle" TITLE="Menu Buttons">code for buttons above</A></div> <hr> <bR> <bR> <div>  <STYLE>  </STYLE>  </div> <div> <B>For one last example,</B></div> <div> <B>look below.</B></div> <div> <B>These are</B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B> </B></FONT><FONT SIZE="2" COLOR="#FFFFFF" FACE="Arial" ><B>not</B></FONT><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B> </B></FONT><B>buttons.</B></div> <div> <B>It's just a table with regular links in it! </B><B> Mouseover only happens over the word!</B></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="2" WIDTH="134" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#00BFBF HEIGHT= 16 WIDTH="126"><div> <A HREF="../csbtrellix.htm" title="Frequently Asked Questions" onfocus="this.blur()" TARGET="_top" TITLE="../csbtrellix.htm" title="Frequently Ask"><B>F.A.Q.</B></A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#00BFBF HEIGHT= 16 ><NOBR><div> <A HREF="../webbuild.htm" title="Favorite Tools!" onfocus="this.blur()" TARGET="_top" TITLE="../webbuild.htm" title="Favorite Tools!""><B>WEB RESOURCES</B></A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#00BFBF HEIGHT= 16 WIDTH="126"><div> <A HREF="http://www.samisite.com/test-csb2nf/id43.htm" title="IFRAME Tutorial!" onfocus="this.blur()" TARGET="_top" TITLE="http://www.samisite.com/test-csb2nf/id43"><B>IFRAMES</B></A></div> </tD> </tR> </TABLE></div> <bR> <bR> <bR> <bR> </td> <td valign="top" height=430 width="100%" BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <B><STYLE>  </STYLE></B></div> <DIV ALIGN="LEFT"></DIV> <div> <A HREF="index.htm" TARGET="_top" TITLE="Test Index">Test Index</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id25.htm" TARGET="_top" TITLE="Table 1">Table 1</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id36.htm" TARGET="_top" TITLE="Table 2">Table 2</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id129.htm" TARGET="_top" TITLE="Table 3">Table 3</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id99.htm" TARGET="_top" TITLE="Table 4">Table 4</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id133.htm" TARGET="_top" TITLE="Table 5">Table 5</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id169.htm" TARGET="_top" TITLE="Table Firefox">Table Firefox</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="table_css.htm" TARGET="_top" TITLE="table css">table css</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="layered_tables.htm" TARGET="_top" TITLE="Layered Tables">Layered Tables</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="resorttable.htm" TARGET="_top" TITLE="Resort Table">Resort Table</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id115.htm" TARGET="_top" TITLE="Background Image in Table">Background Image in Table</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="selectionguides.htm" TARGET="_top" TITLE="Selection Guides">Selection Guides</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id28.htm" TARGET="_top" TITLE="Folding Menu Tree">Folding Menu Tree</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><B>Menu Buttons</B><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id47.htm" TARGET="_top" TITLE="Hidden Site Map">Hidden Site Map</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id137.htm" TARGET="_top" TITLE="Anchors">Anchors</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id55.htm" TARGET="_top" TITLE="Double Border Detail">Double Border Detail</A></div> <bR> <div> <B>Rollover Menu Buttons </B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </FONT></div> <bR> <div> <B>NOTE: Samples on this page updated to Work fully in IE and FireFox!</B></div> <div> <B>Buttons that use no images, no javascript, cross-browser acceptable.</B></div> <bR> <div> <B> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="394" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 31 ><NOBR><div> <B>horizontal buttons:</B></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="89"><div>  <STYLE type=text/css> #rollbutton1 a { color: #000000; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#CD853F; display: block; width: 85px; height: 26px; padding: 3px; margin: 2px; } #rollbutton1 a:hover { background-color: #F4A460; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton1> <DIV><A href="http://www.samisite.com/CSB4_UserGuide_draft.pdf" target="_self" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()"><center>PDF</center></A> </DIV> </DIV>  </div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="89"><div>  <DIV id=rollbutton1> <DIV><A href="javascript:void(0)" ONCLICK="open('http://www.samisite.com/test-csb2nf/texts2.htm','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=01,width=325,height=250')" title="One of my FAVORITE search portals" onfocus="this.blur()"><center>MINI</center></A> </DIV> </DIV>  </div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 96 ><NOBR><div> <B>I place them inside a table</B></div> <div> For easier viewing, I made the cells</div> <div> white so you can see the table behind</div> <div> the buttons.  Usually the table and</div> <div> cells are transparent behind buttons.</div> </NOBR></tD> <tD VALIGN=TOP WIDTH="89"><div> This opens a pdf document in </div> <div> THIS FRAME</div> <div> press <B>BACK</B> arrow to</div> <div>  return to this page!</div> </tD> <tD VALIGN=TOP WIDTH="89"><div> This button opens a MINI window.</div> <div> It even has a miniature version of the button tied to close window on it!</div> </tD> </tR> </TABLE></B></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="578" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 112 WIDTH="261"><div>  <STYLE type=text/css> #rollbutton2 a { color: #F5F5F5; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#808080; display: block; width: 160px; height: 25px; padding: 5px; margin: 10px; } #rollbutton2 a:hover { background-color: #F5F5F5; color:#808080; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton2> <DIV><A href="http://www.samisite.com/CSB4_UserGuide_draft.pdf" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()" target="_blank"><center>CSB4 User Guide</center></A></DIV> </DIV>  </div> <div> Shows the button can be used alone</div> <div> This button opens a NEW window</div> </tD> <tD VALIGN=TOP WIDTH="306"><div> This button uses the same style settings as the buttons above.  Any new buttons using that style just need the DIV section!</div> <div> This button opens in same window</div> <div> remember to press <B>BACK</B> arrow to return to this page!</div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="142" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 31 WIDTH="136"><div>  <STYLE type=text/css> #rollbutton7 a { color: #C0DCC0; font-size:16px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 130px; height: 40px; padding: 3px; margin: 2px; } #rollbutton7 a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton7> <DIV><A href="http://www.samisite.com" title="Samisite Home Page" onfocus="this.blur()" target="_top"><center>SAMISITE HOME PAGE</center></A></DIV> </DIV>  </div> </tD> </tR> </TABLE></div> <bR> </tD> </tR> </TABLE></div> <bR> <div> <B>GENERAL INSTRUCTION:</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">If you have more than one set of buttons on a page like this one does, then rename the next version so they do not interfere with each other.  Notice that in the scripts, the buttons are named <B>rollbutton, rollbutton1, rollbutton2, rollbutton3, rollbutton4, rollbutton5, rollbutton6, rollbutton7   </B> </div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Each group of buttons must have a Style setting section of code, then each button is added after that.  <B>Style settings are put into the page only 1 time</B> no matter how many buttons are used or where they are placed. After you have put the Style code in, after that you only use DIV code sections!</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Change the Style codes at the beginning of the code to adjust the color of the button, size, space between buttons, etc.  The button examples to the left show some of the adjustments you can do...just play with the codes until you find the right combination.</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The DIV style for the type of button you want is flexible.  You can pick and choose which ever suits the need for that particular link.  Several options are below.</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For each button, change the <FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>link</B></FONT>, the <FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>rollover title</B></FONT>, and the <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" ><B>button name</B></FONT> to your own</div> <div> <A HREF="http://www.samisite.com/test-csb2nf/id141.htm" TARGET="_blank" TITLE="http://www.samisite.com/test-csb2nf/id14"><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Can also define the target (where your link opens), read this page for details..</A> (same window, new window, frame, etc)</div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">These codes are placed into your webpage using Insert > HTML (or webgem in Trellix)</div> <bR> <bR> <div> <B>The following are the individual button codes:</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For a regular button opening in the </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>same window</B></FONT><B> use this DIV:</B></div> <div> <DIV id=rollbutton></div> <div> <DIV><A href="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >http://www.samisite.com</FONT>" title="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >Samisite Home Page</FONT>" onfocus="this.blur()" target="_top"><center><FONT SIZE="1" COLOR="#0000FF" FACE="Arial" >SAMISITE HOME PAGE</FONT></center></A></DIV></div> <div> </DIV</div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For a regular button opening into a </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>mini popup window</B></FONT><B> use this DIV:</B></div> <div> <B>You can adjust to have scrollbars or not by changing the code:  0= no, 1 = yes </B></div> <div> <DIV id=rollbutton1></div> <div> <DIV><A href="javascript:void(0)"</div> <div> ONCLICK="open(<FONT SIZE="1" COLOR="#990033" FACE="Arial" >'http://www.samisite.com/test-csb2nf/texts2.htm</FONT>','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=01,width=325,height=250')" title="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >One of my FAVORITE search portals</FONT>" onfocus="this.blur()"><center><FONT SIZE="1" COLOR="#0000FF" FACE="Arial" >MINI</FONT></center></A> </DIV></div> <div> </DIV></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For a regular button opening into a </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>new window</B></FONT><B> use this DIV:</B></div> <div> <DIV id=rollbutton1></div> <div> <DIV><A href="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >../CSB4_UserGuide_draft.pdf</FONT>" title="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >CSB4 User Guide - Sample PDF Document</FONT>" onfocus="this.blur()"  target="_blank"><center><FONT SIZE="1" COLOR="#0000FF" FACE="Arial" >CSB4 User Guide</FONT></center></A></DIV></div> <div> </DIV></div> <bR> <bR> <div> <B> <A NAME="middle"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>----------------------------------------------</B></div> <div> <B>Special Note Using Frames:</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For a regular button IN MIDDLE/PAGE BODY FRAME, opening into a the </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>middle frame/page body </B></FONT><B>use this DIV:</B></div> <div> <DIV id=rollbutton1></div> <div> <DIV><A href="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >http://www.samisite.com/CSB4_UserGuide_draft.pdf</FONT>" target="<B>_self</B>" title="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >CSB4 User Guide - Sample PDF Document</FONT>" onfocus="this.blur()"><center><FONT SIZE="1" COLOR="#0000FF" FACE="Arial" >PDF</FONT></center></A> </DIV></div> <div> </DIV></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For a regular button IN TOP OR LEFT FRAME, opening into a the </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>middle frame/page body </B></FONT><B>use this DIV:</B></div> <div> <DIV id=rollbutton1></div> <div> <DIV><A href="<FONT SIZE="1" COLOR="#990033" FACE="Arial" >http://www.samisite.com/CSB4_UserGuide_draft.pdf</FONT>" target="<B>TRLX_Middle</B>" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()"><center><FONT SIZE="1" COLOR="#0000FF" FACE="Arial" >PDF</FONT></center></A> </DIV></div> <div> </DIV></div> <bR> <div> The same style code 1st horizontal button has been put into this page twice.</div> <div> Since this page has frames, the style code for the middle and left border are treated separately.</div> <div> So the code was inserted once in page body, and once in left border.</div> <div> Code produces a gold button that says PDF</div> <div> In both cases, the link opens in a Middle/Page Body of main window</div> <div> <B>----------------------------------------------</B></div> <bR> <bR> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 346 WIDTH="556"><div>  <FONT SIZE="3" COLOR="#CC9900" FACE="Arial" ><B>SAMPLE HORIZONTAL BUTTONS</B></FONT><FONT SIZE="1" COLOR="#CC9900" FACE="Arial" > </FONT>      </div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 opens in middle frame, 1 opens a mini window (side by side in separate cells of table) </B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">2 separate inserted HTML codes - ONE FOR EACH BUTTON</div> <bR> <div> <B>1ST BUTTON - USE </B><FONT SIZE="3" COLOR="#0000FF" FACE="Arial" ><B>STYLE</B></FONT><B> CODES AND DIV</B></div> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton1 a { color: #000000; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#CD853F; display: block; width: 85px; height: 26px; padding: 3px; margin: 2px; } #rollbutton1 a:hover { background-color: #F4A460; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton1> <DIV><A href="http://www.samisite.com/CSB4_UserGuide_draft.pdf" target="_self" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()"><center>PDF</center></A> </DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this set of b</B><B>uttons: </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>rollbutton1</B></FONT><B>.  </B></div> <bR> <bR> <div> <B>2ND BUTTON - MINI - USE DIV ONLY   </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">if you have more than 2 buttons, each extra button is just the DIV code for it. </B></div> <div> <B>choose any you want to use...I used the mini pop-up window button</B><B>:</B></div> <bR> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="code2"> <a class="highlighttext" href="javascript:HighlightAll('code2.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <DIV id=rollbutton1> <DIV><A href="javascript:void(0)" ONCLICK="open('http://www.samisite.com/test-csb2nf/texts2.htm','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=01,width=325,height=250')" title="One of my FAVORITE search portals" onfocus="this.blur()"><center>MINI</center></A> </DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this set of buttons: </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>rollbutton1</B></FONT><B>.  </B></div> </tD> </tR> </TABLE></B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 89 ><NOBR><div> <B>3RD BUTTON - SamiSite Home USE </B><FONT SIZE="3" COLOR="#0000FF" FACE="Arial" ><B>STYLE</B></FONT><B> CODES AND DIV  </B></div> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="code3"> <a class="highlighttext" href="javascript:HighlightAll('code3.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton7 a { color: #C0DCC0; font-size:16px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 130px; height: 40px; padding: 3px; margin: 2px; } #rollbutton7 a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton7> <DIV><A href="http://www.samisite.com" title="Samisite Home Page" onfocus="this.blur()" target="_top"><center>SAMISITE HOME PAGE</center></A></DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this set of buttons: </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>rollbutton7</B></FONT><B>.  </B></div> </NOBR></tD> </tR> </TABLE></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 154 ><NOBR><div>  <FONT SIZE="3" COLOR="#777777" FACE="Arial" ><B>SINGLE GRAY BUTTON</B></FONT><FONT SIZE="1" COLOR="#777777" FACE="Arial" >  </FONT>      <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>USE </B></FONT><FONT SIZE="3" COLOR="#0000FF" FACE="Arial" ><B>STYLE</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> CODES AND DIV</B></FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Opens in a new window</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 inserted HTML code</div> <bR> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="single"> <a class="highlighttext" href="javascript:HighlightAll('single.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton2 a { color: #F5F5F5; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#808080; display: block; width: 160px; height: 25px; padding: 5px; margin: 10px; } #rollbutton2 a:hover { background-color: #F5F5F5; color:#808080; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton2> <DIV><A href="http://www.samisite.com/CSB4_UserGuide_draft.pdf" title="CSB4 User Guide - Sample PDF Document" onfocus="this.blur()" target="_blank"><center>CSB4 User Guide</center></A></DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this button: </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>rollbutton2</B></FONT><B>.  </B></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 137 ><NOBR><div> <FONT SIZE="3" COLOR="#CC6600" FACE="Arial" ><B> <A NAME="1stset___"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><B>LEFT BORDER BUTTONS</B></FONT> (1st set)    <FONT SIZE="1" COLOR="#000000" FACE="Arial" >              </FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">All open in a new window/tab</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 inserted HTML code for the whole column of buttons</div> <bR> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="left1"> <a class="highlighttext" href="javascript:HighlightAll('left1.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton a { color: #330000; font-size:10px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#CD853F; display: block; width: 93px; height: 30px; padding: 5px; margin: 5px; } #rollbutton a:hover { background-color: #F4A460; color:#FFFFFF; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this button: </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>rollbutton</B></FONT><B>.  </B></div> </NOBR></tD> </tR> </TABLE></B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 190 WIDTH="556"><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > <A NAME="2ndset_____"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></FONT><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>LEFT BORDER BUTTONS</B></FONT> (2nd set)      <FONT SIZE="1" COLOR="#000000" FACE="Arial" >            </FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">All open in a new window/tab</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 inserted HTML code for the whole column of buttons.  Only show the style codes below.  Same DIV as previous version of code.</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Besides changing colors to purples, these buttons are thinner (height) and wider (width) with more spacing between (margin) </B></div> <bR> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="left2"> <a class="highlighttext" href="javascript:HighlightAll('left2.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton3 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #808080; background-color:#000066; display: block; width: 120px; height: 20px; padding: 5px; margin: 0px; } #rollbutton3 a:hover { background-color: #9999FF; color:#330066; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton3> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton3> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this button: </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>rollbutton3</B></FONT><B>.  </B></div> </tD> </tR> </TABLE></B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 244 WIDTH="556"><div> <B> <A NAME="3rdset_______"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><B>LEFT BORDER BUTTONS</B><FONT SIZE="1" COLOR="#000000" FACE="Arial" ><B>  (3rd & 4th & 5th Black set)    </B></FONT><FONT SIZE="1" COLOR="#6600FF" FACE="Arial" >  </FONT><FONT SIZE="1" COLOR="#000000" FACE="Arial" >           </FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">All open in a new window/tab</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">1 inserted HTML code for the whole column of buttons, but only show the style codes below.  Same DIV as previous version of code.   </div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Besides changing colors to black and white, t</B><B>h</B><B>e second version of these buttons are opposite the first set!  They start  inset and po</B><B>p out on rollover!  The last version shows buttons that are inset and stay inset on rollover. </B></div> <div> <B>border:2px </B><FONT SIZE="2" COLOR="#0000FF" FACE="Arial" ><B>outset</B></FONT><B> #D3D3D3;         OR</B></div> <div> <B>border:2px </B><FONT SIZE="2" COLOR="#0000FF" FACE="Arial" ><B>inset</B></FONT><B> #D3D3D3;</B></div> <bR> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B> <form name="left3"> <a class="highlighttext" href="javascript:HighlightAll('left3.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <STYLE type=text/css> #rollbutton4 a { color: #FFFFFF; font-size:9px; font-family: verdana; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#000000; display: block; width: 125px; height: 20px; padding: 5px; margin: 5px; } #rollbutton4 a:hover { background-color: #FFFFFF; color:#000000; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton4> <DIV><A href="../webbuild.htm" target="_blank" title="Other Resources for CSB & Web Design" onfocus="this.blur()"><center>Web Building Resources</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../csbtrellix.htm" target="_blank" title="Read these!" onfocus="this.blur()"><center>CSB Frequently Asked Questions</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../photo" target="_blank" onfocus="this.blur()"><center>Work with Photos</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="http://www.samisite.com/publish" target="_blank" onfocus="this.blur()"><center>Publish Settings</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../test-csb" target="_blank" onfocus="this.blur()"><center>Test Area 1</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="http://www.samisite.com/test-csb2nf/" target="_blank" onfocus="this.blur()"><center>Test Area 2</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../extras" target="_blank" onfocus="this.blur()"><center>Extra Fun Stuff</center></A> </DIV> </DIV> <DIV id=rollbutton4> <DIV><A href="../backgrounds" target="_blank" onfocus="this.blur ()"><center>Page Backgrounds</center></A> </DIV> </DIV> </textarea> </form>  </B></div> <div> <B>Look at the code - the name of this button: </B><FONT SIZE="2" COLOR="#6600FF" FACE="Arial" ><B>rollbutton4</B></FONT><B>.  </B></div> </tD> </tR> </TABLE></B></div> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 595 WIDTH="556"><div> <B> <A NAME="table"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><FONT SIZE="3" COLOR="#336600" FACE="Arial" ><B>LEFT BORDER- ROLLOVER TABLE (NON- BUTTONS)</B></FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Rollover link - changes color (to </B><FONT SIZE="2" COLOR="#CC0066" FACE="Arial" ><B>fuschia pink</B></FONT><B>), but no background color change</B></div> <bR> <div> <B>STEP 1:</B></div> <div> <B>Use Insert > HTML to place this code on your page to remove underlines from </B><B>all</B><B> links.   Since this site is published </B><I><B>with frames</B></I><B>, and the code to change the links is placed in the left border only, the rollover effect NO UNDERLINE is only in the left border!  </B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">To turn off underline too as shown in the green table example and other left border links:</B></div> <div> <STYLE> </div> <div>  </div> <div> </STYLE></div> <bR> <bR> <div> <B>STEP 2:</B></div> <div> <B>Build a table.  Place links in the table as usual.  </B></div> <div> On rollover, the links will change color because of the inserted style code.</div> <bR> <div> (NOTE:  CSB4 has built-in rollover settings, but it will automatically change the color background and the font!   <A HREF="http://www.kwsupport.com/csb/" TARGET="_blank" TITLE="http://www.kwsupport.com/csb/">See KW's site for example</A>.  All his links on the home page have a YELLOW background when rolled over. In order to use this in CSB4 all your frames must have the same setting.</div> <div> <IMG SRC="1eb4b140.gif" border=0 width="75" height="20" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"> </div> <div> This example/test page was made with CSB4, but did not use the built-in capabilities.  Using the Style code intead allowed  the links in this area to stay maroon with an underline, while the border links turn green!)</div> </tD> </tR> </TABLE></B></div> <bR> </td> </tr></table></body>