Advance CSS (Menu and Layout)

1. Advance CSS(Menu and Layout) Miftahul Huda

2. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus. Using the immense power of CSS, we're going to turn this:

3. The HTML code for our CSS menu <div id="nav-menu"><ul><li><a href="#">Services</a></li><li><a href="#">About us</a></li><li><a href="#">Contact us</a></li></ul></div> That's it! Quite simple really. Removing the bullets First thing we'll do is remove the bullets, by creating a new CSS rule: #nav-menu ul{list-style: none;padding: 0;margin: 0;}

4. Displaying the menu items inline To get these menu items all on to one line we'll insert this CSS rule: #nav-menu li{float: left;margin: 0 0.15em;} The float CSS command is the really important one here as that aligns the menu items up against each other. The margin CSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right. Our CSS navigation menu now looks like: Removing the bullets First thing we'll do is remove the bullets, by creating a new CSS rule: #nav-menu ul{list-style: none;padding: 0;margin: 0;}

5. #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin: 0 0.15em; } #nav-menu li a { background: url(menu.jpg) #fff bottom left repeat-x; height: 2em; line-height: 2em; float: left; width: 9em;

6. display: block; border:1px solid blue; color: #0d2474; -moz-border-radius:10px; text-decoration: none; text-align: center; } /* Hide from IE5-Mac \*/ #nav-menu li a { float: none } /* End hide */ #nav-menu { width:130em }

7. /* Hide from IE5-Mac \*/ #nav-menu li a { float: none } /* End hide */ #nav-menu { width:130em } #nav-menu li a:link {color: #FF0000} /* unvisited link */ #nav-menu li a:visited {color: #00FF00} /* visited link */ #nav-menu li a:hover {color: #FF00FF; background: url(menu1.jpg) #000 bottom left repeat-x;} /* mouse over link */ #nav-menu li a:active {color: #0000FF;}/* selected link */

8. WEB Layout Using CSS In this tutorial you will learn to create a three column layout using css, and divs Here is the sample sketch of layout.

9. First of all we need to create a container for page contents.<div id=”container”> </div> • Now create three partitions of it by creating three divs (header, content and footer) inside the container tag. • Finally add three more divs inside the content part. We will use these three divs to create columns in content area. Html code for above code is: <div id=”container”> <div id=”header”>Header</div> <div id=”content”> <div class=”col1″>Column 1</div> <div class=”col2″>Column 2</div> <div class=”col3″>Column 3</div> </div> <div id=”footer”>Footer</div></div>

10. Now move to css part create the following code in your css file: body {margin:0;padding:0;} #container {margin:0;width:960px;} #container #header {height:100px;background-color:#FFFFCC;text-align:center;font:24px Verdana, Arial, Helvetica, sans-serif;} #container #content {font:12px Verdana, Arial, Helvetica, sans-serif;text-align:center;}

11. #content .col1 {float:left;width:200px;height:400px;background-color:#99CCFF;} #content .col2 {float:left;width:540px;margin-left:10px;background-color:#CC99FF;height:400px;} #content .col3 {float:right;width:200px;background-color:#99FFCC;height:400px;}

12. #container #footer {clear:both;background-color:#996633;font:12px Arial, Helvetica, sans-serif;text-align:center;}

13. Float property inside the col1, col2 and col3 classes will align the three divs left to right. Note that in the footer I used clear: both. Clear property should be used to clear heights of floating elements. “Both” used to clear right and left floating elements. Here is the result: