CSS Conversion.

[Swordfish]

I feel that we should get on with converting my table setup into CSS. Is anybody up to the task? My CSS coding is really below par, thought maybe I could read up a bit, but it's gonna take longer than we have at the time, so...

Please give me a wink if you want to do this. I can send you a zip with the grafic used (or you could download them from the mockup i put up in another thread) and maybe my coding if thats any help.

I really want to make it look the same with CSS as my table mishmash, and that should - to my knowledge - be possible .

When the coding is done, the result can be sent to either me or Jackanape and we will put toghether a testsite and eventually a website for the 1.25 (which is hopefully right around the corner)

Just let everyone know if you want to have a go so that all of us dont go coding the same thing.

[Jackanape]

You know, if we don't hear anything from anyone in the next day or so, let's just go ahead with the tables. If what we're discussing about reimagining the whole site for the 2.0 release is, in actuality, an inevitability, why not proceed with what you have now?

What do you think?

[Dale Ray]

http://corantodemo.net/test/

[Jackanape]

That's pretty good, and a good approximation of Sword's design. The dropshadows would be easy to add in, by giving the content divs a background image, and replacing the bottom divs of each one with an image or two...or, with added borders to the divs...

And that's assuming we even need a drop shadow...

That's the answer, all right.

AND, I love your approach to the rounded corners, too...it fills me with all kinds of ideas...

[Jackanape]

Well, now I just can't help myself...I've been toying with your conversion, Dale, and I think you'll like the results.

I'll be back later with something to look at.

[Jackanape]

Here's a quick edit of what you had put together, Dale.

-There were redundancies in the rounding divs, so I pruned those out.

-Added a "shadow effect to approximate Sword's dropshadow. This is probably best done with images, but given a possible redesign of the logo, etc, in the future, it may be better to stay with this CSS version. At least, it will take less time.

-A few code/typo corrections that I could see in this quick pass.

Let me know what you think--
It's a good start to the guts of the thing, well done!

[SrNupsen]

Just wanted to point out that the font, and especially the letter "o", looks kinda weird to me.

See screenshot.

I'm not very into this, but could it be that the Trebuchet font isn't installed on my system?

Screenshot taken from Firefox 1.5 on Ubuntu 6.06 LTS.

[Swordfish]

"O" seems find to me...can't se a big difference from my screen compared to yours...

Jack, could you try to use my jpgs for the shadows...they are softer somehow. Edges are too jagged this way...

Other than that it's coming together okay. Adjust the width of the setup to about 1000px non liquid and we are there. Fonts are too big aswell....think it's a good idea to use same font sizes as here on the forum. Looks good and ads to continuity.

...on the other hand. The shadows aren't bad...just a bit strange along the corners.

[Jackanape]

That's trebuchet, alright...try looking at it again, I changed the font size a bit, which may help things out...I do have to stop fidgeting with it, though, until these two get back on this.

Again, I was just trying to find a quick substitute for the standard Sans serif, which can look very boring...nothing permanent, that's for sure.

[Swordfish]

I'm fiddling with it myself, just can't find out how to change the size of all the "boxes" Learning new things by the minute here

[Jackanape]

"O" seems find to me...can't se a big difference from my screen compared to yours...

You're both looking at the first version I uploaded...the last one has a more adjusted font size, and the divs are spaced more like Swordfish's original version.

Jack, could you try to use my jpgs for the shadows...they are softer somehow. Edges are too jagged this way...

This is true, but as I hinted at, above, that would take considerably more time than I have. You can try it, if you wish, but there will be div issues along the way to be debugged...but a good way to learn about CSS...I recommend using a 1px width image for backgrounds...

Other than that it's coming together okay. Adjust the width of the setup to about 1000px non liquid and we are there. Fonts are too big aswell....think it's a good idea to use same font sizes as here on the forum. Looks good and ads to continuity.

...on the other hand. The shadows aren't bad...just a bit strange along the corners.

Fixed width is a mistake. Remember that people are accessing the site from all different resolutions, including 800x600. Fixed width works against compatibility and accessibility. Feel free to play with the fonts too...

The size has been fixed, already, so you should be good there.

This is a great opportunity to learn more about CSS floats, etc...Dale put up a great base, I just tweaked it a bit...

[Dale Ray]

Dale put up a great base, I just tweaked it a bit...

I just changed the colors and removed the fixed sized boxes from this design at Open Source Web Design. So any praise goes to the original author.

I noticed how close this was to Swrodfish's design because I just used the OSWD design for another site I was working on.

Another design with the rounded corner look in a two-column layout is at:

http://www.oswd.org/design/preview/id/3309