51 Reply by Louis (edited by CSpotkill 2004-01-10 10:34)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Kennel wrote:

You've now been working on the topic view. Will it not be an enormous job to also do all the other pages? I mean, with this kind of design, the actual HTML only describes what content is to be displayed and hardly anything about how it will be displayed. There are a large variety of pages in PunBB (not to mention the admin interface).

Well, in nearly every other page, you've a rough idea what you're working with, but the posts in viewtopic are completely up to the user, so you need to put in extra safeguards in the CSS and keep it flexible and dynamic. With post, viewforum, profile, search, userlist, and even the admin panel, you don't have to worry as much about keeping it dynamic ? the size of the Message-entry field, for example, won't change. Even modifying the viewtopic CSS to add multiple-post delete is easy to add, once the initial viewtopic layout is finished.

So this is the hard part, the hardest to get perfect and the rest of the CSS will be much easier ;) It's especially difficult because I've never tried to emulate a table-based layout precisely ... damn those borders, padding and strange IE bugs! All the small tweaks add up... I'll probably have to go though the CSS and clean out any unnecessary style rules.

I'm leaning towards using the box model hack and fixing the CSS for IE5 and 5.5, because everything's perfect for IE, except there's padding in the posts and I can't duplicate the padding with margins because of the border on the left. When I just put the border on the punauthorinfo dl, it doesn't reach down far enough, since it will stop when the contents in the div stops, so I must use both the post div and the authorinfo dl for the border, just in case the post is shorter than the authorinfo div, and have them overlap, but yet again ?

Excuse me. I was just rambling on ... It's getting late. I'll look at it tomorrow, maybe I'll get a new, fresh perspective on it.

The only other solution I can think of is to use a pixel-thin background with the border on it, repeating down the post. Hmm, that might just work ... and solve the IE5+5.5 display issue. I'll try it tomorrow. It also gives me an idea of how we could do the borders for the rest of the site quickly and easily ... just do it the same way.

BTW: The background images I'm talking about using are just small, 200 px wide by 1 px tall images with transparent backgrounds, similar to those old "spacer-gifs" everyone used to use ... however, and this is a rather big however, you would need to edit the image to change the color of the border when creating a new style sheet.

So, it's either Use box model hack to give IE5 and 5.5 different values for width, or use a background image which might or might not make it harder for people to customize the forums ... if they really wanted to customize the forums, they'd use their own background image, possibly, but ? hrmm. I haven't given up, I've just found thousands of ways that don't work ...

Good Night,


CSpotkill / Louis St-Amour.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB without <table>'s

CSpotkill wrote:

So, it's either Use box model hack to give IE5 and 5.5 different values for width, or use a background image which might or might not make it harder for people to customize the forums ... if they really wanted to customize the forums, they'd use their own background image, possibly, but ? hrmm. I haven't given up, I've just found thousands of ways that don't work ...

It's your call. I think I would prefer not having anything more than the style sheet to customize, but if it can't be done without the background image, it can't :)

I thought of another possible problem. Quite often, I hide/show a column in a table depending on whether a certain feature is enabled or not and whether the user is an admin/mod or not. Won't this be a problem?

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: Göteborg
  • Registered: 2003-02-25
  • Posts: 168

Re: PunBB without <table>'s

Anyone knows how a CSS-base layout looks in browsers available on the unix platform?
NS, Mozilla, FB, Opera, Konqueror
and text-based browsers like
Lynx, Links, Arena, w3
?

Cuz Pun is a good forum suited for text-based browsers due to it's simplicity and lightweightness.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB without <table>'s

RNilsson wrote:

Anyone knows how a CSS-base layout looks in browsers available on the unix platform?
NS, Mozilla, FB, Opera, Konqueror
and text-based browsers like
Lynx, Links, Arena, w3
?

Cuz Pun is a good forum suited for text-based browsers due to it's simplicity and lightweightness.

NS, Moz/FB and Opera should be no different than their Windows versions. I have no idea bout Konqueror and I'm not sure about text based browsers. I know PunBB is quite nice in links as it is now.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: Göteborg
  • Registered: 2003-02-25
  • Posts: 168

Re: PunBB without <table>'s

I don't normally use textbased only browsers other when i'm on remote sshlocation and needs something downloaded etc, but i wanted to bring it up anyways so all areas get their fair part of voices if a switch to css is made...

56 Reply by Louis

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

RNilsson wrote:

Anyone knows how a CSS-base layout looks in browsers available on the unix platform?
NS, Mozilla, FB, Opera, Konqueror
and text-based browsers like
Lynx, Links, Arena, w3
?

Cuz Pun is a good forum suited for text-based browsers due to it's simplicity and lightweightness.

http://www.CSpotkill.com/PunCSS/lynx.gif
PunBB's redesign, as tested in Lynx 2.8.3 for Windows.

I just tested PunCSS in Lynx 2.8.3 and Links 0.98 builds for Windows. One problem I noticed was that using true lists for navigation greatly extended the amount of screenspace used for navigation elements ? and that most of the exiting PunBB is not very accessible nor designed with keyboard navigation in mind.

A few easy solutions to this would be to add a "skip to first post" link for viewtopic, then change the posts to have "next post" and "previous post" links, so you could quickly skip down to a post you wanted to quote, perhaps. Also a good idea would be to incorporate the [new posts] link from the viewforum page to the viewtopic page, just beside the skip to first post link and call it "skip to new posts", perhaps.

Another good usability device (which would also save a bit of tabbing), would be to create a search box in the header that simply searches for keywords from every post in the forum and displays them Google-like, with search terms displayed in context, and results sorted by some measure of relevance, if it's possible.

The idea: User loads thread. Clicks "skip navigation" and arrives at the search box. Clicks "skip to first post" (jumps down to first post) and starts reading. Clicks a link in the post and loads a new thread. Tabs once and clicks "New Posts" (jumps down to first unread post in thread. User needs context and pushes Tab and Enter to select "Previous Post" and does this a few times, to read a few posts up the page ... then selects "New Posts" and jumps back down to continue reading ...

These links may be hidden with CSS, or shown somehow. Perhaps the Skip Navigation, Skip to unread posts and maybe a link to return to the top of the page would be handy for anyone, with graphical- or text-based browsers alike. It's just a preliminary idea, however.

Building Accessible Websites by Joe Clark has further details on navigation techniques for building accessible websites, specifically Chapter 8. (His entire book is online, I'd recommend it to anyone, although some parts are slightly out of date now.)

57 Reply by Louis (edited by CSpotkill 2004-01-11 06:36)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Kennel wrote:
CSpotkill wrote:

So, it's either Use box model hack to give IE5 and 5.5 different values for width, or use a background image which might or might not make it harder for people to customize the forums ... if they really wanted to customize the forums, they'd use their own background image, possibly, but ? hrmm. I haven't given up, I've just found thousands of ways that don't work ...

It's your call. I think I would prefer not having anything more than the style sheet to customize, but if it can't be done without the background image, it can't smile

I thought of another possible problem. Quite often, I hide/show a column in a table depending on whether a certain feature is enabled or not and whether the user is an admin/mod or not. Won't this be a problem?

Well ... frankly, I'd find using the box model hack to be easier to modify, as for many people who use CSS, designing around IE5's bugs is a way of life. But I can understand why you'd want a "hack-free" layout ...

As for the show/hide columns issue, it shouldn't be a problem, as the problem has nothing to do with columns like that, it would just replicate the black line running down the side of the posts, so I won't have to worry as much about the IE 5 and 5.5 positioning bugs.

<??? I mean this line and (so far) just this line. Everything else should have a fixed height of some kind or shouldn't need the padding, so I shouldn't need a background trick for any other page.

If you remove a column, the CSS for the column wouldn't have any effect and if we design the CSS correctly, it will expand just like the table-based layout would.

I haven't quite given up yet though, if I can avoid using the background-trick I would, since it would make it harder to customize this default theme. I'll work on the rest of the layout for now and come back to it after ...

58 Reply by Auron

  • From: England
  • Registered: 2004-01-07
  • Posts: 10

Re: PunBB without <table>'s

Would say if someone wanted to move the posters info from the left hand side to the right hand side work with out editing anything BUT the CSS FILE???

Auron

59 Reply by Louis (edited by CSpotkill 2004-01-12 01:38)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Auron wrote:

Would say if someone wanted to move the posters info from the left hand side to the right hand side work with out editing anything BUT the CSS FILE???

Auron

Yep. It would with just CSS with my conversion, as I said above. You could make two versions of the CSS file, one to position the poster info on the left side, the other to position it on the right, all just with the CSS.

Specifically, you'd float .punauthorhead, .punauthorinfo, .puncontactinfo and .pundateposted to the right and then reverse the margin on .punpostmsg, and float .punpostactions to the left. Finally, if we add the margin from the left of the table (so the gif is 1 px #606060, 199 px transparent, then 1px #606060) to the background image, then it's not a problem either. This is all possible because there is nothing in the HTML whatsoever to position the page, it's all self-contained in the CSS file, even the declaration of the background image. This is also why such radical design changes are possible, with exactly the same HTML.

  • Registered: 2004-01-12
  • Posts: 14

Re: PunBB without <table>'s

would that work with a fixed as well as a liquid based layout?

61 Reply by Louis (edited by CSpotkill 2004-01-12 14:16)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Sigma12 wrote:

would that work with a fixed as well as a liquid based layout?

Well, right now it's mostly a liquid layout, however the size of the post author info column is fixed, at about 180 px. If it were a liquid layout, you could still re-design the CSS for right-to-left from left-to-right. If you were refering to the post author background trick, then yes, I can see limitations with it, since if you currently resize the text it would have to wrap, but with the current table-based layout, it simply widens the colum to fit the text. The only other solution would be to let the text overflow the fake border or to switch to the Box Model Hack.

CSpotkill wrote:

Like the @import hack against Netscape 4 and the commented backslash hack against
IE5 Mac, Tantek Çelik's Box Model Hack is safe to use.

   It is safe because it only affects Internet Explorer 5 and 5.5. Internet Explorer 6 has
   fixed both the padding/border width calculation bug and the bug exploited by this hack.

   It is safe because there will not be an Internet Explorer 7. Longhorn will include it's
   own integrated browser, none of the IE code will be in it, since it will be completely
   recoded in .NET languages.

   It is safe because it is still ignored in future versions of IE6, even in IE 6.0.2900.2055,
   the next version of IE included in Windows XP SP2.

Should I use it instead? It would only affect the "framework" or "layout" CSS file, not the colours CSS files. The colours files could change every border colour with this method, as opposed to only most of the borders, with the background-trick. It will not be needed in every CSS layout of the forums, it does not affect the HTML at all. Should I finish 2 CSS layouts, one with it and one without?

Also, I edited the first post on this thread, to give this thread a bit more context.


CSpotkill

62 Reply by glo (edited by glo 2004-01-26 20:22)

  • glo
  • Junior Member
  • Offline
  • From: California USA
  • Registered: 2004-01-26
  • Posts: 2

Re: PunBB without <table>'s

I came here to post a kudo to the board creator and come across this post. I just installed PunBB for a friend. The installation was a breeze but incorporating the sites design was a bit frustrating and limiting because of the table layout. I was actually surprised it wasn't a CSS layout, though to be honest, I had never setup a BB before now. Glad I read this thread, it has given me more insight into the table setup. I could probably redo the way I incorporated my friends design but think I will leave well enough alone for now. wink

I actually thought of rewriting the CSS and doing away with the tables. I see now that I would have been in way over my head. I am not a geek, and even though I've hacked a few PHP scripts and changed some CSS styles successfully, I have very little knowledge of either one. But I have found using CSS for a sites design layout to be far superior to a table layout and much easier to manipulate.

I look forward to seeing what CSpotkill can manage to create using CSS. Kudos to him for giving it a try!

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB without <table>'s

Yeah, we are all looking forward to it (hint! hint!) :D

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

64 Reply by Louis (edited by CSpotkill 2004-02-01 02:44)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Rickard wrote:

we are all looking forward to it (hint! hint!) :D

(Laughs) Sorry guys. I'd put this on the backburner for a few days, working on various other (paid) projects. Then I forgot about it ;)

I'll get back to it now. As you noticed, the last thing I did broke the CSS layout. I was working on the accessibility for text browsers. But right now the CSS is a mess, so I'll probably go through and clean it up.

I was also working on a CSS version of the homepage. It's interesting, because while converting to CSS, I'm scrapping the tables and trying to find the most semantic code to replace them, yet at the same time, in browsers such as lynx, sometimes the less semantic approaches looks better. Then again, anything is an improvement from tables, so I'll focus more on the CSS for now. :)


Louis St-Amour, AKA CSpotkill.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB without <table>'s

That's nice to hear :)

Also, I can't emphasize this enough: If changing the current layout to some small degree makes your job a lot easier or makes the markup/style sheet much prettier, I'm sure we can work something out.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: Gothenburg, Sweden
  • Registered: 2002-07-03
  • Posts: 946

Re: PunBB without <table>'s

CSpottkill:
You got me convinced :)

It's sooo much easier to work with CSS (sometimes ;P). I've not made a major CSS-page yet, only smaller things. Right now im convering a larger page into CSS though, and the code is less than half the size of the original HTML in some parts... and much easier to understand :)

The page was originally written to work with Netscape 4.xx something, so it's a mess with all the tables... and I don't think we had any other choice at the time.

67 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: PunBB without <table>'s

I can't remember now how you were doing this. Are you using definition lists? I was just wondering because I saw a nice little article on their use at MaxDesign
http://www.maxdesign.com.au/presentation/definition/

The examples are worth a look. Some of the examples look very similar to parts of PunBB. Whether or not Definition lists are symantically correct seems to be up for grabs.

68 Reply by Louis (edited by CSpotkill 2004-02-03 04:57)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Paul wrote:

Are you using definition lists? I was just wondering because I saw a nice little article on their use at MaxDesign
http://www.maxdesign.com.au/presentation/definition/

I was using definition lists. But I changed my mind because although they could be more semantically correct, they don't look as good in Lynx and some older browsers. It's easy enough to be semantically correct for some of the HTML, but sometimes the more practical "what looks better" will win. As an example: Should I use a nested list to explain the nested relationship of the breadcrumbs, or just leave them as text in a paragraph tag under the header?

Also, it's amazing how the web design community keeps sharing different techniques. While doing this website, I stumbled upon this very problem and found nearly the same solution on my own, but with the other extensions in that post's comments, I may try tweaking the technique further ... and test it on a Mac ...

69 Reply by Paul (edited by Paul 2004-02-04 21:56)

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: PunBB without <table>'s

Check this out. phpBB converted to a tableless design.
http://portal.portland.co.uk/forum/index.php

Louis, interesting article about the floats. I really will have to swot up on negative margins. As for the breadcrumbs; if it's a list would that give people the option of having it stepped YABB style
   >your are here
        > now here
             >and even here.

70 Reply by Louis

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Paul wrote:

... if it's a list would that give people the option of having it stepped YABB style
   >your are here
        > now here
             >and even here.

Yes, good point. With the exception of IE, we could even remove the ">"s from the list items and use CSS to give ">"s at the beginning.

71 Reply by Louis (edited by Louis 2004-02-08 12:54)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Okay, I've started fresh, beginning with the basic HTML for the main page.

What do you think?

Where possible, I tried to use the most semantic markup, while also making sure it made sense in Lynx. Compared to the existing page, the new HTML posted above is much easier to understand inside lynx: See for yourself by downloading Linx for Windows.

It still has a lot to go, but I think it's a good start. I haven't forgotten viewtopic either, but I felt like starting fresh on a different page.

Spot / Louis

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB without <table>'s

That sounds like a good idea. I like the markup of the index page you did.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

73 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: PunBB without <table>'s

Nice. I have started tinkering with the CSS to see what I can come up with. Trouble is, I keep adding divs to block bits of the page together to make it easy to use borders and background-color.

74 Reply by Louis (edited by Louis 2004-02-08 22:30)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

Paul wrote:

Nice. ... I keep adding divs to block bits of the page together to make it easy to use borders and background-color.

Yes, that's the trouble, it's give and take: Should I add extra markup, thereby making the HTML more complex, or work with less markup, thereby making the CSS more complex? ;)

I just changed the encoding to UTF-8 now, to support the name and description of the second International forum listed.

75 Reply by Louis (edited by Louis 2004-02-09 01:23)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB without <table>'s

I've worked on some basic text formatting, with relative em units. With this CSS, it will be possible to resize the text and eventually, the entire design, in Internet Explorer for Windows. This is similar to the Elastic Lawn design at CSS Zen Garden.

Here's the styled version: index.html
Here's the original: unstyled.html

Outside of adding the <link> for the stylesheet, I didn't do a thing to the HTML.

Here's all the CSS I needed:

body { font-size: 65%; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 10px }
a { text-decoration: none }

h1, h2, h3, h4, p { margin: 0; font-weight: bold }
h2, h3, p { font-size: 1em; font-weight: normal }
h1 { font-size: 1.45em }
h4 { font-size: 1.2em }
p  { clear: both }

.navigation, .forums, .forums li ul, .forums li ul li ul, ul { list-style-type: none; margin: 0; padding: 0 }
.navigation li { margin: 0; padding: 0 0.6em; height: 1em; float: left; border-right: 1px solid #000 }
.navigation li a { position: relative; top: -0.2em }

It looks rough and it's all left aligned, because my next step is to break apart the .forums as a list and align it as if it were a table. I'll probably use span tags to hide the Topics: and Posts: headings, since when I added more semantically-correct h5 tags, it didn't look as nice in Lynx or IE3. It's not much of a difference anyway.