The following is a list of CSS Layout Techniques implemented directly
into Joomla content. The CSS and HTML were entered directly into
content by first turning off the WYSIWYG editor. This can be done
by disabling your editor in the Global settings of the Administrator
panel. (note: you can't just use the html button in the editor,
you must completely disable the editor in the admin panel) The
code was then cut and paste into the content input container.
It will be difficult to make several of these examples work properly
since they use absolute positioning features in the CSS code. For
example both "3 columns, the holy grail" and "3 col layout with
equalising columns and footer" examples use absolute to
position the left and right column and header. Since
content can shift
around on your screen a bit, these examples using absolute positioning
coordinates may be difficult to use within content.
In addition my site width is a static 900px; therefore, visualization
of several of the examples using fluid content widths will not be fully
realized by viewing these following examples.
The code within these examples is used to build templates and complete
web
sites. They are the building blocks for web pages. This
code can be used in your index.php; however, it can also be used
directly into site content, as seen in these following tutorials.
References and links to the originators code and sites can be found
throughout the following pages.
|
|
|
|
|
Tutorials