wrong borders on site

Tomi · Post by **Tomi** » Mon Dec 26, 2005 3:49 pm

First I'd like to make one thing clear. CSS doesn't want you to not use tables, but to not use tables where they don't belong (like page layout). So if you want to, you don't need to change game lists into CSS.
But I've invented an alternative solution (which uses tables too, but in a place where they're absolutely relevant) which seems better to me. Check it out at http://www.smnd.sk/tomi/files/martijn/C ... alJava.htm. Choose the one which do you like more (not just by how it looks, but also source code of course).

Good luck with your site!

Martijn · Post by **Martijn** » Tue Dec 27, 2005 11:00 am

Great, Tomi! I like you design more than it used to be, so I will use it. But there are still some problems: I don't see any lines or background colour neither in Firefox, nor in IE (or is that by intention?) and the description would look better if it appeared next to the screenshot, and not under it with a gap above.

The source code looks neat. I see you call the table class 'gameinfo'. What is this for? It's something new to me.

Now I use NVU instead of Frontpage (you recommended me not to use Frontpage anymore) and I think this program is really better than Frontpage - and free!

Tomi · Post by **Tomi** » Tue Dec 27, 2005 12:23 pm

> I don't see any lines or background colour
Eh... I don't understand completely what do you need. Do you want a separator between the games? (If I guessed correctly, just insert <hr> - horizontal ruler - between them.)

> and the description would look better if it appeared next to the screenshot
Strange, but I fixed it now by using another table where left column is the screenshot and right column is the text.
Note that I've added few lines to the CSS file. (They're marked with "updated" comment.) They may be useful in all CSS files (not just the global one).

> [...] class 'gameinfo'. What is this for?
I don't use it yet, but if you'd like to change something about all gameinfo tables in the future (like background color etc.), it will be much less difficult. (Just add ".gameinfo {...}" rule to CSS.)

> I use NVU
I don't use/recommend *any* wysiwyg, but still better than Frontpage. But of course, if it works and makes clean code and you like it, use it.

> [...] this program is really better than Frontpage [...]
Well I always wonder why anybody uses Windows these days... just kidding

Martijn · Post by **Martijn** » Tue Dec 27, 2005 5:44 pm

Now the text is correctly shown next to the screenshot. It could be that I had watched your changed site without the CSS file in the same folder, so that could be the problem. But now, it's correct.

I meant this by 'I see no lines or background colour': on the old page, the cells with the game description etc. had another colour and lines between the screenshot and the description (and some other lines). But now it looks like this: http://www.bd-fans.com/Temp/no_borders.jpg

Tomi · Post by **Tomi** » Tue Dec 27, 2005 6:01 pm

Ah, I see (hopefully). This could work: set class="gamedesc" to every screenshot+description table and add the following into CSS:

Code: Select all

.gamedesc {
  width: 100%;
  border-bottom: solid 10px #665735
}

Not tested yet though.

Martijn · Post by **Martijn** » Tue Dec 27, 2005 10:39 pm

No, it doesn't work. At least, I tested it, but then a strange thick line appears. But it's easy to explain what I mean: each game (with author, screenshot, description etc.) has to have another background colour than the table of the whole page and all columns and rows need a border line. Just as it still is on www.bd-fans.com
Maybe (because you've changed the author/year of publishing/homepage/platforms thing (now it's displayed above each game description)) now not every row should have a border, but at least a few of them, so that it looks neater.

Tomi · Post by **Tomi** » Wed Dec 28, 2005 10:56 am

maybe those borders are only in IE? (exploring source code) Yes, that's it - some weird attribute "bordercolor". Please post a screenshot that shows how should it be.
About the background color: finally noticed it! Really, the game has other background than normal. Well, enclose whole game data (both tables) into <div class="game"> and customize it in CSS:

Code: Select all

.game {
  background-color: #423a22
}

Note: Unfortunately, I won't be able to reply until the end of holiday (not 100% sure).

Martijn · Post by **Martijn** » Wed Dec 28, 2005 2:33 pm

okay, thanks for the background thing. I made up my mind and I think I will keep it like this. After all, it looks better.

Thank you very much. I will post more questions here if necessary.

Martijn · Post by **Martijn** » Wed Jan 11, 2006 9:50 pm

Finally, I've completed redesigning all the clone pages. Now the only pages left to do are the individual game pages.

I started with the Diam Diam page. Everything is fine, but one thing isn't: look at the menu and you see that the menu options don't have the same colour as 'Operating Systems' for example. I want them to have the same colour. How could I do this? I'm sorry if this question sounds very noobish...
Don't look at the content of the page yet, because it still has the text from the freeware clones page!

download it here: www.bd-fans.com/Temp/diamdiam.zip

Hope you can help!

Tomi · Post by **Tomi** » Thu Jan 12, 2006 8:45 am

First, I don't like the idea to use H5 for those sub-headings. Use something other, for example <em>. Then, change the corresponding CSS rule to begin with "#menu em {" instead of "h5 {".
Heading elements (h1-h6) should be used in main document to make hierarchical sections. (So h1 contains some h2s, h2 contains h3s a.s.o.) Using it in menu alone (without other hXs) doesn't feel right to me. Btw, what do you use h4-s for?
To answer the colors: find out what color would you like (in this case it seems to be #fedc9c) and add a color property ("color: #fedc9c") to "#menu a" rule. (Or, because there already is one, just replace the value of the old one with the new one.)
And looking into the CSS file reveals one more "bug" to me: body background contains empty URL statement. But because you now use separate CSS file for each color scheme anyway, there's no reason why not define background image in CSS (instead of body tag) too - remove the style attribute from body tag and place the image url into CSS. (If you won't do it, at least remove the empty url() statement.)

Martijn · Post by **Martijn** » Thu Jan 12, 2006 3:24 pm

Thanks. I changed the things except the background picture (I only deleted the useless statement) because the other option didn't work. Probably, I did something wrong.

I've worked for a long time on the Diam Diam page. Look how far I am (download it from the same URL: http://www.bd-fans.com/Temp/diamdiam.zip). I absolutely don't have any CSS experience so everything goes very slowly... so I would like to ask you if you please could give an example of how to create the underlined header 'Playing Levels' and how the create the table below (with cell borders etc.). If I know that, I can redesign the rest of the pages quickly, because they have the same design.

Thanks in advance. I hope you want to help. But I still have many other things to do for my site, so I don't want to spend too much time on (although necessary) redesigning my site, using the css files.

Martijn · Post by **Martijn** » Tue Jan 17, 2006 4:55 pm

Could anyone please give me an example of the underlined header 'Playing Levels' and table below (with cell borders etc.), using the CSS file? I can't go further now, but I guess it must be very simple...

Francesco · Post by **Francesco** » Tue Jan 17, 2006 6:50 pm

Hi Martijn, if it could help you, here is a brief intro to CSS+HTML.
http://www.w3.org/Style/Examples/011/firstcss

I think it could be found even in other languages.

Maybe you would download the whole CSS specifications, that are exaustive and really well commented:
http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS2

CSS1 is not the latest release, but it's the official one, and *should* be supported by all browsers - notice that even if the World Wide Web Consortium (W3C) has released such specs (which *should* be mandatory) not all browsers will render the same page in the same way, but it's the same for the various versions of HTML, so you should not mind so much of that.

Finally, If you haven't got the time to do it by yourself, you could make a Word document with the layout that you need, post it somewhere and I'll do the work for you

Martijn · Post by **Martijn** » Tue Jan 17, 2006 7:28 pm

Hi Francesco!

Yes, indeed, the problem is that I don't have time to learn CSS, because my TODO list is big

What I need, is an example of 'Contributions' (for example) on the RnD page ( http://www.bd-fans.com/RnD.htm ) with the line under it and the table with the levels, authors, etc. below. If I know how to do this (it's probably not so hard), I can also use this to make the table with levels on the RoX page ( http://www.bd-fans.com/RoX.htm ) for example. Just by changing some colours and it's done!

I think this is the code:
http://www.bd-fans.com/Temp/contributions.doc

Thanks in advance for doing this for me!

Francesco · Post by **Francesco** » Tue Jan 17, 2006 11:41 pm

The doc file that you provided is not as I expected, but I think I got it anyway

Here you can get the first version - an arlequinade! but it shows what you can easily do with CSS.
http://spazioinwind.libero.it/entuland/ ... style1.htm

Remember that you need the CSS file too, but since my host does not allow direct posting to the files, you'll have to download the archive (containing two html pages and two css files) from the second version's page, which should meet your needs:
http://spazioinwind.libero.it/entuland/ ... style2.htm

I've omitted the links (to the various contrib packages), but I think you'll have no problems to add them.

If you are going to put the CSS file in a different folder, change the relative URL in the <link> tag. For example, if your page is in the root folder and the CSS file is in the /styles/ folder, change it this way:

Code: Select all

<link rel="stylesheet" type="text/css" href="./styles/style2.css">

Good idea to stop using FrontPage, I agree with Tomi, it generates a bunch of useless code - sometimes it can even show some of your personal data that maybe you don't want to share - things like author's and company's names.

Using another WYSIWYG like Nvu is better, but I think that you should put "learn CSS" on a higher place of your TODO's list, because it is really easy, and you don't need to know it all, you just need the more often used things. Then you could throw away all programs and start editing your Html and CSS manually in a notepad.

Btw, I suggest you to use the separate CSS file, and not the inline one, because this last has to be rewrited on every html page.

Instead, different pages can link to the same stylesheet, and changing this last one will affect all pages: changing the whole appearance of a website becomes a childgame!

If you need further help, feel free to ask.

PS:
Maybe I've said something yet posted on this thread, you are yet using CSS and you should know a little about it, but anyways...