I receive an email this morning from a client I just provided Dreamweaver Training to.
Here it is:

A quick question for you…I’m wondering about the differences between using tables, layers, and floating divs (is that what you call what we used yesterday with CSS?) When would someone want to use one vs. the others? Layers seem to be the easiest way to create your layout the way you want it, but I’m wondering what the drawbacks are to that? Also wondering how you might combine two or more methods to create your layout?

Thanks again Alex!
It was great to work with you…

Here is in a nutshell my response:

Tables are more appropriate to present a grid-layout data just as you would display data in an Excel spreadsheet with rows and columns. As you will notice in the index.html file inside the portfolio folder, we use a table to display the content of that page because the information is presented as a grid.

However using tables for the website layout is cumbersome. Tables take more time to display compared to DIV elements because all the rows and columns are tied together. The web browser has to make an extra effort to have all the cells in the right places taking into account all the rowspan and colspan that might be defined in the HTML markup.

You can hide or show a box (layer, div tag, container) either by changing its visibility from visible to hidden or set its display property to “inline” , “block” or “none”.

Floating Div tags comes in handy when the need arises to align rectangular blocks of content side by side horizontally without having to use absolute positioning. A div tag creates is typically a block-level container. As such has natural tendency to occupy a 100% width of its parent container and push down any another other element placed after it in the HTML markup. Therefore by specifying the width of div tags and floating them you can place them side by side as long as the width of their common parent container can allow.

The only drawback of using CSS is that you have to do the math as we did yesterday to get the right positioning or calculate the dimensions of each box to align them side by side.

So always design you website layout using div tags (i.e. #wrapper, #header, #maincontent, #footer, ….) as the main building blocks of your web page layout. You can then use more div tags to create smaller containers for your content and position each section of your web page.

When the data you are presenting is a grid then use tables to get the job done more efficiently. Table and CSS are not mutually exclusive. You can use a table then format its look-and-feel with CSS. Again it keeps your HTML and content semantic clean & tidy, easy to maintain and Search Engines Friendly.

I hope this message answers your questions.

The WordPress Featured Video Plugin is a very useful and powerful feature to add in your wordpress blog.
* It  reads and displays a video in your wordpress blog post.
* All you need is tag the video HTML code as follows:
[youtube:url to your video] (e.g. [youtube:http://www.youtube.com/watch?v=7o84PE871BE]) or taggged [googlevideo:url] (e.g. [googlevideo:http://video.google.com/googleplayer.swf?docid=8577255250907450469])

* It would display a video in a “Featured Video” section or the sidebar of your blog.
I have used it quite a few times during the cutsomization process of some of my clients’ blog using themes from Revolution News/Magazine
However when using it in the “Revolution News” theme, the Featued Video seems to be displaying the same video on the featured video section despite the fact that my customer has

Solution:
* open the “featuredvideo.php” file in your wordpress plugins folder /wp-content/plugins/FeaturedVideo
* add ORDER BY post_date DESC to the $sql varible which becomes:

 $sql = "SELECT distinct ID, post_title, post_date, post_content                         
            FROM {$prefix}posts, {$prefix}term_relationships, {$prefix}term_taxonomy
            WHERE {$prefix}posts.ID = {$prefix}term_relationships.object_id
            AND {$prefix}term_relationships.term_taxonomy_id = {$prefix}term_taxonomy.term_taxonomy_id
            AND {$prefix}term_taxonomy.taxonomy = 'category'
            {$catsql}
            AND post_status = 'publish'
            AND post_type != 'page'
   ORDER BY post_date DESC";

 * save and upload that file to your blog at the same location (/wp-content/plugins/FeaturedVideo/featuredvideo.php)

Just as with any other plugin, you need to activate it in your blog admin panel and set the options offered.
Then “Featured Video Plugin” will now located the latest youtube or googlevideo file used in your posts and display it in the Featured Video section of your choice. Just be sure to have to call vsf_show_video() in order to get the job done

CSS stands for Cascading Style Sheets.

Typically a Style Sheet is a plain text document with a set of instructions (CSS styles, rules) specifying how each element (selectors) in your web page should be appear in a computer screen or even how it is printed on a sheet of paper.

You can use CSS to specify for instance:
- to specify what font to use in a paragrah, in what the size the text will be and it color, alignment, the paragraph’s background image, background color and more.

- or even intead of the regular blue color of text link, with CSS you can choose a different color and even create a rollover effect on each text link when the mouse hover on it.

Above all, the power of Style Sheets is more revealed when it comes to positioning different sections of a web page.

For example in this web site, the HTML code of the navigation menu is at the very bottom of the page code. Without CSS this web page navigation would appear on the botton of your screen. But thanks to CSS positioning our web site navigation (Home, Web Design, …, Blog) is et to be shown at the top of the page.

In othe words your web pages visual appearance is not anymore determine by how the HTML code is formatted. To illustrate that with a metaphor, the HTML represent the inventory of the store and the CSS determine how items are placed in the shelves.

You can pretty much use CSS to create a visual layout of your web page just like a puzzle except that in this case the pieces are in a rectangular shape.

YEH, YEH, YEH, we got it now!! What is the Cascading For in CSS?
I am glad you ask.

The cool thing is you can have as many style sheets in a web page as you want. Each style sheets defines a certain number of styles named CSS rules. When the web browser read the CSS rules coming from each style sheet it combined them then apply each CSS rule to your web page.

You can define the positioning of a element in one style sheet, then its font formatting in another style sheet and so forth.
Therefore the final style of that element is the combination of CSS rules defined is different style sheets: that’s a cascade of styles

If the CSS rule defined in a style sheet does nt conflict with those defined in the next style sheets then the last CSS rules augment any previous style defined for that element (selector).
If the CSS rules of the style sheets conflict, then the last defined rule takes precedence.

Using CSS make not only the web page code cleaner by separating the content ffrom the presentation, it also make your web site maintenance easier. Many web pages can share the same CSS file. You can modify your entire web site presentation by just updating your CSS file without going through each web page.

How to make the vertical navigation column expands through the entire height of the web page with CSS. That’s question often asked time and time again on various forums.

While this can be easily achieved with table-based web page layout, it can be tricky when using CSS instead. As a matter of fact maintaining columns of same height when one of them is expanding vertically is quite a bit of a challenge in CSS without the use of javascript.

The graphic below illustrates the look-and-feel we want to create:

As you can see, we want the left naigation bar (orange strip) to expand vertically to the bottom of the page. To achieve that result, here is a snippet of the CSS code needed to create that layout.

<div style="position:relative; background:url(../images/bg-vnav-css.gif) repeat-y 0px 0px; width:800px; height:auto; ">
<div style="position:relative; top:0px; left:0px;background:#007F00; width:100%; height:80px; text-align:center;">Page Header .. </div>
<div style="position:relative; display:inline;left:0px; top:0px; float:left; clear:left; width:180px; height:auto; ">Links… </div>
<div style="position:relative;display:inline; left:20px; top:0px; float:left; clear:right; with:600px; height:auto; ">Page Content ..</div>
</div>

The important point here is the main container’s background image (bg-vnav-css.gif) set to tile vertically only (repeat-y) starting from the top left corner of the web page (0px 0px). When the web page expands vertically your web site visitor gets the illusion that the navigation bar is also stretched vertically. In reality it’s the background image of the main container box that is tiling vertically.

The rest of CSS rules set the alignment of different areas and their respective formatting.

The power of CSS, besides giving the web designers more control over the web pages layout is also the separation between the page content and its presentation.

Linking your web pages to an external CSS file makes the HTML code cleaner, creates a more consistent look throughout your web site and updating your web pages layout much much easier: modify your CSS files then all your web pages follow the new CSS rules in a snap.

However when you want to use CSS to format your classified ads or other type of ads to be posted on somewhere else than your website, using an external CSS is not often possible.
In that case, inline CSS is the way to go.
For instance to create a dashed red border of 2 pixels width around your ad, you would write your flyer like this:

<div style=”padding-right: 5px; padding-left: 5px; padding-bottom: 5px; margin: 10px; width: 400px; padding-top: 5px; height: 150px; border: #ff0000 2px dashed;”>
The content of your ad would go here.
You can add in some pictures, links or anything else
just like in a regular web pages.
…………………
…………………
………………..</div>You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.

You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.

Feel free to add in the font type, color and size to have more control over your ad’s text.
font-family: verdana, arial, helvetica, sans-serif; color: #00000; size:13px;
Your text color is now defined to be in black (six characters hexadecimal value: 000000) with a size of 13 pixels.

You should always give the web browser a choice of fonts at least 3.

That means if the end-user computer does not have Verdana, the browser will look for the second option which is Arial. If available then Helvetica or any other sans-serif font if any of the above is not installed in the user’s computer.

Css offers web developers a new way to control the display of the background image in a given layer.

With plain HTML, the background image is always tiled both horizontally and vertically in the containing area. The usual trick to avoid the tiling was then to create a background graphic with the same dimensions as the area it’s placed.

That way, the background image will be diplayed once. Even with that trick you cannot realy control the positioning without going through a graphic program to put additional spacing that will blend with the background color.

Now thanks to CSS one can define the web designer can specify whether or not she want the background image to be tiled horizontaly (repeat-x), vertically (repeat-y) or both (repeat).

That’s not all. You can now ask the web browser not to tile the background image at all with no-repeat . As a web deigner you can even specify where you would like the place the background image by specifying its coordinates x and y:

#containerbox {
background: url(images/bgimage.jpg) no-repeat 20px 15px;
}

That CSS rule will place the background image (bgimage.jpg) inside the containing layer (containerbox) at the horizontal coordinate x equals to 20 pixels (from the top left corner of the container box) and 15 pixels vertically away from that top left edge.

What is now missing however is the ability to now define where (x, y) one would like tthe background image to start tiling, how many time should it tile then stops.

That would be really cool, sweet, neat and powerful !!

Until then, we both have to hang on to what we have and get the most of it by using tricks to achieve the effects we want.

You can create a CSS layer that scrolls when its content exceeds the dimension of the viewable area defined. All you need is to specify the overflow rule in your layer style definition: #layer{overflow:scroll;}

Unfortunately both the vertical and horizontal scroll bars are displayed even though in most cases we just need the vertical scrolling of the content.
You will learn here how to “get rid off” the horizontal scroll bar.

Option 1) Most designers create graphic image of the vertical scrollbar then use a javascript function to scroll the content of the layer based on specific mouse events: rollover or click.

This solution certainely has its appeals and offers the ability to customize your vertical scrollbar look-and-feel. However it requires extra code (javascript), graphic design skills and extra files to download.

Option 2) A much easier approach is to use CSS and take advantage of the already existing scrollbars functionality in your web browser.

The trick is to just hide the horizontal scrollbar.

All you need is three CSS Layers: #Layer1, #Layer2, #Layer3

a) Layer1 defines the scrollable view area.
b) Layer2  is non scrollable and contains the Layer1. Its height should have about 17 px less in order to hide the horizontal scrollbar in Layer1. The with of Layer1 and Layer2 could be of the same width.
c) Layer3 where you page content will be inserted. It’s contained by Layer1
It can have the same (or less) width as layer2.

Below is an example:
#Layer1 {
 position: relative;  visibility: inherit; display: inline;  margin: 0px; padding: 0px;
left: 0px; top: 0px; text-align: left; vertical-align: top; clear: both; float: left;
width: 695px; height: 557px; overflow: scroll;
}

#Layer2{
 position: relative; visibility: inherit; display: inline;  margin: 0px; padding: 0px;�
left: 10px; top: 10px; text-align: left; vertical-align: top; clear: both; float: left;
width:695px;  height:540px; overflow: hidden;
}

#Layer3 {
 position:relative; visibility: inherit; display: block; margin: 0px; padding: 0px;
 left: 0px; top: 0px;text-align: left; vertical-align: top; float: left; clear: both;
 width:700px; height:700px;  overflow: visible;
}

Notice the width, height and overflow CSS rules on the 3 layers. Other rules are for positioning each layer and its content.

The HTML code would be:
<div id=”Layer2″>
<div id=”Layer1″>
<div id=”Layer3″>Your content should go here </div>
</div>
</div>

You can put any type of information in Layer3: text, pictures, movies… just about anything that can go in a web page.
You can also use CSS rules to customize the look-and-feel of your scrollbars.

Of course this post applies only to the scrollbars in a layer and not the web browser’ scrollbar. To get rid off your web browser horizontal scrollbar, make sure the content of your web page does not exceed the width of the viewable area of your web browser.

No matter what the screen resolution your web site is optimized for, always leave off about 20px or more to take into account the width of the ever present vertical scrollbar.