PDA

View Full Version : Relative vs absolute how to set?


jack
01-20-2008, 02:41 AM
Hello to all, I have been trying to learn dreamweaver on my own but I have hit a roadblock. My site appears correctly on my pc but on others the size of the page is altered. I have read about "absolute" and "relative" but I cant find how to make a whole page (template) "relative" so it appears correctly on all size monitors. The only browser i use is IE so I know a different browser is not the issue. Also I have a gap at the top of the page I cant get rid of. All suggections are greatly appreciated!

site is www.cheap-techs.com (http://www.cheap-techs.com) new and in progress..........

Thanks dreamweaver gurus!

Cary
01-20-2008, 07:45 AM
Hi Jack. Welcome to the forums.

I'm not sure what you mean by relative pages and monitor sizes. Your page's overall layout seems to stay together for the most part when viewed in different window sizes.

Things aren't looking so good in Firefox 2. The fonts aren't what you seemed to be aiming for if the IE rendering is any indication, and the head has more problems than just a gap.

Start with validating the code you have and fixing any errors. For instance, you have several paths in the page pointing to files on your local hard drive rather than the web, and a couple meta tags in the body of the page rather than the head where they belong.

Then work on getting the page looking correct in Firefox and Opera. Then any problems left in IE will be easier to deal with.

Cary
01-20-2008, 07:48 AM
My site appears correctly on my pc but on others the size of the page is altered.

This is because your style sheet link is pointing to the style sheet on your local computer. Only your browser can see it.

jack
01-20-2008, 08:59 PM
Thanks for taking the time to answer guys! I have followed your advice and moved my meta tags and also removed the links pointing to my local computers files. It looks ok in firefox now but i still have the gap at the top in IE. I am using a template so every page looks the same but its jumpy when you change pages. Is there a way to lock the editable boundries so its consistant page to page?

Also I validated the markup as you said and the only errors I get are from the paypal code that they provide me so i will have to go to them on that. I beleive I fixed the issues you both noted other than the font choice, text size, etc, so you see it as fixed? Thanks again!

www.cheap-techs.com (http://www.cheap-techs.com)

Cary
01-21-2008, 12:46 AM
Thanks for taking the time to answer guys! I have followed your advice and moved my meta tags and also removed the links pointing to my local computers files.

The style sheet link in the head of your xhtml is still pointing to the style sheet on your local hard drive.

It looks ok in firefox now but i still have the gap at the top in IE.

The head may look okay in FF on your computer (with the style sheet nobody else can see), but on mine the name isn't against a dark background, but a white one because FF ignores the bgcolor attribute. Use CSS instead.

The gap seems to be due to the image you placed above the table:

<body bgcolor="#14285f">
<div align="center">
<img src="http://www.cheap-techs.com/image/mm_spacer.gif" alt="" width="50" height="1" border="0" />

Just remove that image and the gap should disappear.

I am using a template so every page looks the same but its jumpy when you change pages. Is there a way to lock the editable boundaries so its consistent page to page?

Well, you're incorrectly using tables for layout, so there's not much that can be done about that. Tables should only be used for displaying tabular data, hence the name "td" for cells. You need to learn (X)HTML and CSS before getting too carried away with DW and asking people to pay you for web sites.

You also need to accept the fact that the web isn't like print. Pages will vary from one viewer to the next. It's impossible to make everyone see everything the same. Some people have lower resolutions and others set their computers to use large font sizes by default. In your styles you have the font sizes set to pixels. You should use percentages and ems instead.

Longer pages with vertical scrollbars will shift in FF relative to shorter pages without the scrollbar. IE renders the page to begin with as if there is a vertical scrollbar, so when the scrollbar shows up, the layout doesn't shift.

Also I validated the markup as you said and the only errors I get are from the paypal code that they provide me so i will have to go to them on that.

Actually, all you need to do with the Paypal code to make it validate is remove the border attribute and its value.

Did you check the page with the W3C Validator (http://validator.w3.org/)?

It points out that you don't have the correct opening head tag for xhtml.

You should have at least this:

<html xmlns="http://www.w3.org/1999/xhtml">

jack
01-21-2008, 01:18 AM
Thanks for all the information Cary. I didnt know about W3C Validator but I am using it now. I think were I went wrong was starting with a dreamweaver starter template instead of starting from scratch. I think I will start over from scratch as its easier than trying to edit something I didnt create. You are correct that web design is off my list of services, its a nice thought but knowing computers doesnt mean you know code.......lol. None the less I am enjoying this and will continue reading and experimenting as well as monitoring this forum. Thanks for the help!