Web site sizing: fluid designs

AZ_Scott · 06-10-2009, 12:27 PM

Hi V7n,

Last night I was at a friends house browsing my site with his Mac using Safari. My site looks fine on my home PC but on his the fonts were huge the background images were extending beyond his monitor and the overall look of the site was bad. I've read the entire thread "Website Size" in this forum, I understand there is way to code that allows the website to size as a % of the users resolution settings. I just need to know where to start. Would it require an entire redesing of my site or is it some html I can cut and paste into my existing site sans-moi.com?

Thanks in advance to all v7n contributers,

Scott

zannucci · 06-10-2009, 02:13 PM

maybe this will help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>
<body>
<p>
<script type="text/javascript"></script><noscript>
Please enable javascript to view this webpage correctly!
</noscript>
</body>
</html>

zannucci · 06-10-2009, 02:19 PM

Maybe that's not exactly what you were looking for, after re-reading your question. You can also change all your parameters, including for fonts, to percentages.

I'll shut up now and let someone else help who understands what you are trying to do ; )

danf · 06-10-2009, 03:35 PM

You can style your page either inside the html or by creating a separate css file. You can start by looking here:

http://www.w3schools.com/html/html_styles.asp
http://www.w3schools.com/css/css_font.asp

The second link shows you how to use relative sizing which hopefully will solve your problem. You shouldn't have to start over on your website.

zannucci · 06-10-2009, 06:38 PM

I figured out at least some of your problem.

I just looked at your site in IE, Safari and Firefox on a PC, and it all looks the same to me as it looks on your friends' computer. Even worse, on my huge screen, the yellow box isn't even on the background.

I looked at your code, and your major problem is that you haven't defined anything and have a gigantic picture set as your background. If you don't want to learn CSS, there's a quick fix that will solve most of your problems. Make the background image no more than about 1000 px wide. You can also fix it within your HTML by setting the height and width parameters.

Plus, you are using tables. I'm not going to tell you that's a no-no, but with the background image that you have, you really need to define the width of the tables to no greater than the width of the background image.

Third, I would center the whole website. That would be a much more professional look.

Fourth, I would define the the font sizes. You haven't really defined them at all, leaving the user's system to figure out what a size "7" is. Make them a specific size.

If you don't know how to do any of this, the best thing is to go to Google and type in the key phrases for each and look at examples.

AZ_Scott · 06-11-2009, 02:41 PM

Guys I really appreciate your time and effort on my website. Thank you and I'll begin incorporating CSS thanks to the turoials.

AZ_Scott · 06-12-2009, 11:00 AM

Zannuci,

I took your advice for a quick fix and converted to of the images on my site from width = 1600 to width =- 1000 using Windows Paint application. On my home PC the image is tiled. Is there anyway to modify the html (below) to achieve relative sizing?

<body bgproperties="fixed" background="images/2006-05%20Mindbender%20033!.jpg" alink="#00FF00">

zannucci · 06-12-2009, 12:08 PM

You can use the no-repeat attribute for your background.

I must have missed something in your code.
Let me go look again. You've got something strange going on.

zannucci · 06-12-2009, 12:25 PM

Here you go. Replace your HTML with this.

removed by author--see next comment.

It's got a lot of funny FrontPage stuff in it. All I did was fix your width problem.

zannucci · 06-12-2009, 12:30 PM

Hey, look at your source code for your main page. Frontpage has added a few hundred " " at the bottom of the page in two different lines. That's the problem, I promise.

Just delete all those that you see after your "Links" link, and you'll be good to go.

Just to make sure that was your only problem, I ran your code on my pc, and it was just fine.

Blackpool · 06-12-2009, 02:04 PM

Quote:

Originally Posted by zannucci

I figured out at least some of your problem.

I just looked at your site in IE, Safari and Firefox on a PC, and it all looks the same to me as it looks on your friends' computer. Even worse, on my huge screen, the yellow box isn't even on the background.

I looked at your code, and your major problem is that you haven't defined anything and have a gigantic picture set as your background. If you don't want to learn CSS, there's a quick fix that will solve most of your problems. Make the background image no more than about 1000 px wide. You can also fix it within your HTML by setting the height and width parameters.

Plus, you are using tables. I'm not going to tell you that's a no-no, but with the background image that you have, you really need to define the width of the tables to no greater than the width of the background image.

Third, I would center the whole website. That would be a much more professional look.

Fourth, I would define the the font sizes. You haven't really defined them at all, leaving the user's system to figure out what a size "7" is. Make them a specific size.

If you don't know how to do any of this, the best thing is to go to Google and type in the key phrases for each and look at examples.

I just did a demo version of this to see if it would work and yes it did. I agree to with the centering of the website.

AZ_Scott · 06-12-2009, 07:18 PM

Thanks again I'm getting closer but I still have the tiling issue. If I and the "no-repeat"

<body bgproperties="fixed" background="images/2006-05%20Mindbender%20033!.jpg" alink="#00FF00" background-repeat: no-repeat>

I get no improvement, I'm just starting the CSS tutorials so I may be a way out from discovering the solution. I'd sure appreciate a review of the site after I remvoed the &nbsp and a quick way to get the background to satblize for each evry browser/monitor config.

Scott

zannucci · 06-12-2009, 07:48 PM

Are you sure you are really trying? ; )

Here you go:

<div style="background-image:url(/images/2006-05%20Mindbender%20033!.jpg); background-repeat:no-repeat;>
</div>

zannucci · 06-12-2009, 08:06 PM

I'm glad to keep taking a look.

If you want your tables to show up, more or less, the same regardless of resolution, you are going to have to designate specific widths instead of percentages.

When you get that done, and stop the tiling, see if it makes any real difference to you from one browser to the next. It already looks pretty darn similar to me.

You can use the style code to set your font sizes by em as another step.

In my opinion, absolutely no offense to you, but you are never going to get this site exactly the same for every possible browser/resolution/user setting. You simply aren't writing it that way. We'd practically have to go line by line to get significantly closer than you will end up once you've made the suggested changes.

By the way, I just pulled CNN up in Safari, Firefox and IE and there are very slight differences to each.

Just fix your background problem and table problems, and I think you are done. I'll be glad to keep looking at it for you, but don't get too anal, particularly when you are relying on FrontPage.

zannucci · 06-12-2009, 08:13 PM

Oh, and set the font sizes, too.

**htmlbasictutor** · 06-12-2009, 08:36 PM

Quote:

Originally Posted by AZ_Scott

All this stuff should really be in your external stylesheet, but to fix what you have:

a) change the name of your background image so it doesn't have spaces. Some web servers and browsers don't like space in the names. The %20 is where the spaces are. This is a common problem as Windows lets you do this.

b) try putting quote marks around "no-repeat".

**htmlbasictutor** · 06-12-2009, 08:56 PM

From the W3C validator results:

Quote:

no document type declaration;

DOCTYPE declaration lets the browser know what HTML standard you are coding to.

Quote:

Attribute "BGPROPERTIES" is not a valid attribute

Backs up the point I made earlier. Acceptable attributes for the body tag can be found here: HTML <body> tag

Quote:

Attribute "BORDERCOLOR" is not a valid attribute

This refers to the start of a table at line 20. Acceptable attributes for the table tag can be found here: HTML <table> tag

Quote:

Attribute "HEIGHT" is not a valid attribute.

A table's height is determined by the number of rows it has and the content within the cells in those rows. Height is not an acceptable attribute of the table tag (refer to the link above). It never was.

Quote:

document type does not allow element "P" here

This refers to line 50 of your code. You didn't close the paragraph above at line 47.

Quote:

end tag for "FONT" omitted

This refers to line 54 of your code. As of HTML 4.01, all tags are to be closed (with a few exceptions). Also the font set of tags have been depreciated.

Quote:

end tag for "I" omitted, but its declaration

Same problem as last note, not closed.

Quote:

end tag for "B" omitted

Same problem as last note, not closed.

While you are fixing things up, change your file names in your links also. You have spaces in the names. Use a hypen or underscore between words if you want spaces between the words.

AZ_Scott · 06-14-2009, 10:14 AM

hey no offense Zan, just the opposite. I was looking for some critique! I'm not married to Front Page it just come free with a MS Office package I got through work. I've read the Pro's/cons but I thought some people are just prejudiced against all MS products and there was probably nothing I can't over come.

Quick question when I <CUT><PASTE>
<div style="background-image:url(/images/2006-05%20Mindbender%20033!.jpg); background-repeat:no-repeat;>

into my index.htm page it adds a bunch of

> <p><b><i>&
</div>

**htmlbasictutor** · 06-14-2009, 10:05 PM

You can't cut and paste coding into Design view. You have to switch to Code view.

zannucci · 06-15-2009, 08:53 AM

yup, sounds right.

I really don't know anything about FrontPage except from what I occasionaly read about it.