FAO matthewk see what you think - Page 2

matthewk · #11 (**permalink**) 09-20-2009, 04:05 PM

ok
thanks mate

edit: wrapper div didn't quite work :')

matthewk · #12 (**permalink**) 09-20-2009, 04:24 PM

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 · #13 (**permalink**) 09-20-2009, 04:35 PM

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

matthewk · #14 (**permalink**) 09-20-2009, 05:00 PM

Ok thanks mate

ishkey · #15 (**permalink**) 09-21-2009, 10:46 AM

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 · #16 (**permalink**) 09-21-2009, 01:02 PM

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

ishkey · #17 (**permalink**) 09-21-2009, 02:25 PM

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

Quote:

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

.clear {
clear: both;
}

and the for the html file

Quote:

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

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 · #18 (**permalink**) 09-21-2009, 07:23 PM

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]

matthewk · #19 (**permalink**) 09-21-2009, 09:03 PM

http://www.smilingindustries.be/

did it with percentages

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode