PDA

View Full Version : Pages keep moving?


alan101
08-26-2010, 02:16 PM
hey, i am currently doing a university project on web design, and part of the project is to looking at different methods to create a site.

My problem is with the photoshop and slicing method, i created a simple 4 page site, but when i export to dreamweaver and add the text to create page links 2 of the pages move to the right slightly.

I can understand why, i used a template page for all 4 so they are exactly the same apart from having a few different sliced areas.

any help would be realy appreciated, thanks.

Rob_Che
08-26-2010, 04:21 PM
Not entirely sure what you mean Alan - are you trying to put text on top of images you've dragged from Photoshop?

If you want text on top of them they will need to be set as background images... Also - if you're using tables to build your site then this will happen a lot.

Let us know how you're getting on...

Rob

alan101
08-26-2010, 05:52 PM
hi rob thanks for the reply, i didnt explain it very well sorry, ill try and explain it better.

the text i referred to was just the page buttons like " home, contact etc.." the problem is just that when i preview the site in a browser and change between the pages. some of the pages move out of line with the other pages.
The method i used in a little more detail incase it helps at all, is basicly slicing up the site in photoshop then, saving for web and opening it in dreamweaver.
I used a set template so the pages would be the same, the only thing that is realy different is the way some areas of the different pages are sliced.

thanks.

Corrosive
08-26-2010, 06:44 PM
Are some of the pages longer than the browser window and others not by any chance?

OT (Hi Rob by the way. Long time, no see!)

Rob_Che
08-26-2010, 06:54 PM
Are some of the pages longer than the browser window and others not by any chance?

Yeah I thought that... could it be the scrollbar Alan?

Is the site live anywhere - we're better when we can see the code. We're geeky like that :)

OT (Hi Rob by the way. Long time, no see!)

Hey Toby... I like to pop in now and again to cause trouble :s
I posted a message on DJ's thread but I think I sounded a bit of a d!ck Unintentional but ignore me...

Corrosive
08-26-2010, 07:07 PM
I posted a message on DJ's thread but I think I sounded a bit of a d!ck Unintentional but ignore me...

No, I don't think so. Sounded fine to me.

alan101
08-26-2010, 09:36 PM
no its not live sorry, and the pages are all the same length and width, although since my last post i have been playing around with it, and iv found that if i realy shrink down the browser so the scroll bar at the bottom appears the pages do not move.

Corrosive
08-27-2010, 07:09 AM
OK, can you post some code for us then please?

alan101
08-27-2010, 06:00 PM
this is the code for the home page
<html>
<head>
<title>index1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
.style1 {
font-size: 1px;
color: #FFFFFF;
}
.style4 {
font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
font-size: 13px;
color: #999999;
}
.style8 {color: #FFFFFF; font-size: 10px; }
.style10 {font-size: 18px; color: #17629E; font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";}
.style12 {color: #FFFFFF}
.style16 {
color: #666666;
font-style: italic;
font-size: 11px;
}
.style19 {font-size: 9px}
.style13 { font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
font-size: 12px;
color: #999999;
}
.style6 { color: #666666;
font-weight: bold;
}
.style14 { color: #666666;
font-style: italic;
}
.style15 {font-size: 13px}
.style17 {font-size: 11px}
.style21 {
font-size: 13px;
font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
color: #666666;
font-weight: bold;
}
.style22 {
font-size: 3px;
color: #FFFFFF;
}
.style23 {font-size: 3px}
.style28 {font-size: 7px}
.style29 {
color: #17619E;
font-weight: bold;
}
.style30 {
font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
font-size: 12px;
}
.style31 {color: #999999}
.style32 {
font-size: 12px;
font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
color: #1F77BD;
font-weight: bold;
}
.style33 {
font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
color: #1F77BD;
font-size: 16px;
font-weight: bold;
}
.style27 {color: #17629E}
.style34 {color: ##17629E}
a:link {
color: #17619E;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #17619E;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
color: #17619E;
}
.style35 {font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro"; font-size: 12px; color: #999999; font-weight: bold; }
.style36 {color: #16619D}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index1.psd) -->
<table width="1031" height="1269" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="26">
<img src="images/index1_01.jpg" width="15" height="1268" alt=""></td>
<td rowspan="26">&nbsp;</td>
<td colspan="10">&nbsp;</td>
<td rowspan="26">&nbsp;</td>
<td rowspan="26">
<img src="images/index1_05.jpg" width="15" height="1268" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/main-banner.jpg" width="940" height="179" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="179" alt=""></td>
</tr>
<tr>
<td colspan="10" align="left" valign="middle"><span class="style33"><a href="index1.html">HOME</a> <span class="style27">|</span> <a href="service/services.html">SERVICES</a> <span class="style34">|</span> <a href="TESTIMONIAL/testimonials.html"> TESTIMONIALS</a> | <a href="contact/contact.html">CONTACT</a></span></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="10"><span class="style1">.</span></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/image.jpg" width="622" height="218" alt=""></td>
<td rowspan="21">&nbsp;</td>
<td><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','292','heigh t','218','src','flash/productflashimage','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','flash/productflashimage' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="292" height="218">
<param name="movie" value="flash/productflashimage.swf">
<param name="quality" value="high">
<embed src="flash/productflashimage.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="292" height="218"></embed>
</object></noscript> </td>
<td>
<img src="images/spacer.gif" width="1" height="218" alt=""></td>
</tr>
<tr>
<td colspan="8">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="4" valign="top"><p><span class="style10"><strong>About us</strong><br>
<span class="style8">&gt;</span><br>
<span class="style4">&quot;CW Clinical Solutions&quot; is an innovative company drawing on over 30 years of experience both in the NHS and through medical devices companies such as Smith and Nephew, Smiths Industries, Kimal Scientific, and latterly ResMed UK LTD selling to the NHS sector.<br>
<span class="style8">10</span><br>
Specializing in Respiratory devices and Critical Care products. &quot;CW Clinical Solutions&quot; uses a select network of companies to offer information, advice and a product compatibility search to match the needs and requirements of the clinician and departments.<br>
<span class="style8">,</span><br>
With a Professional, honest and ethical approach &quot;CW Clinical Solutions&quot; offer sales, service, support and training, ensuring best practice and best product match to guarantee continued clinical excellence and partnership with the NHS.</span></span></p> </td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index1_15.jpg" width="292" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="3" align="left" valign="top"><span class="style13">I have known Chris for at least 6 years, on every occasion i have met him, he has been very charming, helpfull and conscientous.<br>
<span class="style28">.</span><br>
His Product knowledge has been exceptional, and if ever there was a need to find anything out for me, he has done so quickly and efficiently.<br>
<span class="style28">.</span><br>
He has been an excellent representative for his company, able to provide a service that encompasses educational days, introductions of new products and ongoing support for continued buisness needs.<br>
<br>
<span class="style29">Helen Myers, Chief Clinical Physiologist<br>
North Tyneside General Hospital</span></span></td>
<td>
<img src="images/spacer.gif" width="1" height="187" alt=""></td>
</tr>
<tr>
<td colspan="8"><span class="style1">.</span></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/index1_19.jpg" alt="" width="197" height="60" border="0" usemap="#Map"></td>
<td rowspan="10">
<img src="images/index1_20.jpg" width="3" height="289" alt=""></td>
<td rowspan="10">&nbsp;</td>
<td colspan="2" rowspan="6">
<img src="images/index1_22.jpg" alt="" width="198" height="92" border="0" usemap="#Map2"></td>
<td rowspan="10">
<img src="images/index1_23.jpg" width="3" height="289" alt=""></td>
<td rowspan="10">&nbsp;</td>
<td rowspan="5">
<img src="images/index1_25.jpg" alt="" width="192" height="65" border="0" usemap="#Map3"></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index1_26.jpg" width="292" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td rowspan="4" valign="top"><p class="style30"><span class="style31">I hav</span><span class="style31">e worked with Chris for many years and it has always been a pleasure to do business with him<br>
<span class="style28">.</span><br>
He is a real font of knowledge with a broad base of experiance in both critical care &amp; sleep therapy. He is enthusiastic and has a positive attitude which is to be highly commended. Excellent customer skills.<br>
<br>
<span class="style29">J Pateraki, Advanced Nurse Specialist<br>
York District General Hospital</span></span></p>
</td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="6" valign="top"><span class="style13"><span class="style15"><br>
With over 36 years <br>
experience in the medical industry, Repton Medical Ltd are one of the countrys leading suppliers in:</span><br>
<span class="style19">.</span><br>
<span class="style6"><span class="style15">. C.P.A.P consumables<br>
<span class="style23">.</span><br>
. SP02</span><br>
<span class="style12">..</span></span><span class="style14"><span class="style17">sensorse &amp; adapting cables</span></span><span class="style6"><br>
<span class="style22">.</span><br>
<span class="style15">. NIBP Cuffs<br>
. Medical labels<br>
<span class="style22">.</span><br>
. Posey</span><br>
<span class="style12">..</span></span><span class="style16">paediatric and neonatal range</span></span></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="5" valign="top"><span class="style4"><br>
Ventmed - comprises a team <br>
of individuals who are highly specialised in this market, together with some of the <br>
most forward thinking suppliers within the healthcare industry, specifically focused on:<br>
<span class="style12">.<br>
</span></span><span class="style21">. Respiratory care<br>
<span class="style23">.</span><br>
. Emergency medical and<br>
<span class="style12">..</span>cardiology sectors</span></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4" valign="top"><p class="style4"><br>
B &amp; D Electromedical, are the manufacturer of the Nippy range of ventilators and accessories. Our current product range<br>
include the:<br>
.<br>
<span class="style6">. Nippy 3+<br>
<span class="style22">.</span><br>
. Nippy Junior+<br>
<span class="style22">.</span><br>
. Nippy st+<br>
<span class="style22">.</span><br>
. Nippy s+</span></p>
</td>
<td>
<img src="images/spacer.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index1_32.jpg" width="292" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="4" valign="top"><p class="style13">I have known and worked with Chris for over 15 <br>
years and have yet to come across another such dedicated and hard working individual who is always prepared to go out of his way to accommodate his customers needs<br>
<span class="style28">.</span><br>
The service we have recieved over the years has been second to none, he has always ensured that his customers are looked after in a very professional manner and apples to both work and social enviroments. <br>
<br>
<span class="style29">DD Vara, <br>
Respiratory Clinical Investigations Manager<br>
Glenfield Hospital</span></p>
<p class="style35">&gt;&gt; <a href="TESTIMONIAL/testimonials.html">Click to read more testimonials</a></p> </td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td colspan="8">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/badges.jpg" width="399" height="105" alt=""></td>
<td colspan="4" rowspan="3">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="105" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="10"><span class="style32"><span class="style36">Copy Right &copy; 2010 CW Clinical Solutions . </span><a href="http://www.a-pdesign.co.uk/">Designed by www.a-pdesign.co.uk</a></span></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="197" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="183" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="292" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->

<map name="Map"><area shape="rect" coords="11,3,180,45" href="http://www.reptonmedical.co.uk/">
</map>
<map name="Map2"><area shape="rect" coords="29,1,147,73" href="http://www.nippyventilator.com/">
</map>
<map name="Map3"><area shape="rect" coords="10,1,170,51" href="http://www.ventmed.com/">
</map></body>
</html>

alan101
08-27-2010, 06:02 PM
code for the testimonial page, ill only put these 2 as i didnt realise it would be so much plus, this are the 2 pages which move.

<html>
<head>
<title>testimonials</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.style27 {color: #17629E}
.style33 { font-family: Arial, Verdana, "Helvetica CY", "Myriad Pro";
color: #1F77BD;
font-size: 16px;
font-weight: bold;
}
.style34 {color: ##17629E}
a:link {
color: #17629E;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #17629E;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
color: #17629E;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (testimonials.psd) -->
<table width="1030" height="1269" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="11">
<img src="../images/index1_01.jpg" width="15" height="1268" alt=""></td>
<td width="30" rowspan="11" bordercolor="0">&nbsp;</td>
<td height="29" colspan="6">&nbsp;</td>
<td width="30" rowspan="11">&nbsp;</td>
<td rowspan="11">
<img src="../images/index1_05.jpg" width="15" height="1268" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="../images/main-banner.jpg" width="940" height="179" alt=""></td>
</tr>
<tr>
<td height="35" colspan="6" align="left" valign="middle"><span class="style33"><a href="../index1.html">HOME</a> <span class="style27">|</span> <a href="../service/services.html">SERVICES</a> <span class="style34">|</span> <a href="testimonials.html"> TESTIMONIALS</a> | <a href="../contact/contact.html">CONTACT</a></span></td>
</tr>
<tr>
<td height="73" colspan="5">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">
<img src="images/testimonials_10.jpg" width="940" height="51" alt=""></td>
</tr>
<tr>
<td>
<img src="images/testimonials_11.jpg" width="289" height="236" alt=""></td>
<td>
<img src="images/testimonials_12.jpg" width="36" height="236" alt=""></td>
<td>
<img src="images/testimonials_13.jpg" width="295" height="236" alt=""></td>
<td>
<img src="images/testimonials_14.jpg" width="30" height="236" alt=""></td>
<td colspan="2">
<img src="images/testimonials_15.jpg" width="290" height="236" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/testimonials_16.jpg" width="940" height="18" alt=""></td>
</tr>
<tr>
<td>
<img src="images/testimonials_17.jpg" width="289" height="238" alt=""></td>
<td>
<img src="images/testimonials_18.jpg" width="36" height="238" alt=""></td>
<td>
<img src="images/testimonials_19.jpg" width="295" height="238" alt=""></td>
<td>
<img src="images/testimonials_20.jpg" width="30" height="238" alt=""></td>
<td colspan="2">
<img src="images/testimonials_21.jpg" width="290" height="238" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/testimonials_22.jpg" width="940" height="23" alt=""></td>
</tr>
<tr>
<td>
<img src="images/testimonials_23.jpg" width="289" height="355" alt=""></td>
<td>
<img src="images/testimonials_24.jpg" width="36" height="355" alt=""></td>
<td>
<img src="images/testimonials_25.jpg" width="295" height="355" alt=""></td>
<td>
<img src="images/testimonials_26.jpg" width="30" height="355" alt=""></td>
<td colspan="2">
<img src="images/testimonials_27.jpg" width="290" height="355" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/testimonials_28.jpg" width="940" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="289" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="295" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="271" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

alan101
08-27-2010, 06:03 PM
sorry about the quantity of code i didnt know which parts of the code to use

Corrosive
08-27-2010, 06:13 PM
hey, i am currently doing a university project on web design, and part of the project is to looking at different methods to create a site.

My problem is with the photoshop and slicing method, i created a simple 4 page site, but when i export to dreamweaver and add the text to create page links 2 of the pages move to the right slightly.



Please use code tags especially if you are going to post that much!

If you are genuinely doing a project about web development techniques then cross the 'export from Photoshop' method straight off your list. It is a way to get some images on a page but it isn't a website creation method.

I'm not trawling through all those nested tables and random spacer gifs but I can suggest one thing it might be. You could try adding;

img a {border: 0;}

to your CSS styles.

Genuinely I'd give this up as a bad job and start again with a decent methodology. You'll get loads of help here if you need it.

DWcourse
08-27-2010, 08:22 PM
Since you have style rules with names like .style1, I assume you're using Dreamweaver CS3. You need to learn how to get control of style creation rather than just making changes in the Properties Inspector and letting Dreamweaver create and name the styles for you.

Rob_Che
08-28-2010, 09:29 AM
As I said previously...

Also - if you're using tables to build your site then this will happen a lot.

Tables are not designed to hold your website design - they should only be used for tabular data Alan.

Have you taken a look at the templates on here (and around the web)... You should be using a CSS construction method. As Corrosive says we're MORE than happy to help you get started - you'll never look back and you'll get a site you can debug and will be expandable and controllable... (tables are wiley beasts...)

Grab a CSS template and start again.

If you want to post your original design (as a jpeg or whatever) we can show you where to start :wink: We'll have it up and rocking in no time at all...