HTML Tables, Wierd Gaping -.-, Trying to Design a Layout for a Fixed Location. Options

[r3volt]

Ok for Starters, I am limited to using Basic HTML, nothing fancy. It is for use on a streaming site (twitch.tv/r3volt)

Usually there is an INFO tab and you can put w/e images/gifs so on and so on. It only takes the basic HTML (From my experience)

My problem ATM is I never really messed with HTML much, and using PS Slice tool just aggravated me more than anything.

http://pastebin.com/r4eXT0CE

There is all the code, all the images are sourced online. So paste it wherever and you will see first hand what is happening to me.
I know its bad coding, but I never really messed with html enough to pinpoint what my error is. I have been banging my head against the wall for the past 4 hours, tweaking and fine tuning (About 2+ was spent screaming at PS Slice tool bloody thing kept making 1px border spans)

After reading up a little bit, and looking at examples I was able to get it to the point you see now.

I am not asking for someone to do it, but to EXPLAIN to me WHY it is doing what it is doing. I have a small understanding of tables, and how columns and rows influence it.

Oh did I mention I hate the slice tool? I eventually made my own selections, and saved each image.

My last presumption is that the file hosting site I put all the pictures on resized/squashed a few. All Dimensions are correct. (triple checked)

Thanks r3volt!

[pandy]

What is it you want to do? Is the image going to be used as a background? Then use it as a background. If you just want to display a large image, do that. No point in cutting it up and gluing it together again. If you plan to position real text on top of this image, it isn't a good idea.

Sorry, I don't mean to be discouraging, but without knowing what you want the finishes page to look like and how you want it to work, I can only guess.

[r3volt]

Ok, what I am trying to do is have the image as a whole sit in the INFO Tab (Width 640 x Height 2000). My Image is 640x1600. And The reason it is CUT up is so I can use Ahref + image src on parts so when you mouse over lets say the FB icon part of the image, it turns into a clickable link.

So what I need to do is glue it back together, and also have certain images/parts be clickable and go to certain destinations. All the Image Urls/ and or Links are THERE in the code. I am just trying to figure out why it wont line up correctly.

Not to sound prudent, but if you would just copy and paste it to a txt document and load it. You would have seen first hand what I am trying to achieve. I just cant figure out how to close the few gaps, and get the images in the right spots. It gets a little clustered near the middle have 3 links in sequence from top to bottom, but also one to the left.

It is not ment for the background, I am trying to display a LARGE image, but with clickable parts. So I need it cut up. No text going on top of it. Just the image.

To better clarify this is WHAT I want it to look like, but with the MC server IP clickable, Case: Custom (Click Me) clickable and so for Youtube Twitter and FB Clickable. And the Donate button to be clickable.
The Grey box at top is left open to fit a .gif from an outsourced site. Its link is in the code.
http://imageshack.us/photo/my-images/10/r3voltbanner.jpg/

Thanks..

This post has been edited by r3volt: May 21 2012, 04:21 PM

[pandy]

I did all that and what I saw didn't tell me the purpose of the image.

OK, first the table is broken. Use the validator (link at top and bottom of all pages). What the validator can't see is that all your colspans and rowspans don't make any sense, things don't add up. Another thing is that you probably shouldn't use height for the cells. The largest image in a row will force all the cells in that row to be the same height as it is itself.

Turn borders on. You will see that as the images are placed in the cells there isn't a chance the image will ever connect to a whole.

[r3volt]

What is a Validator? -.- Is it a code? like <tr> and <td>?

Do you mean adding a colspan and rowspan to the top of my table? So it knows when i say span 3 it will span 3 cols vs just putting col span inside the <td>

I did the height removal. I actually went back and recut everything to make it not so weird. The way I have it set up is for ever <tr> all the images that can star and or end there do. If that makes any sense, instead of one image spanning from top to bottom.

I turned on borders, and have been messing with it on my end with the new images.

It comes out almost perfect, but there appears to be a few gaps inbetween some images. Ima double check I may have hit enter and so on. Still need to add widths to a few.

Thanks, sorry to be so blunt, but I honestly never studied HTML and am doing this from what I saw and or read out of tuts and such.

[pandy]

What is a Validator? -.- Is it a code? like <tr> and <td>?

It's a tool that checks your HTML for errors. You have them.

Do you mean adding a colspan and rowspan to the top of my table? So it knows when i say span 3 it will span 3 cols vs just putting col span inside the <td>

No, you can't use rowspan and colspan with TABLE, only with TD and TH. Talking about that, 'cols' and 'rows' that you use in the TABLE tag has nothing to do there either. They are used with frames, not tables.

I meant that the numbers for your colspans and rowspans don't add upp. They are supposed to. Like if you have a two column table you can let one cell span both rows with colspan="2", but colspan="3" doesn't make sense and probably makes the table look funny.

Tools that slice images usually can build a table for them. Try that. Or just use the whole image and an image map for the links.

[r3volt]

I understand there is errors, but what I am using it for it does not need the whole <html> <Body> and so on. Its like a Forum Topic creation, you can post open code and it handles it correctly.

I wish I could explain better.

As for using the slices of PS it kept adding 1px spacer gifs in-between images and such, and it wouldn't come out correctly. I am limited to using Basic HTML because of the input box.

Go here http://www.twitch.tv/r3volt , just below the Embedded Video Player there is two Tabs. One Video the other is INFO. Click Info, you will see this image.

Now the Above image I am trying and or have CUT up into a total of 20 pieces 6 of which are linked to sites/other locations. And the other 14 are just images.

Now Unless there is another way without using TABLES.. but still using basic HTML please do inform me.
What I have managed to accomplish is getting about 90% of it in place, but a few images have extra spaces (Like almost cell padding and or center aligned). I keep checking the code, I know I am not using alot of the "req" Code, but like I mentioned earlier.. the site doesn't require all that.

I could simply type <img src="http://img10.imageshack.us/img10/416/r3voltbanner.jpg"> and it would display the image. No need for HTML Body Header none of the Attributes that create a page.

I am honestly not trying to be stubborn, and or rude. If I am do I apologize, but its frustrating when something so simple I am probably overlooking.

Here is the updated code after I had cleaned it up; redid my cuts; I haven't placed the links in yet. And the images are still on my PC. All I ask is there anything you see that would cause "weird" gaps in between the tables/images.

Link -- http://pastebin.com/KzA82Lrw <-- Working code of what I was trying to do. (Missing parts still such as updated links and images actually online)

Like I said earlier, I redid the slices myself and made them line up better, so there was not 1 image spanning 7+ rows into another started row; if that makes any sense. Each image ends prior to a new <td> tag so it doesn't overlap.. I found doing that made things line up better and not be so finicky.

Aside from that, I do appreciate all the help you have provided. The Validator screams at me because of all the missing attributes, when I honestly don't need any of the things it says.

Quick question is, lets say I have Image 1.

Its called r3volt1.jpg and its dem's are w159x116.
Now I remember you saying I do not need height; so should I do the code like this?Given there is a <tr> and such above and below with more but trying to give an example so I am clear.
<td colspan="2" width="159"><img src="images/r3volt1.jpg"></td>
or
<td colspan="2"><img src="images/r3volt1.jpg" width="159"></td>

Should I put the width in the Table or the image tags. Which would provide better results?

Thanks again. Sorry for the long Post.

As I was Posting this I figured it out. I do want to say thank you, the simple things such as having widths in the wrong location..and double checking sizes.

This post has been edited by r3volt: May 22 2012, 02:42 AM

[Darin McGrew]

Why go through the trouble of image slicing? Why not just use an image map, with hotspots over whatever part of the image you want to be a link?
http://www.htmlhelp.com/faq/html/images.html#imagemap

[pandy]

So thought I. Maybe the forum doesn't accept image maps.