Problem with layers in dreamweaver

avisioncame · 08-13-2007

I am completely new to this forum, although I have since gotten many good tips from it. So hello to all as this is my first post.

I am somewhat new to web design, and don't know a whole lot about it. Basically I would say I am beginning to intermediate. I use Dreamweaver to help me design most of my pages, but I know a bit of HTML. I know it is good to know HTML because you should be able to look at and understand code.

My first venture into websitery is here:Dungeons Deep Records - Label Promoting Ambient Black Metal
It is a nice site. I used a CSS template and just pretty much replaced the images with my own, along with a little CSS editing. web design pros would probably consider it a monstrosity, but I am pleased with it at this point in my life.

My first real site I am working on now mainly consists of the utilization of Dreamweaver's awesome layers feature, using divs and such.

So here is my problem:

I have done a little design for a "client" if you will. I uploaded a page of it to my site, to give you an idea of my problem. You can view that here;http://www.dungeonsdeep.com/Micah/home.html

As you can see, I have used a tracing image, and used layers to create areas where the images fit in. Common. The middle image is what gives me a problem. I want the middle image to still have the cardboard rectangle as a background, with text on top of it. That is fine right now. BUT I want the whole thing to be centered. Like, absolute center, so no matter how the window is resized, it will be in the middle. I could covert it to tables, and would be centered perfectly. But then I won't be able to put the text on top of an image.

This may seemed stupid, and maybe even it has been answered multiple times, but I searced around all day looking for a solution. If anyone could help me or point me in the direction of help, I would be very happy.

Thank you all in advance!
Feel free to ask me any questions if you helps you come up with an answer.

Jolt · 08-13-2007

Hi avisioncame,

Welcome.

Here are a few tips....
#1) Add proper head tags to pages. The sample you linked to is not only missing a DOCTYPE declaration, but it's missing all the head tags. Not good. Now this may just be because it's a sample, but just in case it isn't.

#2) There's no substitute for knowing code. Especially HTML/XHTML and CSS. it's like trying to write a book and not knowing how to spell. Or being hired as a delivery driver and not knowing how to drive. It's basic. HTML is easy to pick up for most people.

#3) to specifically solve your centering question, If you add an encompassing div around all content (<div id="wrapper"> after <body> and </div> before </body>) You can then center the content by adding the following to your CSS (between <style> and </style>)

Code:

#wrapper { 
    width: 720px; /*this is the width of all the content */
    margin: 0 auto;
    text-align: left;
  }

Then change the CSS for the Body tag to support centering in IE6

Code:

body {
	background-color: #3E3E3E;
      text-align: center;
}

#4) to be honest, any WYSIWYG editor such as Dreamweaver or GoLive will create CSS code that is exceptionally over-weighted with unnecessary selectors and properties. By hand, you could create the exact same page with 5 (maybe 7) divs rather than the 12 that currently exist. Not to mention you could whittle down the CSS considerably as well. Further reducing page weight and saving on bandwidth while improving load times.

avisioncame · 08-13-2007

Thanks a lot for the help. I am going to try those out, and will update with what happens.

Like I said, I know a little HTML, but it is hard for me to find good resources on where to learn it. I am a very hands on/visual learner. So I have to see what I am doing while I am doing it....ie. I prefer video tutorials

I will be taking my first web design class this semester on my way to a graphic design degree. I know the class uses Dreamweaver...I just pray that it will be more hands on with HTML and CSS.

I will try your tips. Until then, thanks a lot!

UPDATE: Ok, So I tried adding the "wrapper" and I am having an invalid markup error when I try to put a </div> at the end of all the content.
When I put the </div> at the end of the layer content, it just centers the text at the top of the page, but the images and the layout just all stay in the same place.

Overall, do you like the design of the page? On a large monitor like mine it appears small with a lot of neutral space, but I think the overall simple design suits the amount of content the finished site will probably lack. I put together the collage of stuff myself, and scanned it into photoshop. I would really like the whole thing to be centered, but if it has to stay to the left, I don't think it would be too hideous.

Any extra input is appreciated.

Jolt · 08-13-2007

You haven't updated the online link so I can't see the changes directly. I suspect the invalid markup is due to no DOCTYPE declaration and no head tags. It could also be because there is a missing </div> for this area:

Code:

<div align="center">
<div id="header-l"><img src="images2/micah-layout_01.jpg" width="158" height="129"></div>
<div id="header-r"><img src="images2/micah-layout_03.jpg" width="179" height="129"></div>

Correcting that should allow the wrapper div to close properly and center the content.

As far as design, I think it's pretty good. If it were me I'd shy away from serif fonts for web pages. Its been proven san-serif type is easier to read on screen. And I wouldn't make everything bold either.

avisioncame · 08-13-2007

I will try this too.

Once I close that tag, should I move it...the code that is. It seems out of place with the rest of the <div> tags that are all grouped together.

What DOCTYPE should I use? does it matter or are they all the same? I don't really know a lot about them, but I will go read some tutorials. If you have a link to a good tutorial that would be helpful. I will update in the morning when I try this stuff out.

Thanks!

Jolt · 08-13-2007

In general XHTML Transitional is a good DOCTYPE to use for CSS layouts if you aren't sure you'll be able to validate as strict XHTML.

avisioncame · 08-13-2007

Ok. I have taken the steps you have given me, along with attaching a style sheet instead of having it in the same document. I suppose this is OK to do? I want to show you the code I am now working with, because after following your tips, the damn thing still won't center! You may want to pay close attention to the wrapper, because I fiddled with the settings, and still nothing happened. Although I have since last night learned a good deal of the code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Micah 77</title>
	
<style type="text/css">
@import url("style.css");
</style></head>
<body><div id="wrapper"> 
<div id="Layer10"><img src="images2/micah-layout_01.jpg" alt="" width="158" height="129" /></div>
<div id="Layer11"><img src="images2/micah-layout_02.jpg" alt="" width="383" height="129" /></div>
<div id="Layer12"><img src="images2/micah-layout_03.jpg" alt="" width="179" height="129" /></div>
<div id="Layer13"><img src="images2/micah-layout_04.jpg" alt="" width="158" height="499" /></div>
<div id="Layer14"><img src="images2/micah-layout_05.jpg" alt="" width="383" height="499" /></div>
<div id="Layer15"><img src="images2/micah-layout_06.jpg" alt="" width="179" height="499" /></div>
<div id="Layer17"><img src="images2/micah-layout_09.jpg" alt="" width="179" height="39" /></div>
<div id="Layer18"><img src="images2/micah-layout_08.jpg" alt="" width="383" height="39" /></div>
<div id="Layer19"><img src="images2/micah-layout_07.jpg" alt="" width="158" height="39" /></div>
</div> 
</body>
</html>

And the CSS

Code:

/* CSS Document */

#header-m {
	position:absolute;
	width:383;
	height:129px;
	z-index:1;
	left: 169px;
	top: 15;
}
#header-l {
	position:absolute;
	left:11px;
	top:15px;
	width:158px;
	height:129px;
	z-index:1;
}
#header-r {
	position:absolute;
	left:552px;
	top:15px;
	width:176px;
	height:129px;
	z-index:1;
}
#leftpanel {
	position:absolute;
	left:11px;
	top:144px;
	width:158px;
	height:499px;
	z-index:1;
}
#rightpanel {
	position:absolute;
	left:552px;
	top:647px;
	width:178px;
	height:0px;
	z-index:1;
}
#left-b {
	position:absolute;
	left:11px;
	top:643px;
	width:158px;
	height:39px;
	z-index:1;
}
#textarea {
	position:absolute;
	left:169px;
	top:144px;
	width:383px;
	height:499px;
	z-index:1;
}
#footer {
	position:absolute;
	left:169px;
	top:643px;
	width:383px;
	height:39px;
	z-index:1;
}
#right-b {
	position:absolute;
	left:552px;
	top:643px;
	width:177px;
	height:39px;
	z-index:1;
}
#Layer4 {
	position:absolute;
	left:731px;
	top:147px;
	width:320px;
	height:426px;
	z-index:10;
	padding: 10px;
	overflow: auto;
}
body {
	background-color: #3E3E3E;
      text-align: center;
}
#Layer1 {
	position:absolute;
	left:731px;
	top:557px;
	width:350px;
	height:25px;
	z-index:11;
}
#Layer2 {
	position:absolute;
	left:11px;
	top:144px;
	width:158px;
	height:487px;
	z-index:2;
}
#Layer3 {
	position:absolute;
	left:169px;
	top:144px;
	width:383px;
	height:499px;
	z-index:3;
}
#Layer5 {
	position:absolute;
	left:552px;
	top:144px;
	width:179px;
	height:499px;
	z-index:4;
}
#Layer6 {
	position:absolute;
	left:10px;
	top:643px;
	width:159px;
	height:39px;
	z-index:5;
}
#Layer7 {
	position:absolute;
	left:169px;
	top:643px;
	width:383px;
	height:39px;
	z-index:6;
}
#Layer8 {
	position:absolute;
	left:552px;
	top:643px;
	width:187px;
	height:39px;
	z-index:7;
}
#Layer9 {
	position:absolute;
	left:193px;
	top:177px;
	width:339px;
	height:438px;
	z-index:8;
}
.style3 {font-family: Arial, Helvetica, sans-serif}
#Layer10 {
	position:absolute;
	left:10px;
	top:15px;
	width:158px;
	height:129px;
	z-index:1;
}
#Layer11 {
	position:absolute;
	left:168px;
	top:15px;
	width:383px;
	height:129px;
	z-index:2;
}
#Layer12 {
	position:absolute;
	left:551px;
	top:15px;
	width:179px;
	height:129px;
	z-index:3;
}
#Layer13 {
	position:absolute;
	left:10px;
	top:144px;
	width:158px;
	height:499px;
	z-index:4;
}
#Layer14 {
	position:absolute;
	left:168px;
	top:144px;
	width:383px;
	height:499px;
	z-index:5;
}
#Layer15 {
	position:absolute;
	left:551px;
	top:144px;
	width:179px;
	height:499px;
	z-index:6;
}
#Layer16 {
	position:absolute;
	left:747px;
	top:459px;
	width:103px;
	height:223px;
	z-index:7;
}
#Layer17 {
	position:absolute;
	left:551px;
	top:643px;
	width:179px;
	height:39px;
	z-index:8;
}
#Layer18 {
	position:absolute;
	left:168px;
	top:643px;
	width:383px;
	height:39px;
	z-index:9;
}
#Layer19 {
	position:absolute;
	left:10px;
	top:643px;
	width:158px;
	height:39px;
	z-index:10;
}
#wrapper { 
    width: 720px; /*this is the width of all the content */
    margin: 0 auto;
    text-align: left;
  }

Thanxs again.

*notjustgraphics* · 08-13-2007

Hi guys!

Umm, i'm not sure if I'm following your intentions perfectly, but I think you are trying to auto centre DIVS while positioning them absolutely at the same time...

Unfortunately, this cannot be done.

Try changing position:absolute; to postion:relative;

You will have to adjust the top and left to position the layer within the 'wrapper' div now instead of Absolute to the entire page.

Hope this makes sense...
Mike.

avisioncame · 08-14-2007

So, should I change ALL positions to absolute? And what do you mean by adjusting the top and left layer? Could you clarify the steps a little. I am pretty new at this.

Thank you!

Jolt · 08-14-2007

Good catch Mike.

One reason I hate WYSIWYG CSS... they position everything absolute. Generally positioning should be avoided if possible. Relative is much better. I just try to avoid it whenever possible.

*notjustgraphics* · 08-15-2007

I'll try to explain this in simple terms...

Absolute positioning is like defining co-ordinates on a map... if you define a top:10px and a left:10px in your css, the top left corner of that division will ALWAYS be placed at 10,10.

Relative positioning is 'relative' to the parent element... meaning that if you have divs inside of a div, they will be positioned relative to the parent...

If you are trying to get a Div to auto centre in a window at different sizes, you cannot use an absolute position... the div must be free to reposition itself in the centre of the screen as the window resizes.

I think what you need to do is take your entire site and change the positioning to relative. Then, add a parent div with a defined width (exactly the width of the site) ie: width:769px; and then declare margin:0 auto;

The margin:0 auto; will automatically centre tha parent div horizontally, and since the child divs (the rest of your site) are relative(ly) positioned, the whole site should be neatly stowed at mid-page regardless of window size (as long as the window is wider than the website).

Does this help?

Mike.

avisioncame · 08-16-2007

OK, I see. I was trying to avoid making the site a set "size" if you know what I mean. But I think as long as a window is bigger than 750 pix...which I assume in most cases will be...it should be fine. I will try it out and tell you what I come up with.

I have one question when you say;

Quote:

add a parent div with a defined width (exactly the width of the site) ie: width:769px; and then declare margin:0 auto;

How would I add a parent div? What would that look like in the code, and where would I place it?

Thanks!

Jolt · 08-16-2007

The code i provided earlier adds the parent div "wrapper"

*notjustgraphics* · 08-16-2007

Hey avisioncame

Here's a simple run down on Parent/Child Divs

<div id="parent">
<div id="child">
</div>
</div>

As you can see, the child is contained wholly within the parent div.

As for creating an elastic or liquid design, it's no lightweight task to force a div to the centre.

In order for the browser to determine the centre it most know the width of something.

The easiest way to achieve a faux centre, would be to use a left margin with a width expressed in em instead of px...

ie:

width:4 em;

This will give the left column 4 equal measures of the width of the window.. so if the window get's narrower, the div gets narrower.

You could use a liquid left column to position the centred div accordingly.

The problem with elastic or liquid designs is that they ALL have a breaking point where the design breaks down and things get messy.

Of course, for maximum effectiveness, you need to adjust your font sizes to em's as well.

Best of luck!

Mike.

avisioncame · 08-16-2007

So after setting everything to relative, and setting the site width to 769, it has centered everything. The only problem is that none of it is put together. It looks like scattered puzzle pieces, all going down the middle. Nothing is put together, but the lengths and widths seem ok of each piece. Aggghhh I am going crazy!

But I really thank you guys for helping me!