HTML Page Formatting
Category: Computers > Programming
Asked by: pjrc-ga
List Price: $20.00
27 Sep 2002 18:25 PDT
Expires: 27 Oct 2002 17:25 PST
Question ID: 69916
I need your help to solve a little html page layout issue I'm having. I recently redesigned my website to use a left-side nav bar. The nav bar is 160 pixels wide. I'd like all the "content" of each page to appear between the 180th pixel and the right side of the browser window. I also want the browser to wrap text so that no horizontal scrolling is needed to read the text, even when the content part of the page has wide images that will require horizontal scrolling. So far, I've been able to accomplish either of these, but not both. Here are a couple links for specific examples: http://www.pjrc.com/tech/8051/board4/first_use.html Here, the browser wraps the text to fit nicely to whatever size the window happens to be, but the content wraps below the nav bar so it's not all from pixel 180 to the right edge. http://www.pjrc.com/tech/8051/board4/first_use_table_formatted.html Here, the content is nicely aligned at pixel 180 all the way down the page, but the browser formats the text to match the width of the widest image, so horizontal scrolling is needed with a window 800 pixels wide (the text doesn't reformat as you resize the window). Horizontal scrolling is the greater of the two evils, but to illustrate how ugly the content can look as it goes from 180-edge to 0-edge, consider this page: http://www.pjrc.com/tech/8051/pm2_docs/functions.html On this page, there aren't graphics, so the table formatting would work... but what I'm really holding out for it a universal approach I can apply to all the page on the site (I generate the nav bars with some scripts, so the script would insert the formatting markup at the top and bottom of the content.) So can I have my cake and eat it too?? My final request is that whatever solution, it needs be HTML 4.01 (I'm slowly working towards 100% validation of the site to 4.01 transitional) and needs to work amoung a wide range of browsers, at least IE 5.0/5.5/6.0, Netscape 4.7x, Mozilla 1.x. A good portion of the people visiting the site are linux users, and some browse with Konqueror, others with Netscape or Mozilla... though I'm less concerned if the solution is standards compliant and Konq has a bug. Feel free to copy these sample page or other pages from the site to play with changing their formatting.
Re: HTML Page Formatting
Answered By: morningstar2000-ga on 27 Sep 2002 22:41 PDT
Hi, I have reviewed the pages that you listed as examples and am basing this answer on my experience as a web devloper for over 7 years. You could easily format the text as you stated in tables so that it would wrap and wouldn't produce the horizontal scrolling. You have that problem already resolved. What I have done when faced with this problem is to layout my page in tables. The left (navigation column would be 160 pixels wide, a second column would be 20 pixels wide with a "blank.gif" image 20 pixels wide inserted into it to hold the correct width regardless of the browser viewing the page. The third column (containing my text would be created to "*" so that it would take up the remainder of the window. Now here is the only solution I have ever reached to keep from dealing with horizontal scrolling with large images. I either 1) embed my images but add the "width" and "height" tags to my "img src" and hyperlink the image to the image so the user can access the larger view or 2) create a thumbnail of my larger images and embed the thumbnail linking it to the larger image. That way I can control the size of the images being displayed regardless of browser type or user screen resolution. This may not be the type answer you are looking for but I have found that it is highly effective on various designs and layouts I have created. It is also completely compliant with HTML standards. It provides consistency across various browser types and screen resolutions and doesn't cause extensive work arounds. I hope that this has been helpful and wish you success with the web site you are designing. Regards, Morningstar
rated this answer:
I was very disappointed with the answer. It was essentially just one of the two approachs I posted in my question, and it definately did not acheive the two desired result of combining the properties of both approaches that I posted.
Re: HTML Page Formatting
From: joey-ga on 27 Sep 2002 23:02 PDT
Re: HTML Page Formatting
From: pjrc-ga on 29 Sep 2002 07:48 PDT
I am not satisfied with this answer. It does not achieve the requested result. To be specific, the original question asked for "content is nicely aligned at pixel 180 all the way down the page" AND "browser wraps the text to fit nicely to whatever size the window happens to be". The answer achieves the first of these, but for the second all that is suggested is: "Each time you start a new text area (paragraph in some cases) start a table and set it to 720 pixels wide. This will allow the text to remain on the screen for users with 800x600 resolution, which is the standard that most web pages are created to accomodate." This causes a fixed width formatting (and 620 would be correct for a 800 pixel wide window, not 720, and even that doesn't take into account the pixels used by the window edges and margins). This is about as far from "browser wraps the text to fit nicely to whatever size the window happens to be" as can be imagined, since it only works for an 800 pixel window. I do not care that 800 pixels is today's norm for many sites. Only a few years ago, 640 pixels was the norm, and perhaps soon it'll be 1024. These norms also assume the user with a small screen will maximize their window, and that users with larger screens will not. But whatever the "norm" is, I ABSOLUTELY WILL NOT ACCEPT FIXED FORMATTING. The text MUST be formatted by the browser to fit whatever size window the user has. I am debating whether to simply rate this answer low or request a refund. Either way, I'll try again at a higher dollar level, perhaps $50 or $100, and I'll make it absolutely clear what is expected in the answer. I though it was clear what I wanted, and I am very disappointed that the answer is essentially one of the two methods I posted with a minor hack to adjust the text to a smaller fixed width, but clearly not automatically word wrapped by the browser as I wanted and specified in the question.
Re: HTML Page Formatting
From: davedave-ga on 29 Oct 2002 22:27 PST
Assuming... 1) you want the image to be clipped if it can't fit in the window 2) you don't mind the extra work it takes to insert an image then you can try... <html> <body> <table width=100%> <tr> <td width=100> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side <br> Left Side </td> <td> <p> Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side </p> <div style="margin-left: 20px;"> <div style="background-image: url(http://www.pjrc.com/tech/8051/board4/board_w_serial.jpg); background-repeat: no-repeat; width: 100%; height: 340px"></div> <b>Figure 1:</b> Apply DC Voltage and Attach Serial Cable To Upper Port </div> <p> Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side </p> </td> </tr> </table> </body> </html> Note: I only tested on IE 6. I didn't bother testing on anything else.
If you feel that you have found inappropriate content, please let us know by emailing us at email@example.com with the question ID listed above. Thank you.
|Search Google Answers for