TOT: HTML/css trick to selectively display parts of page

[John Stumbles]

ICCC or DoC? If the former I quite possibly used those at one time!

Had a Tek 4014 in the office I worked in up in RSM. People practically came to blows over access to it ;-)

[John Stumbles]

John prefers whatever he can get his brain around and works. And has a semblance of being maintainable. After a couple of late nights and burned out synapses I got something working*

using php, which isn't too cludgy. Even passes muster with W3C. PHP header with all the common-to-all-pages stuff, including the css (why bother with separate style sheets when the header is just one file shared between all the pages?) And fairly clean set of HTML content pages. And a PHP footer. There's aspects of the CSS I'd like to clean up but that's a job for more Tuits :-|

Thanks for the help folks.

• Tested on Firefox and Chrome on Linux - if anyone running other hw/sw can let me know of any problems there I'd be grateful.

[Mike Clarke]

Works fine on FreeBSD with Firefox 3.5 and Konqueror 3.5 Also Win XP with Internet Explorer 8, Firefox 3.6, Chrome 9.0, Opera

11.0 and Safari 4.0.

I've also tried Internet Explorer 6 on XP and Internet Explorer 5 on Win98. The layout gets quite messed up with these but is just usable (John, I could email you a screenshot if you're interested) but any user who chooses to stick with such old versions of IE will have plenty of other problems anyway.

[Dave Liquorice]

Nice, clean and tidy loads fast. Couple of minor things:

The image top left is scaled by the browser, some browers are not very good at scaling images. Might be better to make your own thumbnail for it.

In the left hand menu I can see why you have some items highlighted but to me it gets confusing. I like to see the item whose content I am seeing highlighted. You can still have the items you want attention drawn to with a different fill or what ever.

If it's in the header it is downloaded for every page reload. If it's a seperate file the browser will most likely cache it and it doesn't have to be downloaded.

Works fine on Mozzilla 1.7.12 under OS/2 Warp 3. B-)

[The Natural Philosopher]

Running well on Firefox 3.6.13 on Linux.

You should get a decent drawing program and resize the images though..downloading big ones and scaling them down is a waste of bandwidth..and browsers dont scale as well as a proper program does. Alternatively I haver PHP code the rescales on the fly..instead of linking to an image, you link to the program, that loads the image file, shrinks it and spits it out...

[Mike Barnes]

Glad it's going well - the site looks good here.

Just to clear up some confusion, attribution-wise. It was me, not Tim, that wrote "On balance...". And when I wrote "unlike John" it was I that got the attributions wrong and what I should have written was "unlike djc".

Why bother with separate style sheets? I agree, but if the section got very big and I was bothered about the quantity of data being downloaded, things might be different. And I have no idea whether browsers "compile" external css files to make rendering quicker.

[Dave Liquorice]

Define "very big" even a few k adds up over lots of page reloads.

I was wondering that as well. I don't know either.

[Tim Watts]

John Stumbles ( [e-mail]) wibbled on Monday 07 February

2011 08:34:

High Enegery Physics - next to DoC in Blackett.

Fancy...

Anyway - the WEEE blokes come tomorrow at 9am - do you want me to put 2 aside?

[John Rumm]

I thought you were replying to my comment on problems coming from having presentation and functional code in the same place...

Arggg - too many John's in this thread! ;-)

[John Rumm]

Even if not compiled, I would be surprised if they did not cache them in ram.

[The Natural Philosopher]

Sort of. Another great tip for smaller bandwith stuff is to compress the HTML

In php the key is to have this at the start of every page. Must be teh very frs statement

That tells the php to send the HTML zipped if the browser is happy to decompress.

Not worth it for small HTML and images are compressed anyway BUT its pretty useful if you have a lot of formatting commands. Loads of

[Bob Eager]

I did email you but looks as if it went astray - yes please, put 2 aside (or even 3, give me one for spares)...

If this is too late, so be it! My email address is (first name) (at) (last name) (dot) cx

[D.M.Chapman]

At the expense of more CPU load (at both ends - but you'll not really care about the client end).

Not an issue for most sites, but can become an issue on busy ones...

Darren

[Tim Watts]

John Rumm ( [e-mail]) wibbled on Monday 07 February 2011

15:08:

My middle name is John.

Does that help?

:->>>>

[Tim Watts]

Bob Eager ( [e-mail]) wibbled on Monday 07 February 2011 16:42:

OK - will do.

I have a couple of CRTs that didn't go on the first list so I'll swap them in.

Cheers

Tim

[djc]

me too!

[John Stumbles]

Wow, thanks for all that!

Yeah, if they're using crap like that they probably can't afford to get me to work for them anyway ;-)

[John Stumbles]

OK. I also need to get my brain around margins, padding etc as I'd like to have the image exactly fill the rectangular space where the sidebar and top bar meet. More rtfm/stfw and fiddling ...

I agree. I pinched the menu code from somewhere and it worked well enough, but I don't really understand it. One problem I've noticed is that if you resize the browser window small enough the menu disappears of the bottom of the screen with no way to access lower menu items! (I guess that would be a problem on mobile devices, though I don't have one to test on, just resizing the browser window.)

Also as the site grows (or I use the code on others) I need to be able to hide sub-menu items and have them pop up in some way. More stfw ...

point ...

Yebbut what about Amigas? ;-)

[John Stumbles]

It was a quick kludge to use the full-size graphic, though since the browser has already loaded it for the first page (with the big version) it should already have it cached so no bandwidth penalty. But I'll gimp it down to proper size when I've figured out what that should be.

[Tim Watts]

John Stumbles ( [e-mail]) wibbled on Monday 07 February

2011 23:24:

Google for "CSS Box Model" - there's a wikipedia wiki on that that covers it well. w3schools (google - it's a website) have loads of free interactive tutorials which are brillian because each deals with a single concept and you get to fiddle with the code and see what happens.

You can equally well just have the window permit scrolling, so you can scrollbar down.

Have a look at

and feel free to nick anything that is helpful (I wrote it). It's not exactly a showcase of seriously professional web doodery, but it's reasonably clean and works in everything back to IE8, bit crap but usable in IE7 and degenerates to a text mode browser cleanly.

I want to add a bit of JS to allow the menu to be click-collapsed/expanded by susection - that's my next job.