Help Centering Layers in Dreamweaver 8

  • (2 Pages)
  • +
  • 1
  • 2

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

#16 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 13 December 2010 - 02:56 AM

Quote

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?


I've never understood the thought behind slicing an image up only to put it back together again. It would be much easier to put it as a background image of a containing div and have all your content flow naturally, in other words, get rid of all that absolute positioning.

I thought position: relative; might bring your content around where it's supposed to be but I'm not seeing it.
Was This Post Helpful? 0
  • +
  • -

#17 RealiDreams  Icon User is offline

  • New D.I.C Head

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

Re: Help Centering Layers in Dreamweaver 8

Posted 13 December 2010 - 11:46 AM

The reason of slicing images in photoshop is because it's quick, efficient, and it allows you to make navigation buttons easily. It also creates the html of the site layout. It's easy for graphic designers since photoshop is our main tool. I like the method. All I want to know is this: If I go to http://www.realidrea...misaligned.html, I see that the twitter bird is misaligned. How do I know which #..... tag is the twitter bird? And then how do you know what values to place in the following fields to get the twitter bird back in its original spot?

/*left:36px;*/
left: 50%;
top:179px;
margin: 0 0 0 -468px;
/*width:289px;
height:107px;*/
z-index:2;
}
Was This Post Helpful? 0
  • +
  • -

#18 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 13 December 2010 - 04:07 PM

Quote

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?

Yes, that should be the background image of your containing div. That way you can put stuff on top of it without all the ap.

Quote

It also creates the html of the site layout


But that's the very problem.
DW is famous for spitting out crap code like this. This is how we used to build websites, I mean, spacer.gifs? Really?
There are much better ways now.

It's not like it's a major sin or the end of the world, putting up a site like this, but it is representative of your knowledge and ability. If I was looking for someone to build a site for me and saw their company webpage was built with tables and invalid code I would leave without looking at anything else.

Try a layout that lets the elements flow naturally. Valid, semantic code without the tables and all that absolute positioning. Then, if there is a need to, it's fine to absolutely position an element or two.

Check this out - 
<!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: #FC6;
}
#container {
	width: 1000px;
	margin: 0px auto;
	background: url(http://www.realidreams.com/images/home_01.gif) repeat-y left;
	position: relative;
}
	#wrapper {
		width: 1000px;
		background: url(http://www.realidreams.com/images/home_04.gif) repeat-x right;
	}
		
#header {
	width: 936px;
	margin: 0 auto;
	overflow: auto;
}
	#header img {
		float: left;
		border: none;
	}
#nav {
	height: 27px;
	background: url(http://www.realidreams.com/images/home_05.gif) no-repeat left;
}
#contact {
	height: 58px;
	width: 934px;
	margin: 0 auto;
	display: block;
}
#content {
	height: 748px;
	width: 936px;
	margin: 8px auto 0;
	background: url(http://www.realidreams.com/contact%20forground.jpg)
}
</style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <div id="header">
                <img src="http://www.realidreams.com/images/BannerLink.gif" alt="logo" width="297" height="85" />
                <img src="http://www.realidreams.com/images/home_03.gif" alt="picture of a menu" width="638" height="85" />
            <!--end header--></div>
        <div id="nav">
        <!--end nav--></div>
        	<img src="http://www.realidreams.com/CONTACT%20BANNER.gif" alt="a picture of a menu" id="contact" />
    <div id="content">
    <!--end content--></div>
        <!--end wrapper--></div>
    <!--end container--></div>
</body>
</html>


As for getting your Twitter bird and contact form back in position I don't seem to be much help. I just don't use tables enough to be able to figure it out.

This post has been edited by Excavator: 13 December 2010 - 04:09 PM

Was This Post Helpful? 1
  • +
  • -

#19 RealiDreams  Icon User is offline

  • New D.I.C Head

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

Re: Help Centering Layers in Dreamweaver 8

Posted 13 December 2010 - 04:20 PM

Ok. I understand. I just don't know how to do it. I know html, but I don't know CSS and using AP elements allowed DW to write my CSS for me. I see what you mean, however does this mean I have to redo my whole site? If I make a background image in DW it wants me to repeat:x or repeat:y and if I choose repeat:none it doesn't center the background. I just love the way my website looks as far as design and where everything is placed (on my resolutions)lol. If it is possible to keep my website looking the exact same way and having the same navigation, etc. I am open ears.

The new code causes both top and bottom navigation bars to disappear for some reason.

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

#20 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 13 December 2010 - 05:59 PM

Quote

however does this mean I have to redo my whole site?

No, it only means I'm not able to solve your problem.

Quote

If I make a background image in DW it wants me to repeat:x or repeat:y and if I choose repeat:none it doesn't center the background.

There is positioning available too. See background images here.

Quote

The new code causes both top and bottom navigation bars to disappear for some reason.

That was not intended as a replacement, just an quick example I wrote that shows how to use background images and place divs without tables or ap. The menus are not there because I didn't put them there.
Was This Post Helpful? 1
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2