iPhone post

I don't know everybody does this, but if just seems appropriate when you're 3Gizzin.

CSS Horizontal Menu with Submenu

I was playing with some CSS code over the weekend. My goal was to make a cross-browser compatible horizontally tabbed menu using HTML's unordered list tag. This concept has been beaten into the ground pretty well on the web, but none of the solutions I found fit my needs.

• CSS menu file: menu.css
• Sample HTML: cssExample.html

The code here has been successfully testing in Internet Explorer 6.0 and Mozilla Firefox 2.0. Notice I did not need to use CSS conditionals for IE compatibility. I though that was a nice touch :)

CSS Code:

#menu ul {
border-bottom: solid 1px #336699;
font: normal normal bold 14px verdana;
margin: 0;
margin-top: .1em;
padding: 4px 0; /* This typically corresponds to the padding-top value in '#menu li a' */
text-align: left;
}
#menu li {
list-style: none;
display: inline;
margin: 0;
}
#menu li a {
background: #EFEFEF;
border: solid 1px #336699;
border-bottom: none;
color: #336699;
margin-right: 0em;
padding: 4px 6px;
text-decoration: none;
}
#menu li a:hover {
background: #FFF;
}
#menu li a.last {
border-right: solid 1px #336699;
}
#menu li a.selected {
background: #FFF;
border-bottom: solid 1px #FFF;
}
#submenu ul {
height: 1em;
list-style: none;
padding: 3px 0;
margin: 0;
border-bottom: solid 1px #336699;
}
#submenu li {
display: inline;
}
#submenu li a {
float: left;
padding: 3px 7px;
margin: 0;
font: normal normal bold 10px verdana;
border-right: solid 1px #EEE;
color: #336699;
text-decoration: none;
}
#submenu li a:hover {
text-decoration: underline;
}
#submenu li a.last {
border-right: none;
}

HTML Code:

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Client</a></li>
<li><a href="#">Download</a></li>
<li><a href="#" class="selected">Support</a></li>
<li><a href="#" class="last">Forum</a></li> </ul>
</div>
<div id="submenu">
<ul>
<li><a href="#">Live Chat</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#" class="last">Email</a></li>
</ul>
</div>

Consider this the base code. You can easily manipulate the functionality with PHP, C#, and JavaScript.

cssExample.html

Web-based Chat, AMPchat 2.0!

I created a web-based chat utilizing Web 2.0 technologies. It's the latest incarnation of the highly successful AMPchat platform which started over 7 years ago with it's initial release, AMPchat 1.0. Initially we used lots of Javascript and Javascript Remote Scripting to create a refresh-less web-based chat. Using .NET 2.0 technologies we were able to create a more robust, responsive, and reliable application. What's more, there is a .NET 3.5 version utilizing features like Linq and SQL Server 2005. Unfortunately, .NET 3.5 is still a bit too "green" for us to trust its security, hence the 2.0 version... for now ;)

If you would like to try AMPchat 2.0 while in BETA for free. Please leave a comment and we'll get back to you.

Video Sharing Application

PugClips.com is a video sharing application developed using PHP5/MySQL. It is intended to act as a YouTube clone and utilizes opensource technologies like Smarty, mencoder and ffdencode. It also uses the excellent JW FLV Media Player 3.14 located at jeroenwijering.com.

Some of the features include "bumping" videos (a rating system), leaving comments, creating user profiles, sharing videos with friends, and more.

Leave a comment if you would like to beta test the application for free, of course.