This Weeks Progress

Well I have completed my next 4 pages and I am getting pretty comfortable using CSS. The only problem that I have is that what looks perfect in Firefox looks screwed up in IE and vise versa. I have a feeling that I will have to design this site in both a Firefox and IE version before I go into the portfolio classes. Even though IE is out-dated, there is still a vast majority of people who use it. Oh well, I know in Javascript that there is a method that can check the browser that the user is using and from there I could use a simple if statement to determine which version of my site to display.

Creating Rounded Tabs In Css

After spending hours of searching and testing I have found the best and easiest way to create the rounded tabs using Css.

The site www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml was the best resource for me on creating tabs the rounded tabs. The site uses small corners 10px X 10px to use as the rounded upper part of the tabs. They also make good use of both the div and the span tags to attach the rounded 10px X 10px tabs into the background of the menu.

I strongly recommend this site as a resource for anyone trying to create tabs. One of the many sites that I came across for creating rounded tabs in Css only, didn't allow the tabs to change color when rolled over and was a lot more complicated in trying to understand what they did.

Update on Website

After creating the first page using CSS, I have come across a cross-browser incompadiability issue. For some reason the code shows up perfectly in IE, but when I open it in Firefox, or Safari, the menu tabs don't display correctly. I keep changing different elements and through changing the position from realitive to absolute, but nothing seems to fix it in the Firefox or Safari browsers.

A minor issue that I ran into after creating the site, is that I did my flow chart after scripting the first two pages for class. But it not that big of an issue, and can be corrected in about 5 mins. The above issue is the one that is giving me the headace though.

My Design Process

Before I started writing down anything on paper, I first did a little research. By looking through a lot of technical service sites, I got a good feeling about what has been and what should not be done. Most of the technical sites hurt my eyes, because of their poor layout or lack of design. When it came to the design of this site, it was apparent to me that I would have to use concepts that are apparent in well-designed sites to breath new light into this technical field of web sites.

After finding several reference sites, I began to sketch elements that I liked from each of them and started to put them together to see if I like how they flowed together. Then by remembering what I've learned from previous classes on designing for the user, I tried to come up with a simple navigation system that would be easily used by the user. I think that my last 2 comps do the best job of that by utilizing a tab format to contain a lot of information into a well-organized format.

The overall theme I tried to portray into my design was the feel of technology, by making mechanical and circuit board type looking borders. I tried to keep it simple sticking with solid color vectors that could be saved as small file sized gifs. I then borrowed some pictures from Dell and used Photoshop to make them look like they came from Goode Technical Services Company.