wrong borders on site

[Tomi]

This seems to be nice solution, but style2.htm contains some upper-case tags and some tags that aren't closed (e.g. th). Of course, browsers have to tolerate those "flaws" in order to support many pages, but it's still better to be aware of them.
(Note: however, the upper-case tags appear just in the footer of the page that's not related to the CSS example itself and also seem to be inserted by hosting provider, so that may not be your fault.)

[Francesco]

Yes Tomi, you're right. The footer tags, containing the JavaScript codes, are added by the host when serving the page, if you look at the archive you'll see that they do not appear.

About the missing closing tags, you can see from the latest HTML4 specs (dating some years ago) that they are optional. If you think about it, those tags belong to a table and they define cells, so, when a new cell is started, the old one has to be closed automatically. So the flaw is to put them, not to omit them

[Tomi]

Yes I know that they're optional (in HTML), but I consider a code that has them cleaner. Why exactly should it be a flaw to include them?

Btw, how can you tell if the document is in HTML4? It doesn't have a doctype!

[Francesco]

ehehe, I know I did not include the document declaration, my fault!

Anyway, since for "flaw" I meant "something more, but not necessary", I considered it matching more to "adding end tags" than to "omitting end tags". My fault again, I mistaken it for "flavour"

[Martijn]

Thanks, Francesco! I will use this for the rest of my site!
I will have a look at WYSIWYG. But I still prefer an editor, because it saves a lot of time. And because you can see everything very clearly.

But can you use two CSS files simultaneously? If I use your CSS file as a second one, then should I write something different in the HTML code, or just two times: <link rel="stylesheet" type="text/css" href="name_of_file.css"> ?

If everything goes as I want, my whole site will be redesigned soon! I will let you know. If I have further questions, I will post them here.

[Francesco]

WYSIWYG is the short for "what you see is what you get" meaning nothing more than a visual editor like FP, Nvu, DW and so on - it's not limited to Html editors, so you could find this "word" (better to say "this acronym") even with other things.

You can use different stylesheets on the same page, adding a line exactly as you wrote.

For example, you can make a CSS file that contains the various sizes, positions and so on, and you call it "structure.css".
Then you could make another CSS file with the various colors, font properties and so on, and you call it "color_theme.css".

You link them both in the Html page and then the tags contained will refer to both CSS files.

I'm going to make an example of it, but right now I'm at work. Check this thread some later.

[Francesco]

So, here are my examples.

The first one has only one CSS link, the structure, and this is its appearance:
http://spazioinwind.libero.it/entuland/ ... table1.htm

The second one has a second CSS file linked, which adds the colours:
http://spazioinwind.libero.it/entuland/ ... table2.htm

The third one has a third CSS file, which contains an alternate colour scheme. It seems the same, but if you open it with FireFox or Opera you could change the style scheme.
http://spazioinwind.libero.it/entuland/ ... table3.htm

In FireFox, click on View > Page Style > Green (maybe the menu texts are different, I'm translating them from Italian, but you should be able to find the option I mean).

In Opera, click on View > Style > Green (in this case I'm sure, I've got it in English).

The link to the archive is in the third version's page.

I've provided a version with the alternate scheme just to push you a little toward learning CSS - or maybe a little back, if you don't like the alternate option!

Only be aware that alternate views, used in this way, need to be activated manually by the user at each refresh of the page. If you want allow the user to choose a scheme and to keep it while browsing your site, you need to add some scripting and a cookie to store the settings.

Good work!

[Francesco]

There is another thing that maybe you would like to know.

CSS stand for Cascading Style Sheet, and this is meaningful.

The options that you set (being them only in a CSS file, or even in several files *and* in inline stylesheets) can contradict one another. This is solved by the browser by applying them in the order that you give to them, so you will see the effect only of the *last* conflicting statement.

Take a look to "structure.css", it has a line setting to "1px solid black" the bottom border of div.tabletitle. Now look at "maroon.css": it sets it to "2px solid maroon".

The result in "table2.htm" is as expected: that bottom border is set to 2px solid maroon. This is due to the fact that "maroon.css" is mentioned *after* "structure.css" in the <head> section..

Try to change the order of the two <link> tags and you will see that the border will be set back to 1px solid black, while the other parts will be rendered normally, just like you didn't change a thing.

Maybe it can add some confusion to you, but since this is one of the most important things to know about CSS, I had no other chance than reporting it to you.

Here I am, if you need more explainations, I'll be glad to help

[Martijn]

Thanks a lot for this, Francesco! I used your work for the Diam Diam page first, and the result is this (note that I've changed the css file name 'maroon' into 'DiamDiam_colours', because I changed it a bit, suitable for the Diam Diam page):
www.bd-fans.com/Temp/diamdiam.zip

The problem with me is, that I understand the CSS files and how it all works, but that I'm still too unexperienced to make it all myself!

So I've still a few questions left...

- The text inside the tables has to be a better, darker colour (with a sharper contrast). For somehow reason the option 'color: ...' didn't work when I put it in the CSS file 'DiamDiam_colours.css' under the heading 'table {'.
- The links inside the tables (not outside) have to be another colour, for the same reason as above.
- The screenshots have to be centered, but that didn't work either. And maybe a little bigger gap between the screenshots would be nicer, if possible.
- The first row of the 'levels' table (with 'levelset name', 'number of levels' etc.) is alright with a little gap between each cell. But maybe all the rows below (with the downloads etc.) could have a smaller gap or so? To make difference between the first row and the rest. And maybe the background colour of the first row could be a little bit different (darker maybe) from the rest of the table?
- The relation of the cells is not correct. For example, the 'Number of Levels' column does have too big a width (while it needs to be not wider than the width the text 'Number of Levels' takes), while the 'Notes' column is far too small! If I type a note of normal size there, then one row will look like 10!

Well, hope you can help.

[Francesco]

Here I am.

Some notes about the files you provided:

The last rule of DiamDiam.css misses the closing curly brace.

Several rules omit to set the "background-color" while setting the "color", others do the inverse, setting the "background-color" while omitting the "color".

These are not errors, but a CSS validator will report them as "warnings". This is done to let you notice that you could, for mistake, set a black text on a black background. This would result in a line "not readable by human eyes".

Notice that even if this is only a "warning" for CSS, you *could* be penalized by a directory or by a search engine, or your page could be put in the last places of a search result, because of it. But you didn't, just risqued to.

Some search engines penalize the pages where the text has the same colour of the background, since it has been used as a trick to add relevant words to a page without showing them to the user. Be aware of that.

Since I've done the same with the CSS files I provided to you, I've fixed them.

Another thing you could be penalized for is if you set keywords that *do not* appear in the body part of the page. Since different engines act differently, you could ignore my words, but if you want a good positioning on the search results, be aware that there are a lot of different things that affect it - number of keywords, number of other pages linking to yours (very important), keywords matching body content, "invisible" texts (as said above) and tons of other things, which vary from engine to engine and from time to time.

The search for a good positioning passes through hell

Here are your points:

- The text inside the tables has to be a better, darker colour (with a sharper contrast). For somehow reason the option 'color: ...' didn't work when I put it in the CSS file 'DiamDiam_colours.css' under the heading 'table {'.

Don't know why it didn't work, anyway now it does.

- The links inside the tables (not outside) have to be another colour, for the same reason as above.

I've added three rules so any link inside a table has to be rendered in black. Change the different ":active", ":visited" colors as you prefer.

- The screenshots have to be centered, but that didn't work either. And maybe a little bigger gap between the screenshots would be nicer, if possible.

I've added a rule setting some padding for <img> tag (in structure.css). It will affect them all, if you want different image's padding, add a rule with a class name and change the relative Html code.

- The first row of the 'levels' table (with 'levelset name', 'number of levels' etc.) is alright with a little gap between each cell. But maybe all the rows below (with the downloads etc.) could have a smaller gap or so? To make difference between the first row and the rest.

Honestly I don't know how to do it, maybe Tomi can help with that.

And maybe the background colour of the first row could be a little bit different (darker maybe) from the rest of the table?

Done!

- The relation of the cells is not correct. For example, the 'Number of Levels' column does have too big a width (while it needs to be not wider than the width the text 'Number of Levels' takes), while the 'Notes' column is far too small! If I type a note of normal size there, then one row will look like 10!

The tables are set to change dynamically according to the content. Try filling them to see if you like the way they act.
Otherwise, set the column widths from Html.

I'm too lazy to put the files on my server again, so here are the two CSS files:

Code: Select all

/*DiamDiam_colours.css*/
div.tabletitle {
	border-bottom: 2px solid #6A0035;
}
table {
	background-color: #6A0035;
	color: black	
}
th {
	background-color: #FF8000;
	color:black
}
td {
	background-color: #FFAD15;
	color:black
}
table a { /* not visited, not active */
	background-color: #FFAD15;	
	color:black
}
table a:active {
	background-color: #FFAD15;	
	color:black
}
table a:visited {
	background-color: #FFAD15;	
	color:black
}

Code: Select all

/*structure.css*/
div.tabletitle {
	text-align: center;
	font-size: 13pt;
	font-style: italic;
	font-weight: bold;
	width: 80%;
	margin-left: 10%;
	border-bottom: 1px solid black;
}
table {
	text-align: center;
	border: 1px solid black;
	padding: 15px;
	width: 80%;
	margin-left: 10%
}
th {
	border: 2px solid black;
}
td {
	border: 1px solid black;
}
/* If you don't need empty cells, delete the following rule.
 It's intended to hide the empty cells, otherwise they will show their background color. Obviously you need to refer to this class in the Html code*/
td.empty { 
	background-color: transparent;
}
img {
	padding: 10px
}

Maybe the best thing is to make a single CSS file containing all the rules (if you are not going to make pages that will need only one or two of these CSS files) so the whole thing will be easier to modify.

PS: Notice that the word "gay", that you used in the DiamDiam page, even if it's perfectly correct English, has a negative meaning in some other languages - in Italy it's a despising word meaning "homosexual". Maybe it's better to avoid it, just to quit the problem to the people who doesn't know its correct meaning.

[Tomi]

- The first row of the 'levels' table (with 'levelset name', 'number of levels' etc.) is alright with a little gap between each cell. But maybe all the rows below (with the downloads etc.) could have a smaller gap or so? To make difference between the first row and the rest.

I was able to produce something like that (if I understood it correctly), but the code was very ugly and used nested containers... so first let me show you another idea: remove TH border rule from structure.css and TH background rule from DiamDiam_colours.css, and voila! There *is* a difference between it and the rest, and it looks cool.

If you don't like it, then here is your original plan. First, normal gap is very small, so it's better to make gaps in first row wider instead. That would normally be accomplished with "margin" CSS property, but it doesn't seem to work for table cells. So I made it like this: I created nested DIV container inside each TH, and then added this to CSS: (maybe structure.css?)

Code: Select all

/* first, remove TH border and background from the other files */
th {
  margin: 0; padding: 0; /* just to be sure */
}
th div { /* = all div-s inside th */
  margin: 0 3px; /* 0 at top,bottom and 3px at left,right */
  border: 2px solid black;
  background-color: #FFAD15;
}

The nested div-s looked like this: <table> ... <th><div>Levelset name</div></th> ... </table>

[Francesco]

They both seem nice ideas to me, Tomi, Martijn will choose the one that he likes more.

Martijn, remember to add a "color" setting to the "th div" rule, if you are going to use the second solution provided by Tomi.
Is enough to add a line stating "color: inherit;", so you don't have to change it if you want to change the "th" texts colors.

[Martijn]

Okay, thanks Tomi and Francesco!

Now everything works, except one thing: the screenshots table's left margin is not equal to the right margin. it's not centered. don't know where to change this... changing the padding would change all tables...

This is the page as it looks now:
http://www.bd-fans.com/Temp/diamdiam.zip

About using the word 'gay' instead of 'merry' or 'cheerful': I knew that and did it by intention But it's a bit silly. I changed it, because I also think it's a bit stupid and maybe it has a deterrent effect (though my site is not about gays and it's not my intention to do that either).

[Tomi]

Before looking at the new version of the page, I've got another interesting idea: what about using an image instead of text as a heading? (Note: this post won't be useful if you don't have some image like that, but "logos" are very easy to create in some programs, e.g. GIMP)
Instead of using <img>, there is a better solution named Fahrner Image Replacement (http://www.stopdesign.com/articles/replace_text/). It works like that: you have a HTML code like <h1 id="heading"><span>Martijn's Boulderdash site</span></h1>. Then you apply the following CSS:

Code: Select all

h1#heading {
  width: 500px;
  height: 300px; /* let's say the image is 500x300 */
  margin: 0;
  padding: 0;
  background: url("/images/logo.png") no-repeat;
}
h1#heading span {
  display: none; /* hide the text */
}

So you have h1 element that's sized like the image and has it set as a background. Even browsers that don't support CSS are OK. Unfortunately, this solution has one disadvantage: screen readers (which can't show the image) should read the text, but because it's not displayed, they ignore it (they are *screen* readers). We'll solve it like this: instead of "display:none", we'll just move it beyond left screen edge:

Code: Select all

h1#heading span {
  position: absolute;
  left: -1000px;
}

Voila!

P.S. I found very good HTML+CSS guides at http://www.htmldog.com/

[Francesco]

I've re-arranged all the CSS rules in a single sheet, and I've solved (more or less) the problem about the screenshots' table.

But I've forgot to upload all the stuff!

Into a couple of hours I'll show you the new outlook of your page. Hope that you will like it, I've added some sparkles here and there

Check back later.