CSS Conversion.

All input, comments, and site suggestions here.<br />All Websites are constantly evolving works in progress, so fire away!

Moderators: Dale Ray, SrNupsen, Bluetooth, Jackanape

CSS Conversion.

Postby Swordfish » Mon Jan 15, 2007 8:48 pm

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 :roll: .

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.
Hmmm.....I'd like a cup of coffe! Thanks!
User avatar
Swordfish
 
Posts: 69
Joined: Wed Jan 10, 2007 2:58 pm
Location: Tromsø, Norway

Postby Jackanape » Mon Jan 15, 2007 10:24 pm

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?
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Dale Ray » Mon Jan 15, 2007 10:59 pm

Dale Ray
User avatar
Dale Ray
 
Posts: 1001
Joined: Sun Jan 19, 2003 6:02 pm
Location: NW Indiana

Postby Jackanape » Tue Jan 16, 2007 3:26 am

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...
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Jackanape » Tue Jan 16, 2007 3:26 pm

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.
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Jackanape » Tue Jan 16, 2007 4:28 pm

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!
Last edited by Jackanape on Thu Jun 21, 2007 12:52 pm, edited 1 time in total.
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby SrNupsen » Tue Jan 16, 2007 4:58 pm

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.
-----------------------------------------------------------------------------------------------------
Coranto is free software. I am available for custom work or troubleshooting.

http://www.sundaune.no - transkripsjon, webdesign, nettsider, tekstbyrå
http://www.vagbladet.no - satire, politikk, kultur, sport, nettavis
-----------------------------------------------------------------------------------------------------
SrNupsen
 
Posts: 2229
Joined: Tue Jan 09, 2007 6:46 pm
Location: Nesodden, outside Oslo, Norway

Postby Swordfish » Tue Jan 16, 2007 5:31 pm

"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.
Hmmm.....I'd like a cup of coffe! Thanks!
User avatar
Swordfish
 
Posts: 69
Joined: Wed Jan 10, 2007 2:58 pm
Location: Tromsø, Norway

Postby Jackanape » Tue Jan 16, 2007 5:32 pm

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.
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Swordfish » Tue Jan 16, 2007 5:45 pm

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 :D
Hmmm.....I'd like a cup of coffe! Thanks!
User avatar
Swordfish
 
Posts: 69
Joined: Wed Jan 10, 2007 2:58 pm
Location: Tromsø, Norway

Postby Jackanape » Tue Jan 16, 2007 5:48 pm

Swordfish wrote:"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...
User avatar
Jackanape
 
Posts: 632
Joined: Tue Jan 09, 2007 12:15 am
Location: Capitol of the Great State of New York

Postby Dale Ray » Tue Jan 16, 2007 8:44 pm

Jackanape wrote: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
Dale Ray
User avatar
Dale Ray
 
Posts: 1001
Joined: Sun Jan 19, 2003 6:02 pm
Location: NW Indiana


Return to Coranto.org Site Development

Who is online

Users browsing this forum: No registered users and 1 guest

cron