Author Topic: CSS website is making me dizzy!  (Read 12618 times)

Offline David Perfors

  • Developer
  • Lives here!
  • *****
  • Posts: 560
CSS website is making me dizzy!
« on: July 15, 2005, 08:42:34 am »
If the CSS is setup in the right way, it is possible to change the presentation *in a snap*. So probably the CSS is not setup in the right way ;)
OS: winXP
Compiler: mingw
IDE: Code::Blocks SVN WX: 2.8.4 Wish list: faster code completion, easier debugging, refactoring

Offline rickg22

  • Lives here!
  • ****
  • Posts: 2283
CSS website is making me dizzy!
« Reply #1 on: July 15, 2005, 08:46:55 am »
oops, i was going to delete the thread, but you posted it :P

AGH too late.

OK here's some of the original text.

editing the CSS pages is a royal pain... yadda yadda... 800 lines! Double spaced! yadda yadda...

Supposedly CSS should be about being able to change the presentation *in a snap*.... yadda yadda... Separating the content from presentation... need help with this...

I'm sure we could do without the rounded borders (currently hardwired into images) and make this thing a lot more manageable. And a mozilla extension would allow us to use rounded borders.

I'm sorry, but I'm afraid we'll have to sacrifice the pure-css layouts to make the site maintenable by mere mortals :(

I'm afraid I need help with this... :( Not that I'm not grateful for the site design, I am...
Per Eckerdal, mind giving me a hand with this? We need to have this ready by next week!

Offline mandrav

  • Project Leader
  • Administrator
  • Lives here!
  • *****
  • Posts: 4315
    • Code::Blocks IDE
CSS website is making me dizzy!
« Reply #2 on: July 15, 2005, 09:00:31 am »
If it's too much for you and you 'd loose precious development time on it, maybe it'd be better to find another volunteer to maintain the site (Per?).

Yiannis.
Be patient!
This bug will be fixed soon...

Offline David Perfors

  • Developer
  • Lives here!
  • *****
  • Posts: 560
CSS website is making me dizzy!
« Reply #3 on: July 15, 2005, 09:08:11 am »
I thought Per doesn't has a computer available (since 13 July) at least I thought that I readed that somewhere.

But what exactly should there be changed in the css?
OS: winXP
Compiler: mingw
IDE: Code::Blocks SVN WX: 2.8.4 Wish list: faster code completion, easier debugging, refactoring

Offline mandrav

  • Project Leader
  • Administrator
  • Lives here!
  • *****
  • Posts: 4315
    • Code::Blocks IDE
CSS website is making me dizzy!
« Reply #4 on: July 15, 2005, 09:14:58 am »
Quote from: mispunt
I thought Per doesn't has a computer available (since 13 July) at least I thought that I readed that somewhere.

Yes, I remember it.
But, Per has given us a fully functional site to start with. We just have to edit the start page text, add any more screenshots if we 'd like and use it.
If we want to change colors or anything else we *could* wait until Per was available again, provided he 'd like to maintain the site.

Yiannis.
Be patient!
This bug will be fixed soon...

Offline rickg22

  • Lives here!
  • ****
  • Posts: 2283
CSS website is making me dizzy!
« Reply #5 on: July 15, 2005, 06:02:34 pm »
I got an idea. I could take Per's design and recreate it from scratch. I have A++ experience on redesigning websites, and I'm sure I could do it this weekend without much effort. Besides, all the important bugs have JUST been fixed (thx Yiannis!), and I have come to consider myself the "PR person" for this project (hope you don't mind).

So, I'll remake the site and have it ready for RC1 (and hopefully, Slashdot! *gulp* )

Oh yeah, btw. Yiannis, I think you should disable anonymous posting, lest the GNAA and other trolls begin posting garbage  :roll:

(Oh, forgot! PHP 4.4.0 has been released, it contains the fix for the infamous XML-RPC vulnerability - perhaps it might be good telling the host admins about it)

Offline David Perfors

  • Developer
  • Lives here!
  • *****
  • Posts: 560
CSS website is making me dizzy!
« Reply #6 on: July 15, 2005, 06:15:51 pm »
I am wondering: why do you have to change the design?
OS: winXP
Compiler: mingw
IDE: Code::Blocks SVN WX: 2.8.4 Wish list: faster code completion, easier debugging, refactoring

Offline rickg22

  • Lives here!
  • ****
  • Posts: 2283
CSS website is making me dizzy!
« Reply #7 on: July 15, 2005, 06:43:55 pm »
Mispunt: I wanted to give a bold font to the subtitles on the menu . For that alone i had to spend more than half an hour studying how the design worked.

If the design FORCES me to spend a lot of time just to change a TINY detail, then it's flawed from the beginning.

I choose to stay with the current design and only change (by applying small patches) "the necessary", we might end up with a website that could barely be maintained (in the best case). And from my experience, that is a no-no. It would be like having codeblocks without plugins capability. Each tiny modification would make changes into the SDK and well... you can imagine.

Offline David Perfors

  • Developer
  • Lives here!
  • *****
  • Posts: 560
CSS website is making me dizzy!
« Reply #8 on: July 15, 2005, 07:31:08 pm »
I understand :)
OS: winXP
Compiler: mingw
IDE: Code::Blocks SVN WX: 2.8.4 Wish list: faster code completion, easier debugging, refactoring

Offline kagerato

  • Multiple posting newcomer
  • *
  • Posts: 56
    • kagerato.net
CSS website is making me dizzy!
« Reply #9 on: July 16, 2005, 07:46:26 pm »
Quote from: rickg22
Mispunt: I wanted to give a bold font to the subtitles on the menu . For that alone i had to spend more than half an hour studying how the design worked.

If the design FORCES me to spend a lot of time just to change a TINY detail, then it's flawed from the beginning.


If I understand the change you're talking about, all you did was insert some <b> tags around the static text "modules", "support", and "others".

That's not using CSS at all; rather it is very basic HTML.  If you wanted to implement a CSS solution, it would have been simple enough to copy the the definition for ".pn-title", downsize the font one pixel, and rename it to ".pn-bold".  In the HTML, placing a <font class="pn-bold"></font> around the appropriate text would then apply the desired effect.

Having a separate definition named that might be counter-beneficial; something along the lines of "pn-subtitle" or such probably would be more helpful.

Quote
I choose to stay with the current design and only change (by applying small patches) "the necessary", we might end up with a website that could barely be maintained (in the best case).


In my opinion, the flaws in the existing design have absolutely nothing to do with the cascading style sheet.  In fact, many web designers these days would not work without them.  The problem often lies in more of a ignorance of what CSS can do (and making an effective implementation), I feel.

For example, the HTML clearly shows many table definitions.  Tables are quite redundant (unnecessary) if one is using CSS.  Content can be organized into rectangular blocks (the same concept as tables) in CSS, but with much greater simplicity than those nested definitions that HTML tends to require.

The readibility of the internal HTML definitions would be much improved if they maximized their usage of CSS.

Also, I've noticed some PHP usage throughout the site (besides the forum, which is obviously some variant of phpBB).  The sidebar links, however, seem to be statically written into each page of the site.  With PHP available, this can be avoided.  In the simplest case, you can use PHP to insert the shared information from a seperate file.  With that method, the sidebar's content would only be written once, in a single file.  Modify it just once there, and the changes automatically apply to all pages which import that same content (which literally seems to be every page).

The formatting of the actual page definitions could use some more consistent structure, though that still has part to do with the use of HTML tables.

Anonymous

  • Guest
CSS website is making me dizzy!
« Reply #10 on: July 16, 2005, 08:18:19 pm »
...probably you have already considered this option...
...probably this topic has already been discussed...

...anyway, here is a humble suggestion.

I LOVE a little CMS, Etomite, and especially its recent, powerful fork MODx, because it reverses the viewpoint of ordinary CMSs. Normally when you build a site with a CMS you fit your content into the CMS's structure... and you have to live with it. Instead with MODx you can take your current site, with your current design; and, with very little efforts, turn it into a dynamic, easily manageable site!

For example, simply insert the keyword [*content*] in your template, and you'll have your keyword replaced by the page content; put [*title*] and you'll have the title, etc.

Moreover, Etomite is fast, light, easily customizable... well worth a try!

Greets,
Luca

Offline rickg22

  • Lives here!
  • ****
  • Posts: 2283
CSS website is making me dizzy!
« Reply #11 on: July 19, 2005, 12:06:25 am »
Thanks for your suggestion! :) We'll think about it for future versions of the website.

Anyway, guys I found this cool feature: Rounded borders for mozilla. ( -moz-border-radius CSS extension which is actually based on CSS 3.0 ).
This will certainly help me replicate the rounded borders of the test page without having to resort to wizard's CSS techniques.

http://www.intertwingly.net/blog/

Moz users get the rounded borders, while IE users just see square borders. I'm sure the IE users won't miss the rounded borders ;-)

Offline rickg22

  • Lives here!
  • ****
  • Posts: 2283
CSS website is making me dizzy!
« Reply #12 on: July 19, 2005, 07:26:48 am »
Update:

Already redesigned the infrastructure using a bit of the framework i made for my boss' intranet 8). For the curious, it's based on Brian Lozier's template engine (tweaked and modified by moi, of course ;-) )

I had designed that framework so I could make very complex websites very easily. Of course, since we're not having an intranet, i cut out most of the code.

And now I'm redesigning the CSS. It's split in 3 sections:

1. General positioning / size
2. particular positioning / size
3. colors

So, not only it's maintainable, it's getting pretty guys, VERY pretty :D

I'll keep you posted.