How to make a glossy menu bar or button and use it on the web

Open Photoshop, create an image of whatever size you desire(I use 200x30 for my example, so I can get an idea of what it will look like.)


Next Fill In with whatever color you like, this will be our base color.



Once the image is filled in, we need to add some layer style to it, so right click the layer and select blending options and use these parameters:




Now we need to create a new layer, and use the rectangular selection tool to select half of our image:


Now, use the color dropper and we are going to click on the pixel above the very bottom one for our color:



Select the gradient tool, and make sure that the gradient is set to Foreground to Transparent at the top. Drag from the top of the bar to about 2/3's down(make sure you have just the second layer selected)


Now we have our bar! Continue on if you would like to figure out how to use this with any bar/button on your webpage:



Select an area with the width 1 pixel and height of however tall your image is and save it(I have found .png to be the best for size).

Now in your HTML create a table and in the tr tag(or your css file) simply add:

style="background-image:url(your/image/url);
background-repeat:repeat-x;"

Heres what it might look like:

Welcome!!

Here you can type stuff...yaaaaaay!!

OR make it a button!!

Button

voila we are done!!

Dot Net Nuke

I was approached with a problem, It seems that on our customer purchase page, we were not including state tax. So I was supposed to go in there and add the sales tax depending on which state was selected. Sounds simple, but DotNetNuke was a PAIN to work with. I can see why companies use it though, it is very easy to edit to those who may be a novie, but it is super frustrating when you need/want more control.First of all, it was slow to work work with, it seemed like hours for each page to load after I had edited them. On top of that, I could only be editing one thing at a time which drastically slowed me down.

Before the user had entered a two letter state code themselves, but I decided to change this to a drop down box and populate it via SQL(This was one nice feature of DNN). We had just hardcoded the price to a set value before, now it had to be dynamic. DNN allows each page to be created via a template, this one was using a dynamic forms template which essentially allowed us to use variable for each form. With each form, you could execute client side scripts(another nice feature), since it was client side I had to create a hidden textbox and depending on the state, it would return a value to that text box and add it onto the total at the end.

It seemed so easy to do at the begining, I knew exactly what had to be done. But just doing it in this new environment made is super difficult. It seems to be that way with any new language though and the more I mess with it the easier it becomes...I still think dot net nuke sucks though.

The Grid...

The application we are building makes frequent use of a grid created by ComponentArt. I can see how it would save time implementing this instead of taking the time to write your own, but sometimes it can be very difficult to work with. There is little documentation online for it, so troubleshooting is not fun. Anyways, we were approached by a customer to add a links section to our app where they can essentially post up a link that may be relavent to their bid. So we decided to use the grid, allowing the user to choose an icon relating the the link, and the link itself. After the user adds it to the grid, it becomes editable just by clicking on the row. This is where the problems started. We found this to be the source of many bugs, the AJAX controls we used for selecting the icon did not get along well with it. As well as if the user decided to sort the grid while editing, it would result in the user losing some information. I had suggested since we already had an icon for editing and deleting in the table row, we should just go with that instead of allowing a click anywhere on the grid to make it editable. But since the rest of the application had already been implemented the previous way, we decided to stick with that and just not allow sorting while editing. Not looking forward to working more with this grid, on top of that its just plain ugly!!

spacing issues...

Well I have been approached to make the landing page for the website of our company(not the application). Its long over due anyway. I have begun working on it today, it's a pretty straight forward layout. I have being throw back and forth ideas about a couple issues. I don't know if I like using tables, sometimes it seems like I would have better control creating them purely with CSS, but for right now I'm using a combination of both. Spacing between cells, table, and text has become an issue. This is what leads me to believe that just doing it purely with CSS would be the best route. Its just time consuming trying to figure out how to get the spacing perfect, the way you want it.

Besides that page we are still working on the new portal for the application, which I think we're finally getting down. We are going to do it with two releases. One release letting us ease customers into the new layout and functionality, and the second one being the completed product. Hopefully well get the first one out soon!!

can't all you browsers just get along?

While building my first "real" website(berea cemetery documentation project, it became clear to me that dealing with issues in different browsers can be a real pain in the @$$. And I think its pretty common in the web community for little things to piss us off. You can build the best web application in the world, but if your spacing is off between the header and the body, its gonna stick out like a sore thumb to you. This brought me to my first "project".

Turns out that a logon screen we had used was not displaying correctly in FF although it had been in IE. A simple logon form in asp.net was beng used, your basic everyday logon. username [textbox] password[textbox]. The text was lining up in the middle of the textbox in IE but not in FF. I thought this was either a problem with the text, textbox itself, or a problem with the CSS at first but it turns out it was with the validation we were using. A red astericks appears next to the textbox which was empty, the problem is that in IE it was displaying next to the textbox and in FF it was displaying below the text box, bumping it up and out of line with the text next to it. I made a quick fix for this by extending the table in which contained the controls by 19 pixels, but where are these extra 19 pixels coming from in FF?

During the process I have fallen in love with CSS hover-over hints and validation. A great site I found(CSS-Based Forms: Modern Solutions) provided lots of inspiration for the project.

We have also been working hard on the new portal. It will be completley reconctructed using asp.net's webparts. I think it's a GREAT tool(think of webparts as widgets) and I cant wait to dig into it soon.