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.
