This tutorial will focus on the notification bar and the sidebar.
1) First the notification bar, you can replicate it exactly by using an unordered list. The black bullet can be change to the star image by specifying: <ul style=”list-style-image: url(img/bullet.jpg);”>, where the bullet.jpg is the screen shot of the star.
2) The sidebar is divided into few sections:
- the Homestay at Melaka logo
- the navigation menu
- the search-box
- the price menu
- the maximum visitors menu
3) The logo is a clickable link, so inside the logo div, we embed it as a hyperlink tag.
4) The navigation menu is actually a unordered list too. In the CSS, we specify the list-style as none, so it won’t show the bullets. Then we make sure the text decoration on the links is set to none as well.
5) The search box is implemented by using twitter bootstrap.
6) Both the price menu and the maximum visitor menu is also implemented using unordered list. The steps are same with (4).