I wanted to make a profile layout that was "simplified", yet interesting at the same time. Combining a few sections into one frame set was what I was going for. The multimedia was something that I wanted to emphasize on (I love music after all). Another thing that was important was to have the layout look and work correctly in different browsers.
Most Gaia profiles look good in Firefox. HOWEVER, the results differ in other browsers such as Netscape, Opera, Camino, Safari, etc. Don't worry about Internet Explorer (a.k.a. "Internet Exploder" wink . Here are a few things to take a note of:
1. "Opacity":
Quote:
The "opacity" function may yield funky results in older versions of Safari on Mac's. I'm not sure about PC browsers. One good example are some custom MySpace profiles. You'll notice how difficult it is to scroll down the page.
2. "Mind your P's and Q's" (Also known as "Check your punctuation/Proofread your HTML" wink :
Quote:
This old fashioned saying should be imposed on some people in these forums ... *ahem* Most of the time, one browser will display your CSS coding without any problems. Others will stress you out because of one small error. Many people tend to confuse the semicolon with the colon. I have also seen cases where some of you have repeated the same code in your section which can also screw up your layout in certain browsers.
Those that "copy and paste" your code without any knowledge of HTML or CSS are guilty of this small misdemeanor.
3. "Transparent Header":
Quote:
If you have nothing in your header, and didn't designate a color you will see the default Gaia Online header. This error is only seen in Safari. A quick solution is to designate a background color or put in an image to fill up that space.
To designate a background color in your header, do the following:
#header {background: #000000;}
To designate a background picture in your header, do the following:
#header {background: transparent url(http://imagegoeshere) no-repeat; border: none;}
*More on correcting this situation later*
4. "Isolating CSS problems"
Quote:
We all have one part (or a few) profile tweaks that can drive us bonkers. The best way is to isolate a profile problem is to put the following after your Section ID. For example:
#multimedia {display:none;}
#multimedia is your section ID while {display:none;} hides your multimedia window. Always work on your problems one at a time. This uses your time more efficiently.
5. "Keep a backup text file of your HTML code.":
Quote:
If you mess up, then you have something to fall back on. Always remember to update your text file if you're satisfied with what you have.
6. "Common profile annoyances":
Quote:
Please think of the person that comes to see your profile. Things such as:
- Very loud background music that can't be turned off (and/or or lower volume)
- Tons of random anime fanart (sometimes stolen) scattered about in the background. I will report you immediately if I see any stolen art.
- Custom cursors. It's one of those "cute" website elements. Interesting, but not always necessary. For some reason, I've noticed crosshair cursors being associated with really tiny website layouts. Most users work on 1024 x 768 resolution. If it's not done in Flash, why make it so tiny ? ... what's wrong with the default glove anyway ?
- Looping media such as YouTube clips. If you also set it to "autoplay", I will ignore your profile in an instant.
- Shrunken media. There may be some method to your madness, but you have to pull this off right.
- AMV's (Anime Music Videos). Even if you did make it, you're still using footage from an anime studio. Therefore, it is not your property. It only shows that you can splice sound and visual footage together. Put that talent to some good use and work for a video production company.
- Incorrect grammar, spelling, constant l33t sp34k. If you're from a foreign county and you have broken english than I understand. Most times, this is usually associated with trolls, spammers. and lazy typists. If most people talk the way they spell, we would all be in big trouble. Firefox has a spell checker which means that some of you have no excuse.
This is all for now. Now time for some "Good Eats".
