Hi all,
It's me, again.
Okay, I have this long standing problem with a site that uses tables and cells to format everything. Not good. But it is out of the question to re-write the entire site at this stage for two reasons...
1. Not enough time to re-write it. 2. Not enought skills ( My knowledge of css is not good enough yet.).
I am changing one thing at a time and even that is difficult enough.
Anyway, back to todays problems...
I have avery very large number of tables divided into two cells. The left cell has a description in it, the right cell has a number of pictures. Maybe one, maybe more. The pictures are aligned vertically one on top of each other. Now in css this is easy to do..I think..by creating a left align div with the text in and a right align div with the pics in. But there is a problem. The problem is that the pics are all different sizes, so the horizontal width of the div's are different for every product. There are literally hundreds of them. I don't want to manually and individually specify the width of all these hundreds of div's. Having to manually set a width to be the same as a picture is a real pain. Having to set the other to the page width minus the picture width is an EVEN BIGGER pain! What they did with the table was to set the picture cell width equal to 100, which was smaller than any of the pictures. This meant that the right cell was always as small as the picture and the left cell as big as possible. Becuse it was a table it forced the left cell to be the right size, even though it wasn't specified. How can I achieve the desired result here??i believe what u want for this is width: auto; this will make the width adjust to its content.
The quick way to stack those pictures is to define
img { display:block; }
for the area containing them.Use Replace all to replace <td> with <td height="100">
if something else is in the <td>, then Replace td with td height="100.
Make sure you have 5 minutes time to spare.img { display:block; }
Oh no! That's not in my book....ha ha!
The NEW book is in the post, so I am having to manage without a decent reference for now. :-(
I will have a go with that as soon as the new book arrives!
thanks!Install the DevEdge sidebar in Mozilla or Firefox and you'll have great references (the W3C refs) built right into your browser. Otherwise <!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/#specs">http://www.w3.org/Style/CSS/#specs</a><!-- m --> will do the job.
It's me, again.
Okay, I have this long standing problem with a site that uses tables and cells to format everything. Not good. But it is out of the question to re-write the entire site at this stage for two reasons...
1. Not enough time to re-write it. 2. Not enought skills ( My knowledge of css is not good enough yet.).
I am changing one thing at a time and even that is difficult enough.
Anyway, back to todays problems...
I have avery very large number of tables divided into two cells. The left cell has a description in it, the right cell has a number of pictures. Maybe one, maybe more. The pictures are aligned vertically one on top of each other. Now in css this is easy to do..I think..by creating a left align div with the text in and a right align div with the pics in. But there is a problem. The problem is that the pics are all different sizes, so the horizontal width of the div's are different for every product. There are literally hundreds of them. I don't want to manually and individually specify the width of all these hundreds of div's. Having to manually set a width to be the same as a picture is a real pain. Having to set the other to the page width minus the picture width is an EVEN BIGGER pain! What they did with the table was to set the picture cell width equal to 100, which was smaller than any of the pictures. This meant that the right cell was always as small as the picture and the left cell as big as possible. Becuse it was a table it forced the left cell to be the right size, even though it wasn't specified. How can I achieve the desired result here??i believe what u want for this is width: auto; this will make the width adjust to its content.
The quick way to stack those pictures is to define img { display:block; }
for the area containing them.Use Replace all to replace <td> with <td height="100">
if something else is in the <td>, then Replace td with td height="100.
Make sure you have 5 minutes time to spare.img { display:block; }
Oh no! That's not in my book....ha ha!
The NEW book is in the post, so I am having to manage without a decent reference for now. :-(
I will have a go with that as soon as the new book arrives!
thanks!Install the DevEdge sidebar in Mozilla or Firefox and you'll have great references (the W3C refs) built right into your browser. Otherwise <!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/#specs">http://www.w3.org/Style/CSS/#specs</a><!-- m --> will do the job.