Problem with layers in dreamweaver - Page 2

*notjustgraphics* · 08-17-2007

if you post a link to the site so that I can access your CSS and HTML, i'll have a look at it and let you know whats happening...

Cheers!

Mike.

avisioncame · 08-18-2007

It's the code on the previous page.

*notjustgraphics* · 08-18-2007

Ok.. here's the working code... watch for comments where i've tried to explain my changes and reasons!

HTML Code:

<style type="text/css">
<!--
#wrapper { 
margin:0 auto;
width:721px;

/* added a wrapper around the entire site contents. defining the width (721px is the maximum width of the actual content) and defining margin:0 auto; allows the wrapper div and all of it's contents to be auto centered on the page */

}

#header-m { 

	width:383;
	height:129;
	z-index:1;
	margin-top:15px;
	float:left;

/* removed absolute positioning!!!, replaced top:15 with margin-top:15px (same effect), added float:left to push div to the left and allow the next div to nest up against it. Otherwise, the next div would appear below the first div */

}
#header-l {
	margin-top:15px;
	width:158px;
	height:129px;
	z-index:1;
	float:left;
}
#header-r {
	margin-top:15px;
	width:176px;
	height:129px;
	z-index:1;
	float:left;
}
#leftpanel {
	
	left:11px;
	top:144px;
	width:158px;
	height:499px;
	z-index:1;
}
#rightpanel {
	
	left:552px;
	top:647px;
	width:178px;
	height:0px;
	z-index:1;
}
#left-b {
	
	left:11px;
	top:643px;
	width:158px;
	height:39px;
	z-index:1;
}
#textarea {
	
	left:169px;
	top:144px;
	width:383px;
	height:499px;
	z-index:1;
}
#footer {
	
	left:169px;
	top:643px;
	width:383px;
	height:39px;
	z-index:1;
}
#right-b {
	
	left:552px;
	top:643px;
	width:177px;
	height:39px;
	z-index:1;
}

body {
	background-color: #3E3E3E;
}

#Layer2 {
	
    float:left;
	width:158px;
	height:487px;
	z-index:2;
}
#Layer3 {
	
    float:left;
	width:383px;
	height:499px;
	z-index:3;
}
#Layer5 {
	
    float:left;
	width:179px;
	height:499px;
	z-index:4;
}
#Layer6 {
	
    float:left;
	width:159px;
	height:39px;
	z-index:5;
}
#Layer7 {
	
    float:left;
	width:383px;
	height:39px;
	z-index:6;
}
#Layer8 {
	
    float:left;
	width:179px;
	height:39px;
	z-index:7;
}
#Layer9 {
        position:relative; /* added to ensure proper position WITHIN the wrapper element */
        top:-499px; /* required to place contents of Layer9 over top of other divs */
        margin:0 auto; /* required to centre Layer 9 */
	width:339px; /* already existed, but is required for margin:0 auto to work */
	height:438px;
	z-index:9;
}

-->
</style>
<body>
<div id="wrapper"> <!-- begin of wrapper div -->
<div id="header-l"><img src="images2/micah-layout_01.jpg" width="158" height="129"></div> <!-- order is important when NOT using absolute positioning -->
<div id="header-m"><img src="images2/micah-layout_02.jpg" width="383" height="129"></div>
<div id="header-r"><img src="images2/micah-layout_03.jpg" width="179" height="129"></div>
<div id="Layer2"><img src="images2/micah-layout_04.jpg" width="158" height="499"></div>
<div id="Layer3"><img src="images2/micah-layout_05.jpg" width="383" height="499"></div>
<div id="Layer5"><img src="images2/micah-layout_06.jpg" width="179" height="499"></div>
<div id="Layer6"><img src="images2/micah-layout_07.jpg" width="158" height="39"></div>
<div id="Layer7"><img src="images2/micah-layout_08.jpg" width="383" height="39"></div>
<div id="Layer8"><img src="images2/micah-layout_09.jpg" width="179" height="39"></div>
<div id="Layer9"><strong>text
  born and raised in springfield, ohio, by my dad   and mom with two sisters, various dogs and a cat. i started playing piano around   the age of 13 and guitar around 16. i studied music in college, graduating in   2000 with a degree in piano performance from wittenberg university. i've been   playing at grace fellowship church since i learned my third chord. that's it in   a nutshell. 
  </strong>
  <p><strong>just kidding, there's more, i just want to give   you some time to take it all in. this is some deep stuff.</strong></p>
  <p><strong>text
  born and raised in springfield, ohio, by my dad   and mom with two sisters, various dogs and a cat. i started playing piano around   the age of 13 and guitar around 16. i studied music in college, graduating in   2000 with a degree in piano performance from wittenberg university. i've been   playing at grace fellowship church since i learned my third chord. that's it in   a nutshell. </strong></p>

  <p><strong>just kidding, there's more, i just want to give   you some time to take it all in. this is some deep stuff.</strong></p>
  <p></p>
  <p>&nbsp;</p>
</div>
</div> <!-- end of wrapper div -->

</body>

Voila!

Any questions?

Mike.

Jolt · 08-18-2007

image tags should be closed with a />

avisioncame · 08-18-2007

Wow, awesome Mike. Big thanks to you. It works great, and looks good too. I am going to inspect this code and compare it with my old one so I can see what changes you have done and what affect they have. It is all about the learning experience right?

One more question I have.

I noticed that you just went ahead and put the CSS with the page layout code. I am used to attaching a style.css file, to keep them separate. Does it matter either way? Or do people just keep em separate to keep the code shorter?

Anyways, thanks a lot man you and everyone else have all been a great help!

-Andrew

*notjustgraphics* · 08-19-2007

Hi Avisioncame!

No, it's much more efficient to keep your CSS in a separate style sheet. The premise being that by keeping your CSS separate from your HTML, users can navigate from page to page without having to reload the CSS each time (since it's separate), whereas if the CSS is IN the HTML file, it is loaded at the server ever time an HTML page is called.

The other benefit is you can make a change to 1 file and have it effect all pages containing that style or DIV ID.

For example purposes, i went to the link you posted in your first post and copied the source from there... the css is in the home.html file.

I don't know if you're using a generator of some kind to create the HTML, but the overall approach is rather inneficent.

But if you're new to the game, you kinda have to learn the ropes before you fine tune your skills....

BioRUST is obviously a great place to get help, so stick around!

Mike.

To keep things simple and focused on the 'centering' issue, i did not change the source more than necessary, and as Jolt pointed out, HTML tags like <img> should always be closed with a / for proper symantecs and validation.

avisioncame · 08-20-2007

Well thank you all for the warm invite.

I have a question, could someone possible point me towrds a tutorial, or even just tell me what it is called.

I have seen pages before where all of the pages content stays on the same page. For example, the url would be coolpage.com, and as you navigate through, say you click "pictures" or "contact"...the whole time it says on coolpage.com. No coolpage.com/index.html or coolpage.com/contact.html

What is this called, and is their a tutorial here on how to do it? Thanks!

*notjustgraphics* · 08-20-2007

the technology your asking about is called domain masking and it's usually done through code in the .htaccess file although not all servers permit it...

If you're looking for tips, google .htaccess and Domain Masking...

Mike.

Gjbphp · 08-20-2007

Quote:

Originally Posted by avisioncame

Well thank you all for the warm invite.

I have a question, could someone possible point me towrds a tutorial, or even just tell me what it is called.

I have seen pages before where all of the pages content stays on the same page. For example, the url would be coolpage.com, and as you navigate through, say you click "pictures" or "contact"...the whole time it says on coolpage.com. No coolpage.com/index.html or coolpage.com/contact.html

What is this called, and is their a tutorial here on how to do it? Thanks!

It could also be something as simple as frames... Don't forget .htaccess processing needs to be done for each and every request to the server, which can add overhead to the display times of your pages

*notjustgraphics* · 08-20-2007

Thanks Gjbphp

I really dislike the use of frames in websites (aside from iframes) so i guess I kind of block them out, but you're absolutely right. Avision's question is most likely the result of frames use rather than .htaccess.

Mike.