Help Centering Layers in Dreamweaver 8

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 2627 Views - Last Post: 13 December 2010 - 05:59 PM

#1 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Help Centering Layers in Dreamweaver 8

Posted 09 December 2010 - 05:49 PM

Good evening programmers,

I am very frustrated with my website. I am a graphic designer who knows just enough programming to get me by.

I built my site http://www.realidreams.com on my own to build a team and offer my talent to the public. I have a passion for graphic design and computer animation. However coding was never really my thing.

I am stuck here, my site looks GREAT! on my system, but I've figured out that the problem lye's within the screen resolution. My site takes up my whole browser perfectly on my resolution but on greater sizes everything sticks to the left side leaving blank space on the right. When I tried to center it with the <center> tag only my photoshop slices moved to the center. This left my layers misaligned to the left. I used layers because I want to place the objects over the photoshop slices. My layers consist of a flash, a banner, and the main image and text of the pages.

I found a few different solutions and none seem to work. Solutions include:

#wrapper tag

Left-align: 50%

Float Center

I'm new to this forum and I'm posting this in hopes that someone will be able to help lead me in the right direction.

All the pages are left of the page on my computer in 1280x600 resolution.
http://www.realidreams.com/

Thank you all.

Is This A Good Question/Topic? 0
  • +

Replies To: Help Centering Layers in Dreamweaver 8

#2 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 10 December 2010 - 07:49 PM

Hello RealiDreams,
Sorry but there is no float: middle;

To center an element you need three things:
  • a valid DocType
  • an element with a width
  • that elements right/left margins set to auto




But that won't work on your absolute positioned #Layer4. To center that, have a look at this CSS -
#Layer4 {
	position:absolute;
	width:944px;
	height:301px;
margin-left: -472px;
	z-index:1;
left: 50%;
	top: 658px;
}


You'll notice right away the text doesn't follow along. Have a quick read on the pitfalls of absolute positioning.

Here's maybe a better way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
	margin: 0;
	background: #000 url(http://www.realidreams.com/bricks.jpg);
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ccc;
	text-align: center;
}
#container {
	width: 955px;
	margin: 30px auto;
	overflow: auto;
}
#object {
	height: 498px;
	width: 938px;
	margin: 0 auto;
	border: 1px solid #0f0;
}
	
#Layer4 {
	width: 955px;
	background: url(http://www.realidreams.com/bg.jpg) repeat-y;
	margin: 200px auto 0;
}
</style>
</head>
<body>
    <div id="container">
    	<div id="object">Flash movie goes here</div>
        <div id="Layer4">
                <h1 class="style2"><u><em>Holiday Special Offer</em></u></h1>
                <h2 class="style2">SAVE 15% WITH THIS HOLIDAY SPECIAL OFFER</h2>
                <h3 class="style2">HOLIDAY SPECIAL OFFER LASTS November 26th-January 1st ONLY!</h3>
            <span class="style2"> 
                Our Holiday Special Offer bundle includes a 7 Page Website, 1 Logo, 3 Custom Business Card Designs, 
                and 300 Prints. You may print 100 of each business cards design. This special offer is normally priced 
                at $900.00, but this Holiday you can get this incredible package for ONLY $765.00. Make this Special 
                Offer yours today by calling 1.888.242.0199, or click 
                </span>
                <a href="http://www.realidreams.com/holidayspecial.html" class="style3">Holiday Special</a>
            <span class="style2"> to order now!</span>
            <p class="style2">
                RealiDreams is committed to excellent quality with every project. We offer several 
                services including website design and development, logo design, and print design for 
                business cards, flyers, and several others. Get your website, logo, flash, print design 
                including business cards, and all your graphic needs right here at RealiDreams, 
                where we turn your dreams into reality.
            </p>
        <!--close Layer4--></div>
    <!--end container--></div>
</body>
</html>


<p><h2 class="style2">&nbsp;</h2>
<div id="Layer3">
  
</center>
<div id="Layer4"><img src="bg.jpg" width="955" height="300" /></div>
</body>
</html>



There are still plenty of errors that can be fixed there -check out the links about validation in my signature line.
Was This Post Helpful? 1
  • +
  • -

#3 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 11 December 2010 - 01:51 AM

YOU ARE AWESOME!!!!!!!!!!!!!!!!!!!!!!!! OMG!!! YOU DID IT!!! I don't understand how as I am not a programmer, I am an awesome designer!!! If you ever need help on the graphics side of things let me know!!!

Only three things happened that I don't like,

1. The text and black box moved a little lower than I wanted them to. (NO BIGGIE!!)

2. The black box shows up twice, once under the text where it is supposed to and at the bottom of the page where it was not supposed to. (I don't really like this problem.)

3. top and left side of flash has green lines right outside of the flash itself. (I don't really like this one either.)

I wish I knew how you did that because I want to do it to my other pages. Is it hard?


I really APPRECIATE IT ALOT!!! I've been working on this for 72 hours, googling, googling, googling, and more googling and could not seem to find anything that worked.

OMG you made my night. I am going to analyze your code even though CSS is foreign to me and I'm going to see if I can figure out what you did. When I lost all hope for this you came through and did what I thought was the impossible. I can't thank you enough.
Was This Post Helpful? 0
  • +
  • -

#4 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 11 December 2010 - 02:28 AM

Your text and black box can easily be moved. I left that container with the same name you originally gave it, #Layer4. In your CSS we style that element with this -
	
#Layer4 {
	width: 955px;
	background: url(http://www.realidreams.com/bg.jpg) repeat-y;
	margin: 200px auto 0;
}


That margin is what does it. That sets all four margins in shorthand, the browser reads it top/right/bottom/left. In this case it sees 200px top/auto right/0 bottom/auto left is just assumed because right was auto.

If you want to move it up a bit, try changing that to margin: 100px auto 0;

==============================================

It shows up twice because of a cut/paste goof on my part. Sorry about that.
Remove this bit off the bottom and it will be better -
<p><h2 class="style2">&nbsp;</h2>
<div id="Layer3">
  
</center>
<div id="Layer4"><img src="bg.jpg" width="955" height="300" /></div>
</body>
</html>


==============================================


The green lines are just a border I put on #object to outline it. That border comes from this bit in your CSS -
#object {
	height: 498px;
	width: 938px;
	margin: 0 auto;
	border: 1px solid #0f0;
}

Was This Post Helpful? 1
  • +
  • -

#5 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 11 December 2010 - 03:42 PM

Yup! That did it!!! You are the man.

Now can you please tell me if and how I could integrate this into my other pages because all of my pages do that same thing. I know I'm asking alot but if you need anything in the graphics world within reason, I will help you out.

Thank you soooo much.
Was This Post Helpful? 0
  • +
  • -

#6 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 11 December 2010 - 05:45 PM

The changes you've made to the CSS will propogate across all your pages that link to that CSS. That's the beauty of CSS, one small edit can affect everything sitewide.

The new markup though, that will have to be done by hand to each page you want to update.
Was This Post Helpful? 0
  • +
  • -

#7 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 11 December 2010 - 10:44 PM

I don't get it. I don't have my pages linked to an external style sheet. What do I do to each page to get them to follow that one code?
Was This Post Helpful? 0
  • +
  • -

#8 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 05:15 AM

View PostRealiDreams, on 11 December 2010 - 09:44 PM, said:

I don't get it. I don't have my pages linked to an external style sheet. What do I do to each page to get them to follow that one code?


If you take all the duplicated CSS out of the head of each page, put it in an external style sheet and link each page to that style sheet... any change you make to that .css file will affect each page that links to it.

looks like you may have quite a bit of editing to do...
Was This Post Helpful? 1
  • +
  • -

#9 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 01:30 PM

Understandable, but shouldn't I center everything in the HTML like you did prior to copying the CSS to an external CSS? My question is, how did you center the absolute positioned layers while keeping them in there right spot? When I view the page that you did, It looks good on 1024x768 and looked good on 1280x720. This is the problem I'm having with every page other than the holiday page thanks to you :) I just want to learn what you did so that I can do it to the rest of my pages.

Let me simplify this:

1. How do I center my AP Elements (Layers)?
2. When I copy and paste CSS to an External Style Sheet, how do I link my pages to it and is this able to be done in Dreamweaver?
Was This Post Helpful? 0
  • +
  • -

#10 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 02:53 PM

Quote

1. How do I center my AP Elements (Layers)?

Do you have a link to one that's not centered?

Quote

2. When I copy and paste CSS to an External Style Sheet, how do I link my pages to it and is this able to be done in Dreamweaver?


When I post a solution or snippet to a forum, I always use attached (in the head of the document) CSS just so it's easy to copy/paste into a new .html to test/edit on another computer. So many people quote the CSS and HTML seperate which just adds a few steps when putting it all together on a different computer.

To link your CSS file to your pages, add a line like this to the head of your document -
<link href="../pathTo/MyCSS.css" rel="stylesheet" type="text/css" />

Was This Post Helpful? 1
  • +
  • -

#11 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 03:00 PM

These are pretty much the same, some pages here have some minor differences.
http://www.realidreams.com/home.html
http://www.realidreams.com/about.html
http://www.realidrea...m/services.html
http://www.realidrea...m/porfolio.html
http://www.realidrea...om/pricing.html
http://www.realidrea...om/contact.html

These are different than the top pages:
http://www.realidrea...isingmedia.html
http://www.realidrea...ndidentity.html
http://www.realidrea...sitedesign.html
http://www.realidrea...plications.html
http://www.realidrea...rintdesign.html

I gave you all the links only so you can see that there are differences between them. I didn't know if that would mean a different call to action for each page.

Thank you so much for giving me advise on this.
Was This Post Helpful? 0
  • +
  • -

#12 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 03:17 PM

In those top links you have home forground.jpg at 936x768 contained in #forground which is set at 289x107.
The box model says that what you put in a div must fit in it. margin/padding/border all count when figuring sizes.

Try centering those like this -
#forground {
height: 768px;
width: 936px;
	position:absolute;
/*left:36px;*/
left: 50%;
	top:179px;
margin: 0 0 0 -468px;
/*width:289px;
height:107px;*/
	z-index:2;
}



Then, if you took that out of the head of every page and put it in a linked CSS then that one entry would center all the pages that have a forground.
Was This Post Helpful? 1
  • +
  • -

#13 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 03:30 PM

Awesome! That worked, but it misaligned my other elements. Don't get me wrong, I don't want you to CSS my whole site, I just want to know what you are doing to get the outcomes that you are getting. lol. YOU ARE AWESOME WITH THIS CSS STUFF! No lie.
Was This Post Helpful? 0
  • +
  • -

#14 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 59
  • Joined: 10-December 06

Re: Help Centering Layers in Dreamweaver 8

Posted 12 December 2010 - 06:52 PM

View PostRealiDreams, on 12 December 2010 - 02:30 PM, said:

Awesome! That worked, but it misaligned my other elements.


Can you update your online site to the latest version?
If centering has fixed the container but made your content wonder off somewhere, it may be just a matter of making the right element position: relative; and giving it new top/left measurements.

I really don't like building sites with so much ap. It does have it's uses but it's reallyhardly ever needed ... way overused. Read about the pitfalls of absolute positioning.
Was This Post Helpful? 1
  • +
  • -

#15 RealiDreams  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 09-December 10

Re: Help Centering Layers in Dreamweaver 8

Posted 13 December 2010 - 01:08 AM

Are you requesting I put the new one up with the other layers misaligned? I'll put it up on my server elsewhere, so that my visitors tonight do not see the misalignment. Heres the links to all of them due to the fact that every page is different:

with this one I'll be able to change all of the 2nd set of links mentioned above:
http://www.realidrea...misaligned.html

These links all have different AP elements in different positions:
http://www.realidrea...misaligned.html
http://www.realidrea...misaligned.html
http://www.realidrea...misaligned.html
http://www.realidrea...misaligned.html
http://www.realidrea...misaligned.html

The only reason I used AP's is because I sliced the site in Photoshop and wanted to add content over top of the sliced layout. Is there an easier way of achieving this?

Once again you don't understand how grateful I am. I'm serious, if you ever need any assistance let me know.

Is there somewhere you could recommend me to, to learn CSS to your level quickly and efficiently? I'm going to school in March out in Boca Raton Florida. I'm getting my BFA and MFA over a 4.5 year course in computer animation/special effects. Therefore, I don't wish to go to college for programming and I want to be able to do what you're doing on my website, and only take about 2 months max to learn.

Thanks man. I O U
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2