Now it is time to specify the styles for your header div tag.
- In the screen that opens. Select ‘Background’. Browse the header background image.
- Select ‘Box’. For the Width, type ’100′ and select ‘%’ from the drop down. For the Height type ’94′ and select ‘px’ from the drop down. Click ok.
- You will come back to the ‘Insert Div tag’ screen. Click OK.
- In your template page you will see the ‘header’ div displayed with the background image and the height/width specified in the css style sheet.
You will see that there is a white margin around the ‘header’ div. This is because html pages have a default margin/ padding. To remove this we will give new properties to the ‘body’ tag within the css stylesheet. To do this:
- Bring up the ‘CSS Styles’ panel [Window > CSS Styles]
- Click the ‘New CSS Rule’ icon at the bottom.
- Choose the following:
– Selector type: Tag
– Selector Name: body
– Rule Definition: styles.css
Click OK
- In the CSS Rule Definition screen that opens, select Box and type ’0′ for both Padding and Margin. Click OK.
- You will see that the header is now sticking to the top, left and right of the screen in template.dwt. The deafault margin and padding has been removed.