Customization FAO matthewk see what you think

wilmec · Sep 20, 2009

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

matthewk · Sep 20, 2009

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)

wilmec · Sep 20, 2009

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.

wilmec · Sep 20, 2009

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

matthewk · Sep 20, 2009

would it be hard for me to convert to divs?

wilmec · Sep 20, 2009

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.

matthewk · Sep 20, 2009

Thanks alot !
I changed the bg to black and made a neat scroller so there's no stretch

wilmec · Sep 20, 2009

ideal when you have it up live let me know so i can see the end result glad i could help you.

matthewk · Sep 20, 2009

Almost done here ... though it's not all centered anymore

wilmec · Sep 20, 2009

wrap the whole page in a div and center that div

matthewk · Sep 20, 2009

ok
thanks mate
edit: wrapper div didn't quite work :')

matthewk · Sep 20, 2009

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

wilmec · Sep 20, 2009

I have downloaded it again so will look at it see what i can do for you.

matthewk · Sep 20, 2009

Ok thanks mate

ishkey · Sep 21, 2009

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.

matthewk · Sep 21, 2009

So basicly make a parent div that has position: relative;

ishkey · Sep 21, 2009

yes - basicly make a parent div that has position: relative;
something like this for the css file

#wrapper {
width: 770px; /* what ever size you require */
margin: auto;
position: relative;
}

.clear {
clear: both;
}
Click to expand...

and the for the html file

</head>
<body>
<div id="wrapper">
<div class="clear"></div>
<div id="content">
"YOUR CODE"
</div>
</div>
</body>
</html>
Click to expand...

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

matthewk · Sep 21, 2009

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">

<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" ></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]

matthewk · Sep 21, 2009

http://www.smilingindustries.be/
did it with percentages

Log in or Sign up

Customization FAO matthewk see what you think

wilmec New Member

matthewk New Member

wilmec New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

matthewk New Member

wilmec New Member

matthewk New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

matthewk New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

matthewk New Member

matthewk New Member

Log in or Sign up

Customization FAO matthewk see what you think

wilmec New Member

matthewk New Member

wilmec New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

wilmec New Member

matthewk New Member

matthewk New Member

wilmec New Member

matthewk New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

matthewk New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

matthewk New Member

matthewk New Member

Useful Searches