AniDB css conversion (PetriW style)

[PetriW]

http://petriw.com/creativity/anidblayout/

Ok, I didn't pick the Anime page like fahrenheit but the advanced search page (yes I'm lazy!). Mainly because of the genre list there.
No sensible names on the div tags, does the work anyway.

Notice that the html page was written first then the css was written to show the AniDB layout, next project is to make a second layout without changing any html. (well, beside the img tags)
Also notice that the page only has ONE table while fahrenheits page has several still, I consider that a good thing as it really cleans up the page.

I don't know of any issues with this layout, it works in IE6, Mozilla1.0 and Opera8.

Known deviations from the original page:
1: slight different for the text next to the help / howto icon, I liked it better than way plus NO TABLE.
2: login box has moved a few pixels, this to fix the wrap bug that is there today plus NO TABLE.
3: quite noticeable difference in the genre list, I felt it looks better this way so don't want to mess with it... best of all NO TABLE to make the columns. $$ Promise, any logic coder would appreciate if their html designer using lists insteads of tables.

[fahrenheit]

hmm.. your layout is much better than mine, but i never said i was anything good at css

anyway did a little work on yours, now the imgs are by css.

a hint, try to arrange the page in diferent ways, if you can without changing the html, its done

http://fahrenheit.home.sapo.pt/projecto ... ayout.html

[PetriW]

And it works in all my browsers, thanks I'll change the example immediatelly. We were drowning #anidb in how to do it but I couldn't get it working.

[PetriW]

Okay, updated based on feedback from Elberet and fahrenheit.
First thing I tried with those images was correct only the background image was wrong leading to hours of searching.

The spans and the genrelist ul are now using class instead of id, kinda um... smart.
Login info placed in divs+params for easier modification.
And lots of new divs for anyone who's into modding a layout to play with. (Yeah, in the anidb layout almost all those divs are ignored... Dunno how anyone can use THAT many div tags )

[PetriW]

And tested the layout in IE quirks mode (ie5/ie5.5), seemed to work quite ok, sure there were some bugs but not something you'd notice unless you use multiple browsers.

[exp]

very nice, indeed :o)

but in the end you'd have to take care of the anime page too :P
as that one is without doubt the most important page on anidb.
which means it's the one page which will probably require most work.

BYe!
EXP

PS: make sure the AoM release isn't affected too much by this extra work }:o)

[Elberet]

For starters, the CSS/based layout can be used as a mere wrapper around the old-style HTML tables. If a content-div is properly nested into the main design, it shouldn't matter what it contains. You can change the main layout to CSS right now and take your time converting the individual sub-scripts' output to clean HTML with CSS designs later on.

[PetriW]

If a content-div is properly nested into the main design, it shouldn't matter what it contains.

Layout is somewhat lacking here but I'll fix that in next update.
(Page title and the search box are nested improperly leading to some pretty steep limitations, figured I should separate the login box too.)

Edit: Anyway, the important thing is when you implement this you always import the main template from a separate file and the set the content, aka:
1. Do queries, calculations etc.
2. Build the body of the document.
3. Import the layout.
4. Set variables in the layout.

Point 4 for anidb is essentially set the page title, target of the search form, body text and if present the sidebar.

[PetriW]

Posted update, all it really does is make the layout more modifiable by scripts. Should probably add a second submit button to the search form in case someone doesn't want to use a graphic button, will fix that later.

Essentially current layout is a tree like this

Code: Select all

-supercontainer
  -banner
  -container
    -content-a
    -content-b
      -navmenu
      -logininfo
      -searchbar
      -pagetitle
      -sidebar
      -bodytext
  -footer

[Elberet]

Hm, my instincts suggest a different layout:

Code: Select all

<body>
  #head
    #headline
    #pagetitle
    #searchform
  #menu
    #navigation
    #loginbox
  #body
    #contents
      .[specified by current script]
    #footer

"#" means that the section is an id'd block element (e.g. a <div>), and "." means that it's a certain class. The actual class of the ".[specified by current script]" section is set by, as it says, the script which currently runs, e.g. the animepage would set that element to class="animedetails" or, better, output several elements with classes "animedetails", "animevotes", "groupdetails" and "filetable". Until that particular script does that, it can just dump the current output right into #content, which should make sure that "normal" HTML without specific styles appears correctly within that block element.

This order of element is IMO the most natural, i.e. it's how one would expect the elements to appear if there were no styling at all, and hence no left and right columns (or a form that gets squeezed into the title area somehow). For the same reason, I always try to use normal HTML block elements such as <h1> in favor of <div>'s with special styles - after all, with styles turned off, it should be possible to get an overview of the page's logical structure immediately.

[PetriW]

That was how it was laid out in the previous version and follows the current AniDB layout.
However, it becomes very limiting to use unless you use absolute positioning. The new order is meant to be more suitable for a float: left/right approach. While it's easy to move the pagetitle above a dynamically sized navmenu with the current layout specifying the pagetitle / search before the navmenu kills off a lot of layout options (as it's dynamically sized).
I also have no idea what headline is supposed to represent, there's nothing to go into something like that today.
You also fail to place out the sidebar.

There does need to be a .class specifier for the bodytext and sidebar though.

As for supporting lynx / netscape 4.... I dunno... Can they even load anidb today with the need for zlib support?

[Elberet]

I can't see how this would be too limiting. position:absolute is relative as well: relative to the upper left corner of the containing block-level element with either position:relative or absolute. Generally, from what I've read, the best approach to layout out elements in columns is to avoid float's and use other positioning methods, e.g. for a three column layout:
- column-container with position:relative.
- col 1 with position:absolute and width:100
- col 2 with margin-left:110 and margin-right:110
- col 3 with position:absolute, right:0 and width:100

#head is simply a container.
#headline is the word "AniDB" and the images that make up the AniDB logo.
#pagetitle is the current page's title, e.g. "MyPlace - user (uid)"

#menu is the container for the sitebar.
#navigation is the sidebar's navmenu area.
#loginbox is the box with the login/profile/logout form and links.

[PetriW]

I don't see how the float supportive layout prevents anything of what you suggest, I do however see how your layout strictly prevents float usage.
The only reason I can see not to use floats is that Internet Explorer doesn't implement them properly and that's easy to work around with a simple * html in the css.

Made a quick sample of a layout using floats and no images at all:
http://petriw.com/creativity/anidblayout/brown.html (needs a background image to fill the left side but beside that it's ok imho, I'd prefer it over the current theme)

Looks different in IE but proves footer needs to be inside the bodytext div. Pretty poor manner for Microsoft to not update their browser imho.

[Skywalka]

could you post a comparision between the sizes of the regular AniDB current layout and your CSS approach?

I just want a benchmark to see what the current improvement is, since I don't really know too much about CSS and I just want to know whether your work is a great accomplishment

I wonder where you found the time because you know... *mumbles something indistinct*



Hey I didn't say anything, I like the idea of faster loading times for the InuYasha page and I guess this CSS approach will accomplish that?

[CodeZ]

As for supporting lynx / netscape 4.... I dunno... Can they even load anidb today with the need for zlib support?

At least, lynx [2.8.4rel.1 (17 Jul 2001)] does understand compressed anidb okay. Of course for text-browser it it quite hard to surf with it, but basic information like things next to anime picture are readable. All thou lists like ep-list in anime and mylist are a bit hard to read but they are readable thanks to pictures' alt-tags
I wonder how about that netscape 4... it is quite old, but so is that lynx as i checked its version..