Adding a div element in Java

Generator ECC200 in Java Adding a div element

You can add a div element onto a page by double-clicking the <div> tag in the Toolbox task pane (Or you can choose Insert HTML <div>) The div element, displayed as a dotted rectangular box, is added at the current cursor position See Figure 4-1 Note that Expression Web doesn t let you insert a div element inside a paragraph

You can add content to the div element or position it To add content, simply begin typing just as you would the document body

You can resize the div directly by selecting it and then using the handles on the border to change its dimensions However, the kind of positioning that you can perform using your mouse is limited because you re working within a flow-based environment in which everything normally is positioned in a left-to-right, top-down manner Therefore, to position your div, you want to use CSS If you already have a style defined in a style sheet for your div, you can use the Apply Styles task pane to apply the style to the div that you just created However, if you don t have a style already created, you can perform the following:

The Position dialog box is displayed (see Figure 4-2)

like the div to have, relative to the normal document text The Left and Right settings add a float CSS property to the div

positioned in an absolute, fixed position or relative to other elements around it Or, if you don t want to specify, click None

If you choose Absolute, the div element is not wrapped around other elements Therefore, the div element might be overlain above or beneath other content In most cases, you want to position the div relative to other elements on the page to ensure that they don t overlap

Bottom values in the spaces provided These values are not used when the div is relatively positioned

The div is repositioned and resized based on your settings Figure 4-3 shows a right-wrapped block sized to 150 x 300 pixels In addition, as Figure 4-3 shows, the CSS Properties task pane displays the properties you set You can use the task pane to tweak these positioning values, if desired

The Positioning toolbar, as shown in Figure 4-4, is useful for tweaking various aspects of the position and size settings You can access this by choosing View Toolbars Positioning

Because a div element is a blocked container of content, it has no appearance to it other than the content that is packaged inside of it However, you can use CSS to apply formatting to it giving it a background, border, margins, and padding As you get more and more comfortable with creating CSS style sheets (see Book V), you will likely find yourself creating class-based styles for your div elements so that they look uniform across your Web site However, you can also apply formatting directly to div elements Here s how: Laying Out Your Page with Expression Web

If the task pane is not visible, choose Format CSS Properties Be sure that the Summary view isn t enabled, or else you can t see all the formatting properties If the list shows only a handful of properties, click the Summary button to see the full list See Figure 4-6

three subproperties This example sets border-width to thin, border-color to black (#000000), and border-style to solid

element from other elements on the page To move the div down from the top of the page, use the margin-top property For this example, we specified 50px To offset the div from the rest of the page content, we defined the left and bottom margin to be 10px We didn t specify the margin-right property because we d like it to be aligned to the side of the page

7 In the Box category, specify the padding properties to offset the content of the div with its border Typing 5px in the padding property defines the same value for all four sides Figure 4-7 shows a newly formatted div element