Following the previous article, where I described how you can create a 3 column fluid layout with expanding 100% of the page height, I’ve decided to post another two similar layouts (both expand 100% of the page height):
2 Column Fluid Layout with Left Sidebar
2 Column Fluid Layout with Right Sidebar
The HTML Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD [...]
Categories: CSS Layouts, CSS Tutorials, Posted on February 9, 2009 by Choppr
Fluid layouts aren’t very easy to handle especially when you would like for your pages to expand not only horizontally but also vertically. With tables it’s much easier to handle this problem, however, when it comes up to table-less layouts there are a lot more things you would need to consider.
Here is an example of [...]
Categories: CSS Layouts, CSS Tutorials, Posted on February 8, 2009 by Choppr
When you are creating a CSS/HTML page, you will definitely want navigational elements in that web page. The most common way to create navigational elements is through CSS styled lists. But you should remember one simple thing – your navigational elements should contain display: block.
The display: block property is very essential in CSS navigation because [...]
Categories: CSS Navigation, CSS Tutorials, Posted on May 15, 2008 by Choppr
In the previous tutorials, we have created a classic two-column layout with left-side navigation using CSS and a few types of HTML tags. In this tutorial, we will look at the actual HTML codes used so far and also take a quick glance at the CSS used.
All the content (text, images, Flash etc.) that the [...]
Categories: CSS Tutorials, Posted on by Choppr
This tutorial will teach you to create a multi-column and float-based layout. This tutorial will allow you to create a multi-column liquid designs as well as fixed-width design.
Structuring HTML
Firstly, you need to create a CSS-based layout by identifying different series of layout elements on the page. You can conduct this by wrapping chunks of HTML [...]
Categories: CSS Tutorials, Posted on by Choppr
A single style cannot perform the miracle of transforming a web page into a work of art. To create some special designs in the web page, an understanding of web page is very essential. Usually a collection of CSS styles comprises a style sheet.
A style sheet can be of two types – external and internal, [...]
Categories: CSS Tutorials, Uncategorized, Posted on by Choppr
You will be taken through the basic steps of creating the following:
Inline styles
Internal style sheets
External style sheets
Creating Inline styles
When you type a CSS rule directly into a page’s HTML, you are basically creating an inline style. Inline styles offer none of the time and bandwidth saving benefits of style sheets. Yet, it proves to be [...]
Categories: CSS Tutorials, Posted on February 29, 2008 by Choppr
Advanced CSS help you to create wonders by reducing the number of HTML tags that are used in the page.
Following are six tags required to layout the content:
<h> The heading tags range from ‘<h1></h1>’ to ‘<h6></h6>’ are used to mark/tag headlines in the pages. The most important headline, therefore, remains wrapped in a <h1> tag [...]
Categories: CSS Tutorials, Posted on February 25, 2008 by Choppr
Linking of style sheets using HTML
One of the best methods of adding an external style sheet to a web page is to use HTML <link> tag. You can write the tag in a slightly different manner depending upon whether you are using HTML or XHTML.
For example, here is an HTML:
<link rel=”stylesheet” type=”text/css” href=”css/global.css”>
Here’s XHTML:
<link rel=”stylesheet” [...]
Categories: CSS Tips, CSS Tutorials, Posted on February 21, 2008 by Choppr
1. With the file basic.html open it in your text editor, click directly after the closing </title> tag. Then hit Return and type <style type= “text/css”>
The HTML should look like the following:
<title>Basic web page</title>
<style type= “text/css”>
</head>
The opening <style> tag marks the beginning of [...]
Categories: CSS Tips, CSS Tutorials, Posted on February 20, 2008 by Choppr
You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.
This blog is brought to you by TheChoppr.