11.11.2014 Views

Professional Web Design: Techniques and Templates, Fourth Edition

Professional Web Design: Techniques and Templates, Fourth Edition

Professional Web Design: Techniques and Templates, Fourth Edition

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

120<br />

Chapter 6 ■ What Is Needed to Build Mortised Sites<br />

Example Property<br />

width:100%;<br />

margin-left:auto;<br />

margin-right:auto;<br />

left:0px;<br />

right:0px;<br />

top:0px;<br />

bottom:0px;<br />

height:78px;<br />

width:88px;<br />

voice-family:"\"}\"";<br />

voice-family:inherit;<br />

width:78px;<br />

}<br />

html>body #a5-header {<br />

width: 78px;<br />

}<br />

line-height:42px;<br />

vertical-align:30%;<br />

background:#000000 url(images/<br />

bg-menu.gif) repeat-x 0px 0px;<br />

Usage<br />

Used to set the width of an element, such as a box.<br />

Used when centering a fixed-width <strong>Web</strong> page.<br />

Used for setting how many pixels from the left or right side of the<br />

body or a parent box an element is placed.<br />

Used for setting how many pixels from the top or bottom of the<br />

body or a parent box an element is placed.<br />

Used for forcing the height of an element.<br />

Used for setting various properties <strong>and</strong> values for different<br />

browsers. It is called the Tantek Celik hack, or Tantek hack.<br />

Used for forcing the vertical positioning of text in an element.<br />

The line-height property needs to be included for the<br />

vertical-align property to be interpreted by the browser. It also<br />

should appear after the font property to work for the various<br />

browsers.<br />

Used for determining what background image is used, where it is<br />

placed, <strong>and</strong> how it is repeated. The HEX value sets what the<br />

background color of an element will be if the background does not<br />

fill the entire space.<br />

the past, style sheets were imported to keep browsers, such as Netscape 4.7, from<br />

choking on the CSS. Listing 6.3 provides the code to import a style sheet:<br />

Listing 6.3<br />

Code Used to Import a Style Sheet<br />

<br />

@import "mainstyle.css";<br />

<br />

Game Developing GWX

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!