Jump to content

Table aligns.


jackpf

Recommended Posts

Good evening all,

Ok, this a bit of a weird question. If there's a really simple answer (which there probably is) I will bow down in shame.

 

Basically, I want to align half of a table cell to the top, and the other half to the bottom.

 

So, like this:

 

_____________________________________

Some text on the top.                            |

                                                          |

                                                          |

                                                          |

                                                          |

Some text on the bottom                          |

_____________________________________|

 

The only way I can think of doing this is creating another table within that table cell, but that's a pretty stupid solution. I try and use as few tables as possible.

 

Any help is appreciated.

Thanks, Jack.

Link to comment
Share on other sites

Yeah...but the thing is, aligning the cell will result in everything within that cell becoming aligned.

 

I need to align some text to the top, and some to the bottom, which is the problem.

 

Thanks for your suggestions though.

 

There surely must be a way to do this...

Link to comment
Share on other sites

Yeah, I tried that.

The text that is positioned absolute is all displayed on top of eachother, even though the cells have a relative position.

 

And it's for my forum :)

Much like this one, there are edit (not for this particular forum) and delete links underneath your post. However, if your image/name that is displayed next to your post is taller than the actual post, the edit/delete links will be floating around in the middle of the table cell.

 

I was just trying to figure out how to force it to the bottom of the cell.

 

Here's one of the pages I was trying this on - http://www.jackpf.co.uk/index.php?action=profile&status=profile&profile=message&alias=jackpf

Link to comment
Share on other sites

Oh, do you know why it does that? In a table row, if one cell is longer than the others in the row, then they all auto adjust to that height. If you look at the left, where the name etc are, then you can see that it usually extends well beyond the post. That's why. Most forums have this layout, like here on PHPFreaks. But most forums use tables. Here on PHPFreaks, they use DIVs, which is fine.

Link to comment
Share on other sites

Yeah...that's why I want to force the edit/delete etc to the bottom on posts/messages with the left cell longer than the content. There must be a way.

 

Wow, I thought this forum used tables. I don't think I quite have that kind of skill yet :P Maybe one day.

 

EDIT: Oh...they only use tables for the topic views or whatever.

Link to comment
Share on other sites

Yeah, that doesn't work. I don't know if it's something about table cells, but it doesn't hold its relative position.

 

And if I do it with a div, the div doesn't expand to the full height of the table cell, so it's pretty pointless.

 

Urgh, this is so frustrating.

Link to comment
Share on other sites

I'm no where near an expect on this topic, but this may or may not be valid. I was just wondering if when you use the relative positions with divs, if you could use the clear="both"  in CSS or add it to a <br clear="all"> after your div. Maybe that would stop them from appearing on top of each other.

Link to comment
Share on other sites

Well he can use a table.

 

<table id="something">
     <tr>
          <td class="row1" rowspan="2">SOME  VERY LONG INFORMATION LIKE A FORUM'S MINI-PROFILE AT THE LEFT. YOU MAY WANT A TABLE INSIDE HERE.</td>
          <td class="row2">SOME SHORT TEXT. YOU MAY WANT A TABLE IN HERE.</td>
     </tr>
     <tr>
          <td class="row3">SIGNATURE. YOU MAY WANT A TABLE IN HERE.</td>
     </tr>
</table>

 

CSS:

#something { table-layout: fixed; width: 150px; }
.row1 { overflow: hidden; vertical-align: top; width: 150px; }
.row2 { vertical-align: top; width: 80%; height: 100%; }
.row3 { vertical-align: bottom; width: 80%; }

 

Is there rowspan for CSS? Would that not generate the result?

Link to comment
Share on other sites

I probably will eventually one day switch over to divs.

 

However, using tables requires much less code, and is more suited to the way the contents should be displayed.

 

And Ken2k7...couldn't quite get that code to work. Cheers though.

Link to comment
Share on other sites

Less code? You are 100% wrong on this one. Tables will always require more code.

jackpf - that's not to say that you shouldn't ever use tables. There are situations where tables are needed.

 

That's true. I'm no discouraging the use of tables. You should never use css/divs to emulate tables: tabular data should always be in a data. However, tables should rarely be used. Even a calendar - tabular-like data - could be placed in an unordered list - better yet, a definition list.

 

In nearly all cases, properly coded tables will always require more code than pure css. You need to explicately specify tr td and don't forgot the tbody or thead for semantics. In css, you can control how individual elements are positioned.

 

Jackpf - this is a good time to start studying css! I'm more than willing to help you code the html/css. I hope to convert all table designers to the realm of pure css design.

Link to comment
Share on other sites

Ok...well probably the thing that discouraged me the most from switching my forum over to divs, is the fact that floats cannot have a percentage width.

 

The design of my site now uses a width of 100% as the container, so I can't define what the actual width of the forum will be on all screens (with different resolutions and stuff). Table cells allow you to define stuff like width: 25% or whatever, but with floated divs, it only seems that you can set a wisth in px, not %.

 

So I don't really see how it's possible to use divs for my forum...

 

 

However, if you know a way round this I'd be ecstatic to hear it :D

I would happily switch over to divs. I just don't see how it's possible...

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.