Give This Web Page Some LIFE!

In the previous proof, I had created some examples of how css can spice up my page a bit but it was mainly to demonstrate how to formulate an In-line Element. This proof will be more focused on how to sharpen the Block-level elments. First I will explain what these terms mean.

Block-level Element

A block level element is any element that can contain other elements like:

  • Headings
  • In-line elements
  • "div"s
  • a list like this one

These is usally displayed on its own line. Although it can contain heading and the list above, it can also encase them.

In-line Element

In-line elements is any element that sits inside another element and cannot encase a block-level element
Some in-line elements include:

  • The empasis that I just used for the words above
  • The bold that I had also used for the word above
  • An anchor to create links to other files or web sites
  • The cite feature

Sizing up the Blocks

If you don't notice already above, the heading is not the the default size that the other headings normally take. You can see another example of this on the Alertbox: Usability 101 to see how I used it in the blockquote.

Simple Borders

As you see here in this paragraph we have a very simple white border.

Here is an example of an inset border that gives it more of a 3D kind of look.

And here is a little more creativity when it come to a different color scheme for a border.

There is so much more you can do with border if you want to get away from the conventional look.

And you don't have to stop at dots, here is a dashed-lined border!

Now that is all and well but these last couple borders were pretty extreme. I only want to focus on a couple aspects demonstrate the ability of what borders can do.

Here is a simple dotted, red border

I THINK YOU GET THE POINT!!

Shaping and Sizing of My site

Ok, due to the intensity of some of my pages with the demonstrations of all these different element styles on the last couple assignment, I will create a new CSS sheet that will demostrate better refinement on, "Just because you can, doesn't mean you should," with upcoming pages.
Some of the following elements are added for your reading pleasure:

  1. As you may have already notice, I applied a blue border arround each page's content.
  2. Next I added some style to the tag line on the home page to give it a little pizazz!
    Oh bytheway, here is the CSS sheet so that you can see if you like the changes that I have made to the elements.
  3. I changed the border around the home page title to match the border around the page and I made all my subheading fonts -- h2s -- 130% bigger.
  4. I added all sorts of padding using pixal size, percentages, and "em" sizes. The one that I will most predominately use will depend as time goes on but for the sake of having every brower collaborate with my padding effects, I will use "em".
    I used "em" on both the tagline on the homepage and the primary headings.

Positioning elements

In order to tackle the absolute positioning described in this book, I decided to rconfigure my home page because my homepage is my assignments navigation page and everything was just NOT working!
So as you may have noticed, I have used absolute positioning to (1) eliminate scrolling, and (2) consolidate the space around the navigation and the quick navigation.

Relative Positioning

As you see I have attempted here a little of relative positioning by "nudging" the whole body over. This is really good when you want to position something within something else and probably the best measurement to use is em

Floating Position

This one was a little harder to do with my layout on the proof and homepage however there is a little example on Alertbox: Usability 101 where I located the quick navigation on the right side of the page.