Slices move when I add content

[gumspitter]

I need help! I designed my basic layout in photoshop. I then sliced the site and sent to Dreamweaver. Now that I want to add images and text and other elements the navigation button moves at the insertion point. Why is this happening? Each button is sliced seperately. I have tried to use tables but the same happens. I currently have some content on the links and region pages. The elements look different on different monitors.

www.applingpiratesbaseball.com

 

[zach]

It looks to me like you should just code it yourself instead of using the HTML export in Photoshop (which sucks most of the time).

This seem to the format you are going for:

Header/Banner
Button Links & Content
Footer

<div id="wrapper">
	<div id="header">
		Header Image
	</div>
	<div id="content">
		<div id="cleft">
			Button Links
		</div>
		<div id="cright">
			Content
		</div>
	</div>
	<br clear="both" />
	<div id="footer">
		Footer Links
	</div>
</div>

body{background:#FFF url(images/dirt_main.jpg) repeat;margin:0;padding:0;}
#wrapper{display:block;height: auto;background: #FFF;}
#header{background:#FFF;width:960px;margin:0 auto;}
#content{width:960px;margin:0 auto;}
#cleft{float:left;width:200px;}
#cright{float:right;width:740px;}
#footer{width:960px;margin:0 auto;}

Here is something to help you get started. If you have any questions let me know.

 

[PixelPusher]

Yeah don't rely on the quality of the HTML export out of PS. While it is an excellent app for image creation, this is not the case for HTML exporting. (And your site is a messy table as it stands currently, no offense)

The premise to follow when building a site it to use only what is really needed to achieve the look you want. This way your code is simple, clean and easy to adjust/modify. The PS export will NOT give you this.

That being said, I suggest you adjust your menu on the left so that it uses anchor text, and also sprite the image of the button itself. Meaning make one image with both states of the button in it and have the text written over the top. Use css to switch the background of the button (image part) when the mouse hovers over it. This way your will have less images (not one unique image for each link) and there will also be anchor text in the link.

For example...

<ul id="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">Roster</a></li>
   /* And so on for all the links */
</ul>

ul#menu {
float:left;
width:161px;
overflow:hidden;
}
ul#menu li {
list-style-type:none;
margin:2px 0;
}
ul#menu a:link, ul#menu a:visited {
background:url(images/buttonStates.png) 0 0 no-repeat;
display:block;
width:161px;
height:38px;
line-height:38px;
font:bold 14pt Times New Roman, serif;
color:#fff;
text-align:center;
text-decoration:none;
}
ul#menu a:hover, ul#menu a:focus {
background:url(images/buttonStates.png) 0 -40px  no-repeat;
outline:0;
}

Have questions, just ask.