| Author |
How do I use div tag to imit size of table cells
|
|
|
| I want the cells in the repeating row to always have the same size regardless
of what content people put in.
My code does not work:
THanks for any help,
CHristiane
<table width="75%" cellspacing="0" cellpadding="0">
<tr bgcolor="#A5B4C7">
<td height="23" colspan="2"><span class="style9"><font face="Lucida Sans
Unicode" size="3" color="#000080"><b><font
color="#003366">Montr</font></b></font></span><strong><font face="Lucida Sans
Unicode" size="3" color="#000080"><b><font
color="#003366">é</font></b></font></strong><span class="style9"><font
face="Lucida Sans Unicode" size="3" color="#000080"><b><font color="#003366">al
News</font></b></font></span></td>
</tr>
<!-- TemplateBeginRepeat name="NewsMontr?al" -->
<tr class="NewsBorderBottom">
<td width="26%" align="left" valign="middle" class="NewsBorderBottom"><div
class="Picture"><!-- TemplateBeginEditable name="NewsPicture" --> <img
name="NewsPicture" src="" width="130" height="100" alt="Picture"><!--
TemplateEndEditable --></div></td>
div.Picture {
width: 140px;
height: 110px;
overflow: auto;
}
<td width="74%" valign="top"><div class="NewsText"><!-- TemplateBeginEditable
name="NewsTitle" --><!-- TemplateEndEditable --><br>
<!-- TemplateBeginEditable name="NewsText" --><!-- TemplateEndEditable
--></div></td>
div.NewsText {
width: 120px;
height: 300px;
overflow: auto;
}</tr>
<!-- TemplateEndRepeat -->
</table>
| |
|
| > <!-- TemplateBeginRepeat name="NewsMontr?al" -->
side comment- Is that originally an accented character in Montreal?
You may want to avoid using accented characters for anything in code view.
> overflow: auto;
> }
overflow:auto;
Means it will adapt to the size of what's put into it.
Almost anything will- the table cell, the layer you have the table in, and
so on. About all you could do is have the layer a fixed size- but then that
will put scrollbars on that div if there isn't room for what's been stuffed
into it, and i don't think that's what you want.
> overflow: auto;
| |
| Barry Pearson 2004-04-21, 2:49 pm |
| SnowB wrote:
> I want the cells in the repeating row to always have the same size
> regardless of what content people put in.
>
> My code does not work:
[snip]
Is that *exactly* what is in your HTML document? If so, you appear to be
mixing up HTML & CSS incorrectly. You can't just stick CSS rules in the middle
of the HTML. They won't be recognised.
Take out the 2 CSS rules (div.Picture and div.NewsText) and put them in a
proper place, either in a separate stylesheet or at the top of this document.
I believe what you have will then work correctly. You have the principle
right - put controls on the <div> within the cell using CSS. When more text is
put in than there is space for, you will get a scrollbar.
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
| |
|
| What if I remove the autoflow auto, will it work?
| |
| Osgood 2004-04-21, 2:49 pm |
| SnowB wrote:
> What if I remove the autoflow auto, will it work?
No, you have declared the height of the <div>. Anything taller than the
height will be cut off from view.
| |
| Osgood 2004-04-21, 2:49 pm |
| Osgood wrote:
> SnowB wrote:
>
>
>
> No, you have declared the height of the <div>. Anything taller than the
> height will be cut off from view.
>
CORRECTION....the conetent will not be cut off but push the <div> open
to accommodate the new content height.
| |
|
| How do I make it then so anything longer is cut out?
I put the styles in style sheet:
div.Picture {
width: 140px;
height: 100px;
overflow:hidden;
}
div.NewsText {
width: 300px;
height: 120px;
overflow:hidden;}
<table width="75%" cellspacing="0" cellpadding="0">
<tr bgcolor="#A5B4C7">
<td height="23" colspan="2"><span class="style9"><font face="Lucida Sans
Unicode" size="3" color="#000080"><b><font
color="#003366">Montr</font></b></font></span><strong><font face="Lucida Sans
Unicode" size="3" color="#000080"><b><font
color="#003366">é</font></b></font></strong><span class="style9"><font
face="Lucida Sans Unicode" size="3" color="#000080"><b><font color="#003366">al
News</font></b></font></span></td>
</tr>
<!-- TemplateBeginRepeat name="NewsMontr?al" -->
<tr class="NewsBorderBottom">
<td align="left" valign="middle" class="NewsBorderBottom"><div
class="Picture"><!-- TemplateBeginEditable name="NewsPicture" --> <img
name="NewsPicture" src="" width="130" height="100" alt="Picture"><!--
TemplateEndEditable --></div></td>
<td valign="top"><div class="NewsText"><!-- TemplateBeginEditable
name="NewsTitle" --><!-- TemplateEndEditable --><br>
<!-- TemplateBeginEditable name="NewsText" --><!-- TemplateEndEditable
--></div></td>
</tr>
<!-- TemplateEndRepeat -->
</table>
| |
| Osgood 2004-04-21, 2:50 pm |
| SnowB wrote:
> How do I make it then so anything longer is cut out?
Its dangerous to have the overflow: hidden; especially were blocks of
text are concerned. If the end user has their browser text set to large
some would disappear.
Why dont you want to use overflow: auto;
| |
|
| You are right.
But I don't want the picture that are inserted in the first cell to be bigger
than 120 by 100 pxls,
and I don't want the text in the second cell to expand too long.
These are repeating rows so I wanted the same size rows for all rows, and to
add a link to display the overflow text.
:( Maybe I have to do something else then.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |