wrong borders on site

Anything R'n'D unrelated.

Moderators: Flumminator, Zomis

Post Reply
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

Well, maybe Tomi knows how to let it look fine in Internet Explorer. Another thing is the menu: the effect of moving your mouse over the links, doesn't work there and the colour is not brown but light yellow.

But I see that the menu automatically coming along when scrolling down doesn't work anymore. What do I have to insert to have that effect back again?
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

For bad luck you can't have both the fixed menu and the scrolling AD, I've removed the fixed rule just to let the AD show completely.

Maybe you can concordate another kind of AD box with your provider, something like a banner or an horizontal bar.

The best way would be to get rid of the AD, but it's up to you wheter keeping it or not.

About the menu colors in IE, change CSS in this way:

Code: Select all

#menu a {
        text-decoration: none;
        background-color: inherit;   
        color: #ffc246;
        font-weight: bold;
        font-size: 0.9em;
        font-style: italic;
}

#menu a:hover {
        text-decoration: underline;
        color: #fedc9c;
        background-color: inherit;
}
In effect there was no need for the opacity rule in this case, and now it works fine in IE. Change the colors as you prefer :)
Anyway, by the way, have fun!
Francesco
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

Okay, everything works now, except the screenshots table in IE. But I asked it on a Firefox forum, maybe the guys there know how to do it.

But now I was making the default.css file in the same way. Everything is okay now, but the last text doesn't work for somehow reason, while it looks good.
Could you have a look at it?
here it is:
http://www.bd-fans.com/Temp/index.zip

Thanks in advance!

*EDIT*

I discovered that the game tables don't work properly either. The text is not placed next to the screenshot but below and the background colour has disappeared.

Previously, it looked like this:
http://www.bd-fans.com/Temp/freewarejava_before.zip

and now, it looks like this:
http://www.bd-fans.com/Temp/freewarejava.zip

Could you also help me with this? I'm nagging very much, I know, but if the redesiging is ready, I can go on with my site!
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

okay Francesco,

Here is the file you asked for by PM:
http://www.bd-fans.com/Temp/diamdiam.zip
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

The file seems to be corrupted. I can't open it, Martijn, check it out.
Anyway, by the way, have fun!
Francesco
Zomis
Posts: 1502
Joined: Mon Jun 21, 2004 1:27 pm
Location: Sweden
Contact:

Post by Zomis »

The file works fine for me...
I tried repacking it, see if any of these files works for you, Francesco:
http://www.zomis.net/temp/diamdiam.tar
http://www.zomis.net/temp/diamdiam2.zip
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Okay, now I've opened it (thank you Zomis!), but I'm not so sure about what's wrong with "last text" tag...

Another thing: in the PM I was referring to freewarejava's page when I asked for the missing pictures, please put them all ("before" and "after" pages included) in a further archive so I can check them out.

Don't mind about nagging, Martijn, it's a pleasure to help such a community!
Anyway, by the way, have fun!
Francesco
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

Here is the file, and it contains two directories: 'looks like' and 'should look like'.

the 'looks like' directory contains the freeware BeOS page (I did this instead of the java page, because it contains less images..)

the 'should look like' directory contains the old freeware Java page (before I changed it) on which you can see the correct last text and correct game background (another brown colour).

the link is:

http://www.bd-fans.com/Temp/freewareBEOS.zip
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

The problem about both last_text and the tables' different background is caused by the following:

Code: Select all

#menu a:hover {
        text-decoration: underline;
        color: #ffc246;
        background-color: inherit;
}


	color: inherit;
	background-color: #E79500; 
}

/*-----------------------------
	Other
-----------------------------*/

.last_text {
	color: #ffc246;
  	font-weight: bold;
} 

}
.game {  background-color: #5B3E00;}
Notice that there is an incomplete statement right before the "Other" group, and that there is a not needed left curly brace before the ".game" statement.

The incomplete statement should belong to the following:

Code: Select all

table.screenshots td {
	color: inherit;
	background-color: #E79500; 
}
that you have partially deleted together with the other options that obviously aren't needed for this page. Complete the deletion and the last two statements should work correctly.

By the way, it is a proof of how CSS works. The interpreter encounters a syntax error and ignores it (ignoring even the following statements) - if the syntax error was after the last statement, no rule would have been affected, if it was at the top, the whole file wouldn't have worked.

The text is badly aligned with the image because you are using them together. Instead of using them out of the table, add two cells, put the image in the left one, put the text in the second one and add the following lines to the CSS file:

Code: Select all

/*-----------------------------
	Images
-----------------------------*/
img {
	padding: 10px;
}
The padding rule is intended to leave a free border around the image.

If you want the opacity effect too, use this instead of the above:

Code: Select all

/*-----------------------------
	Images
-----------------------------*/
img {
	padding: 10px;
	opacity: .80;
}

img:hover {
	opacity: .99
}
Hope all is now fixed as you wished, so that you can go on with your site, but if it isn't, here I am :wink:

A bit off topic now: the last things I've said to you in the documentation section of the forum were not intended to hurry you up... just saying this because of your words:
Martijn wrote:I will update [...] as soon as possible
I would better prefer that the "draft" becomes a bugfree tutorial before offering it to anyone, but with the mentioned comments you can publish it anyway.
Anyway, by the way, have fun!
Francesco
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

About the images and the (lighter) brown background colour of each game:
First it worked correctly with Tomi's code. But it only worked when linked the image, otherwise the text appeared under the image, as it does now.
I've already added all the games again (there are very many of them!), so adding two cells would mean hours of work again!

As it worked first, I think it could work now again, without adding these cells! So could you look at it again? And could you also tell me about the (lighter) brown background of each game? You can see it in the download link I sent you.

Thanks in advance.
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Maybe there is no need that I see it again, because is enough to add this rule to CSS:

Code: Select all

img { 
      float: left
}
I've omitted to tell you that before because using this technique obliges you to add several blank lines to each screenshot's text, otherwise the image will overlap the container (if smaller). But you are already doing this, so you should have no problems.

By the way, I've got the impression that you have forgot to delete the not needed curly brace. The first syntax error (the incomplete statement) deactivates the last two rules, but the second one (the brace) deactivates only the last (which is the one that sets the lighter brown).

Check it out, deleting the curly brace should work.
Anyway, by the way, have fun!
Francesco
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

it works now, thanks.

The remaining problem is the screenshots table on the Diam Diam page.
I can already go on redesigning the rest of the pages, but this problem has not been solved yet. Therefore, I started a topic on a Firefox forum, watch it here:
http://forums.mozillazine.org/viewtopic ... highlight=

Maybe it will bring you upon an idea.

Another question: how should I define the explaining texts of the level structure on the RnD page in the CSS file? (see http://www.bd-fans.com/RnD.htm ) I mean those italic texts like 'Levels that teach you how to play the game'.
Should I use 'div' for this? Or just something else? I assume I have to define this in the CSS file and not to make an HTML style tag.
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Hi, sorry for being late...

It could be done with this CSS

Code: Select all

span.ita {
       background-color: inherit;
       color: #FAA505;
       font-style: italic;
}
And this Html:

Code: Select all

<span class="ita">Insert text here</span>
I had a look to that thread, seems that there is a solution, I'll check it out as soon I can.

Btw, I have to thank somebody down there, they liked my CSS 8)

Bye :)
Anyway, by the way, have fun!
Francesco
User avatar
Martijn
Posts: 794
Joined: Sat Jun 19, 2004 10:54 am
Location: the Netherlands (Holland)
Contact:

Post by Martijn »

The redesigning work has been finished now! Finally!
Visit it (temporarily) here: http://www.bd-fans.com/Temp/index.html

Yet, there are some problems:

1. On the RnD page for example, the download table doesn't have those little gaps between the cells like the levels tables below. Now it looks a bit messy.

2. in the same download table (for example), I want one empty row between 'Rocks 'n' Diamonds ('RoNDi') - PalmOS / PocketPC level converter' and Element Descriptions. If I put here an empty cell, it shrinks.

3. The last text on each page has to reach the bottom of the page and not to hover one line up.

4. In the 'Levels' section on the RnD page, you see an explanation of the level structure. I have given a margin to the italic descriptions, but as you can see, the next line doesn't have this margin.

5. Let's take the DX-Boulderdash page. In the level table, the relations between the cells are not correct. The 'number of levels' column should be small, while the 'description / note' column should be bigger.

6. In the same level table, the 'number of levels' and 'author' columns should be centered.

7. Because of the tables on the Fan Stuff page, now all the game tables (e.g. the game tables on the freeware windows clones page) look very strange now. Besides, the game information has a yellow background colour (which can be nice btw, it depends on what it looks like when the game table is correctly shown). Also, the Google Search on the index page looks weird. I can eventually delete it.

8. The screenshot tables on the individual game pages (diam diam for example) still don't look fine in Internet Explorer. You said you had something in mind about this?

If you could have a look at these last things, I would like to thank you very much.

Please tell me if you have got any suggestions or remarks. Maybe you don't like a certain colour or something else. It's good for me to know.

Thanks in advance.
Visit my Boulder Dash website at:
http://www.bd-fans.com

Watch my avatar! That orange little thing is Murphy, the Supaplex star!
User avatar
Francesco
Posts: 577
Joined: Thu Dec 29, 2005 2:22 pm
Location: Sardinia (Italy)
Contact:

Post by Francesco »

Hi Martijn!
I thought you missed my last post, but now I see that you have been a little busy... be ready because this is a pretty long post:
1. On the RnD page for example, the download table doesn't have those little gaps between the cells like the levels tables below. Now it looks a bit messy.
Maybe it's due to the following:

Code: Select all

<table class="download" cellspacing="0">
Either change the cellspacing or simply delete that option and set some rules for that class in CSS.
2. in the same download table (for example), I want one empty row between 'Rocks 'n' Diamonds ('RoNDi') - PalmOS / PocketPC level converter' and Element Descriptions. If I put here an empty cell, it shrinks.
It should be enough to put a blank space into each empty cell, try that. Otherwise, a nice solution could be to split the rows into different tables, so you can clearly separate the standard versions from the palm ones and so on.
3. The last text on each page has to reach the bottom of the page and not to hover one line up.
The following Html is a bit messed up:

Code: Select all

<p class="last_text">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<br>
<class ="last_text">If you know more about a certain game or if you have a new game, new levels, music or whatever, please send it to me and I will put it on this website! You can find my e-mailaddress in the menu to the left.
</class></p>
It should be like this:

Code: Select all

<p class="last_text">If you know more about a certain game or if you have a new game, new levels, music or whatever, please send it to me and I will put it on this website! You can find my e-mailaddress in the menu to the left.
</p>
Then the last text should behave correctly.
4. In the 'Levels' section on the RnD page, you see an explanation of the level structure. I have given a margin to the italic descriptions, but as you can see, the next line doesn't have this margin.
The margin surrounds the whole paragraph, not the single lines. Replace it with "line-height: 110%;". Anyway it seems pretty good as it is, for me, but the choice is up to you. Try out the line-height option, maybe changing the percentage.
5. Let's take the DX-Boulderdash page. In the level table, the relations between the cells are not correct. The 'number of levels' column should be small, while the 'description / note' column should be bigger.
I think you can simply set it from the editor. Drag the columns to set the desired lenght.
6. In the same level table, the 'number of levels' and 'author' columns should be centered.
The same as above, try selecting the whole column in the editor and setting it to centered.
7. Because of the tables on the Fan Stuff page, now all the game tables (e.g. the game tables on the freeware windows clones page) look very strange now. Besides, the game information has a yellow background colour (which can be nice btw, it depends on what it looks like when the game table is correctly shown). Also, the Google Search on the index page looks weird. I can eventually delete it.
What you don't like exactly? The only strange thing is that you haven't set the float option in CSS as posted earlier, so the text beside the screenshots starts at the bottom. About the Google Search, it's again up to your taste. I'd delete it only for the not-english text on the button, but you could change the code for this.
8. The screenshot tables on the individual game pages (diam diam for example) still don't look fine in Internet Explorer. You said you had something in mind about this?
Maybe the best thing is to make the preview images even smaller, so that will fit correctly in IE. FF will resize them to match the available size. It's a workaround but I haven't found a better solution to this yet. Notice that you should make some tries to find the best size, but be aware that it will look fine only for your screen resolution (1024x768). Other resolutions (or resized windows) will arise the problem again, but it's a relatively bad flaw, you could stop when you achieve a nice work for the "standard" resolution.

With some effort all pages could be done with better Html and CSS - actually a lot of things are set on Html, but you could consider it enough.
That's the reason of my answers to points 5 and 6. It could be done better from CSS, but the above solutions are faster.

When you'll have the time to learn some Html you will be able to "clean" the code produced by the editor, and with a further effort you will be able to throw away any kind of editor. Until then, even if the overall outlook is good enough, feel free to ask again :wink:

Finally, it would be a nice thing to replace *all* colors with the closest colors into the "safe 216 colors table". These colors are intended to show up correctly for any kind of color depth and any kind of browser. If you try to change you color depth to 256, for example, maybe some colors will be dithered to emulate the actual color. I can't check it out because my laptop allows only 65K and 16M colors.

I have made a small program which lets you browse all safe colors and gives the relative hex values. It's in italian, but if you want it, I'll make an english version of it. You can also find that table on the web.

This aspect of safe colors is not really important - in practice nearly nobody surfs the web with an 8-bit video card, but since you wrote about colors, I took the chance to tell you that. But it is still an important thing when doing WAP/cellphones website versions, and since there are some versions of RnD for 256 colors and even for greyscale, it would be nice if you'll make a WAP version of your site that will reflect correctly the normal version - consider it an anticipated solution for a future problem :wink:

Now some things about my levels:
I've noticed that you have changed the description of MasterRocks, you should have read in my mind :wink:
Please pull out the collection of fifteen mazes as it isn't so, it's just a practice levelset. If you want, put only Mazer 12-13 and Mazer 18-19 (take them from the FA), they aren't serious maze creators, but they try to, at least.
The Trucky Cargos levelset isn't exactly ready to be played - and I guess you haven't really played it thoroughly, because there is something more to do than moving some blocking cargos to get to the exit :roll: I'm going to update it with some instructions and some other level, so you can leave it in place.
Last thing: you have missed one of my levelsets - because it isn't on the FA, I suppose - Magic CEs, my first serious levelset, in effect. It's the prelude to Trucky Cargos, and you can find it following the weblink under my posts.

See you and good work with your site!
Anyway, by the way, have fun!
Francesco
Post Reply