Advance CSS(Menu and Layout)

CSS Navigation MENU

Buat File HTML dengan isi

<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>

<style>#nav-menu ul {list-style: none;padding: 0;margin: 0; } </style>

Percobaan 1

Percobaan 2

• Tambahkan pada file HTML setelah tag <style> tadi lihat perubahaannya

#nav-menu li{float: left;margin: 0 0.15em;}

Displaying the menu items inlineTo 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 bulletsFirst thing we'll do is remove the bullets, by creating a new CSS rule:#nav-menu ul{list-style: none;padding: 0;margin: 0;}

Percobaan 3Memisahkan file html dan css

• Buat file coba.css, pindahkan isi dari tag <style>…</style> dari file html ke file coba.css dan hilangkan tag<style></style>, simpan kedua file.

• Tambahkan diawal baris file html

<link rel="stylesheet" type="text/css" href=“coba.css" />

#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;display: block;border:1px solid blue;color: #0d2474;-moz-border-radius:10px;text-decoration: none; text-align: center; }

#nav-menu li a { float: none }#nav-menu { width:130em } #nav-menu li a { float: none }#nav-menu { width:130em } #nav-menu li a:link {color: #FF0000} #nav-menu li a:visited {color: #00FF00}#nav-menu li a:hover {color: #FF00FF;background: url(menu1.jpg) #000 bottom left repeat-x;} #nav-menu li a:active {color: #0000FF;}

Percobaan 4 - coba.css

Percobaan 5

Buat Layout halaman web seperti dibawah ini, gunakan <div>

File HTML untuk percobaan 5

<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>

Percobaan 6

File CSS untuk percobaan 5

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;}#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;}

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

Percobaan 7

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: