PDA

View Full Version : can't replace tables with divs, messed up layout


jmichae3
12-11-2010, 01:07 AM
I am aiming for 2 floating columns on either side and 1 fixed-width column in the middle sue to the menu I am using.

some people have said on this forum that you should never use tables for layout because tables are for data.

but I can't get divs to bend to my will. all they do is reflow because the width of the columns is too wide.

I am thinking of going back to stable tables.

can anyone show me how to get tables to be arbitrarily wide?

the 1st (menu) and 2nd columns (a spacer) can be turned off, essentially made 0px width and visibility:hidden and display:none, especially automatically during printing, since I my web site is mostly help articles.

<div id='mainmenu' class='mainmenu_on' style='float:left;'>
...
</div><div id='ms_s' class='mainseparator_screen' style='float:right;'></div><div valign='top' class='maincontent' style='float:right;'>
...
</div>

the pages all over the site are all alike. you can view a broken example of this layout at
http://JesusnJim.com/pix/pix.html

edbr
12-11-2010, 01:49 AM
does these errors help

Result: 7 errors / 33 warnings

line 54 column 23 - Error: <header> is not recognized!
line 54 column 23 - Warning: discarding unexpected <header>
line 59 column 1 - Warning: discarding unexpected </header>
line 62 column 1 - Error: <heading> is not recognized!
line 62 column 1 - Warning: discarding unexpected <heading>
line 64 column 1 - Warning: discarding unexpected </heading>
line 69 column 1 - Error: <nav> is not recognized!
line 69 column 1 - Warning: discarding unexpected <nav>
line 74 column 25 - Warning: discarding unexpected </nav>
line 76 column 1 - Error: <nav> is not recognized!
line 76 column 1 - Warning: discarding unexpected <nav>
line 105 column 25 - Warning: discarding unexpected </nav>
line 110 column 1 - Error: <article> is not recognized!
line 110 column 1 - Warning: discarding unexpected <article>
line 267 column 3 - Warning: <embed> is not approved by W3C
line 267 column 100 - Warning: discarding unexpected </embed>
line 268 column 3 - Warning: <embed> is not approved by W3C
line 268 column 100 - Warning: discarding unexpected </embed>
line 497 column 1 - Warning: discarding unexpected </article>
line 500 column 1 - Error: <footer> is not recognized!

jmichae3
12-11-2010, 01:53 AM
are you validating with HTML5?

edbr
12-11-2010, 02:23 AM
no just html validation with fire fox
BTW re tables and html5 from w3

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

jmichae3
12-11-2010, 04:57 AM
that still doesn't tell me how I am going to fix my layout.

I hasically understand things like this, but because I find that I cannot find a useable alternative to tables using divs, I am forced to use tables. give me an alternative.


I can't use percentages or fixed widths. even though that is workable because you can use absolute positioning for most stuff, I can't use that with my layout. both outside columns must be flexible/floating since:
- the menu/navigation column is different widths for different pages, and I use a program to generate the pages, and I can't determine the width
- the content column is different widths for different pages, and I am not about to use fixed widths or percentages since that would break some pages.

I need answers.

by the way, it validates 98% fine with the HTML5 validator.
I made sure it does.
what little errors there are have to do with having the "border" attribute on tables (useless).

I need something that works. help. give me a code example I can use on my web site.

some authors seem to be saying "I replaced tables with divs" but I am struggling with this. I would like to do it where it is appropriate (there are definite advantages if I can have it, like zero widths).

Corrosive
12-11-2010, 08:29 AM
the 1st (menu) and 2nd columns (a spacer) can be turned off, essentially made 0px width and visibility:hidden and display:none, especially automatically during printing, since I my web site is mostly help articles.



Why not just use a print only stylesheet rather than that convoluted 'switch menu on and off' thing you have? That seems a very strange way of getting a printable page; http://corrosiveonline.co.uk/tutorials_printing_web_pages.php

That might give you more flexibility to get your div based layout fit for screen.

Tables print really badly anyway!

jmichae3
12-13-2010, 11:31 PM
prints just fine. I am already doing a print css in basic.css. you didn't even try it. I just got my code back to original condition since I didn't get an answer to my question, and that took me 2 days (no version control).

all I wanted was an HTML+CSS code fix for my problem, not comments on my site.

as for the ability to turn off the menu, I figure sometimes it gets in the way of viewing the content, which can at times be very wide and the menu can be distracting.

Corrosive
12-14-2010, 09:39 AM
all I wanted was an HTML+CSS code fix for my problem, not comments on my site.



You are missing the point in what I said but, OK. When I switch your menu off it doesn't make the content come over to the left, which is what I would expect. I am just left with a big gap the same size as the menu used to be and I still have to scroll right to see all your content.

If you had two divs as columns, one fixed and one using max-width (http://www.w3schools.com/css/pr_dim_max-width.asp) maybe with the content dictating the width up to the maximum, and then both floated left. Then you could have the menu disappear on click and the main content would float further left and hopefully all fit on the screen.

Having said that, if your issue is the massive content then tackle that rather than changing your site.

jmichae3
12-14-2010, 09:48 AM
what browser? this shouldn't be happening.

Corrosive
12-14-2010, 10:04 AM
Chrome 8.

http://corrosiveonline.co.uk/_projects/jim/chrome8.jpg

I have also checked on IE8 and the menu is wider than my screen;

http://corrosiveonline.co.uk/_projects/jim/ie8.jpg

Corrosive
12-14-2010, 10:08 AM
Also here is a snapshot of that particular page. You can see it is too wide for my screen;

http://corrosiveonline.co.uk/_projects/jim/chrome8-2.jpg

jmichae3
12-17-2010, 03:46 AM
Also here is a snapshot of that particular page. You can see it is too wide for my screen;

http://corrosiveonline.co.uk/_projects/jim/chrome8-2.jpg
that's not the issue here. stick to the subject at hand. I expect some of my pages to be too wide. the particular graph image you are looking at is large, therefore it won't fit. not everything has to fit on the screen.

this is also one of the reasons why I have the ability to turn off distracting and sometimes wide menus (which I am still fixing at the moment).

fixed it. for some reason, having a div tag with white-space:nowrap; surrounding my menu and having inside side-by-side a div with the navigation with nowrap and a div with the long boilerplate text in it with white-space:normal; in IE caused IE to improperly render the boilerplate text.

<div style="white-space:nowrap;">
<div style="white-space:nowrap;">navigation</div>
<div style="white-space:normal;">boilerplate - IE oops</div>
</div>
the fix for this is


<div style="white-space:nowrap;">
<div style="white-space:nowrap;">navigation</div>
</div>
<div style="white-space:normal;">boilerplate - IE fixed</div>
still have one more change to make to fix the menu on/off code and then I am done.

jmichae3
12-17-2010, 03:49 AM
by the way, the lot of you didn't answer my original question and weren't much help. but in the process I did improve my menu and fix a bug or two. I will try to be as much help as I can to people. I may not always have my code perfect, but I try.

jmichae3
12-17-2010, 04:12 AM
thank you for telling me that there was a problem. I don't usually check my non-default browser because it's usually not an issue with my sites.

Corrosive
12-17-2010, 07:01 AM
by the way, the lot of you didn't answer my original question and weren't much help.

Something for which I'm sure we apologise unreservedly but your original question was;

I am thinking of going back to stable tables.

can anyone show me how to get tables to be arbitrarily wide?

To which the answer from most of us is still, don't use tables for layout, they just aren't meant for that. The only way I know how to use tables is for a data table so I have no idea how to make them arbitrarily wide. Sorry about that.

jmichae3
12-17-2010, 08:01 AM
guys, my attitude stunk from the beginning. I'm sorry. please forgive me. I could have started off with a much better attitude.


tables are by default arbitrarily wide. they fir the screen if you use width:100%; or the attribute width="100%" if I am not mistaken (I could be wrong on this, but it seemed to do this when I tested that, don't know what it does if you have really wide text and you use 100%, have not tested that yet).

tables appear to be able to do something that divs or other elements cannot do: you can have a mix of columns that are fixed and columns that are variable width, or you can use a percentage on some of them.

and since you can switch these on and off so to speak, they can also be handy in that respect (however, since I have divs and nav's in my td's, I am having to turn off the divs as well as the td elements to make then zero-width).

table cell spacing can be eliminated in CSS, and borders and background colors can be done on a td-by-td or tr basis (maybe tbody as well?) you can also put borders and background colors on col and colgroup (but nothing more). so it has the advantage of being able to span multiple rows or columns if you so desire.

but I have just been unable to find any resource anywhere that is capable of doing the same thing with divs+CSS or other elements. they usually address doing all floating or all fixed, or all percentage, but *not* a mix. I was unable to get that to work, given my current understanding and CSS Cookbook by O'Reilly Press.

I got my menu fixed by the way. should work fine for all browsers now.

case closed? unless you want to add something... :-)

jmichae3
12-17-2010, 08:36 AM
hoo hoo! look what I found!

http://snook.ca/archives/html_and_css/getting_your_di

I think I am going to make some changes to my code and regenerate my site and see what happens...

Corrosive
12-17-2010, 08:39 AM
case closed? unless you want to add something... :-)

I do have one suggestion. Let the content and CSS box model (padding) dictate the width of your nav and toggle display: none: to swith that (and it's nested content off) and then use a % on the main content;

http://corrosiveonline.co.uk/_projects/jim/demo1.html

Corrosive
12-17-2010, 08:49 AM
OK, sorry. I see you actually want a three column layout with variable width in the centre. Disregard last post.

jmichae3
12-17-2010, 10:14 AM
no go with what I found. so wide causes columns to wrap. same old problem with divs.
forced to use float, because columns would end up all on their own lines just like a div does normally, unlike the article, they do not "act like a table" exactly. back to my old ways again.

Corrosive
12-17-2010, 10:17 AM
OK, fair enough. Stick with the tables then :)