PDA

View Full Version : Help in Resizing Webpage


Anonymous
11-06-2004, 01:34 PM
Hi,
I would like to refer to one website in their solution for resizing.
example website ('http://www.qubitwerks.com')
When viewed in 800 by 600, it fits the screen neatly
when viewed in 1024 by 800, there are empty spaces on the left and right
side, and the contents in the center.

i believe it is done in a frameset with 3 frames, left center and right.
i tried creating one for myself,
The trouble is when i do it, the empty left frame appears even when i view
it in 800 by 600.

1) How is the example website done so neatly?

2) the text in the website remain the same size no matter what text size i
view in internet explorer, is there a way to maintain the same text size in
dreamweaver?

3) the website has a coloured scrollbar, how could i add color to the scrollbar?

4) Are there also other ways to enable the website to cater to the screen
resolution of the viewers(be it 800 by 600 or 1024 by 800) besides the
example that i gave above?

Thank You,
Uplift

gmcrone
11-06-2004, 03:31 PM
Hello Uplift,

Yes, the sample site uses frames.



2) the text in the website remain the same size no matter what text size i
view in internet explorer, is there a way to maintain the same text size in
dreamweaver?

I am able to resize the text (using Firefox). There is nothing in Dreamweaver that will limit the text size. That is totally in the control of the browser. The only way to "cheat" is to use graphics instead of text.

4) Are there also other ways to enable the website to cater to the screen
resolution of the viewers(be it 800 by 600 or 1024 by 800) besides the
example that i gave above?

Yes, and the best way is by using CSS

Here is a sample style sheet that gives you a banner area, a left navigation column, a right column main content area, and a bottom footer area.
This layout will always give you a centered content area no matter the browser used or the page size.

/* basic body layout */
body {
margin: 0;
padding: 0;
border: 0;
background-color: #FFFFFF;
color: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
min-width: 770px;
}
/* wrapper layout container */
#wrapper {
margin: 5px auto;
width: 770px;
position: relative;
background-color: #F1ECF8;
border: 1px solid #000;
text-align: left;
}
/* banner logo container */
#banner {
background-image: url(../assets/banner_bg.gif);/
background-repeat: repeat-x;
width: 770px;/
position: relative;
}
/* navigation container which is left column inside main content area */
#navigation {
background-image: url(../assets/navigation.gif);
background-repeat: no-repeat;
margin-top: 23px;
background-color: transparent;
padding-top: 19px;
line-height: 100%;
width: 169px;
margin-left: 12px;
}

/* main content layout which is the right column of the layout */
#content {
background-color: transparent;
width: 570px;
margin-left: 190px;
padding-bottom: 20px;
margin-bottom: 50px;
}

#content p {
margin: 0 0 5px 30px;/
font-size: 80%; /
padding: 10px 25px 0 0;
}

/* Footer layout*/
#footer {
background-color: #fff;
width: 770px;
border-top: 1px solid #000;
font-size: 60%;
text-align: right;
clear: left;
margin-top: 20px;
}

#footer p {
background-color: #E4E4E4;
padding: 4px 4px 4px 10px;
margin: 0;
}

#footer a {
color: #000000;
text-decoration: underline;
}

#footer a:hover, #footer a:focus {
text-decoration: none;
}

This will get you started. I left out a lot of the whole style sheet.

Mike....

Anonymous
11-08-2004, 04:09 PM
Hello Mike :) ,

Thank you for your comments and suggestions. Regarding the css script. i kind of pasted it into dreamweaver but it somehow couldnt seem to work. Am i supposed to add something more to the css script?

Cheers
Uplift

gmcrone
11-08-2004, 09:30 PM
Thank you for your comments and suggestions. Regarding the css script. i kind of pasted it into dreamweaver but it somehow couldnt seem to work. Am i supposed to add something more to the css script?

Yes, you can't just paste it into your page.

In each section of the CSS code you see a line such as #wrapper & #banner

These are the definitions for the <DIV id=banner> you must put into your page.

The page would look like this:

<body>
<div id="wrapper">
<div id="banner"> <img src="assets/banner.gif" alt="" name="banner" />
<div id="navcontainer">box around navigation</div>
</div>
<div id="contact">contact info here
<div id="navigation">your links go here
<div id="add">
<address>
</address>
</div>
</div>
</div>
<div id="content">
<h1>An h1 title</h1>all your content goes here
</div>
<div id="footer">
<p>company info </p>
</div>
</div>
</body>


Hope this explains it more.

There are two parts to your pages
1. CSS styles and postions elements on the pages
2. Your HTML names your elements and contains your content

It is also much better to put your style sheet into an external file such as "style.css"
and then call it from each page of your site .

Put this line on your page just before the
</head>

<link href="style.css" rel="stylesheet" type="text/css" />


By doing this every page on your site has the same look and if you want to change the style of the site you only have to change the CSS style file.

Mike...

Anonymous
11-10-2004, 06:44 AM
Hi Mike,

i tried to put together what you mentioned; i think it looks something like this but i still couldn't get it to work. The sample style sheet is not separated into a banner area, a left navigation column, a right column main content area, and a bottom footer area as u mentioned.
pardon me as i'm not very gd in css scripting and didnt really understand. do u have a sample script that i could use?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
/* basic body layout */
body {
margin: 0;
padding: 0;
border: 0;
background-color: #FFFFFF;
color: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
min-width: 770px;
}
/* wrapper layout container */
#wrapper {
margin: 5px auto;
width: 770px;
position: relative;
background-color: #F1ECF8;
border: 1px solid #000;
text-align: left;
}
/* banner logo container */
#banner {
background-image: url(../assets/banner_bg.gif);/
background-repeat: repeat-x;
width: 770px;/
position: relative;
}
/* navigation container which is left column inside main content area */
#navigation {
background-image: url(../assets/navigation.gif);
background-repeat: no-repeat;
margin-top: 23px;
background-color: transparent;
padding-top: 19px;
line-height: 100%;
width: 169px;
margin-left: 12px;
}

/* main content layout which is the right column of the layout */
#content {
background-color: transparent;
width: 570px;
margin-left: 190px;
padding-bottom: 20px;
margin-bottom: 50px;
}

#content p {
margin: 0 0 5px 30px;/
font-size: 80%; /
padding: 10px 25px 0 0;
}

/* Footer layout*/
#footer {
background-color: #fff;
width: 770px;
border-top: 1px solid #000;
font-size: 60%;
text-align: right;
clear: left;
margin-top: 20px;
}

#footer p {
background-color: #E4E4E4;
padding: 4px 4px 4px 10px;
margin: 0;
}

#footer a {
color: #000000;
text-decoration: underline;
}

#footer a:hover, #footer a:focus {
text-decoration: none;
}

<body>
<div id="wrapper">
<div id="banner"> assets/banner.gif
<div id="navcontainer">box around navigation</div>
</div>
<div id="contact">contact info here
<div id="navigation">your links go here
<div id="add">
<address>
</address>
</div>
</div>
</div>
<div id="content">
<h1>An h1 title</h1>all your content goes here
</div>
<div id="footer">


company info </p>
</div>

</div>
</body>
</html>


thanks & appreciation,
Uplift

gmcrone
11-10-2004, 10:36 PM
Uplift,

I think you need a lot more knowledge of basics before you start.

http://www.westciv.com/style_master/house/ ('http://www.westciv.com/style_master/house/')
http://cssvault.com/ ('http://cssvault.com/')
http://www.communitymx.com/ ('http://www.communitymx.com/')
http://www.projectseven.com/ ('http://www.projectseven.com/')

The first 2 links will teach you about CSS and web design.

The 3rd link for community mx is where you can purchase a complete template
called Paris, that will do all that you want.

The 4th link for Project 7 is another site where you can purchase templates and other extensions for Dreamweaver. All of their templates/extensions come with a large user manual that can teach you how to write your web pages.

Mike...

Anonymous
11-16-2004, 03:43 PM
hello Mike,

Thanks for your previous posts. :)

My Webpage ('http://www.callback4u.net')
i would like to refer to the website that i did.

The gap b/w the table and the text widens a lot when i view in 1024 by
800 compared to 800 by 600.
Is this normal?

How can i standardise the gaps for a more universal outlook whether i
view it in 1024 by 800 or 800 by 600 resolution so that the changes are
not so drastic...

thank you,
Uplift

gmcrone
11-20-2004, 10:30 PM
Your website is using nested tables set to % widths. This will cause your tables to resize to whatever screen size the users browser is set to. This also causes your content to seemingly move around.
If you want to use tables that stay the same size and not move your content around, you must set your widths to absolute pixel sizes not percentages.

e.g. <table width="740"> not <table width="80%">

Mike...

Anonymous
12-08-2004, 04:02 AM
I am almost in the same boat as Uplift was.

I have a site in 1024x768. I created this for a friend and his online gaming squad.
Apparently the games force the users to be in 800x600 mode.

He wants the site to match. Of course when they open the page it cuts off half of everything.

I see in here you mention the CSS styles. I am using Dreamweaver MX. They of course have the option of using the GUI instead of writing the code as you have done here.

I am wondering if there is a way to change it in the GUI form instead of me having to learn the code? Please let me know if I can just create a new CSS style...

gmcrone
12-08-2004, 09:02 PM
Can I get the URL to the page so I can look at it?

The easiest way for people that don't want to learn code is to put your entire page into a table set at width=100%.
The danger of doing this is that the elements on your pages will only line up when viewed at the resolution you built it at.
You then don't have much control as to the way your layout renders in different viewing sizes.

The best way is to use CSS and set the #wrapper div to the widest element on your page which is probably your banner area. (min width=770)

Look over the code I uploaded here previously and see if you understand how it works.

Mike....

adrienne
12-08-2004, 09:21 PM
OK,
I looked at your page. Your pages are determined by the chat board you are using which is EZBoard.

You should ask in their support area how to change the page sizes.
They do mention in their FAQ's that you can use CSS for customizing the board.

Because the board you are using is restricted access, there is now way I can actually look at the code underlying the board.

Mike...

adrienne
12-08-2004, 09:45 PM
The EZboard is an external link. It is not something that is incorporated into the site itself. That is hosted in a seperate web space that they pay to use.

I didn't think those would matter - for instance if I threw on a link to here I didn't think it would effect the size of my site....

Everything I do is with Dreamweaver...

gmcrone
12-08-2004, 10:03 PM
Which page are you talking about then.

Ezboard and your Calendar are both external.

The only other page is your opening index page.

Mike....

adrienne
12-09-2004, 02:08 AM
It's the home page that needs the tweak. So far that is the only internal link that I have up.

It's fine when viewed in the normal resolution of 1024x768. However apparently all of the guys have their settings on 800x600 because of their games. So when they pull up the page it cuts off half of the top and totally distorts it.