getting to grips with colspan and images

[Peter]

Hi all,

I'm trying to understand how colspan works in a table when using images
and can't figure out what's going on here. I've searched for any help
on the internet, but cannot find anything specific that can point me in
the right direction.

If you look at this page:

http://www.chalkwellcleaningsupplies.co.uk/newsite/page_top1.html

I can see what is taking place.

However, when I add a second image to the 2nd row covering what I was
hoping was the last 2 columns using colspan="2", the whole thing breaks.

See here:

http://www.chalkwellcleaningsupplies.co.uk/newsite/page_top2.html

I'm sure it's something to do with the image widths, but there appears
no help to guide me in the right direction as to how I should be dealing
with those values.

Hope someone here can help.

 

[rf]

Hi all,

I'm trying to understand how colspan works in a table when using images
and can't figure out what's going on here. I've searched for any help
on the internet, but cannot find anything specific that can point me in
the right direction.

If you look at this page:

http://www.chalkwellcleaningsupplies.co.uk/newsite/page_top1.html

width=786?

colspan=11?

Did you look at this page with Firefox?

http://www.chalkwellcleaningsupplies.co.uk/newsite/page_top2.html

Did you look at this page with Firefox?

With colspan=11 it's purely up to each browser to guess what you really
mean.

And why are you using pictures of text for your navigation?

 

[Lars Eighner]

Hi all,

I'm trying to understand how colspan works in a table when using images

The same way it works in a table when not using images. But, say, images do
not often occur in tabular matter. You wouldn't be trying to use tables for
layout would you?

 

[dorayme]

Hi all,

I'm trying to understand how colspan works in a table when using images
and can't figure out what's going on here. I've searched for any help
on the internet, but cannot find anything specific that can point me in
the right direction.

If you look at this page:

http://www.chalkwellcleaningsupplies.co.uk/newsite/page_top1.html

I can see what is taking place.

What is taking place?

Anyway, let's start by you reading the source of:

<http://dorayme.netweaver.com.au/table.html>

and especially the commented stuff.

 

[Peter]

width=786?

colspan=11?

Did you look at this page with Firefox?


Did you look at this page with Firefox?

With colspan=11 it's purely up to each browser to guess what you really
mean.

And why are you using pictures of text for your navigation?

Ok, to explain a little more. I'm pretty rubbish at web design so
downloaded a free web design off the net. However, they have used
tables, images and colspan all over the place and I need to alter it a
little to suit my own needs. However, for the top row they have used
something like 7 images with various widths and colspan declarations,
covering a total of 13 columns. I have just reduced it to 2 tds in
order to try and simplify what is happening, but basically the top row
is fine until I include the 2nd colspan="2" image in the 2nd row.

Can't go back on using the template now, have the site pretty much
working except for this minor issue. I wanted this to work because I
wanted to remove a menu that would normally be on the left side of the
page, but which is not required for this page.

 

[Peter]

What is taking place?

Anyway, let's start by you reading the source of:

<http://dorayme.netweaver.com.au/table.html>

and especially the commented stuff.

Cheers dorayme, from what I gather, I would have to create a hidden row
of some kind 13 tds across. Perhaps 1 pixel high and matching the
table's background.

As to your other comments, as with my reply to rf, I'm too far down the
road with this template to backtrack now. I need to use those images to
match everything up with the other pages on the site.

If you want to see what the layout actually looks like, and what I've
let myself get caught up in, you can just go to the index of newsite, or
for a basic display of what the page looks like without the images look
here:

http://www.chalkwellcleaningsupplies.co.uk/newsite/table_test.html

Additionally, I did try to circumvent this issue by just using an image
editor to patch all the images together into one big image, but it just
didn't match up, the lines of the images were not in line with each
other so I had no choice but to try and figure it out this way.

 

[Peter]

What is taking place?

Anyway, let's start by you reading the source of:

<http://dorayme.netweaver.com.au/table.html>

and especially the commented stuff.

Cheers dorayme, you got me onto the right path as to how the original
template had been put together and I was able to find the invisible row
that spaced everything out. If you go back to page_top2.html you can
see what it now looks like.

I'm sure it goes against purist techniques, but I'm stuck with it for
now. Being fairly new to website design and coding I can only use that
as my excuse, but am lurking here in order to learn what I can so I
don't make the same mistakes again. Though, knowing me, that's easier
said than done. ;-)

 

[dorayme]

What is taking place?

Anyway, let's start by you reading the source of:

<http://dorayme.netweaver.com.au/table.html>

and especially the commented stuff.

[/QUOTE]

Cheers dorayme, from what I gather, I would have to create a hidden row
of some kind 13 tds across. Perhaps 1 pixel high and matching the
table's background.

As to your other comments, as with my reply to rf, I'm too far down the
road with this template to backtrack now. I need to use those images to
match everything up with the other pages on the site.

If you want to see what the layout actually looks like, and what I've
let myself get caught up in, you can just go to the index of newsite, or
for a basic display of what the page looks like without the images look
here:

http://www.chalkwellcleaningsupplies.co.uk/newsite/table_test.html

Additionally, I did try to circumvent this issue by just using an image
editor to patch all the images together into one big image, but it just
didn't match up, the lines of the images were not in line with each
other so I had no choice but to try and figure it out this way.

Still no good idea of what your job is in relation to his site? Have you
got to add something, change something, make a brand new page using the
same template (hang on, my bookie has arrived to take my various bets,
.... he reckons he can give me 7:3 on your job being just to make a new
top to the thing) <g>

I looked at the index page of this site to find things like

<td colspan="2" alt="" align="left" background="images/index_10.jpg"
height="89" valign="baseline" width="217">

(alt or dims to background images are inappropriate)

And, aside from picking details, the site cannot make its mind up about
what the roles of HTML or CSS are really about.

So, you are having to work with a bit of a stinking fish! Nevertheless,
it is amazing what can be done if those who know hold their noses, and
those who don't just carry on as best as they can.

As for all that spanning, yes, if some cell is purporting to span 11
cells, reason would suggest there *are* at least 11 cells (below)
somewhere that need straddling. And, as you have discovered, all is
revealed at the bottom of this layout.

What does this show? It shows there is a reason for great optimism! Even
a great big stinking fish is an intelligently designed object sort of...

You know how the design argument folk go on with phrases like "God
made... from the lowliest ... to the highest mammal". Well, there is
surely an HTML/CSS equivalent. <g>

If you say what your specific job is, we might be able to suggest a
course of action that would set that company a finer example for *your*
page.

 

[Peter]

Still no good idea of what your job is in relation to his site? Have you
got to add something, change something, make a brand new page using the
same template (hang on, my bookie has arrived to take my various bets,
... he reckons he can give me 7:3 on your job being just to make a new
top to the thing) <g>

I looked at the index page of this site to find things like

<td colspan="2" alt="" align="left" background="images/index_10.jpg"
height="89" valign="baseline" width="217">

Yeah, that one was a bad hack without a doubt. I wanted to include a
search box over that .jpg and was really struggling to get it to stay
put. I've pretty much failed for now. At least with some browsers.
Too much of a long story to get into, but I've been a bit against the
clock on this for a while now, so I've literally just gone with whatever
works.

(alt or dims to background images are inappropriate)

And, aside from picking details, the site cannot make its mind up about
what the roles of HTML or CSS are really about.

So, you are having to work with a bit of a stinking fish! Nevertheless,
it is amazing what can be done if those who know hold their noses, and
those who don't just carry on as best as they can.

As for all that spanning, yes, if some cell is purporting to span 11
cells, reason would suggest there *are* at least 11 cells (below)
somewhere that need straddling. And, as you have discovered, all is
revealed at the bottom of this layout.

What does this show? It shows there is a reason for great optimism! Even
a great big stinking fish is an intelligently designed object sort of...

You know how the design argument folk go on with phrases like "God
made... from the lowliest ... to the highest mammal". Well, there is
surely an HTML/CSS equivalent. <g>

If you say what your specific job is, we might be able to suggest a
course of action that would set that company a finer example for *your*
page.

Hopefully by now you've seen my other posts which would have given you
an idea of the why's and the wherefore's. Seeing as you've looked at
the root page you will have noticed the menu on the left-hand side.
Basically, I wanted rid of that menu, as this page was just going to be
a thankyou page that provided details for the customer that they could
print off. In other words this page is right at the end of the project.
Most of the work is done.

Well.. as for your other comments, I'm not surprised, but on the plus
side , it's provided me with lots of opportunities to burn the
midnight oil just to try and figure out how to get things working, which
hopefully will stand me in good stead for the future. Who knows, maybe
next time I'll try from scratch, though as I said previously, I am pants
at design (and probably only slightly better at HTML at the moment) and
they generally end up looking crap. At least the HTML side I know I can
improve upon, not so sure about the design side.