Using Dreamweaver

CSS surround layout

Using these images and the css style below, create a page which has surrounding images which resize to fit both the content and the screen, as in www.accessibleireland.net.

Create 8 div tags with ids of left, bottom, right, top, topleft, topright, bottomright, bottomleft

HTML

Position the tags as shown below:

<html>
<body>
<div id="right">
<div id="top"></div>
<div id="left">
<div id="text"></div>
<div id="bottom"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
</div>
<div id="topright"></div>
<div id="topleft"></div>
</body>
</html>

CSS

body

type

  1. font: "Comic Sans MS"
  2. size: small
  3. line height: 150%
  4. colour: #333333

background

  1. background colour: #d8cdab

box

  1. margin: 0px (all)
  2. padding: 0px (all)

left

background

  1. image: paperleftnew.jpg
  2. repeat: y
  3. horizontal: left
  4. vertical: top

box

  1. margin: 0px (all)
  2. padding: 0px (all)

bottom

background

  1. image: paperbottomnocorners.jpg
  2. repeat: x
  3. horizontal: center
  4. vertical: bottom

box

  1. width: 100%
  2. height: 60px

right

background

  1. image: paperrightnew.jpg
  2. repeat: y
  3. horizontal: right
  4. vertical: top

box

  1. width: 100%
  2. height: auto

positioning

  1. type: absolute

top

background

  1. image: papertopnocorners.jpg
  2. repeat: x
  3. horizontal: center
  4. vertical: top

box

  1. width: 100%
  2. height: 60px

positioning

  1. type: absolute

topleft

background

  1. image: papertopleftcorner.jpg
  2. repeat: no-repeat
  3. horizontal: left
  4. vertical: top

box

  1. width: 60px
  2. height: 60px

positioning

  1. type: absolute
  2. placement: left: 0px, top: 0px

topright

background

  1. image: papertoprightcorner.jpg
  2. repeat: no-repeat
  3. horizontal: right
  4. vertical: top

box

  1. width: 60px
  2. height: 60px

positioning

  1. type: absolute
  2. placement: right: 0px, top: 0px

bottomright

background

  1. image: paperbottomrightcorner.jpg
  2. repeat: no-repeat
  3. horizontal: right
  4. vertical: bottom

box

  1. width: 60px
  2. height: 60px

positioning

  1. type: absolute
  2. placement: right: 0px, bottom: 0px

bottomleft

background

  1. image: paperbottomleftcorner.jpg
  2. repeat: no-repeat
  3. horizontal: left
  4. vertical: bottom

box

  1. width: 60px
  2. height: 60px

positioning

  • type: absolute
  • placement: left: 0px, bottom: 0px

text

box

padding: right: 260px; left, top, bottom 60px

still having problems?

here's one that works... compare it with yours to see where you went wrong