Page Resizing Vertically

  • Aner
  • Born
  • Born
  • Aner
  • Posts: 4

Post 3+ Months Ago

Hi to everyone,
I am a newbie, dropped by chance in your forum. I started webmastering since few weeks (so you can imagine how much I am skilled).

I have almost the same problem, as cerio here:

http://www.ozzu.com/website-design-forum/page-resizing-with-browser-t21313.html

but I want my site to resize vertically - not horizontally. I used the code posted by digitalMedia and modified it in order to make it work vertically but --- it does not work :oops: . Probably I mistaken something. Tell me please where are my errors:

Code: [ Select ]
<table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="150">TOP LINE</td>
 </tr>
 <tr>
  <td height="100%">MIDDLE LINE</td>
 </tr>
 <tr>
  <td height="150">BOTTOM LINE</td>
 </tr>
</table>
  1. <table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
  2.  <tr>
  3.   <td height="150">TOP LINE</td>
  4.  </tr>
  5.  <tr>
  6.   <td height="100%">MIDDLE LINE</td>
  7.  </tr>
  8.  <tr>
  9.   <td height="150">BOTTOM LINE</td>
  10.  </tr>
  11. </table>


Basically I want a compact site, a site that may occupy (more or less) the whole browser (both in 800x600 and 1024x768 resolutions), without requiring to scroll down the page to see its hidden content. I thought it would have been a good idea to use resizing cells to expand "useless" spaces and fill the browser. But any different suggestion would be more then appreciated :? .
Thanks for your help!

Aner
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

Make one of the heights within a <td> tag, height="600". That will stretch it out for 800x600 users for now.

Relative 'newbie' myself - hopefully one of the big boys will jump in!
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

I am assuming you want the site to fill the browser window as opposed to the table in this reply.

I did some scribbling there and came up with this:

Code: [ Select ]
<html>
<head>
<style type="text/css">
 body {width:100%;
    height:100%;
    background:white;
    }
 div {width:100%; margin:none;}
 div#title{
        height:100px;
        min-height:500px;
        color:yellow;
        background-color:red;
    }
 div#content{
        height:75%;
        background-color:yellow;
    }
 div#footer{
        height:50px;
        color:white;
        background-color:blue;
    }
</style>
</head>


<body>
<div id="title">
  <h1>Title DIV</h1>
</div>

<div id="content">
  <p>Content</p>
  <table border="1">
   <tr> <td> Medal </td> <td> Gymnast </td> </tr>
   <tr> <td> Gold? </td> <td> Paul Hamm! </td> </tr>
  </table>
</div>

<div id="footer">
  <h7>Footer DIV</h7>
</div>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  body {width:100%;
  5.     height:100%;
  6.     background:white;
  7.     }
  8.  div {width:100%; margin:none;}
  9.  div#title{
  10.         height:100px;
  11.         min-height:500px;
  12.         color:yellow;
  13.         background-color:red;
  14.     }
  15.  div#content{
  16.         height:75%;
  17.         background-color:yellow;
  18.     }
  19.  div#footer{
  20.         height:50px;
  21.         color:white;
  22.         background-color:blue;
  23.     }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="title">
  28.   <h1>Title DIV</h1>
  29. </div>
  30. <div id="content">
  31.   <p>Content</p>
  32.   <table border="1">
  33.    <tr> <td> Medal </td> <td> Gymnast </td> </tr>
  34.    <tr> <td> Gold? </td> <td> Paul Hamm! </td> </tr>
  35.   </table>
  36. </div>
  37. <div id="footer">
  38.   <h7>Footer DIV</h7>
  39. </div>
  40. </body>
  41. </html>


Basically this produces a page with three parts - a title, footer and content area. I'm not sure if you have a footer, but it doesn't matter if you do or not.

What you need to do is set the heights of the title area(and footer if you have one) to a pre-set number of pixels, so they are fixed.

However the 'content' div needs to be set to a % of the browser window so it expands. Use the following as a rough guide:


key:
H+F = Combined Height of 'header' and 'footer' in pixels.
C = Height of 'Content' in %.
PH600 = % of 800x600 height filled.
PH768 = % of 1024x768 height filled.

(Rules)
(1) H+F = 50px; C = 91%; PH600=99%; PH768=98%;
(2) H+F = 100px; C = 83%; PH600=100%; PH768=96%;
(3) H+F = 150px; C = 75%; PH600=100%; PH768=95%;
(4) H+F = 200px; C = 66%; PH600=99%; PH768=92%;
(5) H+F = 250px; C = 58%; PH600=100%; PH768=91%;
(6) H+F = 300px; C = 50%; PH600=100%; PH768=89%;

So for the example I inserted at the top, the combined height of my header and footer was 150px, so I set the height of my 'Content' div to 75% per Rule(3) above. This will fill the height of an 800x600 page to 100% of the screen and fill a 1024x768 page to 95% of the screen.

Note, say I didn't want a footer and my header was still 100px high, I would set 'Content' height to 83% (per Rule(2) above). Then 100% of 800x600, and 96% of 1024x768 height would be filled.

As you can see the more space your header and footer take up, the worse this is for the larger resolution. Not perfect but should do your trick. You can play around with the numbers above but I the % I have stated are as far as I know the best which will best satisfy both resolutions at the same time.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

lionking:You might want to test that code in a browser other than IE. ;)

btw:H7?

Aner: What's not working for you? Your code works in all of my browsers except for Opera 7.01. Opera doesn't recognize the height attribute.
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

digitalMedia wrote:
lionking:You might want to test that code in a browser other than IE. ;)

btw:H7?

Aner: What's not working for you? Your code works in all of my browsers except for Opera 7.01. Opera doesn't recognize the height attribute.


:lol: Should have put that disclaimer on shouldn't I! Note...
Quote:
Relative 'newbie' myself - hopefully one of the big boys will jump in!
:wink:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Table cells will ALWAYS expand vertically to accomodate content.

For instance, you can set a table cell to a width of 200 and a height of 600, but if the content of that cell requires more than 600 pixels in height, the table cell WILL expand vertically. If you want the site to remain stationary and only have the content of the cell scroll, you will need to use an iframe in the cell or use some javascript/dhtml content wrapper.
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

I think that the original post was aimed at making the cell/page as big as the browser window, even if there is only a small amount of data in the cell:?:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Aner wrote:
...without requiring to scroll down the page to see its hidden content...


Lionking: That's what I thought at first too, but the above quote does not reflect that.
  • Aner
  • Born
  • Born
  • Aner
  • Posts: 4

Post 3+ Months Ago

well - yes, my aim is to expand an empty cell more or less...

the other things I said about scrolling down and so on - were just a general declaration of what I'd like to obtain at the end. :roll: even if my most urgent problem, for now, is "simply" to expand the cells vertically to fit the browser.

digitalmedia: my code is "not working" because the middle cell never expands. - it always remains pressed on the text. :cry:

lionking: thanks a lot for your help, now I am going to study more carefully your suggestions, and try them.

I am starting to wonder if html allows to stretch empty cells...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Aner wrote:
digitalmedia: my code is "not working" because the middle cell never expands. - it always remains pressed on the text. :cry:


Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head></head>
<body>
<table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="150" bgcolor="#999999">TOP LINE</td></tr>
 <tr>
  <td height="100%">MIDDLE LINE</td></tr>
 <tr>
  <td height="150" bgcolor="#999999">BOTTOM LINE</td></tr></table></body></html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head></head>
  4. <body>
  5. <table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
  6.  <tr>
  7.   <td height="150" bgcolor="#999999">TOP LINE</td></tr>
  8.  <tr>
  9.   <td height="100%">MIDDLE LINE</td></tr>
  10.  <tr>
  11.   <td height="150" bgcolor="#999999">BOTTOM LINE</td></tr></table></body></html>


http://www.chriscarney.com/cleanMe/vertTable001.gif
http://www.chriscarney.com/cleanMe/vertTable002.gif
http://www.chriscarney.com/cleanMe/vertTable003.gif
http://www.chriscarney.com/cleanMe/vertTable004.gif

Your code works in IE and FireFox.

I'm guessing you're confused because the string, "MIDDLE LINE" is v-aligning in the middle of its cell, which is the default for HTML 4.01.
  • Aner
  • Born
  • Born
  • Aner
  • Posts: 4

Post 3+ Months Ago

Digitalmedia:
now I am really surprised - :shock: cause, I see that I cannot obtain the same results you showed in those .gif files, even after copying the code you gave me

I copyed exactly the same code you used, but - I still have the "MIDDLE LINE's cell" collapsed on the text 'MIDDLE LINE'... differently from you (and you're obtaining precisely the effect I'd want for me!)

hmmm... same code - but different effects on IE (mine is 6.0.2 vers.). how can be possible? maybe Macromedia Dreamweaver MX 2004 (the program I installed and I am using) messed things up somehow?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Hmmmm, this is interesting. I'd like to know what the difference is.

I'm using IE build 6.0.2800.1106. I, too, have Dreamweaver installed on my computer.

I don't know of any settings within IE that would cause it to react differently.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I've looked at this for a while now, and I can't get the page to do ANYTING differently in my browsers. I've tried various DOCTYPES, etc.

The only thing I can find that might be a variable is your accessibility settings. If you were using your own style sheet that for some reason set TD heights. Unlikely, I would guess.
  • Aner
  • Born
  • Born
  • Aner
  • Posts: 4

Post 3+ Months Ago

really thanks for your efforts Digitalmedia

really strange, anyway... tonight I will try again that code on some other computers, to experiment what type of results I am getting :?:

it's even more frustrating - knowing that the "middle cell" is expanding on someone else's monitor. But I won't give up so easly! :twisted: even if this will cost me to format hd :D

the only thing clear is that - now I have one more reason to trash this misterious box full of metallic garbage (my computer...).

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.