Making it look good in all browsers and resolution?

[Sliight]

I'm basically new at this, although I read a pretty good tutorial, and I did stay at a holiday inn express lastnight...

I'm using frontpage to create my site. My best friend couldn't see it, as it created horizontal scrollbars, which I really don't want.

Is there a setting or a way to have it fit in a browser or resolution?

I'm guessing there's a script that pulls their info and then says how to display... but hoping there's a much more simple fix?

Thank you for the time,

[jscheuer1]

http://www.anybrowser.org/campaign/abdesign.html

[Sliight]

Cool thank you... Appreciate it!

[Sliight]

I read the entire tutorial and it was usefull info, however it didn't seem to have much in reference to screen sizes. Just one small paragraph telling me to do what I want to do :)

My main concern is to avoid the horizontal scroller. I know many people don't have a 22" widescreen, and even some friends use annoying low resolutions. There isn't some universal fit to resolution command for a CSS or HTML? Even a script would prolly do it.

Thank you!

[Ryan Fitton]

I'm using frontpage to create my site.

Frontpage? Don't use it! Use dreamweaver or at least somthing better. :)

[jscheuer1]

Frontpage? Don't use it! Use dreamweaver or at least somthing better. :)

Oddly enough, what you use doesn't matter nearly so much as how you use it, and how well you know the principals involved in web design.

Getting back on topic, one need not worry about adjusting to different screen/window sizes and resolutions. Design your page so that it can adjust itself. To do this, set the size of large items as a percentage of the screen. Allow text and other small items to wrap and flow into the space available. For more information and/or examples, look for fluid/flexible designs, templates, and tutorials.

[Sliight]

Thank you... I will do some searches for fluid/flexible designs.

I may have to recreate what I have because I used a ton of tables for placement which is likely my problem. I'm basically using FP as the placement part and manually editing the code as much as possible.

I essentially want to create my own template using CSS more or less so all of the pages are essentially uniform with the same menu bar. I think I have a grasp of using a % or pix distances from margins, or at least understand that it works... I just can't seem to grasp how to use that to form the entire page.

www.usejeff.com is the site if you want to peek at it.

I'll just keep looking for tutorials and cramming on info. The key things to look for are the most beneficial, like the fluid/flexible. I really appreciate the direction. Hopefully in time I'll be able to answer questions here instead of ask :)

Thanks!

P.S. The site is in it's infancy, so please belly laugh and roll around on the floor to get it out of your system before you comment :)

[Twey]

Oddly enough, what you use doesn't matter nearly so much as how you use itUnfortunately, WYSIWYG is "a bad way to use" editors :) I hear DreamWeaver has some fairly decent editing capabilities as well as its WYSIWYG features, and thus isn't completely useless (although still a waste of money [or bandwidth :)] in my opinion). As a general rule, stay well away from anything resembling a WYSIWYG editor. If you're really good, you may be able, by spending twice as much time fixing the code it produces, be able to write as good a site as you would have done using a plain text editor :)

[Sliight]

I think I figured it out... Instead of all CSS for placing things, I made tables and used %'s for width and pixels for height.

I'm already doing a bunch of manual editing of the code so far, and for all intensive purposes I started learning 5 days ago. I had a simplistic background from years ago from front page.

Thanks for all the help everyone! :)

[mwinter]

I think I figured it out... Instead of all CSS for placing things, I made tables and used %'s for width and pixels for height.

That's a step backwards, really. There's little, if any need, to use table-based layouts these days. If I get time, I'll try to show how your site (or at least the home page) could be implemented using only semantic markup and CSS.

[Sliight]

Is there a good book on CSS out there? The tutorials are good that I've found, but for some odd reason I'm not able to grasp how to map everything on the page.

I want uniform pages as far as the appearance and menu bars go, then I would love to learn how to place content without the use of frames. I'm totally willing to bury my head in a book and learn what I need to. I just have a short time frame on getting a visually nice looking portion of the site made.

I'm basically going to solicit local business partners in 3 cities to allow me to place my marketing in their business's and as part of the return to them they will get an advertisement on my site (their own page). I'm doing direct mail marketing locally which will get them exposure on the site, as well as doing local fridge magnets with good enough info that people will want to keep them.

The site looks pretty bad as it is compared to many out there... but I figure once I learn how to design one site that doesn't look great... I can browse til I find appearances and setups I like.

I appreciate everyone's help, thank you!

[mwinter]

Is there a good book on CSS out there?

Perhaps, but I wouldn't know: I've never read any.


I realise that I'm a little late on my promise, and I haven't been able to devote much time to it so my efforts are a little lacking compared to times in the past when I've done this.

I saved my revision in three phases: the basic content (http://mwinter.webhop.info/dd/sliight/basic.html), the basic layout (http://mwinter.webhop.info/dd/sliight/layout.html), and the final version (http://mwinter.webhop.info/dd/sliight/final.html). However, I see that you've made significant improvement, so you may already appreciate that little of the markup has changed between the first and third phases, even though the rendering is greatly altered.

A couple of notes:


There's no menu. Preparing something that I would like to use would be too much investment, and would probably have some server-side code that probably wouldn't be of use to you, anyway.
The bottom-most links on your site aren't rendered properly, so I didn't include them as I wasn't sure what your intentions were. I probably would have just included them as a list with a top border separating them from the bottom-most block of text.
In larger viewports (which I cannot test), the text will not stretch across the entire width; this is intentional. Long lines are harder to read, to the lines of all paragraphs are capped at 75em.


Stay away from XHTML for now - for a long time - and from presentational elements (like i), too.

[Sliight]

Heh too cool, you cleaned it up :)

I like your example of how to built a page, it makes sense.

The more I look at my page the less I like it already though. I have a feeling that's quite common though when someone starts... the more you learn the more you can do. The real key to this site is that it needs to at least "appear" professional, or at least sorta :)

There is one thing I'd love to know how to do though, and since I plan to borrow the layout style of this site ( http://www.westat.com/ ) maybe you can help. No clue if that's how I'll end up doing it, but it's nice to keep creating and learning... the finished product will be better in the long run I think.

The main content window seems to always hold a set margin from the right and left menu/content bars. I'm interested in knowing what settings I would need for that?

Do I want the left, right, and main content bars all to be in a parent content div? From there I would set the left and right to absolute?

My goal is to have the main content window stay in between the left and right borders I choose, and stay within the browser window. Extending it's length to compensate for when it is shrunk on the sides. That site I linked does this nicely.

No need to go into a ton of detail, just the basic page layout terms and if I use margins or something?

Thank you!

[mwinter]

The more I look at my page the less I like it already though. I have a feeling that's quite common though when someone starts...

I always have that feeling: I'm no designer! :)



The main content window seems to always hold a set margin from the right and left menu/content bars. I'm interested in knowing what settings I would need for that?

Do I want the left, right, and main content bars all to be in a parent content div? From there I would set the left and right to absolute?

That's one way, with the parent positioned relatively and margins applied to the middle. An alternate approach is to float the left and right columns, again with a margin for the middle. Which depends on how you want to linearise the document: the floated elements would have to come first in source order, whereas absolutely-positioned elements could occur anywhere.

I hope that's enough. I get the impression you don't want to be spoon-fed. If so, excellent attitude!

[killerchutney]

Stay away from XHTML for now
Why? My site is XHTML, and it renders fine in all browsers I have tested in. That includes IE6. I thought XHTML was a newer language, and W3C's reccomendation.

[djr33]

IE simply doesn't support XHTML, so what you have is a bunch of messed up HTML code (since it doesn't see it as XHTML) that happens to work correctly, for the most part, when you are viewing the site with IE.

[Twey]

This is due to your serving the page as text/html, the MIME-type for HTML. What you're serving, therefore, is not XHTML at all but invalid HTML. If you switch to using the XHTML MIME type (application/xhtml+xml), browsers will attempt to parse it as XHTML, and IE will fail.

[Sliight]

I think I've developed a decent looking site now... there's really just one goofy glitch left. I always have a horizontal slide bar at the bottom... I looked at the positioning of every div and I can't seem to find the issue. I've done my best to make it look nice for square monitors as I think they are still the most prevalent. The main page content isn't to my liking yet... but my main goal was to develop a base page that every page will use. Now comes the fun part of adding in the usefull content.

Could you guys please take a look at my site, and let me know if you can tell me how to get it to fill the window without the blank right margin? Also, please tell me any ideas on changes you think I should make. I prefer the don't hold any punches style of criticism btw... kid gloves make for ugly finished products.

http://www.usejeff.com

I appreciate all of the help everyone has given me, and the beneficial links. I'll definitely be including this forum, as well as scripting site in the HTML help section when it's developed.

Thanks!

[Twey]

You're still serving XHTML as HTML. Don't do that. If you were serving true XHTML, those scripts wouldn't work, since they make use of document.write() and innerHTML.

As for the scrollbar, you've got:
#splitter {
position: absolute;
height: 48px;
background-image: url(images/housepic.gif);
width: 100%;
top: 110px;
left: 15px;Well, that's an issue for a start. Its width is 100%, but on top of that you've shifted it to the left by 15px, so its right edge is always going to be the right edge of the viewport, plus fifteen pixels. Instant scrollbar. Stay away from pixel measurements too, they make for inflexible designs that look bad at different resolutions (since font size doesn't scale proportionally to pixel size).

[Sliight]

Awesome that makes total sense... the #splitter I mean. Logical resolution. (just changed it to 80% and it worked... I wonder how long it took for you to see that one... I was messing with everything for over an hour lastnight trying to figure it out... Thank you!!!!!)

The XHTML I think was from the tutorial I read... so basically at the top in the declaration I should just change it to HTML?

I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To be honest I have ZERO clue what the strict and stuff really means. I've not found anything that goes into depth about it... or wait, 10-1 the w3.org site explains it but I've not bothered to read it :) I'm going to go do that now...

For now... what do I want at the top of my page?

This?:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
"http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">

Thank you! :)

[Twey]

1.0? :p HTML is currently at version 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Also remember to validate (http://validator-test.w3.org/) your markup and style.
just changed it to 80&#37; and it workedThat's all very fine and good so long as the user's viewport is wider than 15 * 5 = 75px. I guess that's fair, actually, but if you wanted to be more flexible you should convert that 15px to a percentage as well.