Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS for HTML 4.01 Strict

Reply
Thread Tools

CSS for HTML 4.01 Strict

 
 
Oli Filth
Guest
Posts: n/a
 
      12-15-2004
I'm writing a small website using HTML 4.01 Strict (as an experiment to see if
it's worth the effort of unlearning Transitional practices). As I understand it,
the purpose of Strict is to completely separate content (HTML) from presentation
(CSS), and to markup the HTML semantically rather than presentationally.

However, whilst all my pages will have the same header, navbar, background,
fonts, etc., the main content layout will vary quite considerably from page to
page. For instance, some pages will have a large left-floated image with
justified text on the right, others will have predominantly centred content,
whilst others may have left-aligned content with right padding (for example).

My question is, how to define the CSS? As each page's layout is fairly
different, should each page have its own, specific CSS file, with global styles
(like fonts and colours) defined in a global CSS file? Or should all the CSS be
packed into one file, with multiple id definitions (one for each page) one after
the other? Both methods seem like they could be hard to maintain. Is Strict HTML
even appropriate for sites where content layout varies considerably?

TIA,
Oli
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      12-15-2004
Oli Filth wrote:

> My question is, how to define the CSS? As each page's
> layout is fairly different, should each page have its own,
> specific CSS file, with global styles (like fonts and
> colours) defined in a global CSS file?


That's one possibility.

> Or should all the
> CSS be packed into one file, with multiple id definitions
> (one for each page) one after the other?


Yup, also possible.

> Both methods seem
> like they could be hard to maintain. Is Strict HTML even
> appropriate for sites where content layout varies
> considerably?


Yup, especially because of that varying content layout.
I suppose you still have a lot of stuff in common on most of
your pages, even in the content area, like colours, type of
borders, font-styles, the way images are floated, etc.

If for instance pages x, y and z have centered content, while
the others are left aligned, you could give each page it's own
id, and saying in the stylesheet:

#content{text-align:left;}
#x,#y,#z{text-align:center;}

Then if you ever want to change those pages to right-aligned
and making pages a, b and c centered, you simply change your
styles to:

#content{text-align:left;}
#x,#y,#z{text-align:right;}
#a,#b,#c{text-align:center;}

See how that's quicker than changing 6 stylesheets for 6
pages?

Any styles that are for one page only, I've put in the main
file, by using classes with descriptive names.
Only the navigation is in a seperate file, as some pages have
a horizontal menu, while most have a left floated one.

Also I have recently separated all colour styles on my site
into a separate colour stylesheet. That way I can change the
colours in a couple of minutes, cause I don't have to skip
through a long stylesheet find them, and they work throughout
the site.

By using presentational markup or inline styles, you'd have to
go into every single page to change stuff site-wide.

One stylesheet for every page (even if only for the content
area) is hardly better, wrt maintenance imo.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Deep Purple - Sail Away
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      12-15-2004
Els wrote:

> If for instance pages x, y and z have centered content,
> while the others are left aligned, you could give each page
> it's own id, and saying in the stylesheet:
>
> #content{text-align:left;}
> #x,#y,#z{text-align:center;}


That should be:
#content{text-align:left;}
#x #content,
#y #content,
#z #content{text-align:center;}

> Then if you ever want to change those pages to
> right-aligned and making pages a, b and c centered, you
> simply change your styles to:
>
> #content{text-align:left;}
> #x,#y,#z{text-align:right;}
> #a,#b,#c{text-align:center;}


#content{text-align:left;}
#x #content,
#y #content,
#z #content{text-align:right;}
#a #content,
#b #content,
#c #content{text-align:center;}




--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Deep Purple - Strange Kind Of Woman
 
Reply With Quote
 
Mitja
Guest
Posts: n/a
 
      12-15-2004
On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
<(E-Mail Removed)> wrote:

> However, whilst all my pages will have the same header, navbar,
> background, fonts, etc., the main content layout will vary quite
> considerably from page to page. For instance, some pages will have a
> large left-floated image with justified text on the right, others will
> have predominantly centred content, whilst others may have left-aligned
> content with right padding (for example).

Is this just for kicks / supposedly better looks or is it in some way
connected with the content?

> My question is, how to define the CSS? As each page's layout is fairly
> different, should each page have its own, specific CSS file, with global
> styles (like fonts and colours) defined in a global CSS file? Or should
> all the CSS be packed into one file, with multiple id definitions (one
> for each page) one after the other? Both methods seem like they could be
> hard to maintain. Is Strict HTML even appropriate for sites where
> content layout varies considerably?

It's appropriate for pretty much everything; the thing with your
particular example is that by separating content and style (which BTW does
not require Strict HTML) isn't much of a gain. So instead of saying "Both
methods seem like they could be hard to maintain" I'd rather go for "They
don't seem much easier to maintain than the non-CSS version".
I think it's still worth the migration, at least you'll control the style
of navigation, headers etc globally. Using one big CSS file like Els
suggested could also be an improvement, depending on the number of
subpages you've got.
If there is a limited number of layouts, the best way to go is one main
css and several others, each representing the oddities of a single layout.
For each HTML file, use the central css and one of the others then.
If style is very variable and tightly bound with content like I mentioned
at the beginning, I'd maybe even say stuff it and go with inline styles,
yet as sparsely as possible (e.g. only padding and alignment; and floats
for pics).

Do you have the current, non-css version of your page somewhere to see?
It'd be easier to judge then.


--
Mitja
 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      12-15-2004
Mitja wrote:
> On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
> <(E-Mail Removed)> wrote:
>
>> However, whilst all my pages will have the same header, navbar,
>> background, fonts, etc., the main content layout will vary quite
>> considerably from page to page. For instance, some pages will have a
>> large left-floated image with justified text on the right, others
>> will have predominantly centred content, whilst others may have
>> left-aligned content with right padding (for example).

>
> Is this just for kicks / supposedly better looks or is it in some way
> connected with the content?
>


It's a combination of experimentation, and also to suit the purposes of
different pages. Some are mostly textual (mostly long paragraphs) hence
justify-aligned, whereas others are more oriented towards graphics/lists (I
prefer the entire content centred for this kind of page).

>> My question is, how to define the CSS? As each page's layout is
>> fairly different, should each page have its own, specific CSS file,
>> with global styles (like fonts and colours) defined in a global CSS
>> file? Or should all the CSS be packed into one file, with multiple id
>> definitions (one for each page) one after the other? Both methods
>> seem like they could be hard to maintain. Is Strict HTML even
>> appropriate for sites where content layout varies considerably?

>
> It's appropriate for pretty much everything; the thing with your
> particular example is that by separating content and style (which BTW
> does not require Strict HTML) isn't much of a gain. So instead of
> saying "Both methods seem like they could be hard to maintain" I'd
> rather go for "They don't seem much easier to maintain than the non-CSS
> version".


This is what I'm trying to find out; whether it's actually worth all the effort
to move to Strict and think of clever ways to define the styles. I was also
trying to find whether there were alternatives to the CSS layouts that I hadn't
thought of.

> Do you have the current, non-css version of your page somewhere to see?
> It'd be easier to judge then.


I've hacked together how the site used to look, in non-Strict HTML (Please don't
bother to look at the HTML or CSS, like I said I hacked it back together quickly
as a visual demo, so most of the code is pretty awful.) Also note that a lot of
the content is also missing at present.

http://olifilth.co.uk/cillitbang/

As you'll see, the layout style isn't wildly variable, but just enough not to be
able to wrap it up in some generic CSS (as far as I can see).

Thanks for your help ,
Oli
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      12-15-2004
in alt.html, Oli Filth wrote:
> Mitja wrote:
> > On Wed, 15 Dec 2004 15:34:52 GMT, Oli Filth
> > <(E-Mail Removed)> wrote:


> >> My question is, how to define the CSS? As each page's layout is
> >> fairly different, should each page have its own, specific CSS file,
> >> with global styles (like fonts and colours) defined in a global CSS
> >> file? Or should all the CSS be packed into one file, with multiple id
> >> definitions (one for each page) one after the other? Both methods
> >> seem like they could be hard to maintain. Is Strict HTML even
> >> appropriate for sites where content layout varies considerably?

> >
> > It's appropriate for pretty much everything; the thing with your
> > particular example is that by separating content and style (which BTW
> > does not require Strict HTML) isn't much of a gain. So instead of
> > saying "Both methods seem like they could be hard to maintain" I'd
> > rather go for "They don't seem much easier to maintain than the non-CSS
> > version".

>
> This is what I'm trying to find out; whether it's actually worth all the effort
> to move to Strict and think of clever ways to define the styles. I was also
> trying to find whether there were alternatives to the CSS layouts that I hadn't
> thought of.


Sure.

> > Do you have the current, non-css version of your page somewhere to see?
> > It'd be easier to judge then.

>
> I've hacked together how the site used to look, in non-Strict HTML (Please don't
> bother to look at the HTML or CSS, like I said I hacked it back together quickly
> as a visual demo, so most of the code is pretty awful.) Also note that a lot of
> the content is also missing at present.
>
> http://olifilth.co.uk/cillitbang/
>
> As you'll see, the layout style isn't wildly variable, but just enough not to be
> able to wrap it up in some generic CSS (as far as I can see).


Certainly best to do it using strict and CSS. I would think that you need
maybe 20-40 lines of CSS.

About other stuff, monospace courier type font with justify align and
short width, white on black, with italics here and there is pain to read.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
 
Reply With Quote
 
Mitja
Guest
Posts: n/a
 
      12-15-2004
On Wed, 15 Dec 2004 19:41:27 GMT, Oli Filth
<(E-Mail Removed)> wrote:

>>> My question is, how to define the CSS? As each page's layout is
>>> fairly different, should each page have its own, specific CSS file,

>
> http://olifilth.co.uk/cillitbang/
>
> As you'll see, the layout style isn't wildly variable, but just enough
> not to be able to wrap it up in some generic CSS (as far as I can see).


That doesn't look all that bad.
Most of the content is centered, so I'd go with that as a default. Then
see if you really have to (alright, "have to" is a bit strong. want to,
even) use the justified paragraphs.

Anyway, what differences there are IMO definitely not worth using multiple
css files. Now for the little specialties.

Bio page: If you decide to keep the alignment, I recommend something like
<P class="longtext"> that can be reused elsewhere (e.g. Music page,
although I don't really see a point of justifying the text there). BTW, a
nice Cillit , though it'd look better saved as png. For it, use
float:left; since it's a very special case, probably with <img
id="cillitlogo" ...>

The Band page: Get rid of the table (google for tableless layouts, if you
will). Use something along the lines of
<div class="bandmember">
<img ...><h3>John Smith</h3> (assuimg h1 for "Cillit", h2 for "members")
He's a jolly nice fella, etc etc.
</div>
..bandmember { float:left; width: 20% }
..bandmember img { display: block }

Comments page: no problem here. Everything's standard except for the blue
boxes, each of which is a small world in its own right. So it's <div
class="comment">comment <div class="commentauthor">Oli, 12. 12.
04</div></div> and appropriate css.

AFAICT there are no other things that need special treatment. So one css
file it is, with a main section and several small sections dedicated to
subpages that are a bit special. Optionally, use main.css and special.css
(or something).

No need to be that shy
I peeked at the supposedly makeshift HTML and it's very nice and clean.
You can't separate content and style much more than you already did, you
can only add a bit of polish.

Concerning style as such...
I don't agree too much with Lauri about it being hard to read. But it's a
page with small quantities of text, so you really could blow it up
artificially a bit. Size up the fonts by a few percent, add some more
padding here and there...
And I guess some more color consistency would also look nice (white text,
blue header, yellow navigation, red links all stuffed together...).

--
Mitja
 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      12-15-2004
Mitja wrote:
> On Wed, 15 Dec 2004 19:41:27 GMT, Oli Filth
> <(E-Mail Removed)> wrote:
>
>>>> My question is, how to define the CSS? As each page's layout is
>>>> fairly different, should each page have its own, specific CSS file,

>>
>>
>> http://olifilth.co.uk/cillitbang/
>>
>> As you'll see, the layout style isn't wildly variable, but just
>> enough not to be able to wrap it up in some generic CSS (as far as I
>> can see).

>
>
> That doesn't look all that bad.
> Most of the content is centered, so I'd go with that as a default. Then
> see if you really have to (alright, "have to" is a bit strong. want to,
> even) use the justified paragraphs.
>
> Anyway, what differences there are IMO definitely not worth using
> multiple css files. Now for the little specialties.
>


Yes, I was coming to the same conclusion. I think I'll stick with centred
alignment as the default for my DIVs.

> Bio page: If you decide to keep the alignment, I recommend something
> like <P class="longtext"> that can be reused elsewhere (e.g. Music
> page, although I don't really see a point of justifying the text
> there). BTW, a nice Cillit , though it'd look better saved as png.
> For it, use float:left; since it's a very special case, probably with
> <img id="cillitlogo" ...>
>


Wouldn't I end up with the IE-not-supporting-PNG-transparency problem?

> The Band page: Get rid of the table (google for tableless layouts, if
> you will). Use something along the lines of
> <div class="bandmember">
> <img ...><h3>John Smith</h3> (assuimg h1 for "Cillit", h2 for "members")
> He's a jolly nice fella, etc etc.
> </div>
> .bandmember { float:left; width: 20% }
> .bandmember img { display: block }
>


Yup. I'm in the process of pulling out tables at present, e.g. the nav bar
started life as a table, but after much hassle and research I found how to do it
with an inline list.

> Comments page: no problem here. Everything's standard except for the
> blue boxes, each of which is a small world in its own right. So it's
> <div class="comment">comment <div class="commentauthor">Oli, 12. 12.
> 04</div></div> and appropriate css.
>
> AFAICT there are no other things that need special treatment. So one
> css file it is, with a main section and several small sections
> dedicated to subpages that are a bit special. Optionally, use main.css
> and special.css (or something).
>
> No need to be that shy
> I peeked at the supposedly makeshift HTML and it's very nice and clean.
> You can't separate content and style much more than you already did,
> you can only add a bit of polish.
>


Thanks! I was in the process of converting to Strict, so I'd pulled out most of
the styling from the HTML already. But then I shoved stuff back in a bit of a
hurry when you asked to see the site, so it's a little inconsistent from page to
page.

> Concerning style as such...
> I don't agree too much with Lauri about it being hard to read. But it's
> a page with small quantities of text, so you really could blow it up
> artificially a bit. Size up the fonts by a few percent, add some more
> padding here and there...
> And I guess some more color consistency would also look nice (white
> text, blue header, yellow navigation, red links all stuffed together...).
>


I'm quite a fan of the white on black; I find it less straining (than e.g. black
on white), but I appreciate Lauri's point, as everyone has their own tastes. As
for monospace, I find it gives the page just the look I wanted, so I think I'll
stick with it. But yes, it's probably worth bumping up the size, as there's not
going to be too much more text for a while.


Thanks very much for your comment and advice, they've been very helpful .

Oli
 
Reply With Quote
 
Mitja
Guest
Posts: n/a
 
      12-16-2004
Oli:
> Wouldn't I end up with the IE-not-supporting-PNG-transparency problem?


IE does support PNG transparency, what it's having trouble with is the
full use of alpha channel, e.g. utilizing 47% transparency. As long as you
stick with areas that are either fully opaque or fully transparent,
everything's fine.
And then, if jpg was fine with you, so should be a png with black
nontransparent background - so no possible transparency issues at all.
jpg is alright too, but it screws at the borders of your image - they
bleed yellow and are therefore too bright.

--
Mitja
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      12-19-2004
in alt.html, Oli Filth wrote:
> I'm quite a fan of the white on black;


Maybe little less white, or less black? Even Black on white is too big
contrast usually...

> I find it less straining (than e.g. black on white),


But it surerely is worse than black on some off-white etc.

> but I appreciate Lauri's point, as everyone has their own tastes. As
> for monospace, I find it gives the page just the look I wanted, so I
> think I'll stick with it.


OK. But don't use justify. It don't work on web as there is no
hyphenitation, and it somehow looks very strange with monospace font...

> But yes, it's probably worth bumping up the size, as there's not
> going to be too much more text for a while.


I hope you don't mean fontsize - it would make it even less readable...
Don't touch fontsize, please...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Declaring as HTML 4 strict or HTML 5? Gus Richter HTML 0 02-13-2013 02:34 AM
Re: Declaring as HTML 4 strict or HTML 5? Tim Streater HTML 4 02-13-2013 01:00 AM
Re: Declaring as HTML 4 strict or HTML 5? Lewis HTML 0 02-12-2013 11:10 PM
Trouble using CSS boxes with "strict" HTML Geoff Hague HTML 1 08-06-2004 09:56 PM
Form in Html 4.01 strict and CSS Luigi Donatello Asero HTML 55 02-07-2004 02:46 AM



Advertisments