Miscellaneous Lesson #2
"Tips and Tricks"
Over the years I've learned a thing or two about web design. This makes me sound old, I know, but I'm not. Anyway, a vast majority of these tricks are CSS in nature because it's really interesting to come up with creative ways to use CSS properties, but there are others as well.

Design Tips - HTML Tips - CSS Tips

Design Tips:
*Invisble GIFs: Do you have too much space with a paragraph or linebreak tag? Do you have not enough? Want to learn how to create a perfect amount of space every time without using CSS? Create a 1x1 transparent GIF in your favorite image editor. Place it with the <img> tag and set its height or width to whatever value you want it to have. Voila! No more frustration.


*Monitor Resolutions: The most common monitor resolutions are 800x600 and 1024x768. Some argue that 1024x768 far outranks 800x600 in popularity, but I continue to design for both of them. When creating a fixed-width layout (or one whose width is an actual number instead of a percentage), you shouldn't make it more than 750 pixels wide. The scrollbar in a browser window is approximately 20 pixels wide itself (I say approximately because some Firefox themes have pretty wide scrollbars) so you're safer leaving 50 pixels of extra space. With fluid (percentage-based) designs, don't make the width larger than 100%.


*Web Developer Extension: Did you know that there is a Web Developer extension available for Firefox? It assists you with the creation of websites. You can check your code for errors, learn about a page's size information, view source code, and more. Click here to install it.

back to the top


HTML Tips:
*Graphical Borders: The usual way to use graphical borders is to use an HTML table but you can also use CSS (make the border images the backgrounds of layers). You have to set the height and width of the corners, the height of the top and bottom edges, and the width of the left and right edges to the sizes of your border. Don't forget to set both the cellpadding and cellspacing to "0". You should set the border to "0" also. (FYI: This fancy border was made in Photoshop by fragmenting (Filter > Pixelate > Fragment) a solid border twice.)


content


content


*Border Color In Tables: The bordercolor attribute was phased out of the <table> tag completely in HTML 4.01. To enable colored borders in your tables, set the table background to the color you want the border to be, set each table cell to the background color you want, then alter "cellspacing" to your heart's content.
<table cellpadding="0" cellspacing="1" bgcolor="#000000" align="center">
<tr><td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td></tr>

<tr><td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td></tr>

<tr><td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td>
<td width="20" height="20" bgcolor="#FFFFFF"></td></tr>
</table>


*Bookmarks: In long documents (like this one) it just makes sense to include a bookmark or two at the top of the page so that people can find what they're looking for quickly. Consider these identical to the "table of contents" in books. To create a bookmark, you use two anchors: one as the "sender" and one as the "receiver".


Sender
<a href="#section2">Section 2</a>
Receiver
<a name="section2"></a>
The number sign is necessary for the link to act as a bookmark. For the "receiver" it's fine if you don't have any text between the opening and closing of the anchor. Just remember to place it where you want the bookmark to be.

Let's not forget about another type of bookmark: the one that takes you back to the top of the page. In Internet Explorer you only need the "sender" but in Firefox (and possibly Netscape) you also have to place a "receiver" at the top of the document (within the body) so that the browser knows to go there.


Sender
<a href="#top">back to the top</a>
Receiver
<a name="top"></a>
back to the top


CSS Tips:
*Resolution Scaling: Visitors use different monitor resolutions to view your site. Most are either going to use 800x600 or 1024x768 but there will be some still using 640x480 or using the widescreen resolution 1280x800. In order to design your websites so that the majority of visitors can view it without ending up with the dreaded horizontal scroll bar, make sure that you use percentages for all your widths (unless you don't mind making small fixed-width designs that look tiny in larger resolutions) and that you use percentages for your font sizes. It's actually better to use pixels for font sizes, though, since pixels will automatically adjust themselves across resolutions.

Percentages are always based on a concrete, non-percentage size. For example, if you make the width of your main content area 50% then it's 50% of the entire browser window. With fonts, you're basing it on a concrete font size. Often this will be whatever font size you have in the body. For example, in the body you declare that the font-size is 9pt. Later on you want a header to be 110% the size. The font size of the header will scale itself to be 110% larger than the original 9pt size.


*Multi-Browser Centering: The most common ways to center <div> and <p> elements is to set a width and use "auto" for the left and right margins. Unfortunately this doesn't work in Internet Explorer under certain circumstances. For a trick that always works, use a percentage on the left and right margins instead (don't set the width and use the same percentage).


*The Child Selector Hack: The child selector (>) is a CSS selector that Internet Explorer 6 and older ignores completely. Why is this a good thing? Because you can use it to hide code that you don't want IE to execute because it will parse it incorrectly. It's difficult to explain. One of my eFiction skins, Silver Vegeta, is made up of two different designs. This wouldn't have been possible if most versions of IE didn't ignore child selectors. A better example is the Germination design from CSS Zen Garden. Not only are there two different designs but they also have two completely different layouts.

To use this correctly you must target the direct descendant of an element, separated by ">". "Table>td" won't work, but "table>tr" will. html>body (element) will always work as "body" is always a direct descendent of "html". As of IE7, this hack doesn't work anymore. Neither does any other hack used to hide code that IE can't process correctly. Hacks (though frowned upon) are still useful as there will still be people using older versions of IE, especially when you are using CSS techniques that will cause IE to go crazy.
html>body>#container>#header>p {margin-top:0px;}
*Forcing Layers to Surround Floated Children: Parent layers won't surround its floated children by default. In order to change this, add an empty layer with the property "clear:left;" or "clear:right;" or "clear:both;" (whichever's appropriate). In Internet Explorer the parent layer of this example will surround the children automatically.
<div style="background-color:#406480; width:150px; padding:3px;">
<div style="background-color:#FFF; width:50px; height:50px; color:#000; float:left; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:60px; height:50px; color:#000; float:right; border:1px solid #000;">float #2</div>
</div>
float #1
float #2
<div style="background-color:#406480; width:150px; padding:3px;">
<div style="background-color:#FFF; width:50px; height:50px; color:#000; float:left; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:60px; height:50px; color:#000; float:right; border:1px solid #000;">float #2</div>
<div style="clear:both;"></div>
</div>
float #1
float #2


*Drawing A Border Around Your Entire Content When Using Floats: There are actually two different ways to accomplish this (that I know of, at least).

*Vertical Navigation Bars and Maximum Browser Window Usage: I've had a lot of problems with eFiction skins when I wanted to create a vertical navigation bar but didn't want to use a fixed-with layout so that all of the available browser space is being used effectively. If you absolutely position your navigation and place a margin on your container so that it isn't underneath it then you will always use the largest available space. Example: http://www.gokugirl.com/test2/index.php?skin=Aquaberry


*Negative Margin Effect: I originally saw this used on glish.com and have used it in two eFiction skins of mine: Strawberry Shortcake and Marine. By using a negative margin on a child element you can cause it to expand beyond the parent element. By adding a border to that side you can create a nice effect. It works on floats but not on absolutely positioned elements as they're being ignored by everything else. I don't know about fixed or relatively-positioned elements. Unfortunately, this effect doesn't work well in Internet Explorer.
<div style="background-color:#406480; width:70px; padding:3px; color:#FFF; border:1px solid #000;">
<div style="background-color:#FFF; width:50px; height:50px; margin-left:-7px; color:#000;
float:left; border-width:1px 1px 1px 5px; border-style:solid; border-color:#000;">child</div>
<div style="clear:left;"></div>
</div>
child


*Outside Footers (When Using Floats): This is a little hard to explain, so I'm going to show you an example.. Scroll down to the bottom. Do you see how the footer (copyright info) is outside the border drawn around everything else? There are two methods for this.

*Single Line Navigation Menu: This is useful when creating eFiction skins since the {menu_content} variable is, by default, a bulleted list. I figured out how to do this from Lazuli's "Zenlike" eFiction skin. You have to force the list group and the list items to display on a single line by using "display:inline;". For an extra touch you can remove the bullets and add a right margin to create space between the links. It's far less code if you do it in the header or an external stylesheet since you can tell every instance of <li> with one declaration group to do what you want it to: Example: li {display:inline; margin-right:10px; list-style-type:none;}.

<ul>
<li><a href="">link #1</a></li>
<li><a href="">link #2</a></li>
<li><a href="">link #2</a></li>
</ul>
<ul style="display:inline;">
<li style="display:inline; margin-right:10px; list-style-type:none;"><a href="">link #1</a></li>
<li style="display:inline; margin-right:10px; list-style-type:none;"><a href="">link #2</a></li>
<li style="display:inline; margin-right:10px; list-style-type:none;"><a href="">link #2</a></li>
</ul>

This page was last updated on: