Jump to content



Photo

Problem In Tables & Image Slices!


  • Please log in to reply
14 replies to this topic

#1 MostafaKamel

MostafaKamel

    Neowinian

  • Joined: 04-August 07

Posted 31 December 2007 - 11:31

Dear all,

I am a beginner in web-developing although I am wise enough in designing.So, I made my web-design on the Photoshop CS3 Then I slice it then I open it with the Dreamweaver to write on it but their is a BIG- prblem when I write on a Image Slice For Example

Posted Image
First Image:
I went on a slice and make it's background it's image from the sliced images then I started to write


Posted Image
Second Image:
I pressed Enter to start a new line So, The design get out of it's limit as you see in the image


Please I need a solution to this problem
N.B:Also when i create tables the same problem appears

Thanks In Advance


#2 DreadBoat89

DreadBoat89

    Neowinian

  • Joined: 23-December 04
  • Location: Canada

Posted 31 December 2007 - 14:27

1. Tables are dumb.... no offence

2. It would be best for you to show us the code... pictures aren't always worth a thousand words...

#3 +jamesyfx

jamesyfx

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 04-February 06
  • Location: Manchester, UK
  • OS: OS X 10.9 / Windows 8.1
  • Phone: Nexus 5

Posted 31 December 2007 - 14:33

It would probably be a lot simpler if you took Photoshop out the equation and built the website's structure in Dreamweaver. It would save you a lot of trouble. Since Photoshop produces very.. rigid code. It has specific widths and heights for everything.

If you get dreamweaver to do it you will have a lot more flexibility.

#4 OP MostafaKamel

MostafaKamel

    Neowinian

  • Joined: 04-August 07

Posted 31 December 2007 - 16:10

Thanks People , I'll do the GFX-by Ps & other by Dreamweaver :)
Thanks :rose:

#5 Confused_Andy

Confused_Andy

    Neowinian

  • Joined: 21-December 07

Posted 31 December 2007 - 18:15

Use CSS, tables are evil, seriouslly ive only just got into CSS, it took me about 3 hours to make this site in it...
So versitile.
http://www.andywelsher.co.uk/Idea

#6 evo_spook

evo_spook

    Neowinian Senior

  • Joined: 05-May 05

Posted 31 December 2007 - 18:58

Yeah, but some places still require to work in tables, at work its tables, at home I am now trying to stick to xhtml and css.

At work thou, when slicing up the images I always have a piece of paper ready to right down all the dimensions to put them back into a table.


Just one thing on you new site Andy, the menu system you got there is crying out to be used with Mootools.
http://mootools.net/

#7 Sandor

Sandor

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 31 December 2007 - 19:01

source code of the page would really help...tis probably simple to fix.

#8 roadgeek9

roadgeek9

    Neowinian Senior

  • Joined: 01-November 06
  • Location: Connecticut

Posted 31 December 2007 - 20:31

About the table, this would sound like a dumb idea, but try to put it into a png or something and put it in as an image.

#9 MasterC

MasterC

    ♫ d(-_-)b ♫

  • Joined: 14-September 05
  • Location: Lake Forest, California

Posted 01 January 2008 - 02:04

If I remember correctly, when you export slices in Photoshop it sets the image in an <img> tag inside a cell instead of the background of the table cell. Therefore when you go to type in it, it puts the text above or below the image instead of on top of it.

Use CSS, tables are evil, seriouslly ive only just got into CSS, it took me about 3 hours to make this site in it...
So versitile.
http://www.andywelsher.co.uk/Idea

And you're using an iframe and vertical text and those are equally as evil :p

#10 OP MostafaKamel

MostafaKamel

    Neowinian

  • Joined: 04-August 07

Posted 01 January 2008 - 10:13

Thanks People
I'll Make a try & tell you!

Here's The Code

<html><style type="text/css">
<!--
#Table_01 td {
font-family: "Segoe UI";
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #3B3B3B;
}
.style4 {color: #FFFFFF}
.style6 {
font-size: 12px
}
.style8 {color: #FFFFFF; font-size: 11px; }
.style9 {color: #FFFFFF; font-size: 11px; font-weight: bold; }
#Table_01 img {
}
.style11 {color: #232323}
.style12 {color: #FFFFFF; font-size: 13px; }
.style13 { font-family: "Segoe UI";
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin-top: 11px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
color: #FFFFFF;
}
.style14 {
font-family: "Segoe UI";
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin-top: 11px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
color: #FFFFFF;
}
.style15 {color: #F37005}
.style19 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.style20 {
font-family: "Segoe UI"
}
-->
</style>
<head>
<center><title>iLife(2)</title><center/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (iLife(2).psd) -->
<table id="Table_01" width="801" height="1125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="../images/iLife(2)_01.gif" width="800" height="244" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="244" alt=""></td>
</tr>
<tr>
<td rowspan="22">
<img src="../images/iLife(2)_02.gif" width="51" height="880" alt=""></td>
<td colspan="12">
<img src="../images/iLife(2)_03.gif" width="703" height="1" alt=""></td>
<td rowspan="22">
<img src="../images/iLife(2)_04.gif" width="46" height="880" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/iLife(2)_05.gif" width="1" height="27" alt=""></td>
<td colspan="11" align="center" valign="middle" background="../images/iLife(2)_06.gif" bgcolor="#000000">
<p class="style12">HOME <span class="style11">---</span> ABOUT <span class="style11">---</span> PRIVACY POLICY<span class="style11"> ---</span> FANS COMMUNITY <span class="style11">---</span> GALLERY<span class="style11"> --- </span>PREMIUM DESIGNS</p></td>
<td>
<img src="../images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="12" valign="middle" background="../images/iLife(2)_07.gif">&nbsp;</td>
<td>
<img src="../images/spacer.gif" width="1" height="77" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="5"><img src="../images/iLife(2)_08.gif" width="165" height="195" alt=""></td>
<td colspan="7" align="left" valign="top" background="../images/iLife(2)_09.gif" bgcolor="#000000"><pre align="left" class="Dearall"><span class="style14"><span class="Style13">
<strong>Welcome To The iLife Web-Template Design</strong>
I hope you enjoy the design. It's a simple one with it's dark colours grey &amp; black .</span><br> If you want to apply this template for your website
Contact us: <span class="style15">sales@creamania.net</span> </span></pre>
</td>
<td rowspan="19">
<img src="../images/iLife(2)_10.gif" width="17" height="775" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="../images/iLife(2)_11.gif" width="521" height="46" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="../images/iLife(2)_12.gif" width="311" height="39" alt=""></td>
<td colspan="3" align="center" valign="middle" background="../images/iLife(2)_13.gif" bgcolor="#4D4D4D"><pre class="style19 style20"> January. 1,2008</pre></td>
<td>
<img src="../images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="../images/iLife(2)_14.gif" width="210" height="3" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="15">
<img src="../images/iLife(2)_15.gif" width="1" height="591" alt=""></td>
<td colspan="6" rowspan="2" background="../images/iLife(2)_16.gif" class="style14">
<pre class="style21">&nbsp; STILL UNDER CONSTRUCTION<td>
<img src="../images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="14">
<img src="../images/iLife(2)_17.gif" width="2" height="580" alt=""></td>
<td rowspan="4" valign="top"><p class="style4">&nbsp; </p>
<p class="style4">&nbsp;</p>
<p class="style6">&nbsp;</p>
<p class="style9">&nbsp;</p></td>
<td rowspan="14">
<img src="../images/iLife(2)_19.gif" width="12" height="580" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="96" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="../images/iLife(2)_20.gif" width="520" height="19" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="../images/iLife(2)_21.gif" width="310" height="36" alt=""></td>
<td colspan="3">
<img src="../images/iLife(2)_22.gif" width="210" height="36" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td rowspan="11" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_23.gif" width="2" height="429" alt=""></td>
<td colspan="5" rowspan="3" background="../images/iLife(2)_31.gif" bgcolor="#2F2F2F"><span class="style4">
STILL UNDER CONSTRUCTION</span></td>
<td>
<img src="../images/spacer.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/iLife(2)_25.gif" width="151" height="29" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="8"><p class="style6"><span class="style8">Online Since: <strong>August 2007</strong></span></p>
<p class="style8">Designer: <strong>Mostafa Ayman</strong></p>
<p class="style8">Version: <strong>1.0</strong></p>
<p class="style9">Todays Hits:</p></td>
<td>
<img src="../images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td colspan="5" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_27.gif" width="518" height="13" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_28.gif" width="308" height="32" alt=""></td>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_29.gif" width="210" height="31" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_30.gif" width="210" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_31.gif" width="419" height="86" alt=""></td>
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_32.gif" width="99" height="96" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="86" alt=""></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_33.gif" width="419" height="10" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_34.gif" width="87" height="154" alt=""></td>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_35.gif" width="425" height="81" alt=""></td>
<td rowspan="3" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_36.gif" width="6" height="154" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="81" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2" bgcolor="#FFFFFF">
<img src="../images/iLife(2)_37.gif" width="425" height="73" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/iLife(2)_38.gif" width="151" height="62" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="151" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="12" 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="87" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="221" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="111" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="../images/spacer.gif" width="46" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>



#11 MasterC

MasterC

    ♫ d(-_-)b ♫

  • Joined: 14-September 05
  • Location: Lake Forest, California

Posted 01 January 2008 - 10:21

Thanks People
I'll Make a try & tell you!

Here's The Code

Yep - it looks like Photoshop did what I said earlier. The images should be in the <td> tag so you can type on top of them.

#12 evo_spook

evo_spook

    Neowinian Senior

  • Joined: 05-May 05

Posted 01 January 2008 - 10:23

instead of using images in your tables, there doesn't seem to be anything there that couldn't be done by just using cell colours

#13 Confused_Andy

Confused_Andy

    Neowinian

  • Joined: 21-December 07

Posted 01 January 2008 - 19:03

And you're using an iframe and vertical text and those are equally as evil :p

haha you got me ;)
That sites only an idea atm, hence the "web 2.0 ******ry" in the corner, its just to show off to my mates who barely know html... ;)

#14 OP MostafaKamel

MostafaKamel

    Neowinian

  • Joined: 04-August 07

Posted 02 January 2008 - 15:47

Yep - it looks like Photoshop did what I said earlier. The images should be in the <td> tag so you can type on top of them.




They are already in <td> Tag :blink: !

#15 evo_spook

evo_spook

    Neowinian Senior

  • Joined: 05-May 05

Posted 02 January 2008 - 16:04

he means, the image is in the table cell itself rather then a background image

eg

<td><img src="image.jpg" /></td>

instead of

<td style="background-image : url('image.jpg'); background-repeat: no-repeat; background-position: 0px 0px;">text here</td>


But as I said, I'm not certain you actually need a image to do what you want, its only flat colour, just colour the cell, eg

<td style="background-color : #666666;">