PDA

View Full Version : how to make my template graphic longer for longer page content?


amityak
01-09-2010, 11:50 PM
hello dreamweavers

im quite new to dreamweaver, but i do understand very quickly when explained slowly (:

so i just did and sliced a quite standand web design, now my pages are differently long so i thought id slice also just a small graphic piece at the lower borders so i could somehow define my template to repeat this graphic when my page gets too long... you can see in attachment a screenshot of the lower right corner of my page.

the question is, how do it do i keep my border frame to be seen one piece?

thank you all for kind and helpful answers

Amit.

amityak
01-10-2010, 12:40 AM
apperantly i cannot update my post >30mins after writing it, so i have to respond. i did some css trying so im pasting here my code.
first i tried with a class i named backgroundSliceRight, and then tried putting some text lines to exceed pictures size, but i still get some ugly white gaps...
ive attached a zip file with the html file and all images

thank you all




<html>
<head>
<style type = "text/css">
.backgroundSliceRight {
background-image: url(images/ja_15.gif);
background-repeat: repeat-y;
}

</style>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (layout.psd) -->
<table id="Table_01" width="800" height="1001" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/ja_01.gif" width="800" height="100" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/ja_02.gif" width="100" height="82" alt=""></td>
<td>
<img src="images/ja_03.gif" width="237" height="82" alt=""></td>
<td>
<img src="images/ja_04.gif" width="63" height="82" alt=""></td>
<td>
<img src="images/ja_05.gif" width="62" height="82" alt=""></td>
<td>
<img src="images/ja_06.gif" width="99" height="82" alt=""></td>
<td>
<img src="images/ja_07.gif" width="75" height="82" alt=""></td>
<td colspan="2">
<img src="images/ja_08.gif" width="164" height="82" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/ja_09.gif" width="100" height="693" alt=""></td>
<td width="600" height="693" colspan="6"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td>
<img src="images/ja_11.gif" width="100" height="693" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ja_12.gif" width="20" height="13" alt=""></td>
<td>
<img class = "backgroundSliceLeft" src="images/ja_13.gif" width="80" height="13" alt=""></td>
<td colspan="6">
<img src="images/ja_14.gif" width="600" height="13" alt=""></td>
<td>
<img class = "backgroundSliceRight" src="images/ja_15.gif" width="100" height="13" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/ja_16.gif" width="800" height="112" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="80" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="237" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="99" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="64" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

tux
01-10-2010, 08:43 AM
I'm not too sure what you mean but looking at your code you are using tables for your design.

I would recommend you redesign it using divs and css as tables nowadays are only really used for tabular data.

Even forms are built with divs and css now.

Heres a good tutorial that may help you get to grips with building a layout with css.

http://www.subcide.com/tutorials/csslayout/index.aspx

Good luck.

Regards, Paul

Corrosive
01-10-2010, 08:55 AM
Tux is right. Forget using Photoshop to create your HTML. It is not a good way to build a website. It gives you superfluous code and images. Create your layout in PS by all means but then hand slice the graphics you need and rebuild using divs and CSS.

amityak
01-10-2010, 09:26 AM
thumbs up for answering so friendly and quickly (:

im starting reading what tux posted "Creating a CSS layout from scratch"
sounds like what I need (:

tux
01-10-2010, 09:29 AM
Your welcome, let us know if you need any help. Good luck.