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

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 
li
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 (
li
) has already been set to inline with a fixed width, the block
is constrained by the 
li
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
Documents you may be interested