---

<ul id="nav">
<li><a href="#" title="Get Tickets">Get Tickets</a>
        <ul class="sub">
        <li><a href="comingsoon.html" title="Vip Seating">VIP Seating</a></li>
        <li><a href="comingsoon.html" title="Calender of Events">Calender of Events</a></li>
        <li><a href="boxoffice.html" title="Box Office Info.">Box Office Info.</a></li>
        <li><a href="omingsoon.html" title="Group Sales">Group Sales</a></li>
      </ul>
    </li>
      <li><a href="#" title="About the Ritz">About the Ritz</a>
    <ul class="sub">
        <li><a href="comingsoon.html" title="History">History</a></li>
        <li><a href="directions.html" title="Directions">Directions</a></li>
        <li><a href="comingsoon.html" title="Parking Facilities">Parking Facilities</a></li>
        <li><a href="comingsoon.html" title="Area Hotels">Area Hotels</a></li>
        <li><a href="/comingsoon.html" title="Bars & Restaurants">Bars & Restaurants</a></li>
      </ul>
  </li>
      <li><a href="#" title="Seating">Seating</a>
      <ul class="sub" >
        <li><a href="comingsoon.html" title="Front Orchestra">Front Orchestra</a></li>
        <li><a href="comingsoon.html" title="Orchestra">Orchestra</a></li>
        <li><a href="comingsoon.html" title="VIP Mezzanine">VIP Mezzanine</a></li>
        <li><a href="comingsoon.html" title="Balcony">Balcony</a></li>
      </ul>
    </li>
      <li><a href="#" title="Interior Photos">Interior Photos</a>
        <ul class="sub">
        <li><a href="comingsoon.html" title="Lobby">Lobby</a></li>
        <li><a href="comingsoon.html" title="Concession">Concession</a></li>
        <li><a href="comingsoon.html" title="Main Bar">Main Bar</a></li>
        <li><a href="comingsoon.html" title="Main Auditorium">Main Auditorium</a></li>
        <li><a href="comingsoon.html" title="Front Orchestra">Front Orchestra</a></li>
        <li><a href="comingsoon.html" title="Orchestra">Orchestra</a></li>
        <li><a href="comingsoon.html" title="VIP Mezzanine">VIP Mezzanine</a></li>
        <li><a href="comingsoon.html" title="Balcony">Balcony</a></li>
        <li><a href="comingsoon.html" title="Dressing Rooms">Dressing Rooms</a></li>
        <li><a href="comingsoon.html" title="Office">Office</a></li>
      </ul>
    </li>
    <li><a href="#" title="Venue Rental">Venue Rental</a>
    <ul class="sub" >
        <li><a href="comingsoon.html" title="Rental Info">Rental Info.</a></li>
        <li><a href="comingsoon.html" title="Private Events">Private Events</a></li>
      </ul>
    </li>
    <li><a href="concerts.html" title="Concerts">Concerts</a></li>
    <li><a href="videos.html" title="Videos">Videos</a></li></ul>
    </ul>

---

---

body {
    behavior: url(csshover.htc);
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
}
 
p a {
    color: #FFF;
    text-decoration:underline!important;

}
a{
    color:#FFF;
    text-decoration:none;
    }
p a:hover{    text-decoration: none!important;
}

ul#nav {
    list-style: none;
    padding: 0;
    margin: 0;
}


ul#nav li a {
    display: block;
    font-weight: bold;
    padding: 2px 10px;
    background:#0662a8;
}

ul#nav li a:hover{
    background:#c80000;
    color:#fff;
    }
   
ul#nav li {
    float: left;
    position: relative;
    width: 110px;
    text-align: center;
    margin-right:5px;
    border:1px solid #ccc;
    list-style: none;

}

ul#nav li.current a{
    background:#ddd;
    }

ul#nav li.current a:hover{
    background:#888;
    color: #FFF;
    }

li ul {
    display: none;
    position: absolute;
    width:100px;
    top: 0;
    left: 0;
    font-weight: normal;
    padding: 1px 0 10px 0;
    margin-left:-1px;
}

ul#nav li ul.sub li{
    border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
    font-weight: normal!important;   
}
li>ul {
    top: auto;
    left: auto;
}

li:hover ul, li.over ul {
    display: block;
}

---

<div> <ul class="nav"> <h3> <li><img src="home.jpg" /> </li> <li><img src="about me.jpg" /> </li> <li><img src="portraits.jpg" /> <ul> <li>Special Occasion</li> <li>Family</li> <li>Senior</li> <li>Couple</li> </ul> </li> <li><img src="pets.jpg" /> <ul> <li>another navigation list item</li> <li>...</li> <li>...</li> <li>...</li> </ul> </li> </ul> </div>

/*** Nav bar styles ***/ ul.nav, .nav ul{ /*Remove all spacings from the list items*/ margin: 0; padding: 0; cursor: default; list-style-type: none; } ul.nav{ width: 20ex; /*Optional, to make the navigation bar positions on the left of the content*/ float: center; margin-right: 1em; } ul.nav>li{ margin: 0; padding: 2px 6px; } ul.nav li>ul{ /*Make the sub list items invisible*/ display: none; position: absolute; width: 20ex; left: 20ex; margin-top: -1.4em; margin-left: 9px; } ul.nav li:hover>ul{ /*When hovered, make them appear*/ display : block; } .nav ul li a{ /*Make the hyperlinks as a block element, sort of a hover effect*/ display: block; padding: 2px 10px; } /*** Menu styles (customizable) ***/ ul.nav, .nav ul, .nav ul li a{ background-image: url(1.jpg); color: #000; } ul.nav li:hover, .nav ul li a:hover{ background-color: #484848; color: #fff; } ul.nav li:active, .nav ul li a:active{ background-color: #036; color: #fff; } .nav ul{ border: 1px solid #000; } .nav a{ text-decoration: none; } h3 {color: #000;}

---

/**
 * println(OutputStream os, String str) is a method for sending strings to
 * the connected client (browser) and jpeg is a byte[] array with the image.
 * write(byte[] b) is used to send bytes via the OutputStream
 */

println(os, "My image: ");
println(os, "<img src=\"");
os.write(jpeg);
println(os, "\">");

---

---

println(os, "My image: ");
println(os, "<img src=\"my_address/get_image\">");

---

<table cellpadding="0" cellspacing="0" width="446" height="362"> <!-- MSTableType="layout" --> <tr> <td valign="top" colspan="2" height="110"> <p align="center">Banner</td> </tr> <tr> <td valign="top" height="95">I want this cell to have a fixed height</td> <td valign="top" rowspan="3" width="305"> <p align="center">Text goes here - if the text is too long, I want the stretching cell to vary in height, not the other 2.</td> </tr> <tr> <td valign="top" height="68">I want this cell to have a fixed height</td> </tr> <tr> <td height="89" width="141" valign="top">Stretching/Flexible cell - I want this one to vary in height if the text on the right cell is too long</td> </tr> </table>

---

<marquee direction="left">West Coast Rovers 1 - 0 West Ham United West Coast Rovers 1 - 0 West Ham United West Coast Rovers 1 - 0 West Ham United</marquee>

---

---

<div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                    <label>Name&nbsp;*</label>
                        <input type="text" name="name" id="name" />

                    <label>Email&nbsp;*</label>
                        <input type="text" name="email" id="email" />

                    <label>Website (URL)&nbsp;*</label>
                        <input type="text" name="website" id="website" />

                    <label>Phone Number</label>
                        <input type="text" name="phone number" id="phone number" />

                    <button type="submit"><img src="http://www.webmaster-talk.com/images/submit.gif" /></button>

                </form>
            </div>

---

---

.myform{
width:245px;
height: 340px;
padding: 60px 12px 0px 12px;
font-size:13px;
color: #ffffff;
}
#stylized{
background: url(images/quote-request-2.gif) no-repeat;
}
#stylized label{
display:block;
font-weight:bold;
width:140px;
text-align: left;
margin-left: 10px;
}
#stylized input{
font-size:13px;
padding:4px 2px;
width:200px;
margin:2px 0 10px 10px;
}
#stylized button{
background: none;
border: none;
margin-left:111px;
width:109px;
height: 30px;
}

---

Attached Images

	favicon.jpg (11.5 KB)
	animated_favicon1.gif (3.0 KB)