The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18 ppsx

A curved box created by using markup and images Solution 3: Using JavaScript Adding markup and images to your code can be an unattractive option, especially if you have a lot of boxes

The markup for this example is as follows The top-left and bottom-left images are included in the document itself, within top and bottom divs:

chapter09/corners2.html

The top-right and bottom-right images are included as background images in the CSS for the divs, with the classes rndtop and rndbottom:

chapter09/corners2.css (excerpt)

Together, the images, markup, and CSS create a curved box like the one shown in Figure 9.24

Figure 9.24 A curved box created by using markup and images

Solution 3: Using JavaScript

Adding markup and images to your code can be an unattractive option, especially

if you have a lot of boxes requiring rounded corners To deal with this problem, many people have come up with solutions that use JavaScript to add the rounded corners to otherwise square boxes The beauty of this is that even if users have JavaScript disabled, they see a perfectly usable site—it merely lacks the additional style of the curved edges

Various methods have been devised to achieve rounded corners using JavaScript, but here we’ll look at just one—NiftyCube—as it’s very easy to drop into your code and make a start The script is included in the code archive for this book, but if you’d like the latest version, download NiftyCube from the NiftyCube web site, and unzip the zip file.3 You’ll find lots of example pages in the zip archive, but all you need to implement this effect in your own pages is the JavaScript file niftycube.js

and the CSS file niftyCorners.css Copy these files into your site Our starting point

is a square-cornered box created by the following markup:

chapter09/corners3-start.html

You have a reasonable amount of freedom in terms of the way you style your box,

with one exception—the padding inside your box must be specified in pixels If

you use any other unit, such as ems, then your corners will fail to render properly

in Internet Explorer The result of our work is pictured in Figure 9.25

chapter09/corners3.css

Figure 9.25 The square box

To add rounded corners to this box using NiftyCube, link the JavaScript file to the head of your document, then write a simple function to tell the script that you wish

to round the corners of the class curvebox:

chapter09/corners3.html

This markup produces the display shown in Figure 9.26

Figure 9.26 Rounded corners without images or extra markup

Discussion

While numerous solutions are available to help you create rounded corners without JavaScript, they all require you to insert additional markup or ensure that your markup is structured in a certain way.4 If you only have a few boxes whose corners you want to round—perhaps a main layout container or a couple of larger boxes—the additional images and markup will only be a minor imposition But if your layout includes many rounded corners, peppering your markup with extra divs and images may be an extremely undesirable option The JavaScript method allows cleaner HTML code, but as with all JavaScript solutions, it only works when the user has JavaScript enabled

Personally, I feel that using JavaScript in this way—to plug the holes in CSS sup­ port—is legitimate As long as you’ve checked that your layout remains clear and easy to use without the rounded corners, those without JavaScript will continue to use your site If you do use this JavaScript solution on a project, be sure to check the whole site with JavaScript turned off, to make sure that the users still have a positive experience on the site

4

One attempt at generating rounded corners using semantic markup and no JavaScript is Spanky Corners [http://tools.sitepoint.com/spanky/], created by SitePoint’s Alex Walker

How do I create a liquid, two-column layout with the menu on the left and the

content on the right?

Web page layouts like that shown in Figure 9.27, displaying a menu on the left and

a large content area to the right, are extremely common Let’s discover how to build this layout using CSS

Figure 9.27 Building a liquid two-column layout using CSS

Solution

Here’s the markup and CSS that produces the display shown in Figure 9.27:

chapter09/2col.html

⋮

chapter09/2col.css

Discussion

Our starting point for this layout is the header that we created in “How do I align

a site’s logo and slogan to the left and right?” We’ve added to that layout some content, which resides within a div whose ID is content The navigation for the page comprises two unordered lists that are contained in a div with the ID nav As you’d expect, without any positioning applied, these blocks will display below the heading in the order in which they appear in the document (as depicted in Fig­ ure 9.28)

Figure 9.28 The content and navigation displaying without positioning information

At this point, the CSS looks like this:

chapter09/2col.css (excerpt)

Sizing and Positioning the Menu

Let’s use absolute positioning to position the menu just under the heading bar, and give it an appropriate width:

chapter09/2col.css (excerpt)

As you can see in Figure 9.29, this code causes the menu to appear over the text content, as the absolute positioning we’ve applied has removed it from the flow of the document

Figure 9.29 Positioning the menu absolutely

Positioning the Content

As we’re aiming to maintain a liquid layout, it’s undesirable to assign a fixed width

to the content and, in fact, it’s unnecessary anyway The problem with the content

is that it appears where we want the menu to sit To solve this problem, we can simply apply a large left-hand margin to the content area to allow space for the menu The results are shown in Figure 9.30:

Figure 9.30 Adding margins to the content

Now that all the elements are laid out neatly, we can work on the styling of indi­ vidual elements, using CSS to create the layout we saw back in Figure 9.27 The completed CSS style sheet is given at the start of this solution

Ems for Positioning Text Layouts

I used ems to position the elements in this layout The em unit will resize as the text resizes, which should help us avoid any problems with overlapping text if users resize fonts in their browsers For layouts that are predominantly text-based, the em is an excellent choice for setting the widths of boxes and margins However, care should be taken if your design involves many images, as they lack the ability

to resize with text In this instance you may prefer to use pixels to position ele­ ments in cases where you need precise control over the elements’ locations on the page

Can I reverse this layout and put the menu

on the right?

Can the technique presented in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?” be used to create a layout in which the menu is positioned on the right?

Solution

Yes, exactly the same technique can be used! You’ll need to position your menu from the top and right, and give the content area a large right margin so that the menu has sufficient space in which to display The result is shown in Figure 9.31

Figure 9.31 Building a two-column layout so that the menu appears on the right

Discussion

Positioning the menu on the right requires no change to the markup of the original document All we need to do is change the positioning properties for nav, and the margins on content:

chapter09/2col-reverse.css

The advantage of using absolute positioning can be seen clearly here It’s of no consequence where our menu appears in the markup: the use of absolute positioning means it will be removed from the document flow and we can place it wherever

we like on the page This can be of great benefit for accessibility purposes, as it allows

us to place some of the less-important items (such as lists of links to other sites, advertising, and so on) right at the end of the document code This way, those who employ screen readers to use the site are saved from having to hear these unnecessary items read aloud each time they access a page Yet you, as the designer, are still able to position these items wherever you like for visual effect

How do I create a fixed-width, centered, two-column layout?

You can use CSS to create a two-column layout that’s contained within a centered div on the page

Solution

Creating a two-column, width, centered layout is slightly trickier than a fixed-width, left-aligned, or liquid layout; that’s because there is no absolute reference

point from the left-hand or right-hand side of the viewport that you can use to pos­ ition the elements horizontally However, there are a couple of different ways in which we can deal with this complication in order to achieve the kind of layout shown below

Whichever layout method you choose, the HTML is the same:

chapter09/2col-fixedwidth.html

⋮

The first and simplest option to achieve this layout is to place the content and navigation elements within the centered block, using absolute and relative position­ ing, respectively:

chapter09/2col-fixedwidth.css

As you can see from Figure 9.32, this gives us a very simple layout Adding more design features, such as a background image behind the content or a border wrapping

Figure 9.32 The fixed-width, centered layout

An alternative approach is to simply float the navigation and content against the left and right sides of the centered block, respectively Floating the elements will give you more flexibility if you need to add other elements to the layout, such as a footer, or if you want to add a border around the layout If you float the left and right columns, you can add a footer and apply clear: both to place it beneath the two columns, regardless of their heights This dynamic placement of the footer within the document flow is impossible if the columns are absolutely positioned We’ve also taken advantage of the floated layout and added a border around the entire layout:

chapter09/2col-fixedwidth-float.css