Slicing and adding text

  The Paul 21:27 01 Oct 2004

I have been trying to get to grips with the slicing process. I wont say that I have gotten there but I'm a heap closer thatn yesterday. I have now managed to slcie the shop front into 3 slices and reconstruct them in a single cell table.

Next question - is it possible for me to do this in such a way as to allow me to enter text in the part of the shop front in the centre - i.e. the white bit as it shows on the index page - click here

I would like to be able to add text here for all the pages on the site and use the shop front as a template type thing. Is this possible.

Cheers folks - Paul

  Eric10 11:52 02 Oct 2004

To do this you need to go back and put your 3 picture elements into separate cells. The table needs to be a fixed size in pixels rather than a percent value which will be the sum of the widths of the 3 pictures (60+285+62=407) and cellspacing and cellpadding need to be "0". On the first row the first TD needs to span 2 rows, the second TD is normal at 1 row and the third TD also spans 2 rows. On the second row the first and third TDs are already filled from the first row so only 1 TD is needed which will contain your text. Since cellpadding has to be "0" to make the picture elements align correctly you will need to apply a style to your text so that you get white space round the edges. The following code has all you need. Note that I have changed your picture names slightly as it's not good practice to have spaces in filenames and mixing capitals and lowercase can also cause problems.

<table width="407" align="center" cellspacing="0" cellpadding="0" border="0">


<td width="60" valign="top" rowspan="2"><img src="shop_cut_down_r2_c2.gif" width="60" height="287">


<td width="285" height="83" valign="top"><img src="shop_cut_down_r2_c3.gif" width="285" height="83">


<td width="62" valign="top" rowspan="2"><img src="shop_cut_down_r2_c4.gif" width="62" height="287">




<td height="200" valign="top">

<p style="margin-left:10; margin-right:10; font-family: 'verdana, san-serif'; font-size: 8pt; text-align: justify;">This is where you put the text that you want to appear in the white space in the centre of the shop front.</p>




You can click here for a live example.

  Patr100 18:44 02 Oct 2004

Paul, I'm not much into raw HTML but you can see that the example above is similar to your previous effort but with the zero padding. It's possible that there may be another way to do it in Dreamweaver but this way will allow you to add the text in a separate cell.

One other thing. As I mentioned in your other thread It looks like your picture elements are bitmaps which are rarely (if ever) used in web pages as they are much too large files and will take much longer to load . The top part is 25Kb - when converted to jpeg it is just 3Kb - This will all add to the speed of you site loading. If you can sometime try to save the picture parts as jpegs or perhaps gifs.

  The Paul 21:51 02 Oct 2004

Eric10 - superb - thanks a million for this. I'm not sure just what is happening with my version of Dreamweaver but all indications from my end show cell spacing and padding as zero. I'll go through all you hav entered above and work on it.

Patr100 - I have checked and rechecked and all the settings are to ZERO. I even redid the index page from scratch to ensure that these were the settings and still it had the spaces.

Anyway, I'll take what you guys have posted here and work on it and let you know how things work out.

Many thanks folks - cheers - Paul

  The Paul 21:56 02 Oct 2004

the images are all saved as GIF's. I've used Fireworks to slcie them as Taran suggested and then saved them as GIF's. I'm not sure how you see them as Bitmaps. Do you think there is a problem with my software maybe?

  Patr100 23:14 02 Oct 2004

I don't know why they are appearing as bitmaps to me. If I "save picture as" they can only be saved as bitmaps. I know this can be an problem that occurs when the IE cache is bloated but it only happens on your page and I have cleared my temp files in case. So I don't know why that is happening. It's unusual.
I've never used Fireworks and haven't currently Dreamweaver (which I am not greatly familiar with ) loaded on my PC.

Hopefully Eric's sample will help. See how it goes from here. Good Luck.

  The Paul 09:14 03 Oct 2004

Thanks folks - I have done everything as you both suggested and its magic. Sincere thanks to both of you.

Try this now - click here

Cheers Paul

  The Paul 19:57 03 Oct 2004

I suppose these are the kind of things that keep you very clever techies intruiged.

As you say forum member its not too much to worry about - the main thing is that Eric's code works exactly as I needed.

  Taran 09:16 04 Oct 2004

IE saves page images by default as Bitmap, unless of course the source file is a JPEG or PNG, in which case it will offer those options as well. Oddly, if the GIF is animated and not static, IE offers to save it as such.

End of intrigue and sorry it is so mundane an answer.

Other, arguably cleverer browsers out there, manage to identify the original file type and offer to save it in the same format.

There we go.

Ho hum.

  Taran 12:12 04 Oct 2004

As I understand it you wanted to alter the text in the middle of the image, depending on the location on the site or the link clicked.

You could do this easily enough using an iframe which would contain another page with the text you want to display.

Insert the iframe into the cell that is the centre of the image, name it so that you can point your hyperlinks to it, then create the pages with the text you want to display. Alter your hyperlinks to display target_filename.html but name the iframe in the hyperlink as the target itself. This will open up a page into the iframe containing your text/image.

Using this method each link will display a different content in the main cell of your gateway image but be warned that Google hates iframed content, as do screenreaders. It does look nice though, when done properly.

  Patr100 12:15 04 Oct 2004

Don't quite see that in practice. Taran. Look at the PCAdvisor logo in the top left hand corner of this page. It's a static gif and I can save it as a gif. Sure if IE can't recognise the format (or there's the cache problem I mentioned earlier) it will save as bitmap. But IE normally has no problems recognising and saving static gifs as gifs. I can do it on this page and other pags if I wanted, but it isn't doing it on Paul's page.

Also if IE starts to save aninmated gifs as bitmaps often deletion of temp cache files will clear the problem and allow animated gifs to be saved. At least for a while.

So still intrigue.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iPhone X review

Political cartoons in 2017: Chris Riddell, Rebecca Hendin and Dave Brown on what it’s like to…

The best iPhone for 2017

Tennis : comment regarder la finale de la Coupe Davis 2017 ?