Recently in CSS Category

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