Creating a wizard using tabs
This recipe will explain how you can create a wizard in which you can guide a user step by step.
Getting ready
Create a folder for this recipe and name it as Recipe7. Create an index.html file inside it.
How to do it...
Similar to the previous recipe, create the structure for tabs using list items of an unordered list as tab headers and DIV elements with class
tabContentas containers for respective tabs. Do not forget to define the CSS styles in theheadsection.<html> <head> <title>Tabs</title> <style type="text/css"> body { font-family:"Trebuchet MS",verdana; margin: 50px auto; width:600px; } .tabContainer { border:1px solid black; float:left; width:600px; } ul { float: left; margin: 0pt; padding: 0pt; list-style: none; width:600px; } li { border-left:1px solid black; border-right:1px solid black; ...
