i cant seem to work out how to do this...think you could help

B

ben

hi again,

im migrating my site from tables to divs/css. ive run into a problem
though. i need to have a layout, like this,

<table width="100%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

where the content in the cells can cause it to make it wider than its
original width, without causing the table to extend over its 100%
width, or break onto a new line. i can make a layout like that in css,
but if you overfill one of the 'cells' it just bumps the next 'cells'
onto the next line - which isnt an option.

if there is a way to make the divs have variable widths without
affecting the others, could you please help me out?

ben
 
L

Leonard Blaisdell

ben said:
hi again,

im migrating my site from tables to divs/css. ive run into a problem
though. i need to have a layout, like this,

<table width="100%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

where the content in the cells can cause it to make it wider than its
original width, without causing the table to extend over its 100%
width, or break onto a new line. i can make a layout like that in css,
but if you overfill one of the 'cells' it just bumps the next 'cells'
onto the next line - which isnt an option.

if there is a way to make the divs have variable widths without
affecting the others, could you please help me out?

ben

URL?
You appear to be using a table to create whitespace. A less egregious
example would be to replace all that with <br><br>. I'd probably put the
margin-bottom on the element above it at 2em using CSS. Or it's own
block element at a margin-top of 2em.
Or I misunderstood your question which I've done plenty of times before.

leo
 
B

ben

lol, no, that table was an example, the actual previous one is far too
big to post here. but the idea is that the widths are fluid (?), so
when the content of the cell is too large, it automatically deducts the
available width from the remaining cells not using it
 
M

Mark Parnell

Previously in alt.html, ben <[email protected]> said:

Please quote the relevant parts of the message you are replying to.
lol, no, that table was an example, the actual previous one is far too
big to post here. but the idea is that the widths are fluid (?), so
when the content of the cell is too large, it automatically deducts the
available width from the remaining cells not using it

display:table-cell; would probably do exactly what you are looking for.
Unfortunately it's not supported by IE at all.

Look into min-width and max-width (also not supported by IE, but there
are workarounds available). You may be able to work something out with
those. You could at least set the max-width on all 4 sections so that
they don't add up to more than 100%. Getting them to always fill 100% of
the width could be difficult though.

Perhaps with a URL of the page in question, we may be able to suggest
something more appropriate.
 
L

Leonard Blaisdell

ben said:
lol, no, that table was an example, the actual previous one is far too
big to post here. but the idea is that the widths are fluid (?), so
when the content of the cell is too large, it automatically deducts the
available width from the remaining cells not using it

With a table width of 100% and no other constrictions, your td cells
will expand to the maximum of the content width within them that
conforms to the constriction of 100% width of the entire table and keeps
them inline to one another. That is, the longest td will define the
width of all others in it's column. If the table is at 100% and there
are no width attributes defined for tr or td, the table width will grow
or shrink and td content will drop down to fill the available
constricted space in it's column depending on the size of the browser
window.
If you want to define column size, you will have to discuss overflow and
stuff that I'm not familiar with, with those that use it in their CSS.
Otherwise, give your table a width of 100% and make sure you have no
other width restrictions in tr or td. Your table will grow or shrink
depending on the window size of your visitors. No CSS required.

leo
 
B

ben

problem is, i am trying to avoid tables ("css is this years table, its
this seasons must have"). i think in this situation, ive run into a
wall, i did come up with some code, but obviously, the column width
changes between each row, so it defys the point, whereas with a table
as simple as this, it does my job...

print("
<table>
<tr>
<td>Username</td>
<td>Full Name</td>
<td>Gaming Nick</td>
<td>Address</td>
<td>Email</td>
<td>Matric No.</td>
<td>Last Login</td>
<td>$8</td>
</tr>
");

LOOP SECTION STARTS HERE

print("
<tr>
<td>$desiredusername</td>
<td>$fullname</td>
<td>$gamingnick</td>
<td>$flat</td>
<td>$emailaddress</td>
<td>$umetric</td>
<td>$lastlogin</td>
<td>$8</td>
</tr>
");

LOOP SECTION ENDS HERE

print("</table>");


with tables, it displays perfect, but even with the CSS i tried at, it
really began to collapse when encountering about the 4th loop (dont
know why). my CSS option was as follows (obv. it wasnt working)

div#evencol {
width: 12.44%;
float: left;
background: #333333;
text-align: center;
}
div#oddcol {
width: 12.44%;
float: left;
background: #333333;
text-align: center;
}
div#title {
background-color: #333333;
width: 100%;
text-align: center;
font-weight: bold;
color: #ffffff;
}
div#main {
background-color: #333333;
width: 100%;
text-align: center;
color: #90EE90;
}

print("
<div id=\"title\">
<div id=\"evencol\">
Username
</div>
<div id=\"oddcol\">
Full Name
</div>
<div id=\"evencol\">
Gaming Nick
</div>
<div id=\"oddcol\">
Flat
</div>
<div id=\"evencol\">
Email
</div>
<div id=\"oddcol\">
Matric. No.
</div>
<div id=\"evencol\">
Last Login
</div>
<div id=\"oddcol\">
Membership Status
</div>
</div>
");

LOOP STARTS

print("
<div id=\"main\">
<div id=\"evencol\">
<p>$desiredusername</p>
</div>
<div id=\"oddcol\">
<p>$fullname</p>
</div>
<div id=\"evencol\">
<p>$gamingnick</p>
</div>
<div id=\"oddcol\">
<p>$flat</p>
</div>
<div id=\"evencol\">
<p>$emailaddress</p>
</div>
<div id=\"oddcol\">
<p>$umetric</p>
</div>
<div id=\"evencol\">
<p>$lastlogin</p>
</div>
<div id=\"oddcol\">
<p>$8
</div>
</div>
");

LOOP ENDS


i dont know if you can understand my botched code, but i seriously am
doubting the ability to pull of a display with CSS such as this,
without requiring pages upon pages of code - which defys the point of
using it.
 
L

Leonard Blaisdell

ben said:
problem is, i am trying to avoid tables ("css is this years table, its
this seasons must have").

No, tabular data still requires tables. Since you've thrown in printing
and some partial scripting to do the deed, I'm not qualified to answer
your question.

i dont know if you can understand my botched code, but i seriously am
doubting the ability to pull of a display with CSS such as this,
without requiring pages upon pages of code - which defys the point of
using it.

CSS suggests style to your content. It is not a scripting or programming
language. Maybe someone else will come up with a method of achieving
what you want. Sorry I couldn't help.

leo
 
J

Jonathan N. Little

ben said:
i have settled for tables then.

thanks for your help !
If your data is tabular then use tables! The anti-tables movement is for
when your are using table to layout columns of data or place images. In
the past it was done as a hack because there was not any other tools,
now there is CSS. Go a head, use a table when your data requires it.
 
B

ben

ok, i used a table.....but i have a little issue, i have tried to
represent this using CSS, but i just haven't a clue. i keep getting
errors in Firefox (whereas IE renders fine).

<table width=\"100%\">
<tr>
<td align=\"left\" class=\"newstitle\">$subject</td>
<td align=\"right\" class=\"newstitle\">$date</td>
</tr>
</table>
 
J

Jonathan N. Little

ben said:
ok, i used a table.....but i have a little issue, i have tried to
represent this using CSS, but i just haven't a clue. i keep getting
errors in Firefox (whereas IE renders fine).
1: I am you have been told before, please *quote* the part of the
previous message that you are referring to. It help maintain the
continuity of the 'conversation'

2: Define: 'quoting in message', its that text above my text with the
leading '>' that is the part of your message to which I am replying to.
<table width=\"100%\">
<tr>
<td align=\"left\" class=\"newstitle\">$subject</td>
<td align=\"right\" class=\"newstitle\">$date</td>
</tr>
</table>

3: What is this some sort of Perl|PHP code? (I am assuming because of
what looks like variables with the '$'. What's with the \" if this is
your HTML don't escape the quotes...brings me to #4

4: Where is the URL. If we could see your code, we might be able to help
you here. If you do not understand what you are doing your example may
not be accurately representing what your really are doing in practice.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top