PDA

View Full Version : layout Breaking Up


blimp
06-05-2009, 02:12 AM
This is my first attempt at constructing a web layout using PS.

I've sliced and exported my layout as a html/images via the save for web option.

This is what it looks like sliced in PS

http://img199.imageshack.us/img199/8748/psweb01.jpg

Now I've opened the .html file in DW and would like to place text in table #2.

The size of table #2 is 511x422 and the src image is images/index_02.jpg.

My next step is to now delete the image from table #2 and add an ID DIV tag with a css style sheet to re-apply the image as a background.

Doing this will obviously allowed me to add whatever text I like within box #2.

So far so good, everything looks fine and works perfect in Safari & IE.

Now for the text, in my css Style Sheet I've set my font type to Verdana 12px and from my text edit window copied and pasted some dummy text.

Everything still looks fine in my DW window

Eg:

http://img25.imageshack.us/img25/8210/psweb02.jpg

Now the problematic part

As soon as I preview this in Safari I get this happening.

http://img523.imageshack.us/img523/1710/psweb03.jpg

Correct me if I'm wrong, but from what I read around I have worked out it has something to do with the spacer PS creates when exporting your layout as html/images.

The question is, how do I fix it?

edbr
06-05-2009, 02:26 AM
if its live post url, otherwise your code.

blimp
06-05-2009, 02:29 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Caterina WS5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#t2 {
height: 422px;
width: 511px;
background-image: url(images/index_02.jpg);
font-family: Verdana;
font-size: 12px;
color: #FFF;
}
#t3 {
height: 422px;
width: 444px;
background-image: url(images/index_03.jpg);
font-family: Verdana;
font-size: 12px;
color: #FFF;
}
#header {
background-image: url(images/index_01.jpg);
height: 291px;
width: 955px;
}
#footer {
background-image: url(images/index_04.jpg);
height: 287px;
width: 955px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Caterina WS5.psd) -->
<table id="Table_01" width="955" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><div id="header"></div></td>
</tr>
<tr>
<td><div id="t2">
<p>At Caterina Franc music tuition, we develop musicianship skills and self-confidence in young musicians.</p>
<p>Though a structured curriculum Caterina Franco offers tuition for children from as young as 6 months of age though to adults.</p>
<p>Caterina is a highly skilled motivative music teacher and provides exciting and award winning programs which are designed to bring out your best, whether learning music just for fun, personal development or exams.</p>
<p>Caterina Franco provides music lessons for piano, clarinet, keyboard and saxophone.</p>
<p>Caterina Franco music tuition also provides music for students of all ages.</p>
</div></td>
<td><div id="t3"></div></td>
</tr>
<tr>
<td colspan="2"><div id="footer"></div></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

blimp
06-05-2009, 02:35 AM
Here is a screen shot of the code in DW

http://img149.imageshack.us/img149/6965/psweb04.jpg

blimp
06-05-2009, 02:52 AM
edbr,

This is the live url:

http://www.blimpmedia.com.au/caterina/

edbr
06-05-2009, 04:55 AM
try playing around with this. took out the table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Caterina WS5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body{
background-color:#FFF;
font-family: Verdana;
font-size: 12px;
}
#wrapper{ width:955px;}
#header {
background-image: url(http://www.blimpmedia.com.au/caterina/images/index_01.jpg);
height: 291px;
width: 955px;
float:left;
clear:both;
}
#t2 {
height: 422px;
width: 511px;
background-image: url(http://www.blimpmedia.com.au/caterina/images/index_02.jpg);
color: #FFF;
display: inline;

float:left;
}
#t3 {
height: 422px;
width: 444px;
background-image: url(http://www.blimpmedia.com.au/caterina/images/index_03.jpg);
float:left;
display:inline;

}

#footer {
background-image: url(http://www.blimpmedia.com.au/caterina/images/index_04.jpg);
height: 287px;
width: 955px;
float:left;
clear:both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="t2">
<p>At Caterina Franco music tuition, we develop musicianship skills and self-confidence in young musicians.</p>
<p>Through a structured curriculum Caterina Franco offers tuition for children from as young as 6 months of age through to adults. </p>
<p>Caterina is a highly skilled and motivated music teacher and provides exciting and award-winning programs which are designed to bring out your best, whether learning music just for fun, personal development or exams.</p>
<p>Caterina Franco provides music lessons for piano, clarinet, keyboard and saxophone.</p>
<p>Caterina Franco music tuition also provides music tuition for private students of all ages.</p>

</div>
<div id="t3"></div>
<div id="footer"></div>

</div>
</body>
</html>

blimp
06-05-2009, 05:12 AM
edbr,

I just copied and pasted your code in my DW project and it works perfect.

What exactly did you do for it to work? sorry I'm an absolute novice at all this :-)

edbr
06-05-2009, 05:27 AM
i removed the table which are not good for layout and changed the styles a little. if you compare you can get it i hope
using layers will give better cross browser rendering. oh i used absolute links for the images so i could see it live on my pc, your way (relative links were fine BTW

blimp
06-05-2009, 05:58 AM
I believe there is an option in PS to export your design as XHTML with CSS style sheets. Does that still use tables or does it convert the table to DIV's with a CSS style sheets?

As you can see I don't have a great deal of knowledge in code and am looking for a easy way out :-)

I've also been playing around with SiteGrinder and found that very easy to use, but was hoping with just a little more knowledge, I could just do the same job using PS with DW.

Your thoughts?

edbr
06-05-2009, 07:23 AM
i havent used either but generally i believe as in most wizards thet will produce a lot of code.
i appreciate tat you are looking for an easy answer but the truth is its not that difficult , the learning curve is not too bad.

blimp
06-05-2009, 07:26 AM
edbr,

Out of curiosity what is the procedure you undertake to design and then code?

edbr
06-05-2009, 08:01 AM
decide on a layout, code into divs and on you go.
i personally am not one for using photo shop as a desicn tool. my preference, though many do.

blimp
06-06-2009, 11:47 PM
edbr,

I've gone through the code you modified for me and am starting to better understand what changes you have added.

I decided to try it myself on a different project so I created a 640x480 canvas in PS and divided it up in 3 layers.

Header
Middle
Footer

I then saved for web and selected HTML with images. What I came up with was this.

http://img32.imageshack.us/img32/9712/psweb05.jpg

I then selected the header table, deleted it and inserted a div tag. I set the box size to the original table size and added a background color.

Adding div tags to the rest of the tables, I came up with the following code.

http://img40.imageshack.us/img40/6941/psweb06.jpg

Now following what you did, I went through and cleaned the table tags from this:

http://img32.imageshack.us/img32/2249/psweb07.jpg

To this:

http://img530.imageshack.us/img530/9281/psweb08.jpg

I've also uploaded it to a server for you to double check:

http://www.blimpmedia.com.au/webtest001/

Now that I understand how to clean up the code, I've decided to try add some text to the <div id="middle"></div> section.

Typing up some dummy text in word, i copied and pasted it in DW using the SPECIAL PASTE option under edit. However when I try previewing the final results, my middle div breaks from the header.

Can you please explain why?

I've uploaded this html for you to see: http://www.blimpmedia.com.au/webtest001/index02.html