| One of the most frustrating aspects of using frames is the clunky-looking borders that standard HTML puts between them (Figure 21.12). When you use the background property, however, you can use any border design you dream up. Figure 21.12. A frameset with default frame borders. It's nice if you like that kind of thing. 
Although these borders can be placed only along the left side or top of an individual frame, they're still very useful for showing boundaries between frames, as shown in Figure 21.13. Figure 21.13. A frameset created with CSS, showing an ornate red border separating the frames. 
To create a frame border: 1. | border.gif
Create the frame-border graphic. For this example, I'm using an ornate design that I saved as "border.gif" (Figure 21.14). You can use anything you want for this graphic.
Figure 21.14. The graphic used to create the border for the right frame. Remember, you can use anything you want for your borders. Go wild! 
| | | 2. | index.html
Create a frame document, and save it as "index.html," making sure that you turn off the default border (Code 21.10):
frameborder="no" framespacing="0" border="0"
Code 21.10. index.html: The frameset document.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1  /DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Styling Frames</title> </head> <frameset rows="*,100"> <frameset cols="*,250"> <frame src="/books/3/292/1/html/2/center_frame.html" name="centerFrame" noresize="noresize" /> <frame src="/books/3/292/1/html/2/right_frame.html" name="rightFrame" noresize="noresize" /> </frameset> <frame src="/books/3/292/1/html/2/bottom_frame.html" name="bottomFrame" scrolling="no" noresize="noresize" /> </frameset> <noframes></noframes> </html>
|
| | | 3. | right_frame.html
Use the background property in the <body> tag of an HTML document (Code 21.11 and Code 21.12) to place the border graphic from Step 1 in the background of the desired frame(s). Repeat this graphic either horizontally
Code 21.11. right_frame.html: A frame with a custom vertical border that has been set using the background property.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Styling Frmaes</title> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background: white url(border2.gif) repeat-y; margin-left: 20px } h3 { font: small-caps bold 18px "Helvetica Neue Narrow", Arial, Helvetica, sans-serif; } /*** Navigation ***/ #navigation { font: bold 12px "Helvetica Neue Narrow", Arial, Helvetica, sans-serif; } #navigation ol { list-style-type: none; margin: 0px; padding: 0px; } #navigation ol li { display: block; margin: 0px; margin-bottom: 0px; padding-bottom: 0px; margin-left: -40px; } #navigation a { padding: 2px 4px; border-top: 3px solid #ccc; text-decoration: none; display: block; } #navigation a:link { color: red; } #navigation a:visited { color: red; } #navigation a:hover { background-color: #ccc; border-top: 3px solid #666; color: red; } #navigation a:active { background-color: red; border-top: 3px solid #fff; color: #fff; } </style> </head> <body> <div > <h3>Table of Contents</h3> <ol> <li><a href="#">Down The Rabbit-Hole</a></li> <li><a href="#">The Pool of Tears</a></li> <li><a href="#">A Caucus-Race and a Long Tale</a></li> <li><a href="#">The Rabbit Sends in a Little Bill</a></li> <li><a href="#">Advice from a Caterpillar</a></li> <li><a href="#">Pig and Pepper</a></li> <li><a href="#">A Mad Tea-Party</a></li> <li><a href="#">The Queen's Croquet-Ground</a></li> <li><a href="#">The Mock Turtle's Story</a></li> <li><a href="#">The Lobster Quadrille</a></li> <li><a href="#">Who Stole The Tarts?</a></li> <li><a href="#">Alice's Evidence </a></li> </ol></div> </body></html>
|
(background: #f99 url(header_01.png) repeat-x)
or vertically
(background: white url(border2.gif) repeat-y)
for a full border (see "Setting Multiple Background Values" in Chapter 5).
Code 21.12. bottom_frame.html: A frame with a custom horizontal border set using the background property.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Styling Frames</title> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; margin: 0px; background: #f99 url(header_01.png) repeat-x; } h1 { font-size: 28px; padding-bottom: 0px; margin-bottom: 0px; } #header { height: 100px; color: #fff; border: 1px solid RGB(255,204,204); padding: 0px 8px; vertical-align: middle; } .authorName { font: 18px "Helvetica Neue", Arial, Helvetica, sans-serif; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <span >Lewis Carroll</span> </div> </body></html>
|
|
 Tips
Remember that in addition to the border, you can give separate styles to each frame. Each frame is a different Web page and can, thus, include completely different styles, including backgrounds, colors, and fonts. However, it is a good idea to keep the frames visually similar so that they mesh well together. The design of the border can be anything you want, and it can be as thick or thin as you want. Just remember that the image repeats along whichever axis you specify. These borders have one big drawback compared with the default frame-border style: Neither you nor the visitor can use these borders to resize the frame.
|
