btw. it's also a requirement that the page is still usable with javascript disabled in the browser settings.
BYe!
EXP
Stylesheets for pages [DONE]
Moderator: AniDB
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
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
anyways i'm looking into the css thingie
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
anyways i'm looking into the css thingie
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
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
: 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
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
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
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
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..
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..
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
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
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