September 2009 Archives

There are three basic styles for non-graphic bullets for a list.

• Square
• Disc
• Circle

They may be used in conjunction with one another on one page where there is a need to indent as in an outline, or they may be used individually for one list.

The square bullet:

The disc bullet:

The circle bullet:

There's one thing to keep in mind when attempting to change the appearance of your bullet. If your CSS has the bullet style built in it would be necessary to have an alternate code to use these three bullet styles.

Design in art, is a recognition of the relation between various things, various elements in the creative flux. You can't invent a design. You recognize it, in the fourth dimension. That is, with your blood and your bones, as well as with your eyes.
- D.H. Lawrence

goto & tag advertising, apple, computers, copyright, copywrong, css, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows

Unless you're trying to achieve a design for exploration only, the navigation structure should always be kept simple.

Here's an example of a fun site, but it has no practical purpose.

• a fun flash site

Pretty cool, huh? I personally enjoy visiting sites like this and admire the creativity, but...

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius and a lot of courage to move in the opposite direction.
- E.F. Schumacker

goto & tag advertising, apple, computers, copyright, copywrong, css, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows

When it comes to sites such as this blog who offer design tips, there's nothing I find more aggravating than an incomplete explanation of how to accomplish a design technique.

I've observed there are designers who offer a portion of the whole without telling you it's only a portion and then there's a note like..."If you have any problems you can email me at suchandsuch@ihelpedyou.com"

That's a good way to make contact with a potential client.

I figure it this way. If you already know how to do anything posted on this blog then you don't need the information and if you've found this blog and do need the information, you've probably already made the conscience decision to design your own site and the last thing you need are incomplete instructions. It's infuriating to work on something for days and then find out that person only gave you a portion of the script.

The last two posts have given you the code for the CSS, but how do you apply the code to the page?

If you have the page open and can see the design and code section, click on the table in the design section and the code/html section of the page will be quickly located.

If you're working straight through the code/html side of the page, locate the table you want to work with.

(NOTE: I've left a space between all < and the info for posting purposes, but a space should not be in your actual code/html)

You should see < table and other info. After that you should see script beginning with < tr and after that is a section beginning with < td.

Following the < td will be info like width="200" etc.

In the < td line of script is where you place the code/html to apply the table cellpadding. Some programs will prompt you as you begin typing in the code/html section, but either way enter the following text in the < tr line.

class="table_cellpadding"

You'll want a space before and after the html if you place it in the middle of the line.

goto & tag advertising, apple, computers, copyright, copywrong, css, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows

Let's say you have nested tables on one page, or more simply explained you have one large table with several small tables inside the large one.

You have text and/or a pic in one of the tables and you've used the info from our previous post to accomplish your requirements. Now, you have a need for the text and/or pic in another table to float differently. What can you do?

It's really quite simple. In your CSS write another script like the following:

.table_cellpadding_two {
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 30px;
}

Notice it's named _two to differentiate it from the other script. You could name it most anything you want, but this is just for an example.

You'll also notice we've chosen different padding from the first script and again you can tweak it to suit your requirements.

goto & tag advertising, apple, computers, copyright, copywrong, css, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows

So you find yourself with an application and you need to have table cellpadding, but you don't want it around the entire table.

You can accomplish it through your CSS

.table_cellpadding {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 50px;
padding-right: 5px;
}

You can tweak it in so many ways to suit your requirements.

goto & tag advertising, apple, computers, copyright, copywrong, css, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows

Let's say you want to insert a line between text on a blog or a web site and you don't want to use a graphic. How can you do that?

Place the follow script where you want the line to be:

It will look like this:

But let's say you don't want the line to go the full width of your table or blog column area. What can you do?

It may not look like it, but that's a percent sign after the number 50. To adjust the length of the line, adjust the number. 50 percent will look like this:

Just another simple note in a very small byte.

goto & tag advertising, apple, computers, copyright, copywrong, design, design notes, design tips, dell, economy, fun stuff, games, good sense, goto & play, graphic design, html, infotainment, javascript, microsoft, mac, must i rant, nifty stuff, observations, pc, pearweed, pearweed simple notes, pearweed web design, simple scripts, simple notes, simple squares, tech, technology, web design, web design tips, windows