 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008how to rewrite table design to div design
I have some pages where table design is used. The reason is that left and right column must keep defined width but middle column must resize itself when user resize browser window. I searched internet and many groups but I not found the answer. This is example only to show the functionality, code can contain few validation errors ;-) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> html, body {margin: 0; padding: 0;} table {width: 100%; margin: 0; padding: 0;} td.left {width: 200px !important; margin: 0; padding: 2px;} td.midle {width: auto; margin: 0; padding: 2px;} td.left {width: 200px !important;margin: 0; padding: 2px;} </style> </head> <body> <table> <tr> <td class=left> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 1</a></li> <!-- next other 100 items --> <li><a href="#">item 1</a></li> </ul> </td> <td class=middle> <p>some very long text here (3x screen height)</p> </td> <td class=right> <div>some advertisement here</div> </td> </table> </body> </html>  SignaturePetr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> > I have some pages where table design is used. The reason is that left and > right column must keep defined width but middle column must resize itself [quoted text clipped - 10 lines] > <style type="text/css"> > html, body {margin: 0; padding: 0;} How about starting with something like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Three columns</title> <style type="text/css"> body {margin: 0; padding: 0;} #nav {float: left; width: 200px; padding: 2px;} #content {padding: 2px; margin-left: 205px; margin-right: 205px;} #ads {float: right; width: 200px; padding: 2px;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 1</a></li> <!-- next other 100 items --> <li><a href="#">item 1</a></li> </ul> </div> <div id="ads"> some advertisement here </div> <div id="content"> some very long text here (3x screen height) </div> </body> </html> Signaturedorayme >> I have some pages where table design is used. The reason is that >> left and right column must keep defined width but middle column must [quoted text clipped - 39 lines] > </body> > </html> As a start it is good, but in practice this is unusable ;-) I need to have laeft and right column expanded to 100% height of actual browser size. Please take a look to http://web.practisoft.cz/layout/test.html to see a problem. Test links DIV design long and TABLE design long The second one work as I need. Any idea? SignaturePetr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> >>> I have some pages where table design is used. The reason is that >>> left and right column must keep defined width but middle column must [quoted text clipped - 44 lines] > take a look to http://web.practisoft.cz/layout/test.html to see a > problem. Test links Well, that looks like it does what you want. What am I missing? If you are looking for equal height columns, you can high on over to alt.html (1/22) where you'll find three different solutions to that problem. Nik Coughlin's clever CSS solution, Doraymes quick and easy fix and my javascript cludge. Jeff > DIV design long > and > TABLE design long > The second one work as I need. Any idea? > >> I have some pages where table design is used. The reason is that > >> left and right column must keep defined width but middle column must [quoted text clipped - 9 lines] > > <head> > > <title>Three columns</title> > As a start it is good, but in practice this is unusable ;-) I need to have > laeft and right column expanded to 100% height of actual browser size. Please > take a look to http://web.practisoft.cz/layout/test.html to see a problem. Yes, I thought you might have more requirements <g> So, perhaps you better go read: <http://www.alistapart.com/articles/holygrail> Signaturedorayme >>>> I have some pages where table design is used. The reason is that >>>> left and right column must keep defined width but middle column [quoted text clipped - 9 lines] > > <http://www.alistapart.com/articles/holygrail> Thank you for this link. This looks like my need but in IE here is some blank space under footer. So probably I keep table design. Yes, this is "not cool", but it work and looks in all browsers without differences. SignaturePetr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> > >>>> I have some pages where table design is used. The reason is that > >>>> left and right column must keep defined width but middle column [quoted text clipped - 13 lines] > space under footer. So probably I keep table design. Yes, this is "not cool", > but it work and looks in all browsers without differences. A bit of blank space under a footer does not seem so serious to me. However, you will save *yourself* no end of trouble by having a simple table to display the three columns. Signaturedorayme Scripsit Petr Vileta: > I have some pages where table design is used. I see. But do you have a CSS problem? > The reason is that left > and right column must keep defined width but middle column must > resize itself when user resize browser window. I see. You could do that in CSS, too, but that's a bit clumsier, really. Why would you change? > I searched internet > and many groups but I not found the answer. You still haven't told what the question is. Oh, it seems that we are supposed to read it from the Subject line. Implying the heading inside text is bad practice in any communication, especially on Usenet, where the heading (Subject) and the text (body) are apart. So you're asking "how to rewrite table design to div design". I think the first question is whether you should do that. And the answer to both questions depends on what you are really doing - what kind of layout you have, and whether you actually gain anything by changing code that (supposedly) works now. > This is example only to show the functionality, code can contain few > validation errors ;-) Why? Post a URL of a validated and CSS-checked page, if you have a specific question. If you now have a 3-column layout that you like, implemented using a table, the odds are that you are just wasting everyone's time if you are trying to rewrite it in "div design" with CSS. This is a tricky area, and a comprehensive answer would consist of a longish presentation of various approaches (all of them more or less tricky) and their pros and cons, and there are much more useful things to learn in CSS. Things like using the em unit instead of px unit (even for table cells). SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Petr Vileta: > [quoted text clipped - 8 lines] > I see. You could do that in CSS, too, but that's a bit clumsier, > really. Why would you change? You are right - I keep table design. This is not "cool" and this is unmodern, but it work in all browsers without hacks and tricks. SignaturePetr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> > You are right - I keep table design. This is not "cool" and this is > unmodern, but it work in all browsers without hacks and tricks. I'll know that CSS has come of age when I hear someone say "Gosh! This CSS stuff is far easier than tables" SignatureSteve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk >> You are right - I keep table design. This is not "cool" and this is >> unmodern, but it work in all browsers without hacks and tricks. > > I'll know that CSS has come of age when I hear someone say "Gosh! This > CSS stuff is far easier than tables" Gosh! This CSS stuff is far easier than tables. > >> You are right - I keep table design. This is not "cool" and this is > >> unmodern, but it work in all browsers without hacks and tricks. [quoted text clipped - 3 lines] > > Gosh! This CSS stuff is far easier than tables. The methodology you're used to is far easier than the one you're not. :) I've been developing with stylesheet-based designs for a little over five years now and I would find it very difficult to go back to using table-based layouts (despite having done so - and become reasonably proficient at it - for a few years before I switched to stylesheets) Additionally, I think, the mindset of the HTML writer plays a part: if you think better in terms of positioning components on a grid then tables will seem easier, whereas if you think better in terms of positioning components of a layout relative to each other, stylesheets will. Personally, I much prefer having to go to a little extra effort to write a small supplementary IE6 and IE7 stylesheet enclosed in a conditional comment (the only CSS hack I now find necessary), compared to keeping track of rowspans, colspans and table nesting and having very bulky template code. It makes reading the HTML code afterwards much nicer too. I preferred CSS even five years ago when masses of hacks were needed, though, I think because it better suited the way I thought about the page. SignatureChris > The methodology you're used to is far easier than the one you're > not. :) I've been developing with stylesheet-based designs for a > little over five years now and I would find it very difficult to go > back to using table-based layouts (despite having done so - and become > reasonably proficient at it - for a few years before I switched to > stylesheets) I'm using stylesheet manytimes to but this is a special case - internet shop. My idea is to have these parts 1) header - fixed position on top, fixed height, defined minimal width but can expand to user browser size if needed. Header will contain logo, shop name, some news ord advertisements and main menu. 2) left column - fixed position, fixed width, dynamic height but all time must expand to remaining space between header and footer. Left column will contain product categories tree and if needed then will be scrollable. 3) right column - fixed position, fixed width, dynamic height as left column. Overflow content can be hidden or scrollable too. 4) middle column - fixed position, dynamic height and width. Here will be main content. 5) footer - fixed position on bottom, fixed height, always visible. From my point of view the ideal will be frames ;-) but it is unusable because many crawlers ignore frames or bad interpret cross-frames links. SignaturePetr Vileta, Czech republic (My server rejects all messages from Yahoo and Hotmail. Send me your mail from another non-spammer site please.) Please reply to <petr AT practisoft DOT cz> >> You are right - I keep table design. This is not "cool" and this is >> unmodern, but it work in all browsers without hacks and tricks. > > I'll know that CSS has come of age when I hear someone say "Gosh! > This CSS stuff is far easier than tables" Gosh! This CSS stuff is far easier than tables! ;-) Signature-bts -Friends don't let friends drive Vista > I'll know that CSS has come of age when I hear someone say "Gosh! This > CSS stuff is far easier than tables" It is. The trick is to use the right tutorial materials. Nearly everything out there is wrong, so it's hard to pick the good stuff. In article <51887237-40e7-4f34-b1e4-ba73e9210f9f@e10g2000prf.googlegroups.co m>, > > I'll know that CSS has come of age when I hear someone say "Gosh! This > > CSS stuff is far easier than tables" > > It is. The trick is to use the right tutorial materials. Nearly > everything out there is wrong, so it's hard to pick the good stuff. If you are truly finding it too hard, you can start the journey by making a pact with yourself to not have more than the barest structural table with the columns you need, usually 2 or 3. Have no rows but 1. And try hard to work to best practice *within* the columns. No more tables in there except ones that are truly tabular in nature. A great deal of the problems faced by folk have to do with the big layout issues, equal length cols, colours confining to the cols and headers and footers behaving. By putting these pesky and difficult issues aside, you will gain confidence in your work with in the 2 or 3 main cells. (Your headers and footers lie outside of the table structure, these are easy to do) Please except this in the spirit of harm minimization, as a ladder to best practice, as training wheels when learning to ride which you will later dispense with. Signaturedorayme In article <doraymeRidThis-7D97F8.08415929012008@news-vip.optusnet.com.au>, > Please except this er... accept Signaturedorayme > In article > <51887237-40e7-4f34-b1e4-ba73e9210...@e10g2000prf.googlegroups.co [quoted text clipped - 26 lines] > -- > dorayme What are you some kind of prophet in the church of idiots? You sound like something out of a cheap novel. > > I'll know that CSS has come of age when I hear someone say "Gosh! This > > CSS stuff is far easier than tables" > > It is. The trick is to use the right tutorial materials. Nearly > everything out there is wrong, so it's hard to pick the good stuff. And most of it is the trash you keep pushing >> I'll know that CSS has come of age when I hear someone say "Gosh! This >> CSS stuff is far easier than tables" > > It is. The trick is to use the right tutorial materials. Nearly > everything out there is wrong, so it's hard to pick the good stuff. Well that, is certainly very true! Have any tutorials you'd like to share? At long last though, the switch really is on to creative tableless design. I even saw a book at the B & N reading room that had real life examples of nice looking cleanly laid out commercial fare. This *may* be it: <URL: http://www.amazon.com/Web-Standards-Creativity-Innovations-Scripting/dp/1590598032> Jeff > Have any tutorials you'd like to share? Already posted so frequently that I consider further repetition more likely to be harmful. Scripsit Steve Swift: > I'll know that CSS has come of age when I hear someone say "Gosh! This > CSS stuff is far easier than tables" People seem make fun of that statement, since they (perhaps intentionally) miss the implied premise "and what they say is true, or at least they mean it". But things aren't that simple. CSS, like life, is both very simple and highly complicated. It depends on what you are aiming at and whether you try to do things before learning them sufficiently. ("Learning by doing" isn't as successful with CSS as many people think.) In the issue of layout in the sense of allocating rectangular areas in a particular manner, HTML tables are generally simpler than CSS, and this won't change in a few years. But this doesn't mean you should use the bad old approach of using tables with pixel dimensions and complicated markup. You can always consider first whether you have some layout, or part of the layout, that could easily be achieved in CSS. Failing that, you could define the basic grid of layout in HTML markup and most of the rest in CSS. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ >> You are right - I keep table design. This is not "cool" and this is >> unmodern, but it work in all browsers without hacks and tricks. > > I'll know that CSS has come of age when I hear someone say "Gosh! This > CSS stuff is far easier than tables" It's easier for me in most cases. What's nearly impossible, however, is trying to transition to CSS in a big mess of deeply nested tables. If you don't have the time to start over, you're pretty much stuck with tables. SignatureWes Groleau ----------- I've been framed! ... http://www.useit.com/alertbox/9612.html > You still haven't told what the question is. > > Oh, it seems that we are supposed to read it from the Subject line. Please, enlighten us as to what the problem is with that? If the question is in the body, you complain that the posting is unclearly captioned. Would you prefer nothing but Jerry beating up Viper again, rather than a posting that's at least relevant to the broad field? Scripsit Andy Dingley: >> Oh, it seems that we are supposed to read it from the Subject line. > > Please, enlighten us as to what the problem is with that? Consider reading some Usenet guide(s). This group is not for enlightening you on such matters. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.