WikiQueer:User Page Design Center/Help and collaboration/FAQ

Welcome to the UPDC FAQ page! This page covers frequent userpage problems and gives tips on designing your userpage. If you have a frequently asked question, feel free to add it. This page exists only to help users with the design of their pages, not to design it for them. Please remember that this page treats you as if you have 0 HTML background experience, so many of the questions are in themselves a crash course in HTML markup. Please bear with us in reading the whole thing, as to understand the solution you must first understand the problem, and the problems can be quite complex. At the bottom you will also find some tips on Userpage building.

''Remember to first look over your code. 99% of userpage problems are caused by human errors, like unclosed template tags, faulty links, incorrect values, etc., all easily fixable.''

Common Userpage Issues
Q: ''My userboxes won't work! They keep making rows and won't fit where I want them, and I can't seem to fix them.''

A: This is actually one of the most common userpage issues of them all, if not THE MOST COMMON. The problem with userboxes for us userpage designers is that they are not standardized. Often there are "faulty" userboxes or ones that are constructed different from the rest. If you have a small amount of userboxes, it's best to test them individually to see which ones are causing the problems. For example, once when I was working on a userbox stack I found that one of the boxes never closed a  tag, throwing the whole thing out of whack. To correct that I put an extra  after the box.

If you have a large amount of userboxes, testing each one may be too tedious for you. Instead, you should try removing some to see what they do. Once you've spotted a problem area, test the userboxes in it to see which one is faulty. Since there's such a large amount of them, it might be best to just remove the ones that don't work. Within large stacks it's easy to "see" problem areas; for example, a single userbox throws a whole row out of synch with the rest.

There are also minor problems with certain userboxes, for example you may see userboxes that cause whitespace-probably the result of an unneeded. You can always go in and scan the userbox code for problems, but that requires knowing how they work.

Q: ''I don't get it. On my computer, my page looks perfect, but on other computers, it's thrown comepletely out of whack. Why is this and how do I fix it?''

A: One of the pricks of HTML design is that each computer reads it differently. Internet Explorer reads pages differently from Firefox and neither of them looks at the page like Chrome. In addition, there are factors with each computer themselves that can change the appearance of a page, and some browsers may not be able to read certain tags (the most infamous version being the tag, which causes text to blink, but doesn't work in Interent Explorer). In addition, WikiQueer itself has some differences; pages look different in the standard view from, say, the Classic or Colange views. All of this results in a complex web of differences that is impossible to predict fully and difficult to understand without some "professional" help.

Thankfully, that's where we come in, but you can do some troubleshooting yourself-if you know a few things first. Most likely, the difference in your page is causes by a difference in screen size or browser type. First, let's talk about screen resolution. Screen size is, literally, the "size" of your monitor. Monitors range from 10 inches on certain small netbooks to as much as 24 inches on goliath computers (at that size you literally have to turn your head back in forth to see the whole screen), or even more. What does that mean for your webpage? Much. On big monitors web pages will appear to be streatched out extra wide. This can cause missalaignment of certain things, but is not nearly as problematic as the change rendered to yout page on smaller screens. In a 10-inch screen for example, everything is squished togethor tightly and instead of being stretched, your page "shrinks;" as there is less room horizontally your page expands vertically. Now that may not seem like a problem, but it actually is-a very grave one. Images may become too large for their holders, either popping out of their "area" (on large screens they seem small as compared to the rest of the page). Text wraps outside of its border; userboxes disintergate into a mess; but the biggest problem of them all is that if your page is composed of two or more "boxes" (more on this later), they can and will pop out of place sliding your whole page laterally.

By now I have made you quite scared, haven't I? This issue, compatabilty, is the Achille's Heel, the great problem of the web builders. But enough with the complex jargon. Let's talk about solutions. Generally most complex userpages are composed of 2 or more "rows" in which you can find text, images, tables, and the assorted miscellany that make your userpage what it is. One of these rows may be narrower or wider then the other, but that's a matter of personal preference. I personally like to divide the code that makes these pages possible into three groups, arranged by their compatibility:

1)  and   tags that arrange the page based on width, in pixels. (not recommended) 2)   and   tags which arrange the page based on percentages. (better but still not recommended) 3) Tables that arrange the page based on percentages. (the best)

Most beginners arrange their pages based on pixel amounts. However this is by far the worst way because it is, for one thing, very tedious, requiring a large amount of adjustments to be made for every even minor change, but it is also by far the least compatible. By using pixels you arrange the page to be the exact fit for your computer, but not so for other computers. On bigger computers this will result in "small" pages that don't fit to the whole screen, and on smaller screens this will force horizontal scrolling, which is one of the virtues of a bad web page. In other words it is immensely affected by screen size, and screen resolution and contrast ratio as well.

To find out why the second option is also not very good we must first discuss the problem with browsers. Simply put, the problem boils down to this: every browser works differently. While it would be great, an eliminator of many headaches if browsers would all treat web pages the same, they simply don't. One of the most major differences and the biggest problem in my opinion is that they treat percents differently. Internet Explorer and a few other browsers treat percents as the W3C (World Wide Web Consortium, the "official" web standard) dictates, as a percentage of the surrounding tag; for example, if you place a  tag and make it project a box that is 200 pixels wide, and then within it place another   tag and make it 50% wide, then in Internet Explorer the tag will create a box that is 50% of the first box in width, or 100 pixels wide. However, if you are using Firefox or most other web browsers, instead the percentage will be measured against the width OF THE WHOLE SCREEN; so if your screen is, say, 1000 pixels wide, that second box will be 50% of that wide, or 500 pixels wide. That's obviously very different from the 100 pixels in Internet Explorer!

And so we finally come to the final choice-tables. This is the best choice for page design as tables, when used with screen percentages, are standardized across ALL web browsers. That's not to say that tables are perfect; they aren't, and as with many a thing they are commonly quite buggy and come with their own quirks and downsides, which is why they have their own Q/A section. But of course the golden quality of tables is that they are standardized. Create a table and make its width 100%. Now, create two cells (|- divides rows and | divides cells within rows) and make them, say, 50% and 50% each. The marvelous thing about these is that they look the same, ON ANY BROWSER. Also, when tables "shrink" they retain their contents; to see what I mean, type some placeholder words ( will also do) and then try adjusting the width of your window. You will quickly see that, regardless of the browser, the boxes will shrink and expand whilst staying in perfect ratio to one another, no matter how far you adjust it.

Unfortunaly, due to its quirks, adjusting your page to use tables instead of and is extremely difficult and tedious, and prone to going wrong. So you may need help to change the markup, or even to rebuild the page entirely piece by piece to fix it.

Q: ''I've seen people use fancy colors in their pages and all, but I still can't figure out how they work. Can you show me?''

Hmm, so you need to know about HTML color, don't you? HTML uses the hexadecimal system (HEX for short) in choosing its colors. It's a complex system and one that I do not understand as fully as I should, but basically the first four numbers give you the basic "color" in a combination of red, green, and blue values. The last two digits meanwhile give you the opacity-meaning, how see-through the color you chose is. The values range from f to 0, with f being the lightest and 0 being the darkest. They go f e d c b a 9 8 7 6 5 4 3 2 1 0 from lightest to darkest. Still, you shouldn't be poking around trying to find a color on your own; you can find color charts containing hex values and their color, and there's even one on WikiQueer that can be found here.

From this chart you can customize the colors by tinkering with their values; just be sure not to push the color value too far or else it will turn into another color altogethor. As you can see from a simple glance at the chart, #ffffff (remember to include the # sign) is pure white white #000000 is pure black. Tinker around with the color values for a while; you will eventually get to what you want. Remember however that only very light colors stand in good contrast to the standard black text.

You can also create a small variety of "standardized" colors by typing in their names: for example, green, red, blue, orange, majenta, curclean. Some of these colors are pretty cool too,

Q: How do I add a scroll box?

Well first of all I will say that this FAQ is about technical troubleshooting not stylistic tips; for that, go to the Style and other sections of the Userpage Help Center. Still this is a prevelent question among those with no HTML markup experience, so...

You can create scroll boxes, which are little boxes that scroll up or sideways, allowing you to squish more information into a small area or cut the length of a long utility, like a Userbox Stack, quite easily, and is often critical to turning your userpage from a jumbled mess to a nice and tidy masterpiece. To do this you use the "overflow" function like this: There are three types of scroll boxes-hide, scroll, and auto. Hide simply hides any text, images, etc. that goes over the boundary of the scroll box. Scroll is the "basic" variant and the one you probably think about when you see scroll boxes. These create a vertical and horizontal scroll with the box. The problem with this, and why I prefer the next type of scroll, is that it creates them EVEN IF THEY ARE UNNEEDED; meaning, it will create a horizontal and vertical scroll regardless of wether they're needed. The final one, auto, is probably the best because it only creates scrolls when needed.

Remember however that the overflow setting can't function without a height and width requirement; otherwise the box will just keep growing bigger with the size of what you put in it. With height and width, if the size inside overflows the amount given, the function will be activated.

Q: ''Gaahh! I can't make my hide box work! Can you help me?''

There are actually two ways to make a hide box; through the template and through custom HTML. While the latter is easy to use, user-friendly, and easily accessed, it's also extremely buggy. Although it requires some codeword, creating a hide box manually is ultimately more rewarding as you get a less buggy variant and more customization. Here's the basic code:

HEADING CONTENTS

Which gives you:

HEADING CONTENTS

Have fun!

Q: The Table of Contents box keeps popping up in all of the unnecessary places, is there a command line to control the box?

Indeed there is. There are actually two commands, part of a set of "magic words," which allow you to control the box. The first of. adding this to a page simply removes the Table of Contents box and prevents it from appearing. The other one,, forces the Table of Contents box to appear where the magic word is placed. Although you cannot change the internal stylings of the box, you can give it a nice slot or a pretty border if you want to this way.

If you want to create a fully customizable Table of Contents, try making your own; you can make a line link to any section on a page through Your name for the section ; for example, I can make a link to the top of the section you're reading now, Common userpage Issues, by using the code Common Userpage Issues : Common Userpage Issues. If the link doesn't work, either you misspelled the sectional heading or the heading name has since been changed. You can also link to non-headings by utilizing the useful template, which allows you to link to wherever the marker is placed through the insert: so you can link to an anchor that looks like  by using. Just add some fancy formating and a pretty border and you have your own custom Table of Contents box!

Q: Can I make the "Edit" section of a heading disappear?

Yes, with __NODITSECTION__, which disables the function. You can also avoid it by using Bold Text or a larger font size for your headings; the line can be replicated by adding a to your code (remember that you have to put it on its own line or else it won't work).

Q: ''I placed an image in my page and gave it a border, but it won't work right. What do I do?''

Images are quite quirky and can cause problems sometimes. One of these is the issue with borders. Images seem to "ignore" borders placed around them specifically if you use float. Also, when you add the frame function to them, they puff up to their original size even if you give a size requisite.

If an image won't seem to fit into a border, try enclosing it in a  tag and adjusting the margin. This will force the image a few pixels here or there, to right where you want it. If your problem is that the image doesn't seem to work with a border you gave it, add some extra padding (typically 2) and that should help. Also, the bottom border often refuses to appear; try adding an extra pixel of width or finetuning the "padding-bottom" value.

Q: ''I made a bunch of rows and they add up to 100%, but my page slides past the edge of the screen! Why is this?''

Often when we work with complex code we forget that besides the 100%, there are also the borders and margins, which are counted outside the 100%. For example, 1if your page is made up of two rows, and each box has a border 1 pixel deep and a margin 4 pixels deep, you'll have to add 1+1+4+4+4 to your 100%, which will stem it past the edge of the screen.

The problem with this, and why it is a pain in the neck, is that there's no easy solution, mostly because every computer has a different screen size. While a certain decimal-point percentage may seem right for you, it will look "small," ending before the edge of the screen, in big computers, and it will stem past the edge in small ones. In extreme cases it will cause the float function (which is needed to hold two rows in place) to fail which turns your two rows into one.

Try finding a percent that works for you; for example, instead of 50% and 50% use 48% and 48%. The numbers vary depending on your screen size and the total amount from the borders and margins on your page. Once it aligns right, if you're working on a small computer, keep it there, and if you're working in a large computer, shave a few more percents off to ensure that it will still "work" on a smaller screen.

Q: ''On my screen, this image looks perfect, but on my friend's computer, it's way too small for its placeholder! How do I fix this?''

Unfortunately, images are one of those things that cannot be determined in percents, only pixels. Again, the issue is with screen size: it may be too big here, but too small here. So your best bet is to design a page with images that aren't dependant upon the size of their placeholder. The easiest way to do this is to add the tag around your image. This will cause it to align to the center, so if the image is too small for a certain screen, it will align in the center so that it looks like it belongs. Remember to use smaller image sizes for the small-sized screens.

Q: I can't get so and so template to work!

Templates are generally a buggy, ineffective way to approach a problem. While they are very useful for somethings, notably splitting your code, keeping your sections organized, etc, they, like much of the stuff on the Internet, can "bug out." Your best solution if this happens, especially with scroll boxes and hide boxes, is just to do it manually. After all, the code has to come from somewhere, right?

Sometimes the exact vice-versa is true-you can't get a page to work with a certain section, and in this case forming a template out of it on a separate page works.

Q: How come you can't use multiple  s to make a big line break?

You can. A , to those who don't know, stands for "break," and automatically starts a new line, if you need one-useful to keep things from jamming together. However, for whatever reason, just jamming together  s doesn't work. There are two ways to fix the problem. The simplest is to just add "/" to the tag: for example,. The other way, which is useful if you want to create a big break but don't feel like typing a lot, is. Add the number of line breaks you want&mdash;for example, would create 10 line breaks. I hope this information was useful to you.

Tips
Bigger is not necessarily better.

Some pages are extremely minimalist; some are very expansive. While cramming more information into a userpage can make it feel stronger, you can also go for the minimalist approach. The most common such approach is the "HUB" style userpage: for example, here. Another is the "Tab" style page, with a central image and several tabs, like here. Generally I would consider "minimalist" to be any page that requires no scrolling.

Be creative.

You can't have a great userpage without some creativity. You score big points for being creative with your userpage design. Also, there's no penalty for "stealing" an idea from someone else, just be sure to change it around and make it yours or otherwise give them credit for the idea.

Experiment and don't be afraid to ask for help.

You're highly encouraged to experiment with markup; in the same line as being creative, it also gives you some valuable experience with HTML. After all, what's a userpage if you can't understand the code on it? And don't be afraid to ask for help if you get stuck.

Follow a theme.

You'll find that all of the best userpages follow a certain theme. You can't have a great page if all it is is a loosely tied assortment of random boxes and tidbits of information. I learned that during my experimentations on my own userpage, and it's an important thing to know.

Express yourself.

What do I mean by express yourself? Well, except for minimalist pages and special designs the "meat" of most userpages is the bio of the person behind it. Too many userpages suffer from a lack of information; simply put, the only interesting non-templated thing on their page is a short sentence or, at most, two. Good userpages have long bios. Who are you? Where do you live? What are your hobbies? What is your job? What kind of work do you do here at WikiQueer?

Mix and match your colors and fonts.

I'm pretty sure that, stylistically, color and font are the things which affect a page's appeal the most. Because, let's face it, bland white colors and "standard" fonts are dull. Spice it up with some nice colors (blue is the pronounced favorite) and a nice font that matches the theme of your page. For example, if you're trying to present yourself as a geek use a Common-but-curvy font like Comic Sans MS; if you're trying to present yourself as a gentle person choose French MS or the like. And so on; it really varies by your page and your personal preference. But let's face it, bland and bleak are common, and no one likes common.

Use images.

Pictures are worth a thousand words, or so the saying goes. Anyway, pictures are a really good way to take up some room and spruce your page up. Some userpages even base their design on a radical combination of images to get their point across. Still they are nice placeholders and give the eyes something to admire besides text.

Everything has its place.

Everything on a page has its place. In keeping order within your page you make it clean, tidy, and likeable. In the usual arrangement, the links go on top, the userbox stack in a scroll box in a secondary column to the right (or left), the text in the main column along with any prevalent images, and the user keys and copyright bars at the bottom. You can mix this up if you like and make it any way you want it.