wrong borders on site

Francesco · Post by **Francesco** » Wed Feb 08, 2006 12:57 am

Hey, cool! The above was your post nr. 500 Martijn!
And with this mine, I entered the top ten posters, by the way...

Since this message is on the page nr. 6 of your thread, be careful not to miss my answer in the previous...

Martijn · Post by **Martijn** » Wed Feb 08, 2006 6:55 pm

Hi,

Thanks a lot for your help. And congratulations, that you've entered the top ten of posters in such a short time!

About the last text: I did it in a slightly different way, because that worked better. The same to the line-height you suggested: I didn't use that, because it didn't work. Therefore, I used the div class tag and now it works fine.
And about the img float: I accidentally removed it during the redesigning work a while ago.

Yet, there are some things left:
The game tables still don't look fine. Have a look at them and you will know what I mean.
Moreover, I think it's a better idea to let the 'game name:' etc. texts have the same size as the rest of the game table, otherwise the game table is too big and then there is too much empty brown space. So, how should I do this?

Well, as it's not really important about those colours (as you say), I think I won't do it now. It only takes work and time. But I'm interested in that program! Could you give it to me? The Italian version will do, it's not difficult (to read at least), as I can recognize enough of it from English, French and Latin principally.

What's wrong with the Mazers collection? It belongs to the examples section, which means that 'they aren't serious maze creators' (as you say).

Where can I download Magic CE's? I don't see any download link! ]

Indeed I only had a short look at Trucky Cargos (although I put it in the level directory on my own PC directly, to play it at a later time), because I had more things to upload. (At the moment my list with things of RnD to upload is growing again... but I couldn't upload it, because I was busy with the redesigning work.) And I kept 'v0.1' after 'Trucky Cargos', so the people can see that it's still incomplete or at least buggy.
So what should I change the description into?

It did not even strike me that the Google search contained a Dutch instead of an English word... well I will think about it what I shall do. Either removing it completely or changing it into English, I think.

I uploaded the changes. You can access it via the link I gave you in my previous post.

Could you help me with the last remaining things? Thanks for being willing to help me!

Martijn · Post by **Martijn** » Sat Feb 11, 2006 4:13 pm

About the screenshots table: if you don't know a good solution at this moment, then we could make it a bit simpler but working. Then we can always add a better screenshots table later. So, if you don't know the solution now, then could you give me the code for a simpler screenshots table?

I just want to finish this redesigning work as fast as possible, so that I can go on with the site. I still have many things to upload and pages to create...

Francesco · Post by **Francesco** » Sat Feb 11, 2006 7:51 pm

About the screenshots table I confirm that the best thing would be to make smaller images to put there, so that will fit normally in IE. FF will resize them.
If you don't like this solution, I afraid but I don't have any other idea - well, maybe putting them in a column instead that in a row, if you like.

Just another small thing because this is a very quick post (but I promise that tonight I'll see all the stuff really deeper): re-add the padding to the screenshots images that have a text beside, you deleted it with the "float" option (at least the last time it was so, maybe you have already fixed it).

Check again this thread later.

Martijn · Post by **Martijn** » Sat Feb 11, 2006 8:28 pm

Yes! I resized the small screenshots to a smaller size and now it works perfectly! Thanks!

And yes, I had already removed the float setting and reset it to padding.

Francesco · Post by **Francesco** » Sat Feb 11, 2006 9:06 pm

Well, I don't know how does it work for you, but for me it's a bit ugly: when loading the page for the first time (or refreshing it) the screenshots are stretched (they appear narrower). After resizing the windows they are restored to the normal aspect ratio, and - really strange - now they are resized even in IE - maybe they think that "to resize" means only "to make larger"... please, post this fact on the FF forum, I'm curious to see what they say about it...

There is a not-so-nice larger border at the right side of each image, I'm going to have a deeper look at it.

Martijn wrote:And yes, I had already removed the float setting and reset it to padding.

Maybe I've expressed myself in a wrong way. You need both options. The float one is intended to leave the text beside the image, the padding is needed to add a free space around the image. Looking at the page seems that you left only the float rule, so your words above are a bit strange. Maybe you meant that you have removed padding and replaced it with float. Anyway, put them both.

[EDIT]
Took a further look to the previous posts.
For the tables into the clones' pages, add this in the "table cells" section (the position is not mandatory, it's just to leave the file in good order)

Code: Select all

.game th {
	width: 20%;
}

Maybe you could also change the padding for #content to 15px, it should look nicer. Another useful thing would be to add a padding rule also to the .game statement, at the bottom of the stylesheet. Set it to 15px too.

There is a duplicate "width" rule in the #left statement, only the second takes effect, so you should delete the first (just another "order" point to fix). It's into the default.css linked by FreewareWindows.html, I did not check any other stylesheet.

Still working around IE bug, but I think I've almost sorted it out...
[/EDIT]

Francesco · Post by **Francesco** » Mon Feb 13, 2006 1:20 pm

About Magic CEs, the link is at the beginning of the page, maybe you've expected it to be at the bottom. If you meant that you weren't able to find the link in my posts, it's the "WWW" button at the very bottom of each of them.

About the other levelsets, at final I agree with you, leave them as they are, I will update soon Trucky Cargos, though.

I've posted the Hex Color Generator on a new thread in this section, hope you haven't missed it - by the way, let me know if you like the other utilities I've made

PS: It has been a strange coincidence that of RenamerRobot: you can see from the screenshot that I've used it with RnD level files. I've created that utility at least one year ago, and when using it for the first time with those files, I only needed to press "Rename", as the program was already correctly set by default! Tricks of fate, maybe it was my karma

Martijn · Post by **Martijn** » Tue Feb 14, 2006 7:45 pm

I found your Magic CEs file and I wrote it down on my RnD upload TODO list. it's very big now, I really need to upload many things but I will wait with it until the redesigning work is done! I hope it will be completed this week.

I will have a look at the hex editor. I'm sorry, I don't have very time at the moment. that's also the reason that I replied quite late.

Indeed, the screenshots still look very strange in IE! what is the problem?
I added the padding as well as the float option and it works now. I don't know what I had in mind, I can't really remember that. but now it works anyway.

things left:
- the game name/author etc. information in the game tables has to be to the left side and not have a margin (or whatever it has). now it's centered and not aligned to the left.
- the game tables have to be as compact as possible, that means, if possible, a smaller padding from above and eventually a slightly smaller lettertype size inside the tables (at least, if that looks fine)
- the screenshots on the individual game pages. you said you have almost sorted it out? do you mean that you have a good working solution?

you can visit the updated temporary page via the same link I wrote down in an earlier post.

thank you for your help again.

[edit] posted on the FF forum what you asked for.

[second edit] if you cannot find a good solution for the screenshot table, then maybe building a new table, working differently, would be better. for me, it's the best if I can go on with my site. next week, I have a week off so then I can work much on my site.

Francesco · Post by **Francesco** » Sat Feb 18, 2006 11:41 pm

Ok, I almost did it (late...):

Indeed, the screenshots still look very strange in IE! what is the problem?

I don't really know. I've found also that a local copy of your pages (RnD and FreeWareWindows) behave differently that those on your server !!!

(I mean, obviously, in IE

)

BTW: I've noticed that the actual sizes of the small previews aren't matched by the HTML code... you should fix it.

On the way for a decent workaround, remove the "width:" and the "height" rules in the statement "table img".
Make even smaller images: set to 128px the longest side .

I added the padding as well as the float option and it works now. I don't know what I had in mind, I can't really remember that. but now it works anyway.

Really? I can't find the padding in your CSS...

- the game name/author etc. information in the game tables has to be to the left side and not have a margin (or whatever it has). now it's centered and not aligned to the left.

There is only a solution: with the editor, select the two heading cells and set them to be aligned to left.

Notice that the text alignment of TH is firstly set to "left" by CSS, but then is set to "center" by HTML (that is, all the changes you're doing using the editor are set into HTML style properties, thus overriding the external CSS)

Martijn wrote:- the game tables have to be as compact as possible, that means, if possible, a smaller padding from above and eventually a slightly smaller lettertype size inside the tables (at least, if that looks fine)

For this set:

Code: Select all

/*-----------------------------
        Tables
-----------------------------*/

[...other rules]

.game table {
        padding-top: 3px;
        font-size: 80%;
}

Well, see if the above things work

.

Martijn · Post by **Martijn** » Mon Feb 20, 2006 10:16 am

thanks!

I uploaded the modified pages (although it doesn't contain many changes).

about the float thing: we are each probably talking about something different. could you give me an example code what to do? sorry for the stupidness/noobishness...

and I meant the whole information table above the screenshot and game description. I tried to select the cells, but it doesn't work. Moreover, the editor says that the cells are already aligned to the left. Could you be a bit clearer here? what do I have to select (although I tried several things)? and otherwise could you give an example code or something else?

and then... the redesigning is really finished!

Francesco · Post by **Francesco** » Mon Feb 20, 2006 10:56 am

The float/padding I meant was about "img", your CSS should look like this:

Code: Select all

img {
        [...other rules...]
        float: left;
        padding: 10px;
}

In practice you should replace the "margin" rule with the "padding" one (as I've seen that there is a "margin" rule in the "img" statement, in your CSS)

About the heading cells, you should edit manually the Html (this is, maybe, a bug of your editor: it sees the "text-align: left" rule of CSS but doesn't reset the "center" rule that itself set into Html, when you set the whole column to "text-align: center" )

So change the following:

Code: Select all

<th style="width: 22%; text-align: center;">Number of Levels </th>
<th style="width: 22%; text-align: center;">Author </th>

to this

Code: Select all

<th style="width: 22%;">Number of Levels </th>
<th style="width: 22%;">Author </th>

Images are still stretched, due the the "width" and "height" rules (in RnD.htm) but I've seen that you have removed the sizes from Html.

Since you asked some things, there is also some job to do: if there is something that doesn't convince you, try to take a futher look to my posts, maybe you have missed some solution.

Another thing: notice that the changes must be done in all StyleSheets, since you are using one different CSS for each page, and also the manual Html changes have to be done in each page containing that kind of table.

In any case, since I am logging on very often, ask as soon as you need

Martijn · Post by **Martijn** » Mon Feb 20, 2006 4:56 pm

That's good to hear that you are so often online and checking this

About the float thing: as you suggest will cause that the screenshots on the default pages have much space about them. I like it more as it is now. So, don't you think that the padding shouldn't be there? Or is it strictly necessary?

And about the alignment thing: you don't know which table I mean! I don't mean the level tables, but the game tables on the default pages (using the default.css file).
For example, go to the freeware windows page. There you see the BD4 table. But the yellow thing with the text beside (game name, author/publisher, year of publishing, homepage, platforms) are centered! or at least, they are not aligned to the left! that's what I meant! How can I get this information to the left and not somewhere hovering in the center? What should I change for that? Could you give an example code?

Another thing I see now: year of publishing takes two lines. What should I do to change it into using only one line?

Are there any other things I have to change yet? the stretched screenshots for example.. or should I leave them as they are?

Francesco · Post by **Francesco** » Mon Feb 20, 2006 6:24 pm

Ok, seems clearer.

For the misalignment, add this to "default.css"
Put it *at the end of Tables section*

Code: Select all

.game table {
        width: 90%;
}

Change this in the same sheet:

Code: Select all

.game th {
        width: 30%; /* old value was 20%*/
}

Add also this:

Code: Select all

.game img {
        padding: 15px;
}

Set in the above way will affect only the images into the game pages.

In RnD.CSS, find this:

Code: Select all

table img {
	border: none;
	height: auto;
	width: 92%;
	opacity: .90;
	margin: 4%;
}

Change it to:

Code: Select all

table img {
	border: none;
	opacity: .90;
        padding: 5px;
}

And should work fine in IE. Will work just fine in FF, but the images won't be resized anymore.

Check them out and tell me how's going on.

Martijn · Post by **Martijn** » Mon Feb 20, 2006 7:10 pm

okay, I changed it all.

yet, the game table information is not aligned to the left yet.

and now, the screenshots on the RnD page are smaller and the yellow colour around them is bigger at the left and the right side. (therefore I changed this only in the RnD css file, now compare it with the RoX page for example and you will see the difference). Or should I use the old image formats again?

see it again on the same URL: http://www.bd-fans.com/Temp/index.html

[edit] I see that the screenshots look good if I view the RnD page online. But on my own PC, it looks different. I updated the URL and now it looks as it looks like the site on my harddisk.

[edit] huh?? the site looks alright when I go online! but on my harddisk, exactly the same looks like this:
http://www.bd-fans.com/Temp/website.jpg
I don't understand this! I copied the images directory!
well, then I will copy everything from the server to my PC, maybe that works...

Francesco · Post by **Francesco** » Mon Feb 20, 2006 10:37 pm

It happens that Firefox doesn't retrieve the CSS at every refresh. Sometimes you have to delete the cache. It looked good online because it was using the old CSS of the cache instead of the one you updated to the server.

Try looking at my site: if you didn't visit it from a couple of days, maybe it will look messed up, but deleting the cache fixes it.

-----------------------

The game table headers *are* aligned to the left, but they aren't close to the border of the game box. I'm going to fix that too.

[Edit: Fixed
Download this file: http://spazioinwind.libero.it/entuland/ ... efault.css
and apply it straight to FreewareWindows or similar.
Then notice the changes I have made (they are marked by long comments: "/* comment ----------------------------------------*/",
and apply them to the other pages.
/edit]

Having the same exact behaviour (for the screenshots) on FF and IE is pretty impossible, I'm going to find a workaround.

[Edit: Found
Download this file: http://spazioinwind.libero.it/entuland/martijn/RnD.css
In order to apply it, you must also change the Html by adding a div.centercontent.

You should have then something like this:

Code: Select all

<div class="centercontent">
<table class="screenshots">
[...]
</table>
</div>

it will look fine in both FF and IE. Will look fine also in 800x600 - but with the bar at the bottom.
/Edit]

[Note:
The two files above provide different solutions for #left and #content, one resizable (default.css) the other fixed (RnD.css). Choose the one you feel better for all the pages - or all the stylesheets, to be precise

.
/Note]

See you