wrong borders on site

Tomi · Post by **Tomi** » Sat Jan 21, 2006 10:41 am

The image padding seems to be because of this rule in structure.css:

img {
   padding: 10px
}

Francesco · Post by **Francesco** » Sat Jan 21, 2006 12:52 pm

You're right, Tomi. It was intended.
The main problem is that the table is set to take 80% of its container, to take *minimum* 80%, so if the content is too large, the table will grow to the right.

I suppose that your screen resolution is 1024x768, just like mine, Martijn.
Resize the browser's window and you will see that the table containing the screenshots will stay the same, while the other two tables will become narrower. If you increase the resolution, you'll see that all the tables will behave normally, enlarging themselves as you maximize the window.

I've solved this adding several rules and adding a class name to the table containing the screenshots.

I've re-arranged all the rules in a single CSS file, that you can see below.

I've uploaded all to my server, notice that I've slightly modified the Html, just added the class value to the screenshots' table and left only one link to stylesheets:
http://spazioinwind.libero.it/entuland/ ... mDiam.html

Notice that the property "opacity" is not standard CSS, but since it's cool and it's supported by FireFox, I used it anyway.

The screenshots' table will be resized if you make the window smaller, let me know if you like this behaviour.

PS: Opening it with Opera shows weird missing angles in the yellow padding of the images, does anybody know the reason why?

PS2: Noticed that opening it with IE stretches the images... have to fix it. I'll see later in the afternoon.

Here is the CSS file:
[edit]
Here were the CSS rules, but I've changed idea about this.
Please type:
http://spazioinwind.libero.it/entuland/ ... m_diam.css
in the address' box of the browser to get it.
Clicking the link should not work.
[re-edit]
Work in progress. Check it again at times.
[/edit]

Tomi · Post by **Tomi** » Sat Jan 21, 2006 2:37 pm

What exactly does "opacity" do? If it just changes color, why don't use the "color" property (and find out the value from screenshots using opacity)? Oh, I see, it also works on images. I don't like it on images though, nor on menu items. It looks wierd and it even isn't CSS standard.

The screenshots seem to stretch in firefox with lesser window sizes, is that by intention? (This may happen because I use old Firefox 1.0.)

When the menu on the left doesn't scroll ("position:fixed"), user can't see the whole ad. (Ad "providers" *don't like* that.)

I've also noticed that the screenshots don't have required "alt" attribute, I suggest setting it to something like "Screenshot 1" or so. Adding width and height attributes to images is good because the browser knows how many space to allocate to them before it loads them (so it doesn't have to re-position the page when it loads them).

About the screenshots table: What about using just plain images instead of table? Then, they'll move to another line instead of stretching. Try this: (wasn't tested yet)

Code: Select all

HTML:
<div class="screenshots">
<a href="Images/DD1_big.jpg"><img src="Images/DD1_small.jpg" alt="Screenshot 1" width="164" height="123"></a>
<a href="Images/DD2_big.jpg"><img src="Images/DD2_small.jpg" alt="Screenshot 2" width="164" height="123"></a>
<a href="Images/DD3_big.jpg"><img src="Images/DD3_small.jpg" alt="Screenshot 3" width="164" height="123"></a>
</div>

CSS:
.screenshots {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #6A0035;
}
.screenshots a {
  padding: 10px;
}

Francesco · Post by **Francesco** » Sat Jan 21, 2006 2:45 pm

About opacity... well, tastes are tastes...

The idea of pulling images out of the table is nice, I agree.

The fixed position of the menu is indeed another matter of tastes, but in this case are AD's tastes, they have got importance... or not? Anyway...

I hate this thing about browsers/CSS variable (bad) compliance. I'm just showing some things. Martijn has to choose.

Any hint about the missing angles in Opera?

Francesco · Post by **Francesco** » Sat Jan 21, 2006 2:48 pm

Check it again, I've changed it with your code, Tomi.

[edit]
Something is going wrong... fixing.
I prefer the resizing ones. I'm changing it back.
The addon you suggested is included, nested into comments both in Html and in CSS. I'm going to work, I'll see this again tonight.
Hope Martijn will check it before then.
[/edit]

Francesco · Post by **Francesco** » Sat Jan 21, 2006 3:17 pm

Opening the page with IE results in the stretching of the image (the *resizing* is intended, the stretching isn't), but if you resize the window, the images recover their original height/width ratio. It's definitely a bug of IE.

Martijn · Post by **Martijn** » Sat Jan 21, 2006 7:27 pm

It looks very cool! Thanks! And also thanks for fixing the bug (I had already discovered it, but of course I didn't know how to solve it

)

But now I'm a bit confused... you modified the whole CSS file and maybe the html file itself? If you also changed the DiamDiam.html file, then what did you exactly change? Do I also have to do this with all the other pages then? And they use the 'default.css' file, which has not been modified...

BTW, I can't download the new Diam Diam page. When I click 'save as' in the browser, the html file only contains a link to your site! But I also want it to work offline! So could you provide a download link, please?

In the meantime, before you uploaded this, I had changed my site a bit, with the CSS files in an apart folder and I already worked on the RnD page.
Well, see what my site looks like now. I packed it in a zip file (without the downloads and all those screenshots of course). Download it here:
http://www.bd-fans.com/Temp/website.zip
Then, can you tell me what I have to change exactly? It's not my intention to let you do much work, as you and Tomi have already done so much for me, which I'm grateful for.

I like the whole new 'sparkling' ideas, Francesco, but I prefer the footer just at the bottom of the page (in your latest change, it takes about 4 lines or so). And on your changed page, the table doesn't have a border at the bottom.
And is it possible to let the menu go 2 lines up or so? Now (I guess because of the top header), there is quite a big space above the menu when you scroll down.
And is it also possible to keep the Google Adsense ads under the menu?

Thanks again, for your work so far, Francesco and Tomi...
but I hope you also want to help me with the last things! But once it's finished, it will look great due to the efforts of you 2!!

Francesco · Post by **Francesco** » Sat Jan 21, 2006 8:37 pm

To download the page, you should click View > Source on the menu.
It will open a window which will show the Html code.
Then you select it, paste in a plain text file and name it as you prefer.
Maybe it will be opened directly in a text editor.

Since you're working with an editor, instead of saving my version, simply add the class "screenshots" to the table and change the stylesheets links, so each page (I suppose "each page of Diam Diam site", for which you want the same layout) links to the new CSS file I've done.
The third thing I've changed is not important: it was the anchor linking to the levels section of the document (there was the link on the menu but the anchor was not set on the document).

The missing AD box is just because I don't want to show them on my host.

All the other stuff is in the CSS file, and will be applyed to any page similar to the main one.

I haven't seen your archive yet, but the sense is that. Two changes in the page and one unique CSS file for all the site.
If you want to make a different section, simply duplicate the CSS file, change the things you need and link it on the relative pages.

Do not care about time, if I could I will, if I couldn't, well... good work!

[edit]

You should make another change to the page(s): add the size and the "alt" values to the images, as Tomi correctly reported.

I presume that the missing bottom border belongs not to a table as you said but to the big <div> called "content", and it's due to the missing AD box which moved the footer. No further actions needed.

...

Futher edit:
I've seen the structure of your site. Okay, it needs one CSS for the structure and several for the color themes. I'll split it and then you'll do the rest.

I packed it in a zip file (without the downloads and all those screenshots of course).

Actually you *did* include them! Mistaken the archive?

[/edit]

Francesco · Post by **Francesco** » Sat Jan 21, 2006 9:21 pm

At the end I think that the best thing is to leave just one CSS containing both structure and colors. Duplicate the last file I've done and go on with the other changes I've told you in the last post.

Martijn · Post by **Martijn** » Sat Jan 21, 2006 9:55 pm

Well, I see it's very easy for me now... I did what you said. Having only one css file is much better, I think.

I also included Tomi's code, but it looks a bit strange... have a look at and you'll see. And there's another little bug: if you scroll completely down, the google ads go over the footer. Isn't there a possibility to let it stop going down, before it goes over the footer text?

And is it possible to swift the menu (and the google ads) two lines up or so? Or is that impossible?

About the size and the alt: all the screenshot have the same size already, so I don't think it's necessary. And why should I use an 'alt' description then?

Oh, here it is, what it looks like now:
http://www.bd-fans.com/Temp/dd.zip

p.s. I meant all the other games' screenshots! But included the Diam Diam screenshots.

Francesco · Post by **Francesco** » Sun Jan 22, 2006 3:49 pm

The alt value is useful - and is pretty mandatory.
It's intended to express the content of the image, where the image is not shown (text browsers or missing image).
The size is used to allocate the space, as Tomi said before, and I think it could in some way fix the bug of IE, maybe it needs the size to be set in the Html, otherwise it stetches the images *not just at the refresh* but *everytime*.
I'm downloading the last version. Please don't include the pictures anymore, it's not needed

[editing... stand by]

Remove Tomi's code in both files, it wasn't tested, maybe he could take a further look at it.

In #left
delete these rules:
position: fixed;
top: 70px;

change this other
float: none;
to
float: left;

It will behave as it did before (I hope)

Martijn · Post by **Martijn** » Tue Jan 24, 2006 9:37 pm

hi,

well, it doesn't work. I deleted those lines, but without a good result. It still looks the same:

http://www.bd-fans.com/Temp/diamd.zip

Francesco · Post by **Francesco** » Tue Jan 24, 2006 9:43 pm

It's because you have left Tomi's Html about the screenshots. You have to restore the old table and it's all done

Edit: You can cut it from the page on my server.

Re-edit: It should look like this:

Code: Select all

<table class="screenshots">
  <tbody>
    <tr>
      <td> <a href="Images/DD1_big.jpg">
<img src="Images/DD1_small.jpg" alt="Screenshot 1" width="164" height="123"></a></td>
      <td> <a href="Images/DD2_big.jpg">
<img src="Images/DD2_small.jpg" alt="Screenshot 2" width="164" height="123"></a></td>
      <td> <a href="Images/DD3_big.jpg">
<img src="Images/DD3_small.jpg" alt="Screenshot 3" width="164" height="123"></a></td>
    </tr>
  </tbody>
</table>

Martijn · Post by **Martijn** » Wed Jan 25, 2006 8:56 pm

I just copied and pasted it from the old download, but now the screenshots aren't centered anymore...

For the rest, everything looks okay now. btw now I discovered the colour effect when moving the mouse pointer over the screenshots! It looks cool! Thanks!

Here it is:
http://www.bd-fans.com/Temp/DiamDiam.html

Francesco · Post by **Francesco** » Thu Jan 26, 2006 10:10 am

It should be caused by these rules on CSS

Code: Select all

.screenshots {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #6A0035;
}
.screenshots a {
  padding: 10px;
}

Delete them and all should be fine - in Firefox.

Internet Explorer will again show it in a weird way, omitting to resize the pictures. I'll see this some later, I'm not sure I'll be able to solve it.