Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > i cant seem to work out how to do this...think you could help

Reply
Thread Tools

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

 
 
ben
Guest
Posts: n/a
 
      08-26-2005
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

 
Reply With Quote
 
 
 
 
Leonard Blaisdell
Guest
Posts: n/a
 
      08-26-2005
In article <(E-Mail Removed) .com>,
"ben" <(E-Mail Removed)> wrote:

> 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

--
<http://web0.greatbasin.net/~leo/
 
Reply With Quote
 
 
 
 
ben
Guest
Posts: n/a
 
      08-26-2005
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

 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      08-26-2005
Previously in alt.html, ben <(E-Mail Removed)> 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.

--
Mark Parnell
http://clarkecomputers.com.au
alt.html FAQ :: http://html-faq.com/
 
Reply With Quote
 
Leonard Blaisdell
Guest
Posts: n/a
 
      08-26-2005
In article <(E-Mail Removed) .com>,
"ben" <(E-Mail Removed)> wrote:

> 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

--
<http://web0.greatbasin.net/~leo/
 
Reply With Quote
 
ben
Guest
Posts: n/a
 
      08-26-2005
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.

 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      08-26-2005
Previously in alt.html, ben <(E-Mail Removed)> said:

> whereas with a table
> as simple as this, it does my job...


That looks like tabular data to me. Use a table.

--
Mark Parnell
http://clarkecomputers.com.au
alt.html FAQ :: http://html-faq.com/
 
Reply With Quote
 
Leonard Blaisdell
Guest
Posts: n/a
 
      08-26-2005
In article <(E-Mail Removed). com>,
"ben" <(E-Mail Removed)> wrote:

> 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.

<snip stuff>

> 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

--
<http://web0.greatbasin.net/~leo/
 
Reply With Quote
 
ben
Guest
Posts: n/a
 
      08-26-2005
i have settled for tables then.

thanks for your help !

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      08-26-2005
ben wrote:

> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
cant seem to get system() & pipe to work together dtown22@gmail.com Ruby 10 10-31-2007 11:26 PM
cant compile on linux system.cant compile on cant compile onlinux system. Nagaraj C++ 1 03-01-2007 11:18 AM
Looping code that i cant seem to work out! Luke - eat.lemons@gmail.com ASP .Net 3 10-23-2006 05:06 PM
malloc(): memory corruption (fast) [Cant seem to figure this out] on FC5 + G++ 4.1.0 g35rider@gmail.com C++ 2 08-11-2006 11:44 AM
Error downloading page, some pages work great but cant seem to get this one Jack Schafer Perl 1 04-23-2004 08:32 AM



Advertisments