Stylesheets for pages [DONE]

old granted and denied feature requests

Moderator: AniDB

exp
Site Admin
Posts: 2438
Joined: Tue Oct 01, 2002 9:42 pm
Location: Nowhere

Post by exp »

btw. it's also a requirement that the page is still usable with javascript disabled in the browser settings.

BYe!
EXP
fahrenheit
AniDB Staff
Posts: 438
Joined: Thu Apr 08, 2004 1:43 am
Location: Portugal

Post by fahrenheit »

exp i have a question about your html output to the pages, i'm assuming that you get the ep/file info bit of every anime done in a chunk right?

I'm asking 'cause i've have been spliting the anime pages in bits and up to the moment i have like 19 diferent sections, plus an extra 4 or 6 for extra content that one could use to further alter the layout, but disregarding the layout images of the current layout, i got these data blocks:

- nav links (mylist, myplace, etc)
- login part (profile, logout, etc)
- search part (the search box)
- anime title (the large title over the anime pic)
- anime image
- anime information (kanji title etc, the thing on the right of the image)
- anime description (below the pic)
- awards
- votes
- mylist info on the anime
- group info
- ep/file info
- edit/add anime/files links
- notes (i choose to split this from the edit/add anime links)
- version info

Could you tell me if there is any kind of problem in spliting the episodes/special episodes list or they are the same block of output data?

This question may sound weird but cause i didn't build the page it's like somewhat of troubling my mind :P

anyways i'm looking into the css thingie :)
exp
Site Admin
Posts: 2438
Joined: Tue Oct 01, 2002 9:42 pm
Location: Nowhere

Post by exp »

well,

basically every ep is more or less self contained.
so splitting normal eps and specials into two divs would be pretty easy.

BYe!
EXP
fahrenheit
AniDB Staff
Posts: 438
Joined: Thu Apr 08, 2004 1:43 am
Location: Portugal

Post by fahrenheit »

it's me again with a new question :P

hmm, exp, you use, like a template for the output html?

example: you have something like the anime.tpl and mylist.tpl for the site or is it embembed with the code?

anyways i'm having a very slow moving about it, but it's moving :P
exp
Site Admin
Posts: 2438
Joined: Tue Oct 01, 2002 9:42 pm
Location: Nowhere

Post by exp »

fahrenheit wrote:hmm, exp, you use, like a template for the output html?
nope, back when I started anidb I decided against it, bc of lazyness and performance reasons.

BYe!
EXP
fahrenheit
AniDB Staff
Posts: 438
Joined: Thu Apr 08, 2004 1:43 am
Location: Portugal

Post by fahrenheit »

today i had a lot of hours to waste, so i got into the css layout thingie, after some hours, i got this html:

: http://pwp.netcabo.pt/fahrenheit/projec ... /page0.htm :

and this cascading style sheet:

: http://pwp.netcabo.pt/fahrenheit/projec ... nimedb.css :

and this final html+css:

: http://pwp.netcabo.pt/fahrenheit/projec ... b/page.htm :

There are some issues:

1) for some reason, the favicon and the scrollbar styling is not applying.
2) on the search box, it gets off by 1pixel to the bottom because of the form tag on the html part of the thing.
3) i had to rewrite the nav html, because it was giving me an headache trying to fit the side thingie with css only.
4) the layout is off for some pixels at some areas, no big issue.
5) at first i tried to make the anime picture independent of the info table, couldn't and had to rewrite the info table html as well..

And now i want comments on both the html and css parts and i was wondering if anyone can do a quick a dirty css style to use with the current html, to see if it's okay or needs more changes/adds.

note that i tried to recreate to the max the actual anidb look, so it may create certain issues with new styles, but there are 6 additional tags for one to have fun.

i think that's all for the moment
exp
Site Admin
Posts: 2438
Joined: Tue Oct 01, 2002 9:42 pm
Location: Nowhere

Post by exp »

looks interesting.

a possible improvement might be to include all used layout images via css (in order to allow custom styles to replace all images, i.e. login, profile, +, -, ...)

however, I think there is still one major issue which would really improve it.
right now it's aimed at ppl who want to include their own styles and doesn't offer many other benefits.
my main hope for a css version of anidb would be to reduce the amount of html/table code in the actual content area too.
this would mean i.e. formating the entire episode name/file data listing on the anime page via css.

BYe!
EXP
fahrenheit
AniDB Staff
Posts: 438
Joined: Thu Apr 08, 2004 1:43 am
Location: Portugal

Post by fahrenheit »

hmmm, good point, the profile and stuff imagery, i knew i had overlooked the line that's bellow the banner, but yeah the profile, +, login/out etc images is done realy easy.

as for the file, groups, mylist, information and votes tables, especialy the episodes table, that to take out of a table would give major work..

Anyways, same links as before now with images by css, note that i'm using a background-image to replace images and i've found out that if the alt tag is present it overlaps the image, so i've removed the alt tags from images.

Also exp, to style the mylist icons and state icons you have to introduce diferent ids at the html generation, cause the current behaviour just styles one image, cause all images get the same name?

As for the converting everything to tables.. hmm i think that's a bit extreme..
Skywalka
Posts: 889
Joined: Tue Sep 16, 2003 7:57 pm

Post by Skywalka »

current version looks a bit strange in firefox and the search box in the top right doesn't show correctly (namely the buttons for sending the search request).
fahrenheit
AniDB Staff
Posts: 438
Joined: Thu Apr 08, 2004 1:43 am
Location: Portugal

Post by fahrenheit »

now that you mention it, yeah it looks odd, it's a problem that i have all ready fixed in a non uploaded version, in the non uploaded version i also separated some blocks, to make possible to for example to switch sides of the navbar, etc.

Regarding the data block, the block where all the data off the anime is shown, i have a tiny problem, i could make all the items postioned by absolute (meaning you can put them anywhere you like), but the because all the individual blocks in this main block have variable heights it would look bad, because you can't prevent possible overlaps, so they are all relative positioned, i made these independent blocks:

Banner - Banner
Bellow Banner Div - The line bellow the banner where the search box is contained
NavBar - Navbar
Data - Where the data is shown

These 4 items atm can be put anywhere in the page by means of absolute positioning, other than that every individual id can have it's properties altered or being disable totaly.

But anyways, due to the dynamic nature of the anidb site and its data, i think that it's better to maintain just 3 or 4 main blocks, regarding the data tables, i think it's atm a good ideia to maintain certain tables (like the ones i mentioned before), because i realy don't know how to make them dynamic..

When i can i will upload the new html and css pages

have fun
Locked