Sign in to follow this  
Followers 0
MostafaKamel

Problem In Tables & Image Slices!

15 posts in this topic

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Thanks :rose:

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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... ;)

Share this post


Link to post
Share on other sites
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: !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.