Talk:Homepage design

This (meaning both the original page and the docs wiki description of how to achieve the effect) should probably be changed to something like:

div.fieldset {
  margin-top: 12px;
  margin-bottom: 25px;
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;
}

h1.legend {
  border: #DDD solid 1px;
  background-image: url(http://moodle.org/theme/moodleorange/gradient.jpg);  
  background-position: top;  
  background-repeat: repeat-x;  
  padding: 1px 10px;
  display: inline;
  position: relative;
  top: -0.5em;
  left: 20px;
}

With the last four lines, and the use of H1 tags being the important changes. The silly classnames are just to make the links to current code obvious. The images are also purely decorative and so could be changed to CSS background images, or maybe just better alt tags would be enough. I'm not near a Windows PC till Tuesday, I'll post the full code then after checking for browser compatability but it's looking pixel for pixel identical to me on Safari. --David Scotson 03:11, 3 April 2006 (WST)

You can see a demonstration page with the new code, which I've tested in Internet Explorer 6, Firefox 1.5, Opera 8 and Safari. Any problem reports would be welcome.

Note:

• there is some other oddness caused by linking the current Moodle.org theme against a more recent Moodle HEAD codebase, all the recent accessibility work looks a bit wierd without supporting CSS so try not to be distracted by it. The important part is the central column.
• I've removed the image links, as they are now CSS background images. If the links are important then they should be reinstated in the text.
• I'll try to leave the demo up for a while but it's not a permanent thing.

The important CSS lesson here is that Header's are, by default, 'display: block' like paragraphs and divs. This means you can size them absolutely (100px, 10em) or relatively (50%) but you can't have them shrink-to-fit their contents. To do this you need them to act like spans or emphasis, by using 'display: inline'. A knock on from this is that it's pretty easy to shift blocks around by using negative (or positive) margins and padding, but for inline elements you might want to use relative positioning. --David Scotson 18:42, 4 April 2006 (WST)