Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

colspan -- Puttin an image back together.

Status
Not open for further replies.
Programz8

Programz8

Programmer
Mar 27, 2007
33
US
I'm a beginner web designer and I'm used the CS3 slice tool to cut up an image. Now I'm trying to put the pieces back together and spaces keep getting in the way. How do I use colspan and rowspan to keep the pieces together? Here is a sample of the code and links to some images how do I get piece 6 to move over to the left to match up with the edge of piece 5? and what about when I get to the section where there are pieces that are vertically longer than others? I'm lost but I believe this can be done with colspan and rowspan I just don't know how they work. :(


<table id="Table_01" width="801" height="1531" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="10">
<img src=" width="800" height="190" alt=""></td>
</tr>

<tr>
<td>
<img src=" alt=""></td>

<td colspan="3">
<img src=" alt=""></td>
</tr>


<tr>
<td colspan="4">
<img src=" alt=""></td>
</tr>


<tr>
<td colspan="4"><img src=" width="189" height="58" alt="" ></td>

<td><img src=" width="611" height="98" alt=""></td></tr>



</tr>
 
Sort by date Sort by votes
Don't slice up the image. Don't use tables to put sliced images on your page. Read up on tableless design and use modern techniques on how to create websites.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Vragabond, thanks for you help, but I'm trying to understand how the colspan and rowspan works. I know I can use css absolute positioning to move the pieces but I'm trying to learn how to do this another way can you point me to a tutorial or anything?
 
Upvote 0 Downvote
You shouldn't be using tables, Tables are for tabular data, not layout.

Using tables, for that is just wrong.

If you want to learn what colspan and rowspan do, do it correctly.







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Okay well please tell me what is wrong with this code? The result looks fine to me.


<table id="Table_01" width="801" height="1601" border="0" cellpadding="0" cellspacing="0">


<tr>
<td colspan="10">
<img src=" width="800" height="171" alt=""></td>
</tr>

<tr>
<td colspan="6">
<img src=" width="314" height="159" alt=""></td>
<td colspan="4">
<img src=" width="486" height="159" alt=""></td>
</tr>



<tr>
<td colspan="3"><a href=" target="_blank"><img src=" width="116" height="32" alt="" border="0"></a></td>
<td colspan="3" rowspan="8">
<img src=" width="198" height="197" alt=""></td>
<td colspan="4" rowspan="8">
<img src=" width="486" height="197" alt=""></td>
<td>
<img src=" width="1" height="32" alt=""></td>
</tr>


<tr>
<td colspan="3"><a href=" target="_blank"><img src=" width="116" height="21" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="21" alt=""></td>
</tr>


<tr>
<td colspan="3"><a href=" target="_blank"><img src=" width="116" height="21" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="21" alt=""></td>
</tr>


<tr>
<td colspan="3"><a href=" target="_blank"><img src=" width="116" height="23" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="23" alt=""></td>
</tr>


<tr>
<td colspan="3">
<a href=" target="_blank" ><img src=" width="116" height="21" border="0"></a></td>
<td>
<img src=" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="3"><a href=" target="_blank"><img src=" width="116" height="19" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href=" target="_blank"><img src=" width="116" height="24" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="24" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href=" target="_blank"><img src=" width="116" height="36" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="36" alt=""></td>
</tr>





<tr>
<td colspan="6">
<a href=" target="_blank"><img src=" width="314" height="121" border="0"></a></td>
<td colspan="4" rowspan="3">
<a href=" target="_blank"><img src=" width="486" height="234" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="121" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src=" width="158" height="43" alt="" border="0"></td>
<td colspan="2">
<img src=" width="156" height="43" alt=""></td>
<td>
<img src=" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src=" width="314" height="70" alt=""></td>
<td>
<img src=" width="1" height="70" alt=""></td>
</tr>


<tr>
<td colspan="8" rowspan="2">
<img src=" width="340" height="494" alt=""></td>
<td colspan="2">
<img src=" width="460" height="249" alt=""></td>
<td>
<img src=" width="1" height="249" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<a href=" src=" width="208" height="554" border="0"></a></td>
<td rowspan="2"><a href=" target="_blank"><img src=" width="252" height="274" alt="" border="0"></a></td>
<td>
<img src=" width="1" height="245" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src=" width="340" height="175" alt=""></td>
<td>
<img src=" width="1" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src=" width="252" height="280" alt=""></td>
<td>
<img src=" width="1" height="146" alt=""></td>
</tr>
<tr>
<td>
<img src=" width="30" height="124" alt=""></td>
<form method="post" action=" name="friendID" value="27920518" type="hidden"><td colspan="6" style="background-image: url( name="f_comments" style="width:272px; height:122px; font-family:arial; font-size: 12px; color: 8f5e96; font-weight:bold; border: 0px; padding:8px; background: transparent; background-repeat: no repeat; overflow:hidden" rows="6" cols="30"></textarea></td>

<td>
<img src=" width="17" height="124" alt=""></td>
<td>
<img src=" width="1" height="124" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src=" width="96" height="46" alt=""></td>
<td colspan="3" rowspan="2" style="background-image: url(<input value="" style="width:170px;height:46px;border:0px;background-image: url( background-repeat: repeat-x;" type="submit"></td></form>
<td colspan="3" rowspan="2">
<img src=" width="74" height="46" alt=""></td>
<td>
<img src=" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src=" width="460" height="36" alt=""></td>
<td>
<img src=" width="1" height="36" alt=""></td>
</tr>
<tr>
<td>
<img src=" width="30" height="1" alt=""></td>
<td>
<img src=" width="66" height="1" alt=""></td>
<td>
<img src=" width="20" height="1" alt=""></td>
<td>
<img src=" width="42" height="1" alt=""></td>
<td>
<img src=" width="108" height="1" alt=""></td>
<td>
<img src=" width="48" height="1" alt=""></td>
<td>
<img src=" width="9" height="1" alt=""></td>
<td>
<img src=" width="17" height="1" alt=""></td>
<td><img src=" width="208" height="1" alt=""></td>
<td>
<img src=" width="252" height="1" alt=""></td>
<td></td>
</tr>
</table>
 
Upvote 0 Downvote
It's overengineered and confusing. And there are no advantages to slicing images over using images as a whole. So, you should use modern techniques of making website through semantic markup and css layout. And use absolute positioning only when desperately needed.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Again I thank you for the help, but there are many reasons to slice an image up I don't really feel the need to tell them to you all but if you google it you can see some of the reasons I happen to want to animate some sections of my page and some portions of my page will use .jpg and other portions will use .gif so for me, in my particular instance slicing the page will help me.

I just want to know if someone can help me construct a page in the manner listed in the code above. Or if you have a better way of putting the elements together that would be great too. I'm only a beginner so please be easy on me.
 
Upvote 0 Downvote
I'm only a beginner so please be easy on me.
Click to expand...

If this is the case, why do you feel the need to give Vragabond a lesson on why slicing up images is good for web design? You do see his name at the top of the MVP list for this forum, right? This is a forum dedicated to HTML and CSS, you've come here with an HTML and CSS question, got an HTML and CSS answer HTML and CSS experts, but since it wasn't the answer that you want you keep persisting....

Bottom line is this - you've designed a page using antiquated systems (tables for layouts, splitting up images, spacer gifs). I've copied and pasted your code above into a new HTML file, pulled it up in my browser, and didn't see anything that warranted breaking up all the images on the page. You have one animated gif that I could see on the page, other than that there doesn't seem to be a reason that all the other images couldn't be combined and used as 1 background image for the entire page.

Now, since you want to preach how easy it is to find the benefits of image slicing on google, I suggest you spend a little time on google yourself to find out why:

1) sending multiple image requests to a server takes more time than combining the images into 1 image request.

2) why using tables for layout is stupid - that design process is sooooooooo 90's

3) how spacer gifs are completely unnecessary with CSS

Once you finally "get it", I promise it will make you a better web programmer, and more valuable to your boss.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
699
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
770
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
223
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top