Evjen c18.tex V2 - 01/28/2008 3:01pm Page 877 Chapter 18: HTML and CSS Design with ASP.NET The CSS Box Model A core element of positioning in CSS is the box model. The box model defines how every element in HTML is treated by the browser as a rectangular box. The box comprises different parts, including margins, padding, borders, and content. Figure 18-7 shows how all of these elements are combined to form the box. Figure 18-7 All of the separate elements that make up the box can influence its position within the Web page, and unless otherwise specified, each is given a default value of zero. The height and width of the element is equal to the height and width of the outer edge of the margin, which as you can see in the previous image, is not necessarily the height and width of the content. HTML provides you with two different types of boxes, the block box and the inline box. Block boxes are typically represented by tags such as < p >, < div >,or< table >. For block boxes, the containing block is used to determine the position of its child blocks. Additionally, block boxes can contain only inline or block boxes, but not both. Listing 18-9 shows an example of a page containing a single parent block and two child block elements. Listing 18-9: Creating block box elements <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <div> Donec et velit a risus convallis porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna. \ </div> <div>Duis lobortis felis in est. Nulla eu velit ut nisi consequat vulputate.</div> Vestibulum vel metus. Integer ut quam. Ut dignissim, sapien sit amet malesuada aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros. Sed semper lacinia diam. In faucibus nonummy arcu. Duis venenatis interdum quam. Aliquam ut dolor id leo scelerisque convallis. Suspendisse non velit. Quisque nec metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pellentesque interdum magna. </div> The second box type is the inline box. Inline boxes are typically represented by tags such as B , I ,and SPAN well as and actual text and content. Listing 18-10 shows how the previous listing can be modified to include inline boxes. 877 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 878 Chapter 18: HTML and CSS Design with ASP.NET Listing 18-10: Creating inline box elements <div> Lorem <b>ipsum</b> dolor sit amet, consectetuer adipiscing elit. <div> Donec et velit a risus <b>convallis</b> porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna. </div> <div>Duis lobortis felis in est. <span>Nulla eu velit ut nisi consequat vulputate.</span> </div> <i>Vestibulum vel metus.</i> Integer ut quam. Ut dignissim, sapien sit amet malesuada aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros. Sed semper lacinia diam. In faucibus nonummy arcu. Duis venenatis interdum quam. Aliquam ut dolor id leo scelerisque convallis. Suspendisse non velit. Quisque nec metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pellentesque interdum magna. </div> Rendering this page results in each block beginning a new line. Figure 18-8 shows the markup rendered in the browser. Figure 18-8 The Visual Studio design surface can help you get a clear picture of the layout of a div as well. When you select an individual div element, the design surface highlights the selected element, as shown in Figure 18-9. At the beginning of this section, I stated that a block will always container either inline or block boxes, but it’s interesting to note that in this case, because the first line of text contains an inline box, and the next contains a block box, it looks like the parent div is violating that rule. However, what is actually 878 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 879 Chapter 18: HTML and CSS Design with ASP.NET happening is that the browser automatically adds an anonymous block box around the first line of t ext when the page is rendered. Figure 18-10 highlights the block boxes as the browser sees them. Figure 18-9 Figure 18-10 You can explicitly set which box behavior an element will exhibit by using the position attribute. For example, setting the position property on the second div, as shown here, results in the layout of the content changing. <div style="display:inline;">Donec et velit a risus <b>convallis</b> porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna.</div> Figure 18-11 shows how adding this property changes the rendering of the markup on the Visual Studio design surface. You can see that now, rather than the element being displayed on a new line, its content is simply continued from the previous block. You can also set the display property to none to completely remove the element from the Web page layout. If you have elements whose display property is set to none ,oranelementwhose visibility property is set to hidden , Visual Studio gives you the option of showing or hiding these elements on its design surface. 879 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 880 Chapter 18: HTML and CSS Design with ASP.NET Figure 18-11 As shown in Figure 18-12, there are two options on the View menu that allow you to toggle the design surface visibility of elements with these properties set. Figure 18-12 Positioning CSS Elements CSS provides you with three primary positioning mechanisms: Normal, Absolute, and Relative. Each type offers a different behavior you can use to lay out the elements in your page. To specify the type of layout behavior you want an element use, you can set the CSS position property. Each element can have its own position property set, allowing you to use multiple positioning schemes within the same Web page. Normal Positioning Using Normal positioning, block items flow vertically, and inline items flow horizontally, left to right. This is the default behavior, and is used when no other value is provided for the position property. Figure 18-13 demonstrates the layout of four separate blocks using Normal positioning. As you can see, each block item flows vertically as expected. 880 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 881 Chapter 18: HTML and CSS Design with ASP.NET Figure 18-13 Relative Positioning Using Relative positioning, elements are initially positioned using Normal layout. The surrounding boxes are positioned and then the box is moved based on its offset properties: top , bottom , left ,and right . Figure 18-14 shows the same content as in the prior section, but now the third block box has been styled to use Relative positioning. Visual Studio is helping you out by providing positioning lines for the block, showing you that its top offset is being calculated based on the normal top position of the block, and the left offset from the normal left position. Visual Studio even lets you visually position the block by grabbing the element’s tag label and dragging it over the design surface. Figure 18-14 881 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 882 Chapter 18: HTML and CSS Design with ASP.NET As you position the element on the design surface, the element’s top and left values are being updated. You will end up with an element looking something like this: <div style="position: relative;top: 214px;left: 62px;width: 239px;height: 81px"> Donec et velit a risus <b>convallis</b> porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna. </div> If you are using relative positioning and have both left and right offsets defined, the right will generally be ignored. Absolute Positioning Absolute positioning works much like relative positioning, except instead of an element calculating its offset position based on its position in the normal positioning scheme, the offsets are calculated based on the position of its closest absolutely positioned ancestor. If no element exists, then the ancestor is the browser window itself. Figure 18-15 shows how blocks using absolute positioning are displayed on the Visual Studio design surface. As you can see, unlike the display of the relative positioned element shown in the previous section, this time the positioning lines extend all the waytotheedgeofthedesignsurface.Thisisbecause the block is using the browser window to calculate its offset. Figure 18-15 As with relative blocks, you can use the element’s tag label to position the element on the page, and Visual Studio will automatically update the offset values. The block in Figure 18-15 would output an element that looks something like this: <div style="position: absolute;top: 180px;left:94px;width:239px;height:81px;"> Donec et velit a risus <b>convallis</b> porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna. </div> Floating Elements Another option for controlling the position of elements using CSS is the float property. The float property allows you to float an element to the left or right side of a block. The floating block is 882 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 883 Chapter 18: HTML and CSS Design with ASP.NET positioned vertically as it would normally be in normal position, but horizontally shifted as far left or right as possible. Listing 18-11 demonstrates floating the same block used in previous samples in this section. Listing 18-11: Floating a block element to the right <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> </head> <body> <form id="form1" runat="server"> <div id="asdas" class="werwer"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div style="float:right;width: 236px;"> Donec et velit a risus <b>convallis</b> porttitor. Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna. </div> <div>Duis lobortis felis in est. Nulla eu velit ut nisi consequat vulputate.</div> <div> Vestibulum vel metus. Integer ut quam. Ut dignissim, sapien sit amet malesuada aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros. Sed semper lacinia diam. In faucibus nonummy arcu. Duis venenatis interdum quam. Aliquam ut dolor id leo scelerisque convallis. Suspendisse non velit. Quisque nec metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pellentesque interdum magna. </div> </form> </body> </html> The block has been modified to include the float property in its style. When this is done, Visual Studio correctly positions the element to the far right side of the page. This is shown in Figure 18-16. Figure 18-16 The !important Attribute As you saw earlier in this chapter, the browser will choose to apply the closest style to the element, which can mean that properties of other applied styles may be overridden. As with many other rules 883 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 884 Chapter 18: HTML and CSS Design with ASP.NET in CSS, this too is not absolute. CSS provides a mechanism to circumvent this called the !important attribute. Properties that have this attribute applied can prevent other CSS rules from overriding its value. Listing 18-8 showed how the font-family property can be overridden. You can see how the !important attribute works by modifying this sample to use the attribute. This is shown in Listing 18-12. Listing 18-12: Using the !important attribute to control style overriding <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <style type="text/css"> p { font-family:Arial !important; } p { font-family: Courier New; } </style> </head> <body> <form id="form1" runat="server"> <p>Lorum Ipsum</p> </form> </body> </html> In this case, rather than the paragraph being shown in Courier New, it will use the Arial font because it has been marked with the !important attribute. Working with HTML and CSS in Visual Studio Working with HTML and CSS to create compelling Web site designs can be quite daunting. Thankfully, Visual Studio provides you with a variety of tools that help simplify page layout and CSS management. As you are probably already familiar with, Visual Studio includes a great WYSIWYG design surface. In prior versions of Visual Studio, this design surface used Internet Explorer to generate the design view, but with the release of Visual Studio 2008, Microsoft has completely rewritten the design surface t o be completely independent of Internet Explorer. In Visual Studio, when the Design View has focus, two additional menus become available: the Format menu and the Table menu. This is shown in Figure 18-17. Figure 18-17 884 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 885 Chapter 18: HTML and CSS Design with ASP.NET The Table menu, as you might guess, includes a set of tools that allow you to Insert, Delete, Select, and Modify the HTML Tables in your Web page. Selecting the Insert Table option from the Table menu opens the Insert Table dialog box shown in Figure 18-18, which allows you to easily specify properties of your table. You can define the number of table rows and columns, the cell padding and spacing, and border attributes, and when you click OK, Visual Studio automatically generates the appropriate table HTML in your Web page. Figure 18-18 When you select an existing table in your Web page, the Table menu lets you insert and delete table rows, columns, and cells. The Modify menu option also allows you to split an existing cell into two separate cells, merge two cells into a single cell, and configure row and column sizing. The Format menu includes basic element formatting options such as accessing the elements CSS class; setting fore and background colors, font, and position; and converting content to different types of lists. 885 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 886 Chapter 18: HTML and CSS Design with ASP.NET Working with CSS in Visual Studio Visual Studio 2008 offers a variety of new t ools specifically designed to make working with CSS a much better experience. When working with the Visual Studio design surface, it’s easy to create new styles for your Web page. You can either right-click on any object and select the New Style option from the content menu, or select the New Style option from the Format menu. Either option opens the New Style dialog box, shown in Figure 18-19. Figure 18-19 This dialog box makes creating a new style a snap. To start, select the type of Selector you want to create from the Selector drop-down list. The list includes all of the available element types, or if you want to create a Class or ID selector, simply type the Style name into the Selector combo box. Next, you need to select where you want to create the style from the Define In combo box. You can select Current Page to create an internal style sheet, New Style Sheet to create a new external style sheet file, or 886 . 3: 01pm Page 881 Chapter 18: HTML and CSS Design with ASP. NET Figure 18- 13 Relative Positioning Using Relative positioning, elements are initially positioned using Normal layout. The surrounding. merge two cells into a single cell, and configure row and column sizing. The Format menu includes basic element formatting options such as accessing the elements CSS class; setting fore and background. font, and position; and converting content to different types of lists. 8 85 Evjen c18.tex V2 - 01/28/2008 3: 01pm Page 886 Chapter 18: HTML and CSS Design with ASP. NET Working with CSS in Visual