[Yet another layout]

Ok will do

Been playing with Typo3... pfff they should really explain those developers what usability is because this must be the least usable and intuitive CMS I've ever used. Very ugly interface filled with tons of forms and icons, steep learning curve, need to learn another scripting language for templates, and its code-base is simply huge. Now going to try out Civic Space, the CMS/portal spreadfirefox is using, hopefully this will be a better experience.

[Computer Trivia]

dpkg?

[Yet another layout]

Yeah, the pink is the default dreamweaver syntax coloring. I guess I like it because I'm used to it

I'll write another one, should have a look at some other CSS editors.

Those are secret W3C tags that allow you to embed mind screeners into your pages

btw, do you think these things are useful? The syntax coloring, line numbers and the stuff I've done with the reference table? I'm wondering if all this isn't a bit overkill, it's 20KB extra code, so if people aren't going to use it it's not worth the bandwith and loading time.

Also going to experiment with Typo3 now (http://www.typo3.org/) and I've purchased the domain name clientsidecoding.com I know it's not the name of my site but I think I'll use KWebref as network name and Client Side Coding as the name for this particular site.

[Yet another layout]

Been playing again after a busy week of school:

http://www.kvw.be/kwebref2/trick.html

now also features syntax coloring and the pre is rewrited to a table so if you select the code you don't select the line numbers.

There are still a few problems. When you remove the linenumbers the codebox isn't wide enough, and in IE it's not rendered as a pre, so lines will be wrapped when the browser isn't wide enough. The syntax coloring regexes also need some work, especially for comments.

http://www.kvw.be/kwebref2/reference_index.html

Now also features client-side table sorting

I can't take credit for all the code though. The table sorting and syntax coloring algorithms are some solid scripts I've found online and integrated into my own code.

If you want these scripts simply look in the html code to see how they're used. Each type of script has its own file, eg. tabs.js or tables.js and next to that a helper script all.js, misc.js or refIndex.js is needed, depending on what you wish to use.

You won't find any javascript or onclicks in the html though, it's all done with event handlers based on classnames. So if you use it be sure to check the html code of the elements that are changed and use the correct classnames.

[Javascript or other web page script]

Well if you want to get outside those restrictions I fear it's better to make a website from scratch.

Have you already tested that you can add html code to the webpage through the text input? If that works try this javascript, though I don't think it'll do the trick because onload needs to be set in the head AFAIK:

function resizeImg() {
var imgs = document.getElementsByTagName('img);
var imgl = imgs.length;

for (var i=0; i<imgl; i++) {
var curimg = imgs[i];
curimg.width = '';
curimg.height = '';
}
}

window.onload = resizeImg;

If that doesn't work try resizeImg() instead of window.onload = resizeImg

[Computer Trivia]

apt-get to be more precizely I suppose

[Javascript or other web page script]

Hmmm, I don't know if this will work because it depends on the following things:

- When submitting the text, does the script of the host convert special characters to entities? I mean it would convert < to < or > to >

In the case it's impossible to write any working html or javascript code in that textbox, the script will convert it to normal text with entities which a browser won't treat as html but as data.

- Are the images resized on the client-side (with javascript, jscript, vbscript, html) or on the server side (by the script/program the host is using)? If it's on the server side there's nothing you can do, because the real size of the image will be 250, so if you make it larger or smaller you'll stretch the pixels.

And I don't think you can enter an onload function in the body of a html doc. AFAIK the onload event handler needs to be set in the head or on the body element (<body onload="yourfavoritejsscript").

Why don't you look for another host? I asume this one is free, because if not it's really a waste of money.

[Yet another layout]

Well that's easy to implement actually, but I don't see the need. The toggle code is just to collapse the code box so it doesn't fill up the screen too much for the reader. So I don't really see the need to only output the number of lines.

The code coloring however will be quite hard, many regex and I'm not good at that. I guess I'll just copy stuff from that other script and give him the credits for the code coloring, will save me quite a bit of time and a headache

[Yet another layout]

Been playing with this a little more now. You can now toggle linenumbers and codeview and it works in FF, IE5/6 and Opera

[Yet another layout]

Busy working on this one again:

http://www.kvw.be/kwebref2/trick.html

If javascript is on you'll see styled code boxes. They aren't too beautiful yet but I'm working on the functionality now.

It will include the following stuff:

line numbers (finished)

alternating line colors (finished)

toggle visibility

toggle line numbers

print code

select code (not copy, doesn't work in FF)

code coloring

clickable elements in code that direct to the reference page for that element or attribute

I've been playing with a similar script:

http://www.dreamprojections.com/syntaxhighlighter/

But there are several problems with it. The syntax coloring doesn't work too well, it requires textareas instead of pre, it doesn't work in Opera or IE5, too much code for what needs to be accomplished, etc. If it's finished I'll package it so you can use it too

[Yet another layout]

You can see the code here (the addCellListener and removeCellListener functions, and to initialise the piece of code in installListeners, and the code at the top is needed for IE).

http://www.kvw.be/kwebref2/scripts/tabs.js

[Internet Explorer messing up my layout]

I'm using this for KWebRef:

<h1><a href="#" title="K-Webref"><img src="img/logo.png" alt="K-Webref: The client-side coding website for CSS, XHTML and AJAX" height="90" width="299" /></a></h1>

When images are off or with a text browser the alt text will be showed.

One thing I still need to look up about this method is search engine indexing. The h1 element is very important for your rankings and indexation because the h1 text is a search engine's primary source for keywords. So if the spider scans the alt text of an image there's no problem.

I've seen that A List Apart is using the same method so I guess it should be ok.

Another method, as Tim points out, is using image replacement. In that case you put text in your h1 tag and apply a background (the header image) to the tag.

To remove the text from screen do not use display:none. Recent experiments have shown that some text browsers and screen readers do read css and interprete display:none the same as a normal browser.

Use this instead:

h1 {text-indent: -9999px}

This method does bring some problems in certain situations. Lets say that you have a hidden title (eg. h2) for text browsers or screen readers (eg. to say that the following list is the navigation). If you use text-indent: -9999px the problem is that the h2 tag is still there, only the text is gone. So the result is that you'll have gap instead of text while you want nothing, not even that gap.

To remove that gap you have to add this: overflow:hidden and height:0

The overflow is for IE because IE intepretes height as min-height

And for your positioning problems I suggest floating both images left. I also never use images for headers, unless for the h1, just use <span id="headerimg"></span> and apply background, height and width to the span.

If there are problems with the floats in IE set height to 1% only for IE and add display:inline (experiment with both). Tim showed how to do stuff for IE only. You can also do stuff for FF only this way:

html>body>parentelements>element {}
or
body>parentelements>element {}

parentelements are the elements that are a parent of the element you wish to style, element is the element you wish to style. put a > before each element though. It's a special CSS selector IE can't read.

[Web designer's reference]

Ok, added.

Thanks for the link

[Yet another layout]

Thanks for the clue Lorian, that seemed to work well

Been debugging this page a lot now, seems that it renders differently for nearly every browser. Using some hacks now, and surprisingly FF and IE5 display it good now but IE6 not. But it doesn't look that bad, so...

I've moved the tabs back to their original place, seems to work ok now with the hack.

Also busy on a new page, the reference index:

http://www.kvw.be/kwebref2/reference_index.html

It's an attempt at making an accessable and usable table. Using lots of useful elements (tbody, thead, th) and obscure attributes (headers, axis).

To improve usability I did two things:

- the usual zebra style

- a little script that will highlight the column and row of the element on which you hover. Works in FF, IE5/6 but not too well in Opera yet :/

[Yet another layout]

Thanks for the interest guys

Could you have a look at http://www.kvw.be/kwebref2/trick.html again?

I'm a bit stuck here ATM, not sure if I wish to keep it this way.

The problem is again the related box, which is now at the bottom. Do you think that's ok?

I've put it there because of those code boxes. Since the related info box is floating and the code boxes have a border and background the code boxes will flow under the related info box when being next to it.

There were two sollutions to this problem: apply a margin to the code boxes or a clear. But both can't be used because they'll be either too small because of the margin or clear the right navigation.

another problem are the code boxes. These are pre elements meaning that white-space in the source code will be preserved (indenting and such). The problem is that those lines of code never get wrapped, so if one is too long it will make the browser window too wide.

That's not a problem really if the visitor has an adequate resolution, but I would like to know if anyone here sees a problem. If all the code boxes look ok it should be fine.

[Table or Div?]

I don't really understand the first question. A div is a block element, meaning that by default no other elements outside the div will be shown right or left from it. If the div has no height set its height will be determined by its contents. So the more contents, the higher it gets, and the content outside the div will be pushed downards.

Your second question can't be accomplished with CSS. You can set the height of the div to 100% though:

html file:

<div class="fullheight">somecontent</div>

css file:

.fullheight {height:100%;}

This will set it to 100% height of the browser window or the parent element, but if a user resizes the browser window vertically the div's height won't get resized.

This can be accomplished with javascript though.

You should also look into the min-height css property. It doesn't work in IE6, but it sets the minimum height of an element. If the element's content exceeds that height the element will get higher.

To overcome the problem of IE there's two things to know: in IE height works just like min-height, and IE doesn't support several CSS2 features. However, in Firefox height doesn't work like min-height, height is considered as the exact height of the element, it won't get higher.

Here's the code:

.mydiv {height:300px; min-height:300px}
html>body>div.mydiv {height:auto}

It works like this:

the first line is what both IE and Firefox see. It sets the minimum height for both browsers. But, IE won't read min-height but interprete height as a minimum height and firefox will read min-height but understand height as the fixed element height.

Only Firefox will read the second line. This line sets height to auto for Firefox so the height of the element can expand beyond the minimum height set on the first line.

I know it's hard to get this, but it's one of those many css hacks one needs to know.

Anyway, before you go designing css based layouts understand and learn these topics (search google for them, or check my stickied topic here)

- The CSS box model

- Box model hacks

- Making 2 and 3 column layouts with CSS

- understand the following css properties: float, position, height, width, min-height, min-width, padding, margin, border, display, background. Those are the ones you'll be using a lot for designing layouts.

[Yet another layout]

That will probably take a while because I want to do it right, make some revenue out of this and compete with other websites in this niche.

What I'm doing now are the first steps, making the layout and styles for everything. Then I'll need to either program a CMS to handle the services I want to offer or find a program that already supports that (Tim directed me to Wordpress, looking into that now).

The site will heavily rely on tags (called topic on my site). Each piece of content will get several tags. For example I write an article about creating such a box with tabs (like in trick.html). This article will get the following tags: tabs, css, javascript, accessibility, xhtml

So no real category stuff (well that will be there too: tips & tricks, references, glossaries, tutorials and resources) but tags. This will enhance searchability for the public at which I'm aiming (intermediate/advanced web developers looking for practical information).

Also, once the layout and CMS are finished I'll first write content to get started, which will also take quite some time.

So my best bet is that it'll be launched February-April 2006.

[Table or Div?]

np

btw, I know (and this included myself) that many people feel discouraged to use CSS because of the rather abstract way positioning works, the huge differences with tables and browser incompatibility.

I can assure you that designing with CSS is much easier and faster than tables once you really get a hold of it. It's hard to use it first, but eventually it'll be much easier and pleasant to work with and actually boost your creativity.

So, don't be discouraged by the steep learning curve, it will only benifit you in the end.

[Yet another layout]

Actually 7 bkg images: 4 for the corners (not fixed width), 1 for the right shadow, 1 for the bottom shadow and 1 for the gradient.

The right navbar box has a gradient btw, from dark to light, top-down. It's a very subtle one, but if you compare the previous version you'll notice a big difference.

[Yet another layout]

Yeah, page numbers would be cool

Ok, did most that was suggested here, thanks for the advice everyone

Have a look again at the last links I posted.

I've added a subtle gradient and shadow to the right nav and made other featured boxes (though they still need some work).

I was also thinking about adding a gradient to the gray rounded box at the top but that would require extra divs so I'm going to leave it this way. I've already applied a bit too much divitis to the footer :/

[Yet another layout]

Lol yep, thanks for finding out

[Yet another layout]

Got this currently, still working on the other suggestions:

http://www.kvw.be/kwebref2/

http://www.kvw.be/kwebref2/trick.html

I'm not sure about the left side yet, maybe I shouldn't have removed that part of it. Also the left side of the footer doesn't look good yet :/

[Table or Div?]

The only reason to use tables for layout is when you're designing a website of which you exactly know the public and know that this public has no specific accessibility demands.

Yet, that still isn't a good reason because using css positioning improves your website not only for accessibility.

Anyway, I'll explain why you should use CSS positioning:

Accessibility is probably the most important factor. The term means that your site can be used or is accessable by as many people as possible. You could compare it to stairs in a museum:

A website using tables for layout is like a museum that only has stairs. This means that the museum is not accessable for people in wheelchairs.

But a website using CSS positioning (and a whole bunch of other stuff, I'll explain that another time, or simply read the W3C WCAG guidelines) is like a museum with stairs but also offering an alternative for those stairs like an elevator or a wheelchair elevator.

Why aren't tables accessible? Blind people for example use a screen reader. That's a program that reads a website out loud and its output is based on the html code it's reading. If it's reading a table it will think there's tabular data. But in fact, with a table layout, there's no tabular data but a whole bunch of other stuff, so the screen reader will choke on it.

It goes beyong screen readers of course. Any device that reads html code will think that when it encounters a table tag tabular data will follow, it doesn't think that it's meant for layout.

Another good reason to use css positioning is html semantics, which is closely related to what I've already said. Semantics means that each html tag has a meaning. Example:

<strong> means an emphasized text, not a bold text

<p> means a paragraph, not a chunk of text with margins

<blockquote> means a quoted text, not indented text

So as you can see, html simply sais what the data between the tag means, not how it should look. So it is very important to use html for that purpose only, do not use it to style your data.

So how do you style your data then? CSS

Yet another reason not to use tables is code readability and maintainability. If you compare the code of a website using CSS positioning to the code of a website using tables you'll see that the table layout uses far more html tags and thus reduces code readability and maintainability.

If you see this:

<table><tr><td>blabla</td><td>blablabla</td></tr></table>

You don't know what blabla is

But if you see this:

<div id="welcomeText">blabla</div>

You know that blabla is welcome text

Another reason, good for your wallet, is that CSS takes far less resources. A CSS stylesheet only needs to be loaded once during a session, because it gets cached. HTML on the other hands needs to be loaded each time a page is loaded. So considering the fact that a CSS layout uses less tags this means that a CSS layout will also use less bandwith and loads much faster.

Why you should also use CSS is because it's being used more and more. There will be a point when you have to know CSS positioning, because eventually less and less people will be using tables and tables will become obsolete for designing layouts.

When CSS3 is going to be fully supported it will offer many more layout possibilities than tables (in fact CSS2 already does that), so if you want to use those features you better know your CSS well

[Yet another layout]

Thanks for all the suggestions Tim, I'll look into everything

About the tabbox, it was actually intended to make it stand out more because it is there to direct people to other content in which they might be interested. I'm a bit afraid that people might look over it when it's on the right side.

But I'll float it right again because I think that it stands out a little more with the tabs and darker color than it does when javascript is disabled.

Thanks for the book image btw

[Yet another layout]

Found a sollution

So there can be two situations: javascript is off or the particular functions are not supported, or javascript is on and fully supported.

With javascript on the tabs will be built and a specific css class will be used for the tabs. So the absolute positioning and such will be enabled by javascript. To overcome the overflow problem javascript will calculate the height of the contents of the tab box and apply that height to the container of the tab box so that content will beautifully flow around it instead of being hidden under it.

With javascript off no tabs will be shown, only a list of links with a header for each category (articles, topics, links).

Got it working, only have to make additional styles for non-tab version.

EDIT:

Ok have a look now, it works as expected.

http://kvw.be/kwebreflayout/trick.html

So if you have a look with Firefox with JS turned on you'll see the tabs and the text flowing around it.

Now turn JS off (extra, options, web functions) and hit refresh. Now you see a normal styled list with headers and links

And the stick is gone too btw