...

View Full Version : universal page size?



Ras Gabriel
01-07-2004, 05:19 AM
Greetings,

I am curious to know if there is html code for making a page adjustable to the size of the monitor that it is being viewed through. I am currently designing a site on a small 15" monitor, but want all to be able to view it the same without the backgrounds being doubled or so.

I give thanks for any help.

One Love,

Ras Gabriel

Mhtml
01-07-2004, 05:25 AM
Salutations :) ...

You can set the widths and heights of elements to a percentage (using %) to achieve a 'liquid' layout which will expand and collapse to the size of the browser area defined by the resolution the monitor is using.

[edit: ] However with backgrounds there is no atribute to 'stretch' the image to the bounds of the page ... So the only alternatives are to make it really big (will increase load time though) or make it 'seamless' which will permit it to repeat without the user being able to easily see where it repeats. Or you can set it to not repeat at all.

Ras Gabriel
01-07-2004, 05:29 AM
thank you for your quik response.

where would you insert the % value? and you are saying that 96% is what I should use?

Ras Gabriel
01-07-2004, 05:33 AM
how am I able to set the background not to repeat at all? and what will it show instead? will it center the page, or how exactly will it look?

Mhtml
01-07-2004, 05:53 AM
Hmmm ... Perhaps you could do with a little quick training in CSS :) .

I highly recommend w3Schools - www.w3schools.com/css

Dieter Rausch
01-07-2004, 06:01 AM
Hi Ras,

where would you insert the % value? and you are saying that 96% is what I should use?

Perhaps I am misunderstanding your question, but I think that the 96 you are referring to is actually just % (percent). Depending on the font used, % can also look like 96.

Dieter

Ras Gabriel
01-07-2004, 06:01 AM
ah yes...css is foreign to me. thank you for the link...

as far as I can tell I would just add this to the background attributes:

background-repeat: no-repeat

thanks again



ooops...thanks Deiter:o

Mhtml
01-07-2004, 06:12 AM
Correct Ras, that would work! :) Quick learner.

Ras Gabriel
01-07-2004, 06:16 AM
thanks.

I am curious though what "fills in the gaps" around the browser window on larger monitors if I add this code.

mindlessLemming
01-07-2004, 09:16 AM
Originally posted by Ras Gabriel

I am curious though what "fills in the gaps" around the browser window on larger monitors if I add this code.


background-color:#ffffff
This would "fill the gaps" with white.

Ras Gabriel
01-07-2004, 08:22 PM
Am I overstanding this right?...that I would add this code directly into the HTML background properties?

So that it would look similar to this:

<body background="whatever.jpg" background-color:#ffffff><IMG src="http://www.whateversite.com/whatever.jpg">
wouldn't this change the background image?

or would it just put the white "behind" or "underneath" the image?


also, how could I code it so that the background as well as the rest of the page is centered as far as the larger monitor's view?

mindlessLemming
01-08-2004, 01:07 AM
Almost..


<body style="background:#ffffff url(whatever.jpg) no-repeat">
<img src="whatever.jpg"/>

You would further shorten the "#ffffff" to #fff, but I didn't want to confuse.
Your <img> tag needed a self closing end tag (/>).
Also, start writting ALL tags and attributes as lower case now so that you don't have to think about it later when you start coding to XHTML standards ;)

*edit - Added the "no-repeat" after re-reading your earlier post:p

Ras Gabriel
01-13-2004, 07:02 AM
thanks for the reminder to code in all lowercase.
as far as the self closing tag...i didn't know you had to close the image source tags. thanks.
when you wrote "url (whatever.jpg)"....would I write the actual url where the image is found? or just write url.
also, how could I code it so that the background as well as the rest of the page is centered as far as the larger monitor's view?
is it just:
<p align=center> the code for the page </p> ?
thanks for your help.

mindlessLemming
01-13-2004, 09:32 AM
You're welcome:thumbsup:
In XHTML (your next step...) all single tags (<b> <img>, etc)
need to be closed with a forward slash. I think you also need a space between the last character and the slash as well;
i.e. <b> becomes <b />
If you start practicing this stuff now you will wake up one morning and realise that you already code in XHTML. (well, almost:rolleyes: )

url in the css tells the browser that the following string is a file location. You just need to place the location of your file in relation to the html file;
ie - background:#fff url (images/myPic.jpg) blah blah...;



#mainPosition {
position:absolute;
left:50%;
width:760px; /* is the width of the page*/
margin-top:0px;
margin-left:-380px; /*is the negative 1/2 width of the page*/
}

then encase all tags within the mainPosition div like so...

<body>
<div id="mainPosition">
...code for page...
</div>
</body>


Next step: Externalise your CSS and refer to it in the head of your html files like so

<link rel="stylesheet" type="text/css" media="screen" href="layout.css">
<style type="text/css">
@import "layout.css";
</style>


I've doubled up on the call to the CSS file so as to avoid IE's dreaded F.O.U.C. (http://www.bluerobot.com/web/css/fouc.asp)
but you can just use the <link> one if you like.

me'
01-13-2004, 05:08 PM
Originally posted by mindlessLemming
You're welcome:thumbsup:
In XHTML (your next step...) all single tags (<b> <img>, etc) Err... <b> = obselete presentational markup for making things bold, which isn't empty. I assume you mean <br/> ;)

Roy Sinclair
01-13-2004, 06:39 PM
A List Apart has a new article on "elastic design". Well worth your time.

http://www.alistapart.com/articles/elastic/

mindlessLemming
01-13-2004, 11:16 PM
Originally posted by me'
Err... <b> = obselete presentational markup for making things bold, which isn't empty. I assume you mean <br/> ;)

Good assumption me', that's exactly what I meant :o
I had just finished working a 10 hour shift of hard labour, I make no apologies for silly typo's.

Ras Gabriel
01-17-2004, 08:22 AM
thank you everyone...i'll try these things and let you know if I have any other questions. you all have greatly helped.

ReadMe.txt
01-17-2004, 11:37 PM
Originally posted by me'
Err... <b> = obselete presentational markup for making things bold

Funnily enough, it's not actually obsolete:

http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_presentationmodule

me'
01-18-2004, 10:09 AM
Well, whatdyaknow? I wander why not... meh. It's good enough deprecated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum