In this section, you'll use pure CSS to form a three-column layout for the Joomla template. you'll even be making it a "fixed" layout. There are three main sorts of website layouts—fixed, fluid, and jello—and all of them ask how the width of the page is controlled. A few years ago, fluid width templates were all the craze. Accessibility guys loved them, and it had been cool to grab the corner of your browser window and see all that content slide around. But now, i do not make fluid templates, but specialise in fixed width templates. I firmly believe they're the simplest fit on today's Web. Four years ago, many of us were still using 800px width screens. joomla templates 2023
the most point of a fluid width was that you simply could have an internet page that looked okay during a 1024px screen, but still could shrink right down to the smaller screens still used. Now, the trend in screens is that the opposite. People are becoming huge screens; 32% of individuals browsing Joomlashack.Com do so with resolutions over 1440px! With these big screens and a fluid width layout, you get a replacement problem—readability. Studies have shown that readability onscreen drops off as you re-evaluate 960px. So a fluid width will fill that big screen and a) look daft and b) hamper your reading. joomla templates 2023
A typical design might use tables to get out the page. Tables are useful as a fast solution therein you only need to set the width of the columns as percentages. However, tables even have several drawbacks. for instance, tables have tons of additional code compared to CSS layouts. This results in longer load times (which surfers don't like) and poorer performance in search engines. joomla templates 2023
The code can roughly double in size, not just with markup but also with "spacer GIFs," which are 1x1 transparent images placed in each cell of the table to stay the cells from collapsing. Even big companies sometimes fall under the table trap. There are a few major problems with a site using tables for layout: They are difficult to take care of. to vary something, you've got to work out what all the table tags, like and , are doing. With CSS, there are just a couple of lines to examine. The content can't be source ordered. Many web surfers don't see sites on a browser. joomla templates events
Those viewing with a text browser or screen reader read the page from the top-left corner to rock bottom right. this suggests that they first view everything within the header and left column (for a three-column layout) before they get to the center column, where the important stuff is found. A CSS layout, on the opposite hand, allows for "source-ordered" content, which suggests the content are often rearranged within the code/source. Perhaps your most vital site visitor is Google, and it uses a screen reader for all intents and purposes. joomla templates events
When it involves CSS layouts, there has been a trend toward what are coined frameworks. the thought is that a uniform set of CSS is employed to make the layout, then that set is maintained for various issues like browser compatibility. For this template we are getting to adopt the 960 grid system developed by Nathan Smith (//960.Gs/). At its most elementary, your template might look as shown in Figure 9.4. It's still not very exciting, but let's check out what the various parts are all about. With the 960 grid system, you simply need to specify with a category how big you would like the grid to be. joomla templates portfolio free
during this example, i'm employing a 12-column grid, so for the header to meet the complete width of 960px, within the index.Php use: width:940px; } Quite simply, everything is floated left, and therefore the various grid sizes are set supported their desired width. it is a 12-column grid, so, for instance grid_6 means six columns, which might be 460px—the full width minus the padding. this easy layout may be a good one to use for learning about the way to use CSS with Joomla because it shows two of the benefits of CSS over table-based layouts: it's less code, and it's easier to take care of. joomla templates portfolio free
However, this easy layout is ordered within the code within the sequence during which you see content on the screen. it's not "source ordered" to put the foremost important content at the start of the generated HTML source yet still have an equivalent viewer-ordered appearance onscreen, with the left column displayed before (that is, to the left of) the middle column. Source-ordered layouts perform better for SEO than do layouts where the important content occurs late within the code, to stay the CSS simple, we'll persist with this viewer-ordered layout, and we'll change to source-ordered layout later within the chapter. joomla template homepage
Many commercial templates, for instance, Joomlashack's, develop this source-ordered concept further. The purpose of a worldwide reset is to override the default settings that are different in every browser and obtain to a clean, consistent start line, no matter which browser the page is being displayed on. Everything is given a zero margin and padding, then all block-level elements are given a bottom and a bottom margin. This helps achieve browser consistency. (The first CSS selector above is named the star selector, and it acts as a universal selector even in Internet Explorer 6.) you'll read more about the worldwide reset at www.Clagnut.Com/blog/1287/ and www.Leftjustified.Net/journal/2004/10/19/global-ws-reset/. joomla template homepage
1.0
TAGS:
Free Download Templates