8.2.2.2. Using auto

If only one of width , margin-left, or margin-right is set to a value of auto, while the others are given specific values, then the property set to be auto will evaluate to whatever length is required to make the element box's width equal the parent element's width. Thus, if the sum of the seven properties must equal 400 pixels, and no padding or borders are set, and the

Saturday 19th of April 2014 09:33:06 PM

CSS Style Guide

 

This Style Guide explains the markup and design requirements for web projects, along with various standards and best practices.

projects authored in valid XHTML 1.0 Transitional and styled with valid Cascading Style Sheets will be described here. See the XHTML and CSS sections below for details. Additional sections of this Style Guide, coming soon, will provide information on writing for the web, naming and filing your documents, and other useful topics and guidelines.

XHTML: Guidelines & Benefits

Library projects must be authored in structural XHTML 1.0 Transitional. Page authors should follow accessibility guidelines in compliance with U.S. Law, and so that our site’s content will be made available to the widest possible number of people, browsers, and Internet devices. In addition, all XHTML must validate.

XHTML Guidelines
The rules of XHTML as compared to HTML—an easy transition
What is XML?
A brief introduction to the foundation of XHTML
XHTML Benefits
Four key benefits of converting from HTML to XHTML
XHTML Authoring Tips & Tools
Simplifying the work process—includes tips on thinking structurally, and tools for hand-coders and Dreamweaver users
XHTML Accessibility Tips
Making sure your pages can be read by all visitors, browsers, and devices
XHTML Validation
Ensuring interoperability by avoiding errors and sticking to standards

CSS: Style Sheets & Tips

Library projects must use valid Cascading Style Sheets (CSS) to control typography, color, and other layout elements. Style Sheets must be linked in a way that accommodates the capabilities of new and old browsers.

CSS Guidelines
Tips on authoring and linking to Style Sheets
Steal These Style Sheets!
Style Sheets for your use in Library projects
CSS Validation
Ensuring that your Style Sheets are error-free (same as XHTML validation)

A number of valid Style Sheets have been provided for your use. If you wish to create your own Style Sheets, please discuss your requirements with the Branch Library’s Web Coordinator.

link popularity
boldfaced text. There's your padding.

This all seems familiar enough, even when the boldfaced text stretches across multiple lines. Turn to Figure 7-61 to see what happens with padding set on an inline element displayed across multiple lines:

B {padding: 10px; background: silver;}
Figure 7-61

Figure 7-61. Padding on an inline element that spans multiple lines

As with margins, the left padding is applied to the beginning of theover-constrained -- then margin-right is always forced to be auto. This means that if both margins and the width are set to 100px , then the right margin will be set by the user agent to auto:

P {margin-left: 100px; margin-right: 100px; width: 100px;}

It will then evaluate to 200px , as shown in Figure 8-12.

Figure 8-12

Figure 8-12. Overriding the margin-right setting

lead to a situation similar to that shown in
Figure 9-20:

BODY {position: relative;}<P STYLE="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of thedocument, half as wide as the document's width and overwritingthe first few elements!

containing block. Without the relative positioning of the parent element, the containing block would be another element. Consider a case where the element being positioned is a child of the BODY element, e.g., a paragraph or heading element. With the right styles, the containing block for the positioned element will be the entire BODY element. Thus, applying the following styles to the BODY and the fifth paragraph in a document would lead to a situation similar to that shown in
Figure 9-20:

font-weight of each element, we would get the results in Figure 5-13:

<P>
100 <SPAN> 400 <STRONG> 700 <B> 800 </B></STRONG></SPAN>.
</P>
Figure 5-13

Figure 5-13. Changing weight, with the numbers to illustrate it

The first two weight increases are large because they represent jumps from 100 to 400, and from 400 to bold