Limiting content width - DIV or BODY?

J

Jonathan N. Little

Jose said:
This goes to show that awards are not useful indicators of website
"goodness". By forcing your visitors to use up 800x600 of their screen
in order to see your site, you are doing them a disservice. Sadly, on
the web people are getting inured to disservice, but nonetheless,
somebody has to stick up for the cattl... customers. :)

Do not design for an 800x600 viewport. Design for an arbitrary
viewport, and let your design flow smoothly whatever size of screen your
visitor has, or deigns to release to you.


I could do that, but then I'd have to kill you.

The site I run uses only relative positioning. However I commit other
sins, so keep that in mind.
http://www.flying20club.org
Click to expand...

Your intentions are noble, but don't send a newbie to your site. It will
only muddle the issue. Send him so someone's site that actually shows
how to use markup as markup and styles with CSS and the site is flexible
with respect to the viewport. Many regulars here have such a site.
Toby's comes to mind. Jukka's is a little pedestrian in the artistic
sense but also is correct. Mine I would say is to the other extreme
pushing the aesthetic (got it spelled correctly this time!) side but
still obeys the web's flexible nature.

Michael, what you should to is review this index

http://www.w3.org/TR/html4/index/elements.html

Then build your page with strict doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then do not use any element with a 'D' in the Deprecated column on the
page listed above. Do not use any element with 'L' or 'F' in the DTD
column.

Build your page simply with text first. Structure it with markup as it
physically is, i.e., paragraphs with <p></p> elements heading with
<h#></h#> etc...

Then add your decor, background images, colors, borders, etc with CSS.

Results will be

1) A far more accessible site
2) A far more maintainable site
3) Learn something
4) Satisfaction of doing a job right.
 
M

Michael Laplante

Jonathan N. Little said:
Jose wrote:
Send him so someone's site that actually shows how to use markup as markup
and styles with CSS and the site is flexible with respect to the viewport.
Many regulars here have such a site. Toby's comes to mind. Jukka's is a
little pedestrian in the artistic sense but also is correct. Mine I would
say is to the other extreme pushing the aesthetic (got it spelled
correctly this time!) side but still obeys the web's flexible nature.
Click to expand...

URLs would be helpful. . .
Michael, what you should to is review this index

http://www.w3.org/TR/html4/index/elements.html
Click to expand...

Excellent! Got it bookmarked. . .
Then add your decor, background images, colors, borders, etc with CSS.

Results will be

1) A far more accessible site
2) A far more maintainable site
3) Learn something
4) Satisfaction of doing a job right.
Click to expand...

Sounds good for "information type" websites. This wouldn't work for "artsy"
sites like CSSZenGarden where the "look" is as important or moreso than the
message. In that case, you pretty much have to design for a limited range of
fonts or real estate and accept that outside those parameters your fancy
look is gonna get munged.

M
 
A

Andy Dingley

Sounds good for "information type" websites. This wouldn't work for "artsy"
sites like CSSZenGarden where the "look" is as important or moreso than the
message.
Click to expand...

Cluelessness reaches a whole new nadir!
 
M

Michael Laplante

Do not design for an 800x600 viewport. Design for an arbitrary viewport,
and let your design flow smoothly whatever size of screen your visitor
has, or deigns to release to you.
Click to expand...

I don't think that can be done in strict CSS unless:

i. the site is so simple (one to three columns with a banner across the top
sort of thing) that it could just as easily have been designed in a table
for all its simplicity;

ii. the site is extremely robust and sophisticated because the designer is a
CSS black belt

I've seen lots of examples of (i). I've never encountered an example of (ii)
and would love for someone in this NG to point me to such a site so I can
study it.

Every site I've ever been to eventually "breaks down" under some condition.
Graphics start to overlay text, text boxes spill into each other, etc or --
at the other extreme -- start jumping off to extremes until the site looks
odd.

Look at CSSZenGarden. Those sites validate and visually they look gorgeous,
but they will break down under differing window sizes, fonts, etc.

The attitude some here have expressed -- any site that breaks down in some
fashion is poorly designed -- is fallacious UNLESS it's due to invalid code
(my problem right now).
http://www.flying20club.org
I do not use CSS
!!

However, I have endeavored to make the site fluid,
Click to expand...

Cheating -- that's easy to do with tables, or CSS columns. I could do that
years ago. In this ng though, anything less than CSS for anything other than
tabular data is considered not on.

Taking the p*** outta you a bit. Some of those award-winning sites use
tables, probably for the very same reason you do. As I mentioned in my
earlier post my "brute force" method for printing also uses tables as there
doesn't seem to be a way to easily do what I want with CSS.



M
 
J

Jonathan N. Little

Michael said:
URLs would be helpful. . .


Excellent! Got it bookmarked. . .


Sounds good for "information type" websites. This wouldn't work for "artsy"
sites like CSSZenGarden where the "look" is as important or moreso than the
message. In that case, you pretty much have to design for a limited range of
fonts or real estate and accept that outside those parameters your fancy
look is gonna get munged.
Click to expand...

Mine is definitely 'Artsy' and was done that way...

Sorry I did say regulars, I would have expected you just look at one of
their posting as see their website in their signatures

Toby's is http://tobyinkster.co.uk/
Jukka's is http://www.cs.tut.fi/~jkorpela/
 
M

Michael Laplante

Toby Inkster said:
You're probably using absolute positioning in your print style sheet -- a
recipe for disaster.
Click to expand...

I don't believe that's the problem here. I've come across several articles
that discuss this DIV problem across pages in Gecko browsers. My centering
DIV is the problem. I get rid of that and the problem goes away in Firefox.
But then I no longer have the margins I was looking for.
Try the following print CSS:
Click to expand...

Tried it. No change. If I leave that centering DIV in to maintain the screen
margins, the DIV won't print across pages in FF but will in IE. If I remove
the DIV, both will print across pages but of course, I lose the margins in
my print version. It's a Gecko quirk that I've seen discussed in several
articles.

I could break up the DIV into smaller portions for a CSS-only solution. Or,
as I am doing now, remove the DIV and replace it with a one-cell table. That
gives my my print margins in both browsers. Neither is an elegant solution.

The third alternative is PDF format which is what I was doing before this,
but that introduces another level of maintenance I was hoping to avoid.

Is it possible to somehow include the contents of external HTML file (say B)
into HTML file A using CSS? That suggests some possibilities to me. . .

M
 
M

Michael Laplante

If anyone wants to take a crack at it, posted a sample page to:
http://www3.telus.net/public/tao55/help/test.htm

Didn't upload the images but the blanks are there. To re-interate, I'm
trying to print this info out with margins. It's an aesthetic thing. I know
the end-user can do this via their page setup, but I thought it would be a
nice thing to do for them, seeing as how some people don't know how to set
margins. Clean page breaks would be nice too.

Right now, it won't print more than a page in FF, I think because of the
centering DIV. The stylesheet is in the header.

Spare me comments about deprecated elements, not catering to all window
sizes, etc. Been there. (Unless these issues would solve my immediate
problem.)

Any solutions to my printing challenge would be gratefully accepted.

CSS novice,

M
 
J

Jose

Your intentions are noble, but don't send a newbie to your site. It will only muddle the issue. Send him so someone's site that actually shows how to use markup as markup and styles with CSS and the site is flexible with respect to the viewport.

Well, nobody seemed to be helping him, so I offered what I could, along
with what I thought was a suitable caveat. The desirability of absolute
positioning and relative positioning was the topic.

And as far as I can read and see, CSS is not ready for prime time.
Although the intent of separating structure and presentation is
laudable, CSS seems to break too easily. I admit my perception may be
incorrect, but whenever things don't "work right" (presentation wise),
if I view source, I see CSS. Things didn't used to break in that manner
before.

Jose
 
J

Jonathan N. Little

Jose wrote:
And as far as I can read and see, CSS is not ready for prime time.
Although the intent of separating structure and presentation is
laudable, CSS seems to break too easily. I admit my perception may be
incorrect, but whenever things don't "work right" (presentation wise),
if I view source, I see CSS. Things didn't used to break in that manner
before.
Click to expand...

I disagree, things broke horribly in the 4x browser age with proprietary
markup. CSS works quite well on the whole, most times it just improperly
applied. Of course the old OS component that attempts to be a web has
its issues but we can always be hopeful.
 
J

Jonathan N. Little

Michael said:
If anyone wants to take a crack at it, posted a sample page to:
http://www3.telus.net/public/tao55/help/test.htm

Didn't upload the images but the blanks are there. To re-interate, I'm
trying to print this info out with margins. It's an aesthetic thing. I know
the end-user can do this via their page setup, but I thought it would be a
nice thing to do for them, seeing as how some people don't know how to set
margins. Clean page breaks would be nice too.

Right now, it won't print more than a page in FF, I think because of the
centering DIV. The stylesheet is in the header.

Spare me comments about deprecated elements, not catering to all window
sizes, etc. Been there. (Unless these issues would solve my immediate
problem.)

Any solutions to my printing challenge would be gratefully accepted.

CSS novice,
Click to expand...

Keep saying it is not your CSS and all the absolute positioning, but if
I *disable* your CSS the complete document prints!

Also fixing you errors might help...


http://validator.w3.org/check?verbose=1&uri=http://www3.telus.net/public/tao55/help/test.htm
 
J

Jonathan N. Little

Jonathan N. Little wrote:

(Missing word)

I disagree, things broke horribly in the 4x browser age with proprietary
markup. CSS works quite well on the whole, most times it just improperly
applied. Of course the old OS component that attempts to be a web
browser

has its issues but we can always be hopeful.
Click to expand...
 
M

Michael Laplante

I disagree, things broke horribly in the 4x browser age with proprietary
markup. CSS works quite well on the whole, most times it just improperly
applied.
Click to expand...

I haven't found a CSS site anywhere that doesn't "break" -- and that
includes those belonging to the CSS "black belts" here. The only ones that
don't are those that simply mimic multi-column tables, and even many of
those don't work properly.

That's why I laughed at some of the initial comments to my ongoing printing
issue. The people who fancy themselves good at CSS take one look, grunt a
vague comment or two, say "your site goes wonky when i change window or font
size, it's badly designed." I can write them off as "experts" immediately
since they seem to be unaware that most CSS sites break. I challenge them to
show me their sites -- they usually stop flapping their lips at that point.
(Challenge still stands BTW. . .) Or, they show me these embarrassingly
simple sites that could just as easily have been designed with a single row,
multi-column table. Sorry, not impressed. Go help someone else.

My site may be badly designed because of bad or inefficient coding (probably
true), but the fact it breaks or doesn't validate doesn't mean anything by
itself.

The CSS black belts -- we all know who they are -- generally don't blindly
defend CSS. They acknowledge the limitations of CSS but are often able to
work around those limitations. Their response are usually backed up with
examples, code bits or meaningful discussion of the bad code. (And if one of
them could solve my print issue, I would bow down in the bright glow of
their brilliance. . .)

Not slagging CSS at all -- you can do some amazing visual stuff with it
otherwise not possible in HTML. That's why I'm here for help. But it's far,
far from perfect. . .

M
 
A

Alan J. Flavell

CSS works quite well on the whole, most times it just improperly
applied.
Click to expand...

I think the worst examples are from those kind of folk who take some
existing bag of parts that has been scrabbled-together with HTML/3.2
+/- proprietary extensions, and then insist on trying to translate
that mess, piece by piece, into CSS.

Typically, the results show all of the disadvantages of presentational
quasi-HTML - combined with the disbenefits of the "if only the web
could be DTP" deezyner mindset; and none of the benefits of aiming for
a relatively presentation-neutral HTML, with one or more stylesheets
aiming for flexible presentations on various classes of device.

I won't for a moment pretend that HTML and CSS are absolute ideals for
their purpose; but they're what we've got, and they /are/ far more
serviceable than the above exercises tend to indicate.

IMNSHO, things go much better if one starts from first principles with
a CSS-based design; explores what can be done flexibly and resiliently
in CSS, as against what tends to break at the slightest sight of a
variation in browsing situation, and then designs accordingly. And
puts out of one's mind these eternal calls for translating old (bad)
constructs by rote into new.

IMO and YMMV, natch.
 
M

Michael Laplante

Jonathan N. Little said:
Michael Laplante wrote:
Click to expand...
Keep saying it is not your CSS and all the absolute positioning, but if I
*disable* your CSS the complete document prints!
Click to expand...

Of course it would. Why wouldn't it? No mystery there.

Were you able to get margins though in IE and FF once you disabled the CSS?

(The original problem if you'll recall. . .)

M
 
M

Michael Laplante

Michael Laplante said:
Of course it would. Why wouldn't it? No mystery there.

Were you able to get margins though in IE and FF once you disabled the
CSS?
Click to expand...

To qualify:
Without setting them yourself via page / printer setup.

M
 
J

Jonathan N. Little

Michael said:
To qualify:
Without setting them yourself via page / printer setup.
Click to expand...

Page margins for printing are the user and browser not the website
designer and therein lies your problem. Want to control the printing
margins use PDF.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Flip-Cards with Local Images 1
When draggable=false & draggable=true dont work ? 1
Working on mobile css menu with plenty of frustration! 2
Help with code 0
Im having trouble containing a title an image and a button 2
DIV drawing on other div 4
Vertical Align a <DIV> 1

Members online

No members online now.
Total: 22 (members: 0, guests: 22)
Robots: 434

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top