Wrox Professional CSS Cascading Style Sheets for Web Design phần 9 pot

So, reviewing my design in Adobe Photoshop as shown in Figure 9-22, I measure where I want the left corner of the side column to start and come up with the values 545 pixels from the lef

Figure 9-20: Selecting the extra color from elsewhere in the design

After the color selection, I want to move the tagline to be closer to the logo I do this by applying a tive value to the margin property Also, I want the tagline to be flush to the left of the logo, so I apply aleft padding value of 15 pixels Finally, I want to spread out the letters in the tagline by setting the value

nega-of letter-spacing to 0.3em, as shown in Figure 9-21

With the logo all set up, it’s time to move to the Web page columns

Figure 9-21: The logo with the newly stylized tagline

Star ting the Two-Column LayoutThe elements of the header span the entire 800 pixels I allotted for the design While that’s good forbranding purposes, it’s not an efficient use of the space in terms of displaying information Imagine ifeverything you read from newspapers to magazines had their articles and photos stacked on top of eachother from top to bottom

It would take a lot longer to scroll down the Web page, and it would probably look a lot like what theWeb looked like in 1993 (I sure don’t want to re-create that for my Web site.) Thus, I need columns —actually, two columns.

What I want to do to get the side column is to bring the content out of the normal flow of the document

I do this by using the positionproperty and setting the value to absolute

Absolute positioning allows me to take a certain element and put it at a precise point in the Web page.I’m talking pixel-perfect positioning, which after the discussion on Web typography, seems as if it is animpossibility However, it’s the truth

So, reviewing my design in Adobe Photoshop (as shown in Figure 9-22), I measure where I want the left corner of the side column to start and come up with the values 545 pixels from the left and 185 pixelsfrom the top Also, I double-check my column widths and make a note from the Info palette that thewidth of the side column in my design is 255 pixels

top-Figure 9-22: Using Photoshop to determine the placement for the side column

I will use these three new pieces of information to write the offset properties in the following CSS rule tohelp position the side column:

#sidecol {position: absolute;

Unfortunately, this is the nature of the absolute positioning It’s impossible to set an element to be tioned and have it move with the content as the user resizes the window (that is, if we just use absolutepositioning by itself)

posi-To solve this problem, I use another magic trick This time, I set the positioning to relative of the parent

element of the side column container

Figure 9-23: The side column not playing well with the other content

Elements that are positioned with relative positioning aren’t taken out of the flow of a document ing as they are for absolutely positioned elements Those elements are placed as they would normallyappear in a Web browser However, the offset properties such as left and top apply only to the element’slocation in that document flow So, an element that’s relatively positioned with an offset property of topset to a value -2emappears to be moved up, as shown in Figure 9-24

render-Figure 9-24: A couple of words levitating thanks to relative positioning

When combined with relative positioning on a parent element (such as the div framecontainer),

abso-lute positioned elements can be placed precisely and still expand with the rest of the content as a user

expands the browser Why the framecontainer? Because that’s the element that is setting the overallwidth of the design of the Web page Recalling what I did earlier, I looked up the offset property valuesfor topand leftby the upper-left corner of the Photoshop document The frame container acts as therepresentation of that document by, well, framing all the Web page design elements into the 800-pixelwidth

Take note that you can use this setup on other elements in a Web page design in addition to side columns This is truly a great technique that has so many applications So, experiment and share with others what you find out.

So, let’s apply the positionproperty to the framecontainer:

#frame {width: 800px;

margin: 0 auto;

position: relative;

}Now, the side column should be placed exactly where I want it within the frame container However, Istill have the overlap issue, with the content in the left and right columns, as shown in Figure 9-25 Not

to fear, though, for it’s time to work on the main, left-hand column

Main Column

The positioning of the side column has left some work to be done I need to remove the obfuscation

of the content that’s created by both columns The solution is a very easy addition of applying padding

to the right side of the main column so that there is enough room for the side column In this design, theside column is 255 pixels

So, I give the padding on the right side that much, plus 40 extra pixels, to make it a total of 295 pixels, asshown in Figure 9-26 The 40 pixels create a gutter (a space between the two columns so that they don’ttouch or run into each other)

Figure 9-26: Two columns of text

The other CSS properties for the main column container include the addition of design flourishes such asthe color of the text, as well as a background image that starts at the top of the main column

The color property is very important because any new HTML text that is written within this containergets set to this color by default So, that frees my hands of setting the color for each element within themain column container to the same value In the future, I need to worry about changing the color of anelement only if it needs to be something other than the default value.

Now, my next step is to work on the content that goes into the main content column

Main Column ContentWith the two columns set up, it’s time to take a look at the content within the two columns First up isthe content in the main column

My Site Says, “Hi,” Does Yours?

One of the most important things I tell my students and clients is to have an introductory paragraph onthe main page of your site It’s important to let new visitors (and maybe some of the regulars) knowwhat to expect when they come to a Web site

When Web developers build their own sites, we sometimes get so caught up in the designing and oping that something as simple as a few quick lines describing what we are trying to accomplish seemsfoolish

devel-Not everyone can determine the purpose of a site by the domain name or title, For example, my newmedia design and publishing company name is Heatvision.com What does it do? Sell comic books orsunglasses? Well, it does neither So, to stop the confusion, I have a few lines that say what the companydoes:

Heatvision.com consults on user interface design issues, builds brands, offers training in Webproduction and design techniques, and assists in Section 508 compliance

Whether the goal is to sell, promote, teach, enlighten, or entertain, we sidestep hype and ion to focus on what really works in making a client’s message compelling and useful to theiraudience

fash-It’s simple and to the point People thinking I sell comics or sunglasses are as quick as The Flash toldotherwise, and they can search elsewhere for the issue where he races Superman

For my personal site, I want to put in the following markup for the introductory text, as shown inFigure 9-27:

<div id=”desc”>

<h2>What is this site?</h2>

<p>This is the web site for me, Christopher Schmitt I’m an author, graduatestudent, web designer, product developer, and an idea generator After two years,I’m currently wrapping up my graduate studies at Florida State University inInteractive and New Communication Technologies.</p>

</div><! END #desc >

Figure 9-27: The default styling of the introductory text

I wrap the introductory paragraph in a divwith an idattribute set to the value of “desc” This will bethe containing block for the description Within the divelement are the question wrapping in an h2ele-ments and a paragraph containing the answer

Now that we have the markup set up in place, I start again to style the content from the outside in, ing with the div element, as shown in Figure 9-28

start-Figure 9-28: The styling of the description container

The first declaration for the margin sets 12 pixels at the top of the introductory text This move is made

to create some white space

The next rule is important when it comes to the introductory text Since I want to have the graphic image

of dots positioned in the upper-left corner, I need to position the text out of the way so that the dotsdon’t interfere with the background image So, in the same manner I moved the main column content byadjusting the padding on the right side, I adjust the padding on the left-hand side of the introductorytext to make room for the background image

The next three declarations set the background image, color of the text, and the line-height for the text.The last property sets the width of the introductory text I have set the width in my design for the maincolumn to 505 pixels Even with the left-side padding of 111 pixels, that still leaves 394 pixels Whyshrink the width of the paragraph by 44 pixels?

The answer is that I want to create that white space again because I want the visitor’s eye to see the logoand not be hindered by a block of text Although there is 40-pixel gutter between the two columns,enlarging the gutter at the very top of the main page acts as a sort of visual funnel It diverts the eyefrom the header into the main content of the main page

However, by setting the width on the sides of the desccontainer, I’ve run afoul of Microsoft’s box modelfor Internet Explorer 5.5 for Windows So, do get around this, I use the hack as described in Chapter 8:

#desc {margin: 12px 0 0 0;

By “all the other browsers” I mean all except Opera, which requires an extra CSS rule by itself But thisisn’t a problem Extra CSS rules don’t cost much:

html>#desc {width: 350px;

}

Then, the next two properties apply the styles for the heading and paragraph text to make it look more

in tune with the way I designed, as shown in Figure 9-29:

Figure 9-29: The stylized introductory text

Styling the Blog Posts

Much like the heading and paragraph in the introductory text, the styling of the text in the blog posts is

a fairly straightforward exercise Today, most blog posts are auto-generated by applications such asWordPress (see www.wordpress.org) or Movable Type (see www.movabletype.org)

If you are following along at home with a different blogging software package, your mileage will vary in how closely my markup matches up with yours because of the differences in each application However, the markup from these tools should be somewhat similar, although you might need to make some adjust- ments if you want to re-create my design.

First, I take a look at the markup for a sample blog post, as shown in Figure 9-30:

<div class=”post”>

<h2>Recent Journal Entry</h2>

<h1 class=”storytitle”><a href=”/log/index.php?p=1” rel=”bookmark”

title=”Permanent Link: Something So Embarrasing”>Something So Embarrasing</a></h1>

<div class=”storycontent”>

<p>My garbage can was stolen last night.</p>

<p>[ content goes here ]</p>

<p>That’ll show &#8216;em That’ll show em, all! Bwahahahaha! </p>

</div><! END #storycontent >

</div><! END #feedback >

</div><! END #postfooter >

</div><! END #post >

It looks like a lot is going on and, for the most part, it is But if we take it apart piece by piece, I can make

a bit of sense out of it Along the way, I will apply CSS rules to the markup to create the look I want.The first bit of markup is the divelement with the class value of post Everything within this container

is going to pertain to the blog post and, using a descendant selector in the following CSS rules, I cancontrol the design of the elements only in the postcontainer:

<div class=”post”>

[ content goes here ]

</div><! END #post >

Now I set up the CSS rule for the postcontainer:

.post {margin: 0 0 0 15px;

<h2>Recent Journal Entry</h2>

[ content goes here ]

</div><! END #post >

Figure 9-30: The default rendering of the blog post

For the design, I want to have a background image placed behind the heading to make it stand out a tle more, as well as tweak the margin, padding, color, and typography:

However, I also want to add some brackets on either side of the heading I could add them to the HTMLtext, but I feel that would not be semantically correct After all, the brackets are a design element, notactually the heading To add the brackets as shown in Figure 9-31, I use the pseudo-elements :afterand :beforeto insert content into the heading:

.post h2:after {content: “ ]”;

}.post h2:before {content: “[ “;

}

Figure 9-31: The heading with the brackets

The only warning about using the pseudo-elements is that they aren’t supported by Internet Explorer forWindows However, I’m not that concerned about it because the brackets are a rather small element in alarger design Blame it on old age or too many scars, but I’ve learned to pick my battles instead of fight-ing every one

However, one way of implementing the design would be to make an image out of each bracket Then

wrap the text in another level of markup like so:

<h2><em>Recent Journal Entry</em></h2>

Position the left bracket as a background image in the h2element and then place the right bracket ground image in the emelement.

back-Next is the h1element reserved for each blog post:

<div class=”post”>

<h2>Recent Journal Entry</h2>

<h1 class=”storytitle”>Something So Embarrassing</h1>

[ content goes here ]

</div><! END #post >

Then I apply a CSS rule for the design:

to the width of the blog content in order to create more contrast in the design

The last two declarations deal with typography issues: setting the right font, as well as removing thebold weight associated with a heading element

The next item deals with the footer for the blog post Each blog post contains what’s referred to as meta information The meta information contains information regarding what categories are associated with

the blog post, when the post was published, as well as links to any comments that a visitor might haveleft in regard to the post

Let’s take a look at the markup for the blog post footer:

<div class=”post”>

<h2>Recent Journal Entry</h2>

<h1 class=”storytitle”><a href=”/log/index.php?p=1” rel=”bookmark”

title=”Permanent Link: Something So Embarrasing”>Something So Embarrasing</a></h1>

<div class=”storycontent”>

<p>My garbage can was stolen last night.</p>

<p>[ content goes here ]</p>

<p>That’ll show &#8216;em That’ll show em, all! Bwahahahaha! </p>

</div><! END #storycontent >

</div><! END #feedback >

</div><! END #postfooter >

</div><! END #post >

From the source code, there are two nested divelement containers, metaand feedback, as shown inFigure 9-32

Figure 9-32: The default rendering of the blog post footer

For the postfootercontainer, I’m going to apply the following CSS rule:

❑ Changes the text in the footer to be all lowercase through the text-transformproperty

❑ Spaces out the letters by a tenth of an em unit

❑ Colors the text in the footer to a light brown color

❑ Reduces the size of the text in the footer

With the postfootercontainer examined, I move to the metacontainer Keep in mind that I want tohave the meta container and the feedbackcontainer on the same line, but on the left and right side ofeach other, respectively To do this, I use the floatproperty

The floatproperty lets content wrap around the floated element I want to adjust the widths of each ofthe metaand feedbackelements so that they don’t overlap each other and I want to set the float value to

left and right, respectively I quickly achieve part of my goal by having the two containers side-by-side,

The next step is to address the list item in the metacontainer The unordered list displays all the ries related to the blog post However, it takes a rather large amount of space To fix this problem, I’mgoing to change the display of the unordered list from block-level elements to inline, as well as removethe bullet point for each list item:

catego-ul.post-categories {display: inline;

padding: 0;

margin: 0;

}ul.post-categories li {display: inline;

list-style-type: none;

padding: 0;

margin: 0;

}And to add a final touch, I want to separate each category listing by a simple comma so that the categorynames don’t run into each other To do this I re-use the pseudo-element :afterfor the contentproperty,

as shown in Figure 9-34:

#postfooter meta li:after {content: “, “;

}

Figure 9-34: The streamlined unordered list

Again, something to keep in mind is that Internet Explorer for Windows doesn’t support this property.And, again, I’m not going to lose any sleep over the fact a handful of commas don’t show up in a brokenbrowser

With the end of styling the post, I’ve reached the end of main column content In the main column is theintroduction describing the nature or author of the site, as well as a typical blog post and respective con-tent such as the categories and comment link

Side Column ContentMoving from the main column to the second column, the approach is the same, but the parameters arebit different I’m going to be working in a smaller amount of space, letting blog posts gain a greater por-tion of the screen real estate However, the content in the side column is still very important, with themost important being the site navigation, followed by the ubiquitous blog roll

Again, I start to apply styles by working from top to bottom The first item in the side column is themain navigation.

Start of Site Navigation

The spine for any site is the menu navigation The Web is a loose collection of documents that are nected by links The difference between any old link and a site’s menu can be debated by people wiserthan I, but links in a site menu need to do a few things:

con-❑ Stand out from the rest of the Web page design

❑ Be easy to find within a page design

❑ Let the user know where he or she is in the structure of a Web site

Because I’m going to focus a lot of attention in the design and execution of the navigation, I want to ate a separate HTML page so that I won’t interfere with the other elements on the Web page When I’mdone working on the navigation, I will move the HTML over to the original Web page design and graftthe CSS rules for the navigation to the main CSS file

cre-So, with a new HTML page, I set up an unordered list structure to mirror the site map I worked out lier in the chapter, as shown in Figure 9-35

ear-Figure 9-35: The default rendering of the main navigation

The look for menus needs to be similar to (yet stand out from) the rest of the design to facilitate quickreference by visitors

In my design I conjured up in Photoshop, I believe that I have the successful look — but the interestingpart is to see if I can get CSS to help me produce it

First, let’s take a look at the navigation markup, as shown in Figure 9-35:

</ul><! END #mainnav >

For the most part the markup is straightforward It is your normal, everyday-looking heading and anunordered list Let’s break this apart piece by piece and see how CSS can help power our navigation.First up is the heading:

<h4 class=”no”>Main Navigation</h4>

I apply the classattribute in the heading with the value of no The CSS rule associated with the noclassselector removes the heading from browser This removal is done because the menu links themselveswill stand out from the rest of the page, so there is no need to have a visual label above the menu.However, the heading is left for those using screen readers or text-only browsers

The first ulelement is up first To apply CSS rules only to the site menu, I apply an idattribute with thevalue of mainnavso that it will act as a container for my CSS rules:

padding: 0;

list-style: none;

}

Figure 9-36: Removing the margin,padding, and bullets

As you can see, I’ve adjusted the main unordered list in the navigation, but not the nested unorderedlist To do that, I add another CSS rule that addresses those lists with the same properties and values, asshown in Figure 9-37:

With the foundation set, I can now move forward and start working in the design for the navigation.The design I’ve built for the navigation makes use of three-dimensional–looking graphics The idea ofthe navigation is to make the menu links look like buttons However, with typical buttons in Webdesign, the text of the label is “trapped” in the image Designers write the name of the button inPhotoshop and then export the image as a GIF or JPEG file.

This technique has worked throughout the history of Web design and is perfectly acceptable practice.But if I need to edit a label or add a new button, I need to make another stop in Photoshop and createnew images to upload, as well as rework the HTML, if I need to add a new image to the menu So, I

want to be sure to use HTML text for the labels because, well, I’m lazy I don’t want to spend my entire

life in Photoshop

To re-create the buttons from Photoshop into the Web document, I want to use a variation of DouglasBowman’s excellent Sliding Doors technique (see www.alistapart.com/articles/slidingdoors/).Essentially, I want to separate the button graphic into two parts: a top and bottom part, as shown inFigure 9-38

Figure 9-38: Splitting the button into two parts

Then, I’m going to extend the length of one of the images (as shown in Figure 9-39)

Figure 9-39: Extending the top portion of the button

Now that I have the button set, I want to create a set of similar-looking images to indicate that the page

is currently being viewed So, with my design for the buttons, I create two sets with two images each (asshown in Figure 9-40):

❑ Off State.Two images that indicate an “off” state

❑ On State.Two images that indicate an “on” state