Tuesday, October 21, 2008

Scaling Backgrounds & Help

Hey Ryan, in response to your first question, 'stretching' web pages are generally produced from using percentage-based div scaling, clever use of absolute positioning and or the use of relative positioning. It's a little more involved that the type of web creation we've done in class, but pretty easy to pick up. If you can show a specific example, I could possibly tell you how it was done. As for your title, just pop open either the HTML code, or Dreamweaver and change the title to whatever you want. In Dreamweaver it should be a small box at the top of the page, in the code it should be near the top, enclosed in title tags: <title>Untitled Document<\title> (The slash is facing the wrong way so it will show up in this post)

I found an interesting page on scaling backgrounds from Web Designer Wall (GOTOCHINA) and picked apart the code if anyone wants a starting point for creating something like this. Just keep in mind the image generally loses a lot of quality as it scales.

CSS

*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;background:url(loading.gif);color:#000}
img{display:block}
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:0 auto}
#cont{position:absolute;top:0;left:0;z-index:70;overflow:auto}
#top{color:#FF9966;height:56px;background-color:#000000;opacity:.5;}
#mid{width:513px;height:474px;margin-left:auto;margin-right:auto;margin-top:25px;}


HTML (Removed Brackets from each line><)

body
div id="cont"
div id="top"
/div
div id="mid"
/div
/div
/div
div id="bg"
div
table cellpadding="0" cellspacing="0"
tr
td
img alt="" src="bg.jpg" /
/td
/tr
/table
/div
/div
/body

1 comment:

rpeoples said...

thanks chad. i actually feel like i might be able to do this... which means you rule.