c# convert pdf to image: Convert pdf forms to fillable application software tool html windows web page online sams_teach_yourself_microsoft_expression_web_4_in_24_hours_2nd

284

HOUR 17: Building a Functional Menu

FIGURE 17.8

The lists within

lists appear as

subsets of their

parent list

items.

Step 2: Style the Main Menu

Now you have a working set of hyperlinks, but it looks nothing like a menu. The

next step is to turn the menu into a horizontal one like you did in the menu previ-

ously in this hour.

1. Create a new style with the ID

#dropDownMenu. Set font-familyto Arial,

Helvetica, sans-serif; background-colorto #EBEADF; borderto solid,

1px, #C4C2AB; and margin-topto 1emto create some space.

2. Create a new style with the selector

#dropDownMenu uland set paddingand

marginto 0pxfor all sides. Note that, in Design view, all the list items line up

to the left side of the box regardless of what level they are at. To ensure that

the menu retains its height, go to Position and set height to25px.

3. Create a new style with the selector

#dropDownMenu ul liand set displayto

inlineunder the Layout category. In the preceding menu, this was enough to

align the menu items left to right rather than top to bottom, but if you click

Apply, you see that the list items still stack vertically. This is because the

sublists are too wide to fit on one line and are considered one item (see

Figure 17.9).

www.it-ebooks.info

Convert pdf forms to fillable - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF

Online C# Tutorial to Automatically Fill in Field Data to PDF

convert word to fillable pdf form; convert pdf fillable forms

Convert pdf forms to fillable - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF

VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF

converting a word document to pdf fillable form; auto fill pdf form from excel

Pure CSS Drop-Down Menus: A Clean Alternative

285

FIGURE 17.9

Even with the

style set to

dis-

play:inline

,the

list still stacks

vertically.

4. To get the new menu to stack properly, you need to do two things: Define a

specific width for each list item and make them float to the left. Still in the

#dropDownMenu ul listyle, set widthunder Position to 150px. You can set it

wider if you want, but any narrower and the text in the submenu items won’t

fit. Then, go to the Layout category and set float toleft. Click Apply again,

and you see that now the main menu items line up from left to right, and the

submenu items appear as vertical lists under their respective parent item (see

Figure 17.10).

5. Because we are operating with two layers of list items, the basic font styling

should be done in the li style: Still in the #dropDownMenu ul li style, set

font-sizeto 0.8emand text-transformto uppercase. To give the buttons

some breathing space, set height under Position to 25px. Click OK to apply

the changes.

6. You now need to style the links like you did earlier. Create a new style with the

selector#dropDownMenu ul li a. Under Font, set color to#666666 and set

text-decorationto none. Go to Background and set background-colorto

#EBEADFmanually, or you can use the Eyedropper tool and pick the back-

ground color from one of the other menus. Click Apply, and you see that the

links now have the right font and background color, but that the background

is visible only directly behind the links, as shown in Figure 17.11.

www.it-ebooks.info

C# Create PDF from OpenOffice to convert odt, odp files to PDF in

Convert OpenOffice Text Document to PDF with embedded fonts. Create PDF document from OpenOffice Presentation in both to change ODT, ODS, ODP forms to fillable

convert word document to fillable pdf form; pdf form fill

VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF

Convert OpenOffice Spreadsheet data to PDF. Export PDF document from OpenOffice Presentation. Turn ODT, ODS, ODP forms into fillable PDF formats.

create a fillable pdf form; create a pdf with fields to fill in

286

HOUR 17: Building a Functional Menu

FIGURE 17.10

With the

width

and

float

attributes set,

the list starts to

look like a drop-

down menu.

FIGURE 17.11

Unless other-

wise defined,

the background

color only

appears directly

behind the link

text.

www.it-ebooks.info

C# Create PDF Library SDK to convert PDF from other file formats

Create fillable PDF document with fields. including ASP.NET web services and Windows Forms application. After creating a PDF document in C#.NET using this PDF

convert pdf to fillable form; create a pdf form that can be filled out

C# PDF Field Edit Library: insert, delete, update pdf form field

provide best ways to create PDF forms and delete PDF forms in C#.NET framework project. A professional PDF form creator supports to create fillable PDF form in

add fillable fields to pdf online; fillable pdf forms

Pure CSS Drop-Down Menus: A Clean Alternative

287

7. For the menu to look and function properly, the link area needs to extend

beyond the text to cover the allotted area in the boxes the li style has cre-

ated. In the earlier horizontal menu, you used the padding attribute to do

this, but this time, you use the line-height anddisplay attributes: Still in

the#dropDownMenu ul li a style, go to Block and set the line-height

attribute to 25px to match the height you set in the #dropDownMenu ul li

style earlier. Next, go to Layout and set display toblock. Finally, set

padding-leftto 8pxto create some space between the left edge and the text.

Click OK, and the backgrounds now fill out the correct areas, as shown in

Figure 17.12.

FIGURE 17.12

With the

line-

height

and

display

proper-

ties set prop-

erly, the link

backgrounds

extend to “fill

out” the menu

boxes.

8. Now that the buttons extend to fill the required area, create a new pseudoclass

with the selector #dropDownMenu ul li a:hover and set color to#333333

andbackground-color to#C4C2AB. Click OK, save the page, and test it in

your browser.

Previously in this book, you learned that the

block

attribute caused the element

to which it was applied to appear on its own line and fill out that line. The same

thing happens when the attribute is applied to the style in step 7, but because

the list item style (

) has already been set to inline with a fixed width, the block

is constrained by the

box and fills out only the area within it.

Did you

Know?

www.it-ebooks.info

VB.NET Create PDF Library SDK to convert PDF from other file

Batch create adobe PDF document from multiple forms in VB Best VB.NET component to convert Microsoft Office Word Create and save editable PDF with a blank page

create a pdf form to fill out and save; pdf create fillable form

C# PDF Text Box Edit Library: add, delete, update PDF text box in

Able to create a fillable and editable text box to PDF Since RasterEdge XDoc.PDF SDK is based on .NET framework ASP.NET web service and Windows Forms for any

.net fill pdf form; convert pdf to fillable pdf form

288

HOUR 17: Building a Functional Menu

Step 3: Make the Drop-Down Menus Drop Down

As you can see in Figure 17.13, the main menu and submenus line up correctly, but

the submenus are all visible all the time. However, the whole point of drop-down

menus is that they drop down only when the visitor hovers over them. To achieve

this, use the :hover pseudoclass with the visibility attribute to hide the sub-

menus.

FIGURE 17.13

Although the

menus line up

correctly, all the

submenus are

visible all the

time.

1. Hide the submenus so that they are invisible unless the user triggers them. To

do so, create a new style with the selector #dropDownMenu ul li ul. This

style affects only the unordered lists contained within a list item (that is, the

submenus). Under the Layout category, set visibility tohidden. Click OK to

apply the modified style. Now, the submenus are no longer visible in Design

view.

2. Create a new style with the selector

#dropDownMenu ul li:hover ul. This

style is a pseudoclass that triggers when the visitor hovers over a main menu

list item and affects any unordered list contained within that list item. Under

the Layout category, set visibility tovisible. Click OK to apply the

new style.

3. To ensure that the drop-down menu items appear on top of and not behind

content or below them on the page, open the selector #dropDownMenu, go to

www.it-ebooks.info

Pure CSS Drop-Down Menus: A Clean Alternative

289

Position, and set position torelative andz-index to10. The z-index value

places the entire menu in a higher level than the rest of the content on the

page.

Save and preview the page in your browser; you see that the drop-down menus now

work the way they should (see Figure 17.14). Furthermore, the menu is 100%

CSS-based, which means it works without any code additives, such as JavaScript.

However, most important, it is fully legible if the visitor uses a text-only or text-to-

speech browser.

FIGURE 17.14

The pure-CSS

drop-down menu

now works

properly in

all modern

browsers.

As you can see in Figure 17.15, with styles turned off, the CSS-based menus revert to

their original form, which is standard unordered lists with sublists. Not only is the

menu easier to read, but also the layout, and ordering is intuitive to the visitor even

without styles.

Not All Browsers Like the Pure-CSS Drop-Down Menu

As previously mentioned, the pure-CSS drop-down menu is not a perfect solution

because not all browsers support it. For unknown reasons, Internet Explorer 6

does not support pseudoclasses attached to items other than simple anchors (a

style). Because you used the

li:hover

style to create the drop-down effect, it will

not work properly in Internet Explorer 6. To solve this problem, you have to either

Watch

Out!

www.it-ebooks.info

290

HOUR 17: Building a Functional Menu

employ a custom JavaScript that simulates the

li:hover

pseudoclass for IE6 or

create a separate menu that replaces the pure-CSS drop-down menu for IE6

users. One clever workaround is to place the pure-CSS drop-down menu in one

layer and a custom IE6 menu in another, and then use the Check Browser behav-

ior to choose what layer to show in the page based on what browser the visitor

uses.

The Internet Explorer 6 compatibility issue is a diminishing one because more and

more users are upgrading to newer versions of the browser (Internet Explorer 7

has been out for some time and Internet Explorer 8 was rolled out in the spring of

2009). What’s more, most (if not all) other browsers support the

li:hover

prop-

erty. With that said, you always have to consider the lowest common denominator

and whether you should “dumb down” your sites to accommodate it.

FIGURE 17.15

With styles

turned off, the

CSS-based

menus revert

to standard

unordered lists

for easy

reading.

Styling the Submenus to Make Them Stand Out

Right now, there is no visual difference between the main menu items and the sub-

menus. But, depending on the design of the site, it can sometimes be a good idea to

give the visitor visual clues that separate different types of content from each other.

A simple way of doing this is to give the submenu items a different set of styles than

the main menu items.

www.it-ebooks.info

▼

Pure CSS Drop-Down Menus: A Clean Alternative

291

1. Create a new style with the selector

#dropDownMenu ul li ul li a. This

style affects only the links inside list items that are housed inside another

list item. Under Font, set color to#FFFFFF and under Background, set

background-colorto #3399FF. This gives the submenus a blue background

color. Click OK to apply the new style.

2. Because of the cascade, unless you specify something different, the hover state

of the submenus is styled by the #dropDownMenu ul li a:hover pseudoclass.

To change the hover state, you need to create a new pseudoclass with the

selector name #dropDownMenu ul li ul li a:hover. Set the color to

#FFFFFFand set the background-colorto #0065CA. Click OK, and save and

test the page in your browser.

With the new styles applied, the submenu now has a distinct look that is different

from the main menu (see Figure 17.16).

FIGURE 17.16

The submenu

styling produces

a visual cue

that tells the

visitor these

buttons are dif-

ferent from the

ones on the

main menu.

Try It Yourself

Create an Image-Based Menu for the MyKipple Site

Now that you know how to make a functional menu, let’s apply that knowledge to

the MyKipple site and, in the process, make it even more advanced by applying

image-based backgrounds.

▼

www.it-ebooks.info

292

HOUR 17: Building a Functional Menu

1. With the default.html file open in Split view, create a div with the ID

#mainMenuand place it inside the header. In Code view, create a new

unordered list with three buttons named Home, Gallery, and Contact. Make

each of them a link pointing back to default.html.

2. Create a new style in kippleStyles.css and give it the selector

#mainMenu ul.

Set width to 100% so that the box spans the entire width of the header box.

3. Create a new style in kippleStyles.css and give it the selector

#mainMenu ul

li. Under Block, set line-heightto 30px. Under Layout, set displayto

inline. This aligns the buttons on one line.

4. Create a new style in kippleStyles.css and give it the selector

#mainMenu ul li

a. Set colorto #000000, text-align(found under Block) to center, widthto

110px, heightto 35px, and under Layout, set displayto blockand float

toleft.

5. Create a pseudoclass for

a:hoverand set colorto #FFFFFFand

text-decorationto none.

At this point, you should have a basic three-item menu along the bottom left

side of the #header div, as shown in Figure 17.17. The buttons work, but there

are no backgrounds. Now, you assign separate graphic backgrounds to each of

the three buttons using custom classes.

6. Import the three files, green.png, blue.png, and purple.png, from the lesson

files for this hour and place them in the Graphics folder.

7. In kippleStyles.css, create a new style with the selector

.blue. Set background-

imageto blue.png, background-repeatto no-repeat, and heightto 35px.

8. In the Manage Styles panel, right-click the new

.bluestyle and select New

Style Copy from the pop-up menu. This creates an exact copy of the style.

Rename it .green and change background-image togreen.png. Click OK to

save the new style, and use the exact same technique to create a third style

with the selector .purple.

9. In Code view, find the anchor tag for the first of the three buttons and place

your cursor directly after the letter a. Press the spacebar and type

class=“blue”. This applies the .blue class to the first button.

▼

www.it-ebooks.info

Pure CSS Drop-Down Menus: A Clean Alternative

293

FIGURE 17.17

The menu items

are now styled

so that they

appear on a

horizontal line,

but they have

no backgrounds

and are

transparent.

10. In Design view, click the second button and use the Quick Tag Selector to

select the <a> tag. In the Manage Styles panel, right-click the .green style and

select Apply Style from the pop-up menu.

11. In Design view, click the third button and make sure the

<a>tag is high-

lighted in the Quick Tag Selector. In the Apply Styles panel, click the .purple

style to apply it.

As you can see in Figure 17.18, you now have three buttons with three different

backgrounds. If you paid attention to the earlier lessons in this hour, you noticed

that the styling of this menu is the same used to create the drop-down menu, which

means that if you want to, you can expand the menu to include drop-down features

later!

▼

www.it-ebooks.info

Documents you may be interested

c# convert pdf to image : Convert pdf forms to fillable application software tool html windows web page online sams_teach_yourself_microsoft_expression_web_4_in_24_hours_2nd_edition30-part2007