Actions

Difference between revisions of "Setting up page width"

From Joomla! Documentation

m (Reverted edits by Arcturusweb (Talk) to last version by Kennyl)
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{cookiejar}}
+
{{review}}
 
Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.
 
Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.
  
Line 18: Line 18:
 
The definition of an id in CSS is as follows:
 
The definition of an id in CSS is as follows:
  
#idname { attribute: value; attribute: value; }
+
#idname { attribute: value; attribute: value; }
  
 
while the definition of a class in CSS is as follows:
 
while the definition of a class in CSS is as follows:
Line 28: Line 28:
 
'''Value of the 'width' attribute'''
 
'''Value of the 'width' attribute'''
  
screen resolution, percentage, pixels.
+
The value of the 'width' attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. So if we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.

Revision as of 16:08, 25 February 2010

Copyedit.png
This Article Needs Your Help

This article is tagged because it NEEDS REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.


Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.

What is CSS?

CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a webpage. CSS allows us to define the appearances of those html tags with their content, somewhere, so that other pages, if want be, may adhere to. This brings along consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) may be inherited by other tags (children) inside it.

CSS Statements

The definition of an html tag is as follows:

tagname { attribute: value; attribute: value; }

Tagname may be any html tag but for the sake of setting up page width, what is of interest to us is an html tag that gives structure to a webpage. Some webpages are constructed from div tags while others are constructed on table tags. Usually, the tag has a 'width' attribute. You set up a page width by varying the value of the 'width' attribute.

Sometimes, html tags are not defined directly. They are given an id or a class name and CSS refers to those specific tags by their ids or their class names.

The definition of an id in CSS is as follows:

#idname { attribute: value; attribute: value; }

while the definition of a class in CSS is as follows:

.classname { attribute: value; attribute: value; }

Again setting up a page width means modifying the value of the 'width' attribute of any one of these definitions.

Value of the 'width' attribute

The value of the 'width' attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. So if we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.