• 0

Problem In Tables & Image Slices!

Asked by MostafaKamel,

 Share

Question

Enthusiast

MostafaKamel

Posted
Posted

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

1-2.jpg

First Image:

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

2-2.jpg

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Grand Master

+jamesyfx Subscriber²

Posted
  • Subscriber²
Posted

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.

Link to comment
Share on other sites
  • 0
Mentor

evo_spook

Posted
Posted

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/

Link to comment
Share on other sites
  • 0
Grand Master

MasterC

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Enthusiast

MostafaKamel

Posted
  • Author
Posted

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"> </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 & 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">  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">  </p>

<p class="style4"> </p>

<p class="style6"> </p>

<p class="style9"> </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>

Link to comment
Share on other sites
  • 0
Grand Master

MasterC

Posted
Posted
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.

Link to comment
Share on other sites
  • 0
Explorer

Confused_Andy

Posted
Posted
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... ;)

Link to comment
Share on other sites
  • 0
Enthusiast

MostafaKamel

Posted
  • Author
Posted
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: !

Link to comment
Share on other sites
  • 0
Mentor

evo_spook

Posted
Posted

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;">

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.