• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Inserting One Lone <div>

Remember the logo for the Resort? The one that just seemed too hard to place into the page design? That’s the very last step you need to tackle, and this time you’ll get the job done by creating an absolutely positioned <div> to handle the job.

Add a new style, set the Selector Type to Advanced, and name it #logo. Be sure you are still working in the pbr_style.css file.

While it seems a little backwards, the first step in inserting the image is to define the container that it will go into in CSS.

Select the Positioning category and set Type to Absolute, Width to 121 pixels, Height to 127 pixels, Top to 0 pixels, and Left to 0 pixels. Click OK. The values used in defining the size and position of the logo <div> were obtained from the Property inspector in Fireworks.

Choose Insert > Layout Objects > Div Tag. In the Insert Div Tag dialog, set the ID value to logo, the Insert list to Before tag, and choose <table id="header"> from the last list.

This is another new feature of Dreamweaver MX 2004 that allows you to work with absolutely positioned <div> tags without having to remove the inline style that previous versions of Dreamweaver inserted into the page.

The placeholder text will already be selected, so just delete the text before you insert the logo.

With the cursor still inside the logo <div>, insert the file called pbr_logo.gif from your images folder.

Save the CSS file, and preview your work in a browser.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint