Building horizontal lists in Java
Building horizontal lists PDF417 Generator In Java Using Barcode printer for Java Control to generate, create PDF-417 2d barcode image in Java applications. Sometimes, you want horizontal button bars Because XHTML lists tend to be vertical, you might be tempted to think that a horizontal list is impossible In fact, CSS provides all you need to convert exactly the same XHTML to a horizontal list Figure 3-2 shows such a page Bar Code Drawer In Java Using Barcode creator for Java Control to generate, create bar code image in Java applications. Book III 3
Decode Bar Code In Java Using Barcode reader for Java Control to read, scan read, scan image in Java applications. Styling Lists and Menus
PDF-417 2d Barcode Generator In C#.NET Using Barcode maker for .NET framework Control to generate, create PDF417 image in .NET applications. Figure 3-2: This list uses the same XHTML but different CSS
Drawing PDF 417 In Visual Studio .NET Using Barcode generation for Visual Studio .NET Control to generate, create PDF 417 image in Visual Studio .NET applications. Creating Dynamic Lists
Draw PDF417 In Visual Basic .NET Using Barcode drawer for .NET framework Control to generate, create PDF417 image in .NET framework applications. There s no need to show the XHTML again because it hasn t changed at all (ain t CSS grand ) Even the CSS hasn t changed much: Barcode Printer In Java Using Barcode encoder for Java Control to generate, create barcode image in Java applications. #menu ul { margin-left: -25em; } #menu li { list-style-type: none; float: left; width: 5em; text-align: center; } #menu a { text-decoration: none; color: black; display: block; border: 3px blue outset; background-color: #CCCCFF; } #menu a:hover { border: 3px blue inset; } Make Bar Code In Java Using Barcode generator for Java Control to generate, create barcode image in Java applications. The modifications are incredibly simple: Encoding Bar Code In Java Using Barcode generator for Java Control to generate, create bar code image in Java applications. 1 Float each list item by giving each li a float:left value: Making Code 128A In Java Using Barcode maker for Java Control to generate, create USS Code 128 image in Java applications. #menu li { list-style-type: none; float: left; width: 5em; text-align: center; } Making UPC A In Java Using Barcode generation for Java Control to generate, create GS1 - 12 image in Java applications. 2 Move the margin-left to the entire ul by taking the margin-left
Print Royal Mail Barcode In Java Using Barcode drawer for Java Control to generate, create RoyalMail4SCC image in Java applications. formatting from the li elements and transferring it to the ul: Draw Code128 In Visual Basic .NET Using Barcode maker for .NET framework Control to generate, create ANSI/AIM Code 128 image in .NET applications. #menu ul { margin-left: -25em; } Generating UCC - 12 In VB.NET Using Barcode creator for .NET framework Control to generate, create UPCA image in Visual Studio .NET applications. 3 Add a horizontal element
Bar Code Creation In Visual Basic .NET Using Barcode drawer for Visual Studio .NET Control to generate, create barcode image in Visual Studio .NET applications. Now that the button bar is horizontal, it makes more sense to put in some type of horizontal page element For example, you may want to use this type of element inside a heading div Encoding Bar Code In VS .NET Using Barcode generation for .NET Control to generate, create barcode image in Visual Studio .NET applications. Creating Dynamic Lists
Painting GS1 128 In .NET Framework Using Barcode maker for .NET Control to generate, create UCC-128 image in .NET framework applications. A simple list of buttons can look better than ordinary XHTML links, but sometimes, your page needs to have a more complex navigation scheme For example, you may want to create a menu system to help the user see the structure of your site Encode Data Matrix In VS .NET Using Barcode generator for VS .NET Control to generate, create ECC200 image in Visual Studio .NET applications. Creating Dynamic Lists
Bar Code Drawer In Visual Studio .NET Using Barcode printer for .NET Control to generate, create bar code image in .NET applications. When you think of a complex hierarchical organization (which is how most multi-page Web sites end up), the easiest way to describe the structure is in a set of nested lists XHTML lists can contain other lists, and this can be a great way to organize data Nested lists are a great way to organize a lot of information, but they can be complicated You can use some special tricks to make parts of your list appear and disappear when needed In the sections Hiding the inner lists and Getting the inner lists to appear on cue, later in this chapter, you expand this technique to build a menu system for your pages Printing GS1 - 13 In C#.NET Using Barcode generator for .NET framework Control to generate, create EAN13 image in .NET framework applications. Building a nested list
Begin by creating a system of nested lists without any CSS at all Figure 3-3 shows a page with a basic nested list No CSS styling is in place yet, but the list has its own complexities: The primary list has three entries This is actually a multi-layer list The top level indicates categories, not necessarily links Each element in the top list has its own sublist A second layer of links has various links in most elements Book III 3
Styling Lists and Menus
Figure 3-3: This nested list has no styles yet
Creating Dynamic Lists
The Web Development element has another layer of sublists The general layout of this list entry corresponds to a complex hierarchy of information like most complex Web sites The list validates to the XHTML Strict standard It s especially important to validate your code before adding CSS when it involves somewhat complex XHTML code, like the multi-level list A small problem in the XHTML structure that may go unnoticed in a plain XHTML document can cause all kinds of strange problems in your CSS Here is the code for the nested list in plain XHTML: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 10 Strict//EN http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd > <html lang= EN dir= ltr xmlns= http://wwww3org/1999/xhtml > <head> <meta http-equiv= content-type content= text/xml; charset=utf-8 /> <title>nestedListhtml</title> </head> <body> <h1>Some of my favorite links</h1> <ul> <li>Social networking <ul> <li><a href = http://wwwdiggcom >dig</a></li> <li><a href = http://wwwredditcom >reddit</a></li> <li><a href = http://wwwstumbleuponcom >stumbleupon</a></li> </ul> </li> <li>Reference <ul> <li><a href = http://wwwgooglecom >google</a></li> <li><a href = http://wikipediaorg >wikipedia</a></li> <li><a href = http://dictionarycom >dictionary</a></li> </ul> </li> <li>Web development <ul> <li>XHTML/CSS <ul> <li><a href = http://wwww3schoolscom >w3 schools</a></li> <li><a href = http://htmlhelpcom >htmlHelp</a></li> <li><a href = http://wwwcsszengardencom >CSS Zen Garden</a></li> </ul> </li> <li>Programming <ul> <li><a href = http://javascriptcom >javascriptcom</a></li> <li><a href = http://phpnet >phpnet</a></li> <li><a href = http://wwwmysqlcom >mysqlcom</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
|
|
|
|
| ALL RIGHTS RESERVED. Business Refinery (c) 2006 - 2010. | Terms of Use | Privacy Policy |