Site makeover..

[Smo]

'lo

I'm redesigning my site to add multi skin support & making it easier to handle big ammounts of.. stuff ^^, and adding some security at the same time.

http://www.killboredom.com/new/index.php

I'm having a problem with vertical aligning text within a display:block; in css (the section links on yop)

The right bar isn't quite done yet. but othervise it's almost done. whadaya think?

[Vin DSL]

Very nice!

I'd crop the centerblock width a little, so it displays 2 columns at a time in 800x600 res, without scrolling. It's spilling over slightly...

Does this make sense? That's what I do an my site. If you're in 800x600 res, you can see the left-side and center block, or the center and right-side block, without addition scrolling...

[Connie]

Agree with Vin. Your market may use a larger resolution. About 40% of mine use 800x600 and I do because I prefer that. You have the main table set at 980 for width. I use a percentage and the page adjust to browser size. For your fixed width there is a lot of scrolling to even read your main content.

Other than that very nice looking site.

[Spathiphyllum]

Nice layout, pleasing color schemes, uniform look between sections, responsive.

Very well done. The full banner as header doesn't effect my monitor and browsing habit but Vin and clssam bring up a good point. Smaller screens might not be able to handle the forced, wide display wthout those interminable horizontal scrolls.

Nevertheless, your site looks great on my setup.

[Smo]

Damn, I completely over looked 800x600 res. I'll look into making a layout that fits 800x600 without any horisontal scrolling and a script that detects screen width.

Personaly I don't like percentage widths, they make it too hard to manage the look of things.

[Connie]

Damn, I completely over looked 800x600 res. I'll look into making a layout that fits 800x600 without any horisontal scrolling and a script that detects screen width.
Personaly I don't like percentage widths, they make it too hard to manage the look of things.

Would you elaborate a little more about % widths. Personally I find them very easy to manage. But that could be because of the web site involved.

[Smo]

They tend to look too cramed together in small resolutions, and too spaced out in high resolutions (I use 1280x1024). Also I like to make graphical header-banner-thingys, and making them strech sucks . I checked out your site, it looks very nice and clean looking.

Mainly, I suppose I've just had bad experiences withprecentage in the past

[techlighthouse]

Agree 100% with Smo on the screen widths. I design with widths set to 800px or slighthly less. It allows me to control where the viewer sees each element on the screen. This is especially important if I've got several photos aligned on the right.

Another concern is allowing viewers to print the page. If I think it's likely I can either set up a printable page or 720px or so. Guess which is easier! Although using a scripting language might make it a lot easier.

[jason]

Another concern is allowing viewers to print the page.

Using 'media="print"' stylesheets is the way to go. I've used them to completely change the look of a site when it is printed on paper by removing all navigation links and any elements that I know won't print well (such as 72dpi images) and resizing the overall page to fit the confines of a piece of paper.

--Jason

[techlighthouse]

I'm totally unfamiliar with the 'media="print"' stylesheet. Can you give an example?

Jim

[jason]

Sure, back to my favorite "show and tell" site: http://www.tayhouse.org. There are two stylesheets linked on every page, the first (http://www.tayhouse.org/styles/main2004.css) is used to control the site as it is seen in the browser. The second one (http://www.tayhouse.org/styles/print2004.css) has the media attribute set to "print," which tells the browser to use that stylesheet to render the page when it is printed. If you were to look at the page without CSS, you'd see a pretty basic page: no backgrounds, a few headings, and most of the navigation as unordered lists. All of the screen style is supplied via the main CSS file. When you print a page you'll see a text rendering of the site's banner and just the content. Since navigation is pointless on a printed page, I set the display and visibility attributes of those elements to be invisible in the print stylesheep. That gives me more room for content and a cleaner printed page.

There are several other media types available as well:
screen - for pages rendered in a normal browser window
handheld - for cell phone and PDA display
projection - for pages that are projected onto a screen
aural - for screen readers

These are just W3C recommendations and I'm not sure if all of them have ever been used in a device. It is also important to remember that some browsers don't support the media attribute, but I believe all modern browsers do.

--Jason

[techlighthouse]

Very interesting! I've never used a stylesheet for other than the screen, never even thought about it, didn't know it existed. Guess I shouldn't be surprised though, what with all the newer types of output devices we're seeing. I wonder if "blackberry" will be the next media type. I suppose they fall under pda, though.

This sounds like a really nice way to go. I'll have to try this the next time the occasion arises.

[Vin DSL]

Very interesting! I've never used a stylesheet for other than the screen...

CSS rocks! I use it whenever possible, embedded and/or external...

If you want to do CSS right, I recommend: http://www.bradsoft.com/topstyle/

[Vin DSL]

Heh! I was just reminiscing...

Back in the 90's, when Netscape ruled the day, I designed a whole site using CSS and Internet Explorer. I probably spent a week on it, only to find out, ultimately, that Netscape didn't support CSS. LoL! Want a shocker!

Man, I was bummed! That site looked great (in IE). How times have changed...

[JonathanB]

Here are a couple of pretty good articles on print style sheets.

http://www.alistapart.com/articles/goingtoprint/
http://www.webdesignschoolreview.com/css-printing.html
http://webdesign.about.com/cs/css/a/aa042103a.htm
http://evolt.org/article/Printing_wi...318/index.html

Jason and Vin are correct. They are the way to go. As Jason said, eliminated all the unecessary stuff you don't need on a printed page (like navagation) is great. Plus you don't have to spend time creating an alternate "print friendly" version of every page you have.