Page resizing with browser

  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,

I have created a site and I want the pages to resize to fit the browser window size. Is this possible?

I created the site using Dreamweaver... I only know a little html, not enough to create a page just using that but just enough to tweak it here and there, now and then.

I notice one of the forum members has a page which resizes in his first site ... http://blackdeath227.tripod.com/NEWINDEX.html ... but he seems to use frames, which I don't want to use. His also does not resize the frame content, I want all text and images to resize too. Am I asking the impossible?

I can work out how to autostretch one cell of a table but that isn't what I want. I want the entire page and its content to resize as the user resizes their browser, even though this may make it illegible at smaller sizes and I don't know if enlarging too much will display images in poor quality but I wanted to try it and see. Once I see it, it may put me off the idea but I don't know until I try it. If nothing else, I just want to know if I can do it.

Can I do that at all and without using frames and setting a cell in each frame to autostretch??

Thank you.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Yes you can.

It's really not hard at all. All you need to do is use a percentage based width in your table tag, like so...

Code: [ Select ]
<table width="100%">
</table>
  1. <table width="100%">
  2. </table>


Now check this out. If you have 3 table cells in that table, you have a couple different options in regards to how they will act. If you do this...

Code: [ Select ]
<table width="100%">
 <tr>
  <td width="150">LEFT CELL</td>
  <td>MIDDLE CELL</td>
  <td width="150">RIGHT CELL</td>
 </tr>
</table>
  1. <table width="100%">
  2.  <tr>
  3.   <td width="150">LEFT CELL</td>
  4.   <td>MIDDLE CELL</td>
  5.   <td width="150">RIGHT CELL</td>
  6.  </tr>
  7. </table>


the cell on the left, and the cell on the right will stay at 150px's while the cell in the middle will expand to fill the available space, because the table is stretching to 100% of the available space.

Does that make sense?
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi
thanks... yep, I think it makes sense (new to this) I'll give that a try and see if I have got the hang of it.

Thank you.
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

cerio wrote:
I want all text and images to resize too.

Err... I've never heard of that, outside of Flash. There may be away to do it programmatically, but dM's table solution won't affect your image sizes, nor will it increase the size of your font. What it *will* do is allow your content to fit the width of the browser, so that's something, at least.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

i'm gonna modify dM's suggestion a lil bit... in smaller width resolutions (800x600 to 1024x768) dM's method usually works, but I'm in 1600x1200, and lines don't wrap as much as they should, heh. So, in order to make sure the center column is as wide as it should be, and the two 150p wide columns on each side are as they should be... I'd do something like this..

Code: [ Select ]
<table width="100%">
<tr>
<td width="150" valign="top" nowrap>LEFT CELL</td>
<td width="99%" valign="top">MIDDLE CELL</td>
<td width="150" valign="top" nowrap>RIGHT CELL</td>
</tr>
</table>
  1. <table width="100%">
  2. <tr>
  3. <td width="150" valign="top" nowrap>LEFT CELL</td>
  4. <td width="99%" valign="top">MIDDLE CELL</td>
  5. <td width="150" valign="top" nowrap>RIGHT CELL</td>
  6. </tr>
  7. </table>

Without doing the nowrap on the 150's, and making the center 99%, often the side cells stretch wider than 150 pixels (at least in IE) if the content doesn't fully fit the width of the center cell.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

justG wrote:
cerio wrote:
I want all text and images to resize too.

Err... I've never heard of that, outside of Flash. There may be away to do it programmatically, but dM's table solution won't affect your image sizes, nor will it increase the size of your font. What it *will* do is allow your content to fit the width of the browser, so that's something, at least.


Adding attributes to IMG tags works, designing the image for largest anticipated resolution & keeping a 4/3 aspect ratio (height=(width/4)*3) will make for best quality.
Code: [ Select ]
<img src="pic.png" width="60%" height="45%">
  • bleepnik
  • Professor
  • Professor
  • User avatar
  • Posts: 971
  • Loc: South Jersey, US

Post 3+ Months Ago

joebert wrote:
Adding attributes to IMG tags works

Percentage attributes for img tags? Well now, that would work, wouldn't it? I am Jack's embarrassed ineptitude. :oops:
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

Image resize is simply asking to much> useing image size attributes in either html or css will not resize the image, only the viewable window/ cell what have you> that it is displayed in a 200 by 200 px image tagged
<image src="my.jpg" width=120 height=120> that would look pretty sad!

But with re:to a page resizeing automatically>> all I can say is if you like web design and feel you will contiinue to learn and practise more than>>>>
drop the html layouts learn css, in no time at all you will wonder why the webdesign ever got so far ahead of this language that is what? well over 3 decades old> it is good for exactly as the name implies " text mark up"
Nothing more! once you learn not just the basics of css but to un learn the table mind set you'll be blown away at not just the control, but the light weight of shorthanded css code and the awesome global editing option!

I feel a little silly when I do a single page and get all excited for 2 reasons, 1st and formost a style sheet where there is'nt a single set size for any cell> all floating and all % widths. And an html with virtually nothing but text,. I say feel silly because I just love (with no sidebar) taking a light weight css pageand going from full to the least browser view width and back again and watch the "liquid" page just pour into any size configuration with ease and grace>

Neither here nor there but I find it a lot easier to write symantically valid code (from the get go) when writting in css as opposed to html or xhtml
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

gilray4 wrote:
Image resize is simply asking to much> useing image size attributes in either html or css will not resize the image, only the viewable window/ cell what have you> that it is displayed in a 200 by 200 px image tagged
<image src="my.jpg" width=120 height=120> that would look pretty sad!


Ok am i the only one this works for ? here, http://e.1asphost.com/joebertvision/test/T1.asp I'm using IE 6 and it looks like it resized to me. :?
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

Whoa sures shoots> stuck my foot in my mouth about image resize!
thankz for the quick lesson joebert.
so I'm off to try it with percentages and see what happens>?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Now if you use an image as a DIV or TD background, then your image will get cut off, by the way did you know that you can set an animated GIF as a input background in IE6 ? i just figured that out today & wanted to share :D
  • Spartacus
  • Born
  • Born
  • Spartacus
  • Posts: 2

Post 3+ Months Ago

gilray4 wrote:
Image resize is simply asking to much> useing image size attributes in either html or css will not resize the image, only the viewable window/ cell what have you> that it is displayed in a 200 by 200 px image tagged
<image src="my.jpg" width=120 height=120> that would look pretty sad!


Why would it look sad??? It will look smaller but not sad!, if the image is of good resolution it won't even affect quality at all.

gilray4 wrote:
But with re:to a page resizeing automatically>> all I can say is if you like web design and feel you will contiinue to learn and practise more than>>>>
drop the html layouts learn css, in no time at all you will wonder why the webdesign ever got so far ahead of this language that is what? well over 3 decades old> it is good for exactly as the name implies " text mark up"


Which HTML are you talking about? The one I know of and I think we're referring to was developed in the early 90's, that's hardly a decade! And it has evolved a whole lot since then, today it is much more than just a markup language, plus with scripting and styles support the sky is the limit.

And just FYI, you cannot write a web page only with CSS so you can't just "drop the HTML layouts", HTML is actually the first thing YOU need to learn if you want to ever become at least a web programmer (not that I think you're smart enough to become one, actually I think you're one of the stupidest beings I've ever seen/read!

gilray4 wrote:
Nothing more! once you learn not just the basics of css but to un learn the table mind set you'll be blown away at not just the control, but the light weight of shorthanded css code and the awesome global editing option!

I feel a little silly when I do a single page and get all excited for 2 reasons, 1st and formost a style sheet where there is'nt a single set size for any cell> all floating and all % widths. And an html with virtually nothing but text,. I say feel silly because I just love (with no sidebar) taking a light weight css pageand going from full to the least browser view width and back again and watch the "liquid" page just pour into any size configuration with ease and grace>

Neither here nor there but I find it a lot easier to write symantically valid code (from the get go) when writting in css as opposed to html or xhtml


You sound like a kid that just discovered CSS (which is a decade old btw) and is so exited about it. DUMB ASS!!!
  • Spartacus
  • Born
  • Born
  • Spartacus
  • Posts: 2

Post 3+ Months Ago

joebert wrote:
Now if you use an image as a DIV or TD background, then your image will get cut off, by the way did you know that you can set an animated GIF as a input background in IE6 ? i just figured that out today & wanted to share :D


Did you know you can do it on buttons too (not as a background) and make it work in any up-to-date browser (at least all I have tried it) using the <button> tag?

<button type="button" class="toolbtn" onClick="DoSomething();"><imq src="images/btn_undo.gif" border="0"></button>

I discovered that recently, not a lot of people know that one... You can too with CSS but it won't look correctly on all browsers.

More info [url]http://www.htmlhelp.com/reference/html40/forms/button.html]here[/url]
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Spartacus wrote:
gilray4 wrote:
But with re:to a page resizeing automatically>> all I can say is if you like web design and feel you will contiinue to learn and practise more than>>>>
drop the html layouts learn css, in no time at all you will wonder why the webdesign ever got so far ahead of this language that is what? well over 3 decades old> it is good for exactly as the name implies " text mark up"


Which HTML are you talking about? The one I know of and I think we're referring to was developed in the early 90's, that's hardly a decade! And it has evolved a whole lot since then, today it is much more than just a markup language, plus with scripting and styles support the sky is the limit.


Apparently, you have been extremely misguided.

HTML was originally a language whose purpose was to provide two things -- the hyperlinked model of the Web we know and love so well, and a markup language which symantically describes text in useful ways for the user, with elements such as EM, ABBR, DFN, and things such as definition lists, block quoting, etcetera.

Then, various browser companies (namely, Netscape and Microsoft) added their own extensions, trying to get authors to orient their HTML code towards whatever browser they were trying to sell/use to control the market. The specifications followed the browsers. This created authoring behaviors such as FONT elements, the use of tables for layout, MARQUEE and BLINK elements, etcetera. Since other sites were doing it, people felt the need to have their pages designed, often by people who were originally designers for the print media, who tried to control their document's appearance the way they could on the print media. HTML was no longer treated like a language about semantic markup; the majority of people cared only about presentation, and they cared only about using hacks for getting the page to work in Netscape and Internet Explorer.

Spartacus wrote:
And just FYI, you cannot write a web page only with CSS so you can't just "drop the HTML layouts", HTML is actually the first thing YOU need to learn if you want to ever become at least a web programmer (not that I think you're smart enough to become one, actually I think you're one of the stupidest beings I've ever seen/read!


A "Web programmer"? There is no such thing as Web programming, unless you are talking about server-side scripting. Writing HTML documents is not programming, nor is CSS.

And you _can_ make layouts without involving HTML in the layout process. Tables are truly for tabular data, that is their best / only good use. Knowers of CSS can easily write an HTML document that is marked up for semantic reasons, using structural DIV elements for grouping pieces of information together such as navigation menus, subsections, and tables of content. Then CSS can be applied to suggest that browsers lay out the document in a certain way.

gilray4 wrote:
Nothing more! once you learn not just the basics of css but to un learn the table mind set you'll be blown away at not just the control, but the light weight of shorthanded css code and the awesome global editing option!

I feel a little silly when I do a single page and get all excited for 2 reasons, 1st and formost a style sheet where there is'nt a single set size for any cell> all floating and all % widths. And an html with virtually nothing but text,. I say feel silly because I just love (with no sidebar) taking a light weight css pageand going from full to the least browser view width and back again and watch the "liquid" page just pour into any size configuration with ease and grace>

Neither here nor there but I find it a lot easier to write symantically valid code (from the get go) when writting in css as opposed to html or xhtml


You sound like a kid that just discovered CSS (which is a decade old btw) and is so exited about it. DUMB ASS!!![/quote]

Clearly the other poster, "gilray4," is having trouble expressing himself. Perhaps English is not his first language. I don't understand why that is a reason for you to jump down his throat.

He is not talking about writing _documents_ in CSS, because HTML is for documents. However, CSS is for style. It is the appropriate language for style sheets, and far easier to produce and maintain than bogosity-driven tabular layouts.

CSS may be eight years old, but decent browser support for it is much, much younger.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I believe the three decades is talking about GML, back in the days of the appanet, through to SGML, through to html. This progression started three and a half decades ago, so there is some truth in that.

Quote:
And it has evolved a whole lot since then, today it is much more than just a markup language, plus with scripting and styles support the sky is the limit.

It's more than a markup language? How exactly? HTML has nothing to do with scripting and styles, these are separate languages. All you can do with html is mark up text. And indeed, part of the evolution of html, is the fact that many tags and attributes are becoming depreciated. Much of the layout html that people abuse is getting removed, so your comment about the continuing evoltion actually supports gilray, oops!

Quote:
And just FYI, you cannot write a web page only with CSS so you can't just "drop the HTML layouts", HTML is actually the first thing YOU need to learn

You see, if you want to critisise someone, it would help if you read and understand them first. And also know what you are talking about. Dropping html layouts is not about not using html, it's about not using html to <b>layout your page</b>. Not using tables and width/height attributes, (which is exactly what gilray said, you just didn't take the tie to read his post). Which is possible, the only people who don't believe it is possible are the people that don't understand.

Quote:
actually I think you're one of the stupidest beings I've ever seen/read!
You took the words right out of my mouth.

Please don't flame people unless you actually know what you are talking about, and if you are going to call someone stupid, make sure that you can say something intellegent to go with it. Calling someone a kid and shouting "dumb ass", is hardly the way to show that you are the mature one.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 52 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
 
cron
 

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