Solved: Centering Div Layout in Dreamweaver

supergoten · 25-Feb-2010, 11:07 PM #1

Ok, this seems like it would be so simple but I can't figure it out.

This is my page so far, it's lacking in content, I'm just trying to figure out the layout. It looks good on my monitor, but I know in larger screen sizes, it is not centered! Is there anyway to fix this? I feel horrible because I'm supposed to be making a portfolio and yet I can't do something this simple. I know AP divs aren't the best choice, but isn't there a way to fix it using CSS?

http://www.heatheronline.us/

colinsp · 26-Feb-2010, 12:53 AM #2

lose your ap divs they are part of your problem.

Create a container div that contains all your page code. and then in css centre that on your page with margin: 0 auto.

As it is a project I'll leave you to work the rest out (that way you learn better) BUT if you have any specific problems do come back with them

supergoten · 26-Feb-2010, 01:04 PM #3

Ok this is what I have right now on my test page, can you please try to explain what is wrong? I have made a container div but I don't know how else get the text over the image except with the ap divs inside it? Thank you for all your help.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div><img src="layout.png" width="934" height="1179" />
<div id="apDiv3">
<p align="center" class="style1">My name is Heather, and I like to use Photoshop.

<br />
</p>
<p align="center" class="style1"><br />
This is my online portfolio, used to show<br />
projects and creations I have made both in<br />
and outside of classes.</p>
</div></div>
</body>
</html>

colinsp · 27-Feb-2010, 01:51 AM #4

Here you go:-

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(background.png);
}


#apDiv3 {
	position:absolute;
	left:499px;
	top:461px;
	width:601px;
	height:190px;
	z-index:5;
}
#container{
	margin: 0 auto;
	background-image:url(layout.png);
	width:934px;
	height:1179px;
	}

.style1 {color: #999999}
body,td,th {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="apDiv3">

<p align="center" class="style1">My name is Heather, and I like to use Photoshop. <br />
</p>
<p align="center" class="style1"><br />
This is my online portfolio, used to show<br />
projects and creations I have made both in<br />
and outside of classes.</p>
</div>
</div>
</body>
</html>

supergoten · 27-Feb-2010, 02:36 PM #5

Does that work on all resolutions? If I try zooming out in Firefox, the text goes off center.

I've tried going about it differently now with using one of the Dreamweaver templates, it has the container. How would I put the text into this one?

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666t;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url(background.png);
}
.oneColLiqCtr #container {
    width: 80%;  /* this will create a container 80% of the browser width */
    background: transparent;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.style1 {color: #999999}
-->
</style></head>

<body class="oneColLiqCtr">

<div id="container">
  <div id="mainContent">
    <h1 align="center"><img src="layout.png" width="934" height="1179" /></h1>
  <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

colinsp · 27-Feb-2010, 04:52 PM #6

It works fine on a 1680 x 1050 and a 1024 x 768 which is what I have access to.

Zooming out will not look right.

Don't understand your question.

Why don't you stick with what I did for you?

supergoten · 27-Feb-2010, 04:56 PM #7

Oh ok thank you! I will be sticking with what you gave me then, thank you so much, you've been a huge help.

I just thought that it wasn't working with all resolutions (mine is 1024x600).

colinsp · 28-Feb-2010, 01:31 AM #8

The problem you are seeing is due to the continuing use of the APdiv for your text.

I have tidied up your code a bit and done away with the ap div as given what you said about it is not what you want.

Try this:-

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(background.png);
}
#container{
	margin: 0 auto;
	background-image:url(layout.png);
	width:934px;
	height:1179px;
	}
	
.textdiv{
	width: 500px;
	float: right;
	padding-top: 500px;
	}	

.text_grey {
		color: #999999
		}

body {
		font-family: Geneva, Arial, Helvetica, sans-serif;
		font-weight: bold;
	}
-->
</style>
</head>

<body>
<div id="container">
<div class="textdiv">
<p align="center" class="text_grey">My name is Heather, and I like to use Photoshop. <br />
</p>
<p align="center" class="text_grey"><br />
This is my online portfolio, used to show<br />
projects and creations I have made both in<br />
and outside of classes.</p>
</div>
</div>
</body>
</html>

supergoten · 28-Feb-2010, 02:25 PM #9

Funny story, my brother was actually able to solve my problem using FrontPage. I find it amusing that everyone says that Dreamweaver is the best for web development, and it can be solved easier in FrontPage.

But I thank you for all your help, you've really done a lot for me! Thank you!

colinsp · 28-Feb-2010, 03:30 PM **#10**

Your brother may have done you a dis-service Frontpage produces terrible html code. Dreamweaver is a powerful tool but you must spend some time learning it. Stick with it , it is well worth the effort. Lots of videos on YouTube about DW.

tomdkat · 28-Feb-2010, 03:31 PM **#11**

Quote:

Originally Posted by supergoten

Funny story, my brother was actually able to solve my problem using FrontPage. I find it amusing that everyone says that Dreamweaver is the best for web development, and it can be solved easier in FrontPage.

I'm late to the game but the div is currently NOT centered as you would like. Attached are some screenshots.

DreamWeaver is a far superior tool to FrontPage and I was able to get the div centered using a text editor. DreamWeaver itself would not have solved the problem, as FrontPage itself didn't. It's how you use the tool that is important and its functionality that separate the two. I've had to fix more than one site generated with FrontPage and the "real" fixes would have been to create the pages from scratch, which I mostly had to do in one case.

In any event, one set of screenshots show how the "live" page and a locally saved copy look for me in a "windowed" browser window on a screen with resolution 1280x1024. The other set shows the browser window maximized.

I don't know if the "live" site is using the modifications your brother made but looking at the CSS, I noticed several issues. The one that seemed to address the centering issue was this:

Code:

.Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 900px;
	min-width:31px;
	min-height:31px;
}

.Sheet-body
{
	position: relative;
	z-index:1;
	padding: 3px;
}

In the case, the div of class "Sheet-body" appears to be div containing the main, black background image but its parent div of class "Sheet" has an incorrect width specified. The main, black background image has a width of 934px yet the "Sheet" div has a width of 900px specified. So, the attached screenshots were generated by my simply changing the width of the "Sheet" div from 900px tp 934px:

Code:

.Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 934px;
	min-width:31px;
	min-height:31px;
}

As a result, the main, black background image actually moved to a more centered position on the page. I took the screenshots in Opera so you could see the window dimensions to get an idea of the size of the browser window. The scrollbar will take some of the display space which is why that div isn't centering absolutely perfectly.

In any event, hope that helps!

Peace...

supergoten · 28-Feb-2010, 04:27 PM **#12**

Ok thank you both.
I see what you mean, I will be making adjustments to the css soon.

And yes I know that overall, Dreamweaver is much better, I just found that kind of funny that in Frontpage you can easily put divs inside of divs, and in DW it is stacking them on top of each other.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!