Help with size of page [Archive]

View Full Version : Help with size of page

polliwogfrog

10-10-2002, 10:30 AM

Ribbitt! :)
I have read in this message board, that there is a
good accepted standard size one should go about
using for their webpages. (600x?)
How can I dictate page size? Is it an html code I
insert, and what is it, where would I place in page?
Or is it in a drop-down and I can't find?
Please help, Thanks fellow members!
Polli
:OO

DCElliott

10-12-2002, 06:58 PM

Green is my fav colour - so you catch a break today ;)

You don't create a page size, per se, but you can organize the elements on your page so that it looks best at a certain widow size.

For example, look at this window. I don't know what resolution you are tunning but my screen is 1280 x 1024 pixels - fairly big. My Explorer window, though is about 3/4s of the area. If I resize the window smaller than about 800 pixels wide, I start squishing the content and a scrollbar appears at the bottom. That tells me that I have gotten smaller that the intended resolution that the developer wanted.

Usually when you add elements that have definite sizes - like a graphic, or a table where you specify a width, you create a size that won't squish anymore and starts going off the sides of the window. When you learn to use fixed measures (pixels usually) or percentage measures you will see how you can have fixed and elastic (percentages are elastic) parts of your page.

I usually design for 800 by 600 resolution but for the most part allow my content to be elastic enough to accomodate larger and smaller window sizes, or larger or smaller font sizes which can have similar effects to changing window size, when you think about it. That means that I don't create any element, or combination of elements that will exceed 800 pixels wide in the window. It is a simple as that.

Look at other people's code (use View|Source from the Explorer menu) to get an idea about how they do things. (Don't look at this page, it is far too complicated) Other folks have given you suggestions regarding sites that provide tutorials - follow up and experiment experiment experiment. 1st Page is an idela learning tool because you can instantly see the effect of changes you make.

DE

Dynasty

10-12-2002, 09:36 PM

A good design is one that resizes automatically to the resolution, using % instead of absolute values for the width and height of stuff :o

polliwogfrog

10-13-2002, 01:56 PM

I too, love the color green!
DCElliot, THANK YOU for the in-depth and understandable
answer! I am learning from several websites (this code stuff) as we speak, and when get stuck, come here for help. Most of their support staff at other websites is too long getting back to me,
or too complicated for a newbie to get a grip on at this point.
I understood and understand what you have said. YOU should
be a teacher or Professor!
Dynasty, your added answer is noted as well, and I THANK YOU
too! I will take both replies into account now, and do the best job
I can as I build my new website. Ribbitt :)
:joy:

BoR|S

10-13-2002, 02:03 PM

Originally posted by Dynasty
A good design is one that resizes automatically to the resolution, using % instead of absolute values for the width and height of stuff :o

Though I agree with you, I still think that it's not the best way always because even though you make such site by using percents, you still make it under secific resolution, let's say, 1024x768, but when a user will enter your website using 640x480 resolution, the tables will be alright but it will look pretty bad because the fonts may be too big for such resolution. In addition to that, text that you intend to take one line, may take more on a smaller resolution because the actuall width is smaller than what you seen while creating the webpage...

When I make a website, I first make it under my normal 1024x768 resolution, and then I switch to 800x600, 640x480, 1280x1024 and see how does it look there and apply the nececary fixes in order the website will look the best in any resolution.

WebSitePat

10-14-2002, 10:58 AM

Try IEBooster from http://www.paessler.com/

We often use this freeware.
Option 1/8 : Quikly resize your windows!!!
Greetings.

DCElliott

10-15-2002, 08:19 AM

One other thing, PollyWallyDoodle, if you are just learning HTML, learn to do your layout with Cascading Style Sheets. Here is an example of a style sheet I use:
/* Style Sheet for the Policy Watch Web Pages */
BODY
{
background : #FFFFFF;
background : url(./images/NS_Background.gif) no-repeat fixed 50% 50%;
color: #483D8B;
scrollbar-face-color:#000000;
font : .9em Verdana, Lucida, Geneva, Helvetica, sans-serif;
}

/* BEGIN LIQUID CSS */
BODY { position: relative; min-width: 580px; width: 100%; margin: 0; padding: 0; }
#top { position: absolute; top: 0; left: 0; min-width: 600px; width: 100%; height: 120px; }
#left { position: absolute; top:130px; left: 0px; width: 19%; margin: 1% 1% 2% 1px; }
#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 1px 2% 1%; }
#middle { position: absolute; top:130px; left:20%; min-width: 320px; width: 58%; margin: 1% 1% 2%;
/*Browser Hack proposed by Tantek Celik*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 21%;
margin-right:21%;
}

/* HR styles need for IE/Win. */
HR.holder { width:580px; visibility: hidden; } /* Equal to 'top' */
HR.left, HR.right { width: 120px; visibility: hidden; }
HR.middle { width: 320px; visibility: hidden; }

/* These HR styles replace the above, and are needed for Netscape 4.x.
Left and right margins are half the relevant DIV width */
HR.holder { width:0; margin: 0 300px; } /* Equal to 'top' */
HR.left, HR.right { width: 0; margin: 0 60px; }
HR.middle { width: 0; margin: 0 160px; }

/* DIVs must have a border value set in Netscape 4.x */
DIV { border: none; overflow: visible; background: transparent; color: inherit;
}

/* END LIQUID CSS */

/*Begin Policy Watch Specific styles*/
#index
{ display:block;
position: absolute;
top: 90px;
left: 0px;
width:90%;
height: auto;
font : bold 10pt courier;
line-height: 100%;
margin: 0 5%;
text-align:center;
color: inherit;
background:cadetblue;
padding:10px 0;
}
A.button
{ display:inline; width:auto; height: auto;
text-align: center;
text-decoration: none;
color: #3163CE;
background: #ffcc33;
font : bold 10pt courier;
vertical-align : middle;
padding : 2px;
margin: 3px 0.5% 3px 0;
border-top: 2px solid #ffff99;
border-left: 2px solid #ffff99;
border-right: 2px solid #cc9933;
border-bottom: 2px solid #cc9933;
}
A.button:hover, A.button:active
{ border-top: 2px solid #cc9933;
border-left: 2px solid #cc9933;
border-right: 2px solid #ffff99;
border-bottom: 2px solid #ffff99;
}
.alpha-head
{ /*display:block;*/
width:80%;
font:bold 22pt 'CG Omega', Verdana, Georgia, Helvetica, sans-serif;
padding: 0px 5px;
margin: 0 0 -10px -2.5%;
border-left: 20px solid cadetblue;
border-bottom: 2px solid cadetblue;
}
.heading { font : bold 1.4em sans-serif;}
.up {display: block; position:relative; top:-20px; left:80%; padding-bottom:2px;}
div#bottom
{ display:block;
width:100%;
text-align: center;
font-size: smaller;
}
div.linksection {position: relative; top: 90px; left: 20px;}
A.link {text-decoration: none; color: #483D8B; font-face: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:900;}
A.link:hover, A.link:active {background-color: #ffcc33; color: inherit;}
P.link {margin: 0 0 .5em 0;}
LI{list-style-type : square;}
.front {position: absolute; top: 50px; left: 3%; width:auto; font: 20pt bold Times, serif; color: inherit;
padding: 0 10px 5px 25px; border:0 none; filter:shadow(color=#228CD5, direction=135);}
.pizzaz {background: lightgoldenrodyellow; color:inherit; }
.morepizzaz {background: yellow; color:inherit; border: 1px solid seagreen; }
CODE { color: #8B0000; }
#left, #right { text-align: center; font-size:8pt;}
#middle {padding:0 1% 0 20px; z-index:20; text-align: justify;}
#right {margin-right: 2px; letter-spacing : -.04em; }
#right A.link {display:block; width:100%; margin:0% 10% -9pt 10%;}
#right A.button {display:inline; width:60%; margin 0% 20% 0% 20%;}
.note { font-size: smaller; }
DIV { background: transparent; border: none; color:inherit; }
#holder { background: transparent; color:inherit;}
HR { visibility: visible; }
#middle {padding:0 1em 0 20px; z-index:20; text-align: justify;}/PHP]
I will include a page that uses it in my next post (otherwise i will exceed the max message length)

DE

DCElliott

10-15-2002, 09:09 AM

If you want to try this sheet and see the effects, use the HTML code below. Steps:
1) Block and copy the code in the previous post and save it in a directory as polly.css
2) Block and copy the code below and save it as polly.html
3) Open polly.html and what do you see?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="en">
<HEAD>
<LINK REV="made" HREF="mailto:elliotdc@gov.ns.ca">
<META NAME="author" CONTENT="David Elliott">
<META CONTENT="blendTrans(Duration=1.0)">
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">

</SCRIPT>
<LINK REL="StyleSheet" HREF="polly.css" TYPE="text/css">

<STYLE type="text/css">

</STYLE>

<TITLE>Example for Polliwog</TITLE>

</HEAD>

<BODY>


<DIV id="top">
<IMG src="http://developers.evrsoft.com/forum/avatar.php?userid=292&dateline=1033251560" width="160" height="100" alt="Policy Watch Logo" border="0" style="position:absolute ; top: 0px ; left: 100px;">
<DIV class="front">
Example for Polliwog
</DIV>

<DIV ID="index" name="index"><A HREF="#A" CLASS="button">A</A><A HREF="#B" CLASS="button">B</A><A HREF="#C" CLASS="button">C</A><A HREF="#D" CLASS="button">D</A><A HREF="#E" CLASS="button">E</A><A HREF="#F" CLASS="button">F</A><A HREF="#G" CLASS="button">G</A><A HREF="#H" CLASS="button">H</A><A HREF="#I" CLASS="button">I</A><A HREF="#J" CLASS="button">J</A><A HREF="#K" CLASS="button">K</A><A HREF="#L" CLASS="button">L</A><A HREF="#M" CLASS="button">M</A><A HREF="#N" CLASS="button">N</A><A HREF="#O" CLASS="button">O</A><A HREF="#P" CLASS="button">P</A><A HREF="#Q" CLASS="button">Q</A><A HREF="#R" CLASS="button">R</A><A HREF="#S" CLASS="button">S</A><A HREF="#T" CLASS="button">T</A><A HREF="#U" CLASS="button">U</A><A HREF="#V" CLASS="button">V</A><A HREF="#W" CLASS="button">W</A><A HREF="#X" CLASS="button">X</A><A HREF="#Y" CLASS="button">Y</A><A HREF="#Z" CLASS="button">Z</A>
</DIV>


</DIV>



<DIV id="middle">


<P><A CLASS="alpha-head" NAME="A" >A     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
<P><A CLASS="alpha-head" NAME="B" >B     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
<P><A CLASS="alpha-head" NAME="C" >C     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
<P><A CLASS="alpha-head" NAME="D" >D     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
<P><A CLASS="alpha-head" NAME="E" >E     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
<P class="link"><A class="link" target="_blank" HREF="http://developers.evrsoft.com/forum/index.php?s=">Eversoft Developer's Forum</A> A great source of information for web pages    </P>
<P><A CLASS="alpha-head" NAME="F" >F     </A><SPAN class="up"><A class="button" href="#index">Top</A></SPAN></P>
Etc. Etc. (Had to cut this short so as not to exceed message length!)

<SCRIPT type="text/javascript">
document.write(holdW('middle'))
</SCRIPT>
</DIV>


<DIV id="left">
<SPAN class="heading">What's New</SPAN>
<HR>
<DIV class="pizzaz">Policy Watch has a new look. It features faster, easier navigation, more links and, yes, a bit of pizzaz!<BR>
We hope you enjoy using it and find it to be a useful resource.</DIV>
<HR>
<IMG src="images/siteview.gif" width="142" height="48" alt="It's a joke, OK?" border="0">
<HR>
Copyright © 2002 Nova Scotia Department of Health.<BR>
<ADDRESS>
Send comments to:<BR>
<A href="mailto:elliotdc@gov.ns.ca">David Elliott</A>
</ADDRESS>

<HR>
<SPAN class="note">Last Revised: 15/Oct/2002</SPAN>


<SCRIPT type="text/javascript">
document.write(holdW('left'))
</SCRIPT>
<a href="http://validator.w3.org/check/referer"><img border="0"
src="images/valid-html401.gif"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</DIV>


<DIV id="right">
<SPAN class="heading">Navigator</SPAN>
<HR>
<A class="link" href="polly.html" title="Acute Care Resources">Acute Care</A><BR>
<A class="link" href="polly.html" title="Addictions Resources">Addictions</A><BR>
<A class="link" href="polly.html" title="Children and Youth Resources">Children/Youth</A><BR>
<A class="link" href="polly.html" title="Continuing Care Resources">Continuing Care</A><BR>

<SCRIPT type="text/javascript">
document.write(holdW('right'))
</SCRIPT>
<A class="button" href="http://www.gov.ns.ca/health/erc" title="Connect to the Online Library Catalogue">Catalogue</A><BR>
<BR>
<A class="button" href="polly.html" title="Connect to the Electronic Journals and Databases Resources">Journals</A><BR>
<BR>
<A class="button" href="polly.html" title="Back to Policy Watch Home">HOME</A>
</DIV>
</BODY>
</HTML>

This page is part of a template for a link farm I maintain for a number of health policy topics. The links are alphabetically sorted and indexed at the top. The links on the right all point back to polly.html now, but link to other pages in the real page.
All the positioning is done with style sheets.
The button mouseover effects are done with style sheets - they are not graphics, they are boxes that change their borders when you hover over them.
See how clean the code is with style sheets. No font tags anywhere!

DE