aniDB css conversion.

Elberet · Post by **Elberet** » Tue Dec 21, 2004 7:26 pm

Nah, all versions of IE are bugged, but only some are affected by this particular bug. ^^;

Grauw · Post by **Grauw** » Mon Jan 03, 2005 8:29 pm

pelican, I don't see your point - CSS usually makes pages /better/ suited for browsers which do not support stylesheets. They will be fed clear, clean, markup and do not have to go through hoops to try and make things look good when they can't. Lynx should have no problems whatsoever with a CSS styled page, as CSS is only about presentation and for Lynx a well-marked up document should be sufficient.

Also, using CSS and good markup should greatly lower bandwidth needs, as there is much less markup necessary, and the stylesheets are cached by the browser throughout the entire site.

~Grauw

Post by **pelican** » Tue Jan 04, 2005 4:08 pm

Grauw wrote:pelican, I don't see your point - CSS usually makes pages /better/ suited for browsers which do not support stylesheets.

Well, that may or may not be normally the case, but the sample in the first post uses (among other things, probably, as I've only glanced at it) CSS to indicate the image for an image link. This link is therefore potentially unusable in a graphical browser without CSS support. (It is in one that I use, for example.)

Lynx should have no problems whatsoever with a CSS styled page, as CSS is only about presentation and for Lynx a well-marked up document should be sufficient.

Well, it certainly should be about presentation, but it's being taken too far here.

Elberet · Post by **Elberet** » Wed Jan 05, 2005 4:26 am

Meh, why do you always argue about the details of implementation? -_- Just because there are a few problems in the first suggestion we've seen doesn't mean that the whole idea is inherently bad.

I'm sure anyone will agree that

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>AniDB in CSS</title>
    <link rel="stylesheet" type="text/css" href="anidb-default.css" title="AniDB Default" />
  </head>
  <body>

    <div id="header">
      <h1><a href="http://anidb.ath.cx/perl-bin/animedb.pl?show=main"><span>AniDB</span></a></h1>
    </div> <!-- #header -->

    <div id="headline">
      <div class="pagetitle"><h2>Show Anime - D.C.~Da Capo~</h2></div>
      <form action="animedb.pl" method="get">
        <div>
          <input name="show" value="animelist" type="hidden" />
          <input name="adb.search" class="adbsform" size="20" maxlength="100" type="text" /><br />
          <input type="submit" name="do.search" value="Search" class="yelbut" />
        </div>
      </form>
    </div> <!-- #headline -->

  </body>
</html>

is perfectly valid XHTML 1.1. (At least http://validator.w3.org/ does agree.) I'm also sure that nobody will disagree that the same page renders absolutely flawlessly in any browser, including years old text browsers, and works fine with about any text reader. On top of that, it doesn't use any images at all. Now for the CSS:

Code: Select all

body {
    background-image: url("img/back.gif");
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 10px;
    color: #000000;
    font-family: "Verdana", "Tahoma", "Arial", "Helvetica", sans-serif;
}

a:link, a:visited {
    color: #0000ff;
    text-decoration: none;
}

a:active {
    color: #ff0000;
    text-decoration: none;
}

a:hover {
    color: #3333ff;
    text-decoration: none;
}

#header {
    background-image: url("img/anidb07.jpg");
    background-repeat: repeat-x;
}

#header h1 {
    margin: 0;
    padding: 0;
    width: 863px;
    height: 91px;
}

#header h1 a {
    display: block;
    margin: 0;
    padding: 0;
    width: 863px;
    height: 91px;
    background-image: url("img/anidb01.jpg");
    background-repeat: no-repeat;
}

#header h1 span {
    display: none;
}

#headline {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: url("img/anidb03.jpg");
    background-repeat: repeat-x;
    width: 100%;
}

#headline div.pagetitle {
    margin: 0;
    padding: 0;
    background-image: url("img/anidb02.jpg");
    background-repeat: no-repeat;
    height: 43px;
    padding-left: 172px;
}

#headline div.pagetitle h2 {
    margin: 0;
    padding: 0;
    height: 43px;
    line-height: 43px;
    vertical-align: middle;
    background-image: url("img/anidb08.jpg");
    background-repeat: no-repeat;
    padding-left: 47px;
}

#headline form {
    padding: 0;
    margin: 0;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    background-image: url("img/anidb04.jpg");
    background-repeat: no-repeat;
    padding-left: 47px;
    height: 43px;
    width: 0; /* for IE only. */
}

#headline > form {
    width: auto; /* for real browsers. */
}

#headline form div {
    height: 43px;
    background-image: url("img/anidb09.jpg");
    background-repeat: repeat-x;
    text-align: center;
    line-height: 0;
    padding: 0;
}

#headline form input[type=text] {
    font-size: 10px;
    font-family: "Arial", "Verdana", "Tahoma", "Helvetica", sans-serif;
    color: #ffffff;
    background-color: #272D43;
    border: 1px solid #BFC2C9;
    margin: 0;
    margin-bottom: 1px;
}

.yelbut {
    -moz-border-radius: 4px;
    border-left: 1px solid #FFDD00;
    border-top: 1px solid #FFDD00;
    border-bottom: 1px solid #FF4D00;
    border-right: 1px solid #FF4D00;
    background-color: #FF9900;
    font-family: sans-serif;
    font-size: 7pt;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 1ex;
    padding-right: 1ex;
    margin: 0;
    cursor: pointer;
}

This is the result of about ten minutes of work. In another ten minutes, one could
- Rebuild the menu by using an <ul> wrapped into two layers of <div>s.
- Prepare a block element to hold the main content, formatted so that it falls into place correctly without wrapping the content further into table(s).
- Add the footer.

For the menu, modifying the existing artwork is a good idea but optional. If the menu frame is split properly, the CSS can be built in such a way that the menu content can expand infinitely, enlarging the menu area as needed (which isn't possible with tables).

And finally, as for the main content...

The episode and file lists should remain tables IMO. If this isn't a prime example of tabloid (sic?) information, I don't know what is.

Oh, and btw... curiously, this particular stylesheet even works in IE. Well, so far.