PDA

View Full Version : Layout shifts when entering content


cuberick
11-13-2011, 08:52 PM
Hi guys,

This is my first website designed in photoshop, sliced and exported for the web. Everything has been going smoothly coding in dreamweaver, until I started entering content in my main_content area.

When I type anything past the first line, or if I hit enter to skip down a line. Parts of the layout shift down a few pixels and the result is an ugly mess.

I've attached images to further illustrate my issue.

why would this be happening?

thank you for your help!

<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>index</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="site_layout_content.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body bgcolor="#FFFFFF" background="BgSkirtBlack+White.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/EN_BLOG_BUTTON.gif','images/EN_RATES_BUTTON.gif','images/EN_VIDEOS_BUTTON.gif','images/EN_PHOTO_BUTTON.gif','images/EN_CONTACT_BUTTON.gif','images/CHOSE_ARTISTS_BUTTON.gif','images/CHOSE_LINKS_CONTACT.gif')">
<!-- Save for Web Slices (RetroWebLayoutTEXT_WITHBUBBLES.psd) -->
<div id="site_layout">
<table width="1201" height="751" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div id="site_layout_cont_header"><img src="images/VIDEOS_HEADER.jpg" width="679" height="157"></div></td>
<td colspan="16" rowspan="2">
<img src="images/Black-Bar.gif" width="227" height="214" alt=""></td>
<td rowspan="14">
<img src="images/index_03.jpg" width="40" height="750" alt=""></td>
<td rowspan="14">
<img src="images/index_04.jpg" width="254" height="750" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="157" alt=""></td>
</tr>
<tr>
<td rowspan="13"><div id="site_layout_content">
<p>it is okay on the first line.</p>
<p>after the first line. Why is this happening?</p>
</div></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img src="images/Black-Bar-07.gif" width="112" height="31" alt=""></td>
<td colspan="8"><a href="blog.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Roll_BLOG','','images/EN_BLOG_BUTTON.gif',1)"><img src="images/BLOG_BUTTON.gif" name="Roll_BLOG" width="101" height="25" border="0"></a></td>
<td colspan="2" rowspan="2">
<img src="images/Black-Bar-09.gif" width="14" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Black-Bar-10.gif" width="101" height="6" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Black-Bar-11.gif" width="107" height="31" alt=""></td>
<td colspan="10"><a href="rates.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Roll_RATES','','images/EN_RATES_BUTTON.gif',1)"><img src="images/RATES_BUTTON.gif" name="Roll_RATES" width="108" height="31" border="0"></a></td>
<td rowspan="10">
<img src="images/Black-Bar-13.gif" width="12" height="505" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/Black-Bar-14.gif" width="85" height="65" alt=""></td>
<td colspan="12"><a href="videos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Roll_VIDEOS','','images/EN_VIDEOS_BUTTON.gif',1)"><img src="images/EN_VIDEOS_BUTTON.gif" name="Roll_VIDEOS" width="130" height="33" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td colspan="12"><a href="Photo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('roll_PHOTO','','images/EN_PHOTO_BUTTON.gif',1)"><img src="images/PHOTO_BUTTON.gif" name="roll_PHOTO" width="130" height="32" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Black-Bar-17.gif" width="77" height="30" alt=""></td>
<td colspan="13"><a href="Artists.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('roll_artists','','images/CHOSE_ARTISTS_BUTTON.gif',1)"><img src="images/ARTISTS_BUTTON.gif" name="roll_artists" width="138" height="30" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Black-Bar-19.gif" width="37" height="379" alt=""></td>
<td colspan="14"><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('roll_CONTACT','','images/EN_CONTACT_BUTTON.gif',1)"><img src="images/CONTACT_BUTTON.gif" name="roll_CONTACT" width="178" height="32" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="5">
<img src="images/Black-Bar-21.gif" width="64" height="347" alt=""></td>
<td colspan="9"><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('roll_links','','images/CHOSE_LINKS_CONTACT.gif',1)"><img src="images/LINKS_CONTACT.gif" name="roll_links" width="111" height="26" border="0"></a></td>
<td colspan="2" rowspan="5">
<img src="images/Black-Bar-23.gif" width="3" height="347" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/Black-Bar-24.gif" width="111" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/FACEBOOK.gif" width="23" height="22" alt=""></td>
<td rowspan="3">
<img src="images/Black-Bar-26.gif" width="6" height="308" alt=""></td>
<td rowspan="2">
<img src="images/TWITTER.gif" width="23" height="22" alt=""></td>
<td rowspan="2">
<img src="images/VIMEO.jpg" width="26" height="22" alt=""></td>
<td rowspan="3">
<img src="images/Black-Bar-29.gif" width="5" height="308" alt=""></td>
<td>
<img src="images/YOUTUBE.gif" width="23" height="21" alt=""></td>
<td rowspan="3">
<img src="images/Black-Bar-31.gif" width="5" height="308" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Black-Bar-32.gif" width="23" height="287" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Black-Bar-33.gif" width="23" height="286" alt=""></td>
<td colspan="2">
<img src="images/Black-Bar-34.gif" width="49" height="286" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="286" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="679" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="254" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

DWcourse
11-13-2011, 09:15 PM
You're slicing an image in Photoshop and ending up with a table-based design. If you plan to do any editing on your pages, that's a bad idea.

You should be using CSS and div (or HTML5 objects) based layout. It takes a while to learn but it provides much more flexible layouts.

domedia
11-14-2011, 02:18 AM
Hi cuberick and welcome to the forum!

Do you use a DW version that has premade templates?
If so you could look at how those are built.

.