Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Is there any easy way to make print (magazine) style sidebars in HTML? I mean something that is a block of text (and maybe other stuff) set off from the main text. Yeah, I know I can just put in a link with target= to pop up a new window, but I'm trying for a traditional printed look. A block that overlaps the main text area (extending into the "margin") would be great. I know how to use tables to make sidebars of indefinite length, but what I want is something of limited length that the main text flows around. I think I can get the layout I'm after with [table], colspan=, and bgcolor=, but the big problem is how do I get text to "flow" from one [td] element to another? I don't want to have to manually tweak the contents of (fixed-size) [td]s to fake the look of text flowing from one to another. I'd prefer not to create the sidebar as a GIF image and plunk it in with [img align=], as it will be slow to load and won't obey browser font choice and size settings.
Any suggestions? Thanks... Phil
Here's (I hope!) an image illustrating the effect I want. In case it doesn't show, look at http://www.catskilltech.com/images/sidebar.gif. Also, I forgot to mention that I'd like to have the solution be as platform-independent as possible -- not requiring JavaScript or CSS, and working on HTML 4.0 or even 3.2, if at all possible. Thanks... Phil
0 
0
here's what I mean, you can view the source, and try resizing the browser width:
http://broadband.or.id/leftalign.htm
0
Look at this and see if it is what you are trying to do. The thing I like about doing it this way instead of a table is you can change the links in one place and all pages will be changed. You will only have to make sure the Iframe is sized right when you put it on each page.
http://www.geocities.com/yvarg/Navigation/NavIframe.htm
0
I just read your additional post after I submitted the solution I suggested and see that you didn't want to use javascript. That might be a little difficult to do. You might end up having to use a table the way Laler suggested.
0
Laler,
With a little bit of tweaking, I can make that work over a wide range of HTML levels and browsers, even without CSS. Just one problem: how can I make the left- or right-aligned table stick out to the true margin while the body text leaves some space (see sidebar.gif)? I tried putting the body in a [blockquote] or [ul] to munge the margins, but the table obeyed the new margin, not the old. Otherwise it seems pretty good (is align= widely supported for tables?).
Randy,
An interesting approach. I will keep it in mind if Laler's simpler approach doesn't pan out.
Thanks both, Phil
0
there I edited the last sample, basically it's just setting the table to have negative left-margin.
That is just a sample, these positioning thingy is quite complex and it needs different approach for different cases.
"table align" is universal, but CSS is too (with some exception). Right now people prefer "table-less layout". It's better from the structure point of view. In CSS layout, the HTML document only have content, all formatting should be made outside (in the CSS file).
In my sample, everything in style="" is actually CSS but placed directly into the HTML.
A little discussion about CSS
CSS Zen Garden << you should view the source of this page :)
0
Hmmm, food for thought. Thanks for the sample, Laler. I was trying to avoid mandatory CSS use because my understanding was that support was not universal. For example, do text-only browsers (e.g., Lnyx) and screen-readers adequately support CSS? Does IE (the most common browser) properly support it? I want to create pages with the widest-possible browser compatibility (even if that means sticking to HTML 3.2 or maybe 4.0). If a given browser does not [correctly] support CSS, can I count on function gracefully degrading? I don't want to end up with pages that are outright broken (unviewable) by more than 1% of users. Has anyone published a list of the subset of CSS/XHTML tags, etc. known to be properly supported (or gracefully ignored) by 99% of browsers out there?
Is anyone still using Netscape 4.7 or other antiques? Is it preferred to have separate CSS files, rather than embedding it into the HTML? When you say that "table-less layout" is preferred, is that saying that any kind of layout control that I could do with tables could be done just as well with pure CSS? Inquiring minds want to know! Thanks, Phil
0  |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
