Jump to content


Severe problems with layout

Started by OpposingForce, Jul 02 2005 03:54 PM

22 replies to this topic

#1 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 02 July 2005 - 03:54 PM

Someone please help me fix this horrible problem. I sliced up the layout in photoshop then tried editing in Dreamweaver and I have this problem when I try to add extra text to the content box (I was expecting it to expand).

Here is a picture

Posted Image

As you can see the content box will expand but not without screwing up the entire layout. Someone please help!

#2 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 02 July 2005 - 09:11 PM

bump

#3 Jaymz

    Retired P2L Staff

  • Members
  • PipPipPipPip
  • 4,104 posts

Posted 02 July 2005 - 09:40 PM

OpposingForce, on Jul 2 2005, 11:11 PM, said:

bump
Please refrain from doing this.

#4 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 02 July 2005 - 09:47 PM

Well, first off... ditch photoshop.
If you don't know html well enough to code your own template, tables are the easy part, there are close to 1k tutorials on them... put them to good use.
Second, when dealing with html/php/any other web language, pictures rarely help. What we would need to see is the code, but i doubt you'll find many people willing to clean up photoshop's code.

If you need help learning some html, or getting something to display just right, ask. But my first recommendation in this would be to ditch the photoshop code if you want an expading table cell.

#5 Jaymz

    Retired P2L Staff

  • Members
  • PipPipPipPip
  • 4,104 posts

Posted 02 July 2005 - 09:58 PM

If you wait a little bit, sometime this summer Faken is releasing a massive tutorial on slicing a template :)

#6 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 03 July 2005 - 10:16 AM

here is the code and a snapshot of the problem

Posted Image


<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image : url();
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (random1.psd) -->
<table width="801" height="581" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
  <td rowspan="9">
 	 <img src="images/leftborder.gif" width="12" height="580" alt=""></td>
  <td colspan="6">
 	 <img src="images/banner.gif" width="775" height="114" alt=""></td>
  <td rowspan="9">
 	 <img src="images/index_03.gif" width="1" height="580" alt=""></td>
  <td rowspan="9">
 	 <img src="images/rightborder.gif" width="12" height="580" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="114" alt=""></td>
	</tr>
	<tr>
  <td colspan="6">
 	 <img src="images/index_05.gif" width="775" height="15" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
  <td colspan="4">
 	 <img src="images/index_06.gif" width="333" height="33" alt=""></td>
  <td rowspan="2">
 	 <img src="images/contenttop.gif" width="389" height="36" alt=""></td>
  <td rowspan="7">
 	 <img src="images/index_08.gif" width="53" height="451" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
  <td rowspan="6">
 	 <img src="images/index_09.gif" width="15" height="418" alt=""></td>
  <td colspan="2" rowspan="2">
 	 <img src="images/navigation.gif" width="171" height="254" alt=""></td>
  <td rowspan="5">
 	 <img src="images/index_11.gif" width="147" height="407" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
   <td rowspan="2" background="images/content.gif"><table width="388" border="0" align="center">
          <tr>
            <td width="382"><p>Text</p>
              <p>&nbsp;</p>
              <p>and</p>
              <p>more</p>
              <p>content</p>
              <p>but</p>
              <p>the image</p>
              <p>is breaking</p>
              <p>horribly</p>
              <p>and its</p>
              <p>annoying</p>
              <p>ok???</p>
              <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp; </p></td>
          </tr>
        </table></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="251" alt=""></td>
	</tr>
	<tr>
  <td colspan="2" rowspan="3">
 	 <img src="images/index_13.gif" width="171" height="153" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="8" height="96" alt=""></td>
	</tr>
	<tr>
  <td>
 	 <img src="images/contentbottom.gif" width="389" height="29" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
  <td>
 	 <img src="images/index_15.gif" width="389" height="28" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
  <td>
 	 <img src="images/index_16.gif" width="39" height="11" alt=""></td>
  <td colspan="3">
 	 <img src="images/pagefooter.gif" width="668" height="11" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="11" alt=""></td>
	</tr>
	<tr>
  <td>
 	 <img src="images/spacer.gif" width="12" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="15" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="39" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="132" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="147" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="389" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="53" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  <td>
 	 <img src="images/spacer.gif" width="12" height="1" alt=""></td>
  <td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

I changed the layout a bit in hopes that it would work, considering I didn't really need the second box anyway. What I did was insert a table the same width as my image in the content space, then I inserted the image of the content slice and added text. Everything seems to work fine until the text wants to start expanding the content box to make room. But I'm still having the image breaking problem and I'm not sure how to fix it. Can anyone assist me please?

Edited by OpposingForce, 03 July 2005 - 10:26 AM.

#7 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 03 July 2005 - 11:17 AM

Also here is a pic of my slicing

Posted Image

Edited by OpposingForce, 03 July 2005 - 02:58 PM.

#8 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 03 July 2005 - 03:02 PM

So are the slices done correctly? Or is there a problem in the code? Please can someone help me as soon as possible because I really want to get this thing on the internet.

#9 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 03 July 2005 - 07:47 PM

Ok I learned how to make an expanding content box but now the question is how to I apply it to my site? If I go to delete the content box in dreamweaver, the image gets all messed up and breaks, so do I have to recode the entire page from scratch? Or can I just change a few things and not have to code it again from scratch?

#10 Jamie Huskisson

    Retired P2L Staff

  • Members
  • PipPipPipPip
  • 3,648 posts
  • Gender:Male
  • Location:Nottingham, UK

Posted 03 July 2005 - 07:56 PM

due to what i'd call severe multiple posting, warning level increased...

if you wait people will reply :)

#11 -GhoSt-

    Young Padawan

  • Members
  • Pip
  • 118 posts

Posted 03 July 2005 - 09:12 PM

your problems are the slicing, when you slice in photoshop its very hard to make an expanding template because they split the extra parts into smaller images that are extra, your best bet is to slice it with the rectangular marquee tool and use different tables for each image if you need further help aim me or pm me

#12 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 04 July 2005 - 04:54 PM

Well, like i said before, ditch photoshop...
It's about as close to impossible, to get an expanding content box from it's code, as you can get.
Learn some html, ask ghost for help... don't slice in photoshop.

#13 Sebastian

    Young Padawan

  • Members
  • Pip
  • 200 posts
  • Location:Tziyyon

Posted 05 July 2005 - 07:43 AM

Learn CSS and all your troubles shall be gone.

Edited by Jaymz, 05 July 2005 - 10:05 AM.

#14 Xanderdude

    Jedi In Training

  • Members
  • PipPip
  • 453 posts
  • Location:The Netherlands
  • Interests:Radio controlled flying and Digital art,Web<br />And a little gaming if im bored

Posted 05 July 2005 - 07:52 AM

rc69, on Jul 4 2005, 09:54 PM, said:

Well, like i said before, ditch photoshop...
It's about as close to impossible, to get an expanding content box from it's code, as you can get.
Learn some html, ask ghost for help... don't slice in photoshop.
Well u can... You just need to change some of its code.
If u have the cell where u want to get the text in u wil have like <td> <img src="blerp.gif"></td>

Change that to <td background="blerp.gif"> your content here </td>
now it will expand :)

But i prefer doing it in css. Its nicer ;)

cu xander

Edited by Xanderdude, 05 July 2005 - 07:53 AM.

#15 OpposingForce

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 05 July 2005 - 09:43 AM

Xanderdude, on Jul 5 2005, 12:52 PM, said:

rc69, on Jul 4 2005, 09:54 PM, said:

Well, like i said before, ditch photoshop...
It's about as close to impossible, to get an expanding content box from it's code, as you can get.
Learn some html, ask ghost for help... don't slice in photoshop.
Well u can... You just need to change some of its code.
If u have the cell where u want to get the text in u wil have like <td> <img src="blerp.gif"></td>

Change that to <td background="blerp.gif"> your content here </td>
now it will expand :)

But i prefer doing it in css. Its nicer ;)

cu xander
No that does not work. That's what I've been trying from the beginning and all it does is break up the image when the box goes to expand. The only way I have been able to accomplish this feat of expanding content boxes is to make layers in dreamweaver then add tables with the images on it. Then I have to use an extension from Studio VII that inputs an extremely long and complicated javascript thing in to stop the layers from shifting in smaller browsers and the whole thing is just a complete mess. Every tutorial I have tried to follow for expanding content boxes has resulted in complete failure and changing the code from 

<td colspan="4">
<img src="images/content.gif" width="xvalue" height="yvalue"></td>

to

 <td colspan="4" background="images/content.gif" width="xvalue" height="yvalue">

just breaks the image apart when I go to add more content than the existing slice size. By the way, I have finished my site, but it does not have expanding content boxes, you can view it here if you are interested.

http://tumadre.50webs.com/index.html

Can anyone link me to a tutorial that teaches you how to make expanding content boxes that dont ruin the image?

Edited by OpposingForce, 05 July 2005 - 11:42 PM.

#16 jmh

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 10 July 2005 - 02:44 PM

;) it looks good but you could always try again and thanks for the help realy
useful

#17 Verve.

    Young Padawan

  • Members
  • Pip
  • 20 posts

Posted 10 July 2005 - 02:51 PM

you just need to slice the template witout the content box there, then slice the content box as a new image. then, in the html version of the site without the content box, you make a new table which is enough to fit in the images for the content box

#18 crushed

    Young Padawan

  • Members
  • Pip
  • 30 posts

Posted 10 July 2005 - 04:18 PM

I agree, CSS is amazing. I read a lot of convincing tutorials to change from table layouts to CSS, and I'm glad I did. It'll take maybe a day to get it down, but that shows its not very hard. The only problem I have with it, is that not all browsers show my layouts the same.

#19 crushed

    Young Padawan

  • Members
  • Pip
  • 30 posts

Posted 10 July 2005 - 04:19 PM

Also, for a more professional touch, why don't you put your navigation bar on the left, leave out the news box, and just have the news in the content box (but only on the homepage) and have on different pages different content.

#20 sEVEn

    P2L E-Goddess

  • Members
  • Pip
  • 231 posts
  • Interests:I HAVE SO MANY!!&lt;br&gt;&lt;br&gt;anything art :) and anything nice and fluffy and anything to do with the growth of children and their minds :) and anything to do with movies and anything to do with music and anything else creative and anything to do with...

Posted 10 July 2005 - 05:11 PM

when you slice in photoshop, you cannot move things around after... or take them out and put them back as the boxes will shrink etc etc... have to be very careful when slicing or you'll have to redo the whole thing again over and over if you don't know what you are getting into!

I don't know.. there are a lot of factors in slices moving... table resizing even a little will cause this as well as moving things around, but I think it's best to start out using tables before you go slicing unless the main portion of your website is a flash movie.. then it could come in handy...

It's also very limiting without excess knowledge =]

Try basic HTML tables and then possibly CSS in the long run... it takes a lot of practice and a lot of mistakes :blink: but you will eventually get there...

slicing in my way of thinking, is more of a lazy man's tool... but you have to have slaved and done your homework already in order to be lazy ;>
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design