Hi mate i know you could not post this here as the file was far too large but i have sliced it up best i can as the layout was not web friendly ie no way to expand it downwards without muching up the layout see what you think it you want anything changed let me know. demo Download
I've seen it, it loads in a pretty weird way at my comp So i'm checking browsershots.org now anyways, i'll fire this up in dreamweaver and see how i can implement all the rest When all is loaded, it's some pretty neat work, hope i can learn from this ! thank you tho, in what way isn't it web friendly? peace edit: seen the head isn't sliced ^^ that's why it loads weird could that be sliced too ? (a)
yeah thats easy just slice it as you want and replace the image with the table if you want me to do it i will and its not web friendly because you don't have a defined area which will expand from top to bottom to allow content to be as much as you want something has to move i always make templates to have 1 main large section for the content.
just looked at it again the image loads funny as you say because it is interlaced loads in layers basically saves files being too large and speeds up loading so they say lol
no very easy you use dreamweaver just open it up and click modify then in the list you will see convert just conver tables to ap divs and dreamweaver will do it for you will load quicker with divs.
Made it more friendly but still centering is a problem :s google hasn't been my friend this has been my problem for 3 years now =/ andddd in ie 7 it seems to be a very big problem :/ fail @ microsoft part 8
A bit of history - If you use Macromedia Dreamweaver for web design, you may be familiar with something that Macromedia calls a "layer" or what is referred to in Dreamweaver CS3 and later as an absolutely positioned (AP) <div>. You should know that there is no such thing as a layer; not in the HTML specification, nor in the CSS specification. That's why the term layer was dropped in Dreamweaver CS3. Layer is Dreamweaver terminology that refers to an absolutely positioned page element, usually using a <div> tag.. Using absolute positioning allows you a huge amount of freedom in creating a design and enables you to drag objects around on a page and put them exactly where you want them like you would with a desktop publishing (DTP) application. Possible solution - there's no such thing as a free lunch The price is that absolute positioning is, well ... absolute. Objects using absolute positioning are positioned relative to their nearest positioned parent object, or if there is no positioned parent object, relative to the upper left corner of the browser viewport. For an AP layout to work, you need to insert everything into a relatively positioned container, so that the AP div takes it's co-ordinates from *that* container. The commonly accepted "cure" is to contain offending elements in yet another DIV and float and clear that parent DIV, rather then the content inside, which should retain its relative placement... Absolute positioning is just a small subset of the positioning possibilities introduced by CSS2. Instead, use "static" positioning and control the position of page elements using their margin and padding properties. Of course this would require an understanding of css coding.
yes - basicly make a parent div that has position: relative; something like this for the css file and the for the html file Think of it this way - you have a picture without a frame, that when you hang it in the center of the wall it always sides up to the upper left hand corner because it was told it can olny be hung in that Absolute Position (upper left). It's a big wall, so it looks for the upper left corner of the wall. Now you wrap a 1 inch wide frame around it. The frame is hung up on Einstein, an thinks everything is relative, so it stays put wherever you hang it. The picture looks at the frame and realizes it now has a new reference point, the frame instead of the wall, but unless you clear the commands after the frame, the picture with try to refence itself not to the inside of the frame but to the upper left hand corner of the frame, which is known as overlap. Hope this clears things up
doesn't change a thing Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Smiling Industries alternative rock band - Welcome !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen> </head> <body bgcolor="#000000"> <!-- End Save for Web Slices --> <div id="wrapper" > <div class="clear"></div> <div id="Header" ><img id="Bandsite_01" src="images/Bandsite_01.png" width="1024" height="448" alt="Smiling Industries - Alternative Rock Band - Latest news" /></div> <div id="twitter"><img src="images/twitter.png" width="50" height="45" alt="Follow us on twitter" />witter</div> <div id="Home" ><a href="#"><img id="nav_01" src="images/nav_01.png" width="358" height="39" alt="Smiling Industries alternative rock band - Home" /></a></div> <div id="About" ><a href="#"><img id="nav_02" src="images/nav_02.png" width="358" height="31" alt="Smiling Industries alternative rock band - About" /></a></div> <div id="Gigs" ><a href="#"><img id="nav_03" src="images/nav_03.png" width="358" height="39" alt="Smiling Industries alternative rock band - Gigs" /></a></div> <div id="Forum" ><a href="#"><img id="nav_04" src="images/nav_04.png" width="358" height="34" alt="Smiling Industries alternative rock band - Forum" /></a></div> <div id="Fotos" ><a href="#"><img id="nav_05" src="images/nav_05.png" width="358" height="31" alt="Smiling Industries alternative rock band - Fotos" /></a></div> <div id="Contact" ><a href="#"><img id="nav_06" src="images/nav_06.png" width="358" height="36" alt="Smiling Industries alternative rock band - Contact" /></a></div> <div id="Navleeg" ><img id="nav_07" src="images/nav_07.png" width="358" height="41" alt="Smiling Industries alternative rock band - " /></div> <div id="Content2" ><!-- Save for Web Slices (Bandsite_04.png) --></div> <div id="Content" ><h1>News</h1>content goes in here and will expand as far as you want it too </div> <div id="Links" ></div> <div class="twitterinfo" id="twitterinfo"></div> </div> </body> </html> [css] @charset "utf-8"; /* CSS Document */ #wrapper { width: 1024px; margin: auto; position: relative; } .clear { clear: both; } #Header { position: absolute; left: 76px; top: 0px; width: 1024px; height: 448px; z-index: 1; } .twitterinfo { width: 351px; height: auto; position:absolute; left: 79px; top: 757px; } #player { border: 1px solid #CCC; } img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } body,td,th { font-family: "Courier New", Courier, monospace; color: #333; } body { margin-top: 0px; background-color: #000); background-repeat: repeat-x; } a:link { color: #000; } a:visited { color: #F00; } a:hover { color: #00F; } h1 { font-size: 36px; color: #666; } #twitter { background-color: #9FF; text-align: center; font:"Arial Black"; font-weight: bold; font-size: 24px; color: #F9F; text-align: center; position: absolute; left: 77px; top: 701px; width: 356px; height: 45px; z-index: 2; line-height: 1px; border-top: medium; border-top-color: #0FF; } #Home { position: absolute; left: 76px; top: 448px; width: 358px; height: 39px; z-index: 3; } #About { position: absolute; left: 76px; top: 487px; width: 358px; height: 31px; z-index: 4; } #Gigs { position: absolute; left: 76px; top: 518px; width: 358px; height: 39px; z-index: 5; } #Forum { position: absolute; left: 76px; top: 557px; width: 358px; height: 34px; z-index: 6; } #Fotos { position: absolute; left: 76px; top: 591px; width: 358px; height: 31px; z-index: 7; } #Contact { position: absolute; left: 76px; top: 622px; width: 358px; height: 36px; z-index: 8; } #Navleeg { position: absolute; left: 76px; top: 658px; width: 358px; height: 41px; z-index: 9; } #Content { position: absolute; left: 434px; top: 448px; width: 666px; height: 252px; z-index: 11; text-align: center; } #Content2 { position: absolute; left: 76px; top: 448px; width: 1px; height: 251px; z-index: 10; text-align: left; } #links { position: absolute; left: 76px; top: 0px; width: 1px; height: 1026px; z-index: 13 } [/css]
