Learn Japanese with JapanesePod101.com

View topic - Navigation bars in HTML

Navigation bars in HTML

NO SPAM ALLOWED! Discuss stuff not related to Japan or Japanese. The rules are the same in this forum as in the other forums.

RE: Navigation bars in HTML

Postby Chris Hart » Sat 12.09.2006 4:34 pm

ashitaka wrote:
Well IE7 is the anti-IE,
i've never been able to see why people like it so much.

I don't understand why some people don't like it.


Bugs? Web based applications that won't work with it?...
-.. .   -.- -.-. ---.. ..- ..-. ...-

I am nerdier than 97% of all people. Are you a nerd? Click here to find out!
User avatar
Chris Hart
 
Posts: 577
Joined: Wed 07.05.2006 3:36 pm
Location: 未確認飛行物体

RE: Navigation bars in HTML

Postby zengargoyle » Sat 12.09.2006 4:55 pm

richvh wrote:
Ok, this is close to what I want, if you guys can help me figure out the bugs: sample page

what bugs? looks just peachy to me. :)
Huh? I must be dense; where exactly do I execute the wget command, and will it work for me on a Windows box?

this would probably be even harder than the CSS parts....

you mentioned that your hosting server doesn't have any PHP or anything else other than plain static HTML page hosting. so the idea is that you setup Apache and PHP on your own machine. then you write your PHP scripts and your HTML pages taking full advantage of all the magic you can do with Apache+PHP. then, once you're happy with everything, you visit the index.html page, and use the Save As in your browser to save the generated HTML to a file, then you visit the Chapter 1 page and do the same, then the Chapter 2 page and do the same, then ....

'wget' is a Unix program that simplifies the process. you can give it a start URL 'http://localhost/book.php?chapter=index' and it will spider through the pages and download them all. there are native Win32 ports of wget here, and i'm sure there are other GUI based programs that do the same thing.

but to do it this way, even after installing the Apache+PHP, you would have to learn some Apache config and some PHP voodoo in order to get the URLs to be suitable for a static version.

from something like:
http://localhost/book.php?chapter=index
http://localhost/book.php?chapter=1
http://localhost/book.php?chapter=2

to something like;
http://localhost/index.html
http://localhost/chapter1.html

would take some URL rewriting on the Apache side or some complex stuff in the PHP, depending on which way you go about it.

but, once you mirror your PHP version into a set of saved static pages, then you just upload thos pages to your hosting service and you're all set. you get to use all of the fancy PHP templating/including/auto-link-creation type features and turn them into a static copy that you can upload, or even make a downloadable .zip archive of the book if you like.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Sat 12.09.2006 4:59 pm

Chris Hart wrote:
As far as your sample page, are you trying to set up a 3 section layout like this? If so, I can e-mail you the code.

4 section, actually, with a static navigation/story title header, both the table of contents and chapter text seperately scrollable under the header, and a footer with the HTML validation link and copyright notice.
zengargoyle wrote:
richvh wrote:
Ok, this is close to what I want, if you guys can help me figure out the bugs: sample page

what bugs? looks just peachy to me. :)

In Firefox, depending on font size/browser width, I get a vertical white band on the right edge of the #contents panel, and any vertical scroll bar (when needed) disappears under the #story panel. I also get a horizontal scroll bar on the #story panel for some reason, and have no left/right margins in that panel. The text/image in the #footer also has to be moved down a bit so they don't get clipped by the #contents. The navigation links also tend to disappear when the font size is increased.
Last edited by richvh on Sat 12.09.2006 5:12 pm, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby richvh » Sat 12.09.2006 8:47 pm

Zengargoyle tweaked my layout to something that looks great in (at least) Firefox 1.5, Netscape 7.1 and IE 7. You can check it out starting at chapter 1; so far I have up through chapter 8 online.

Chris, there seems to be a way to set up Lynx for Unicode, but it doesn't look easy.

Edit:
Since it looks like I'm going to go the CSS route, could someone direct me to some example scripts for doing the Apache/PHP wizardry involved? I've downloaded and installed Apache 2.2.3 and PHP 5.2.0 already, and I have a working template for (at least) the non-ruby part. I guess I better work on the ruby side now.

I suppose it wouldn't be too hard to write the PHP so it would (optionally) filter out ruby tags, so I only have to maintain one file per chapter, right?

Edit 2:
A sample ruby side file is up for browser test.
Last edited by richvh on Sat 12.09.2006 9:53 pm, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby richvh » Sun 12.10.2006 4:15 pm

[Deleted last post, problem resolved.]
Chapters 1-11 for both ruby and non-ruby versions are up at nonruby test directory and ruby test directory (I would have had all the files up, but got interrupted editing the chapter files, and forgot to come back to them, so chapters 12-29 are currently without chapter text.)

Beat them up, and let me know of any problems (and fixes, if you know of them.)

[Edit: remaining chapters updated.]
Last edited by richvh on Sun 12.10.2006 5:29 pm, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Sun 12.10.2006 4:45 pm

edit: lol, looks like you got it fixed...

----

for the curious, and if somebody *knows* how to use Apache+PHP on Windows, please give it a test. i know absolutely nothing about Windows+Apache+PHP...

http://gir.usc.edu/tjp/richvh/bookstuff.zip

this is a very basic example of a 'book' type application. assuming that it is put in http://localhost/richvh, it uses mod_rewrite to turn URLs like:

http://localhost/richvh/chapter1.html
and
http://localhost/richvh/ruby/chapter1.html

into:

http://localhost/richvh/book.php?chapter=1&ruby=no
and
http://localhost/richvh/book.php?chapter=1&ruby=yes

the book.php script then includes a contents.php file that has a list of the available chapters and their title information, then it includes the template.html file.

the template.html file uses the contents.php information to build some navigation links, and to build a Table of Contents like list of the other chapters. then it includes the actual chapter text from a chapter#.html file and sends it all back to the browser.

----

it errors out with a 404 error. The individual chapter texts are in chaptern.php; should I rename them to chaptern.html and change the template.html to reflect the changed extension?


the chapter texts should be in 'chapter#.html' files. the template.html file uses this bit of code to load them:

$contents = file_get_contents("chapter" . $chapter_num . ".html");

so if you texts are in chapter#.php files, you should either move them to .html files, or change that line above to use ".php".

debugging wise, what happens when you browse the page with your browser? some things to check....

can you go to: http://localhost/richvh/book.php?chapter=1&ruby=yes
and get the page you expect? if so....
can you go to: http://localhost/richvh/ruby/chapter1.html
and get the same page? if not, then the mod_rewrite part isn't working.

create a 'info.php' file with this inside: "<? phpinfo(); ?>"
can you go to: http://localhost/richvh/info.php
and get a big long page of information about your PHP setup? if so, at least PHP is working.

the mod_rewrite is configured in the .htaccess file, you may need to configure Apache to allow you to use a .htaccess file. some setups don't allow the use of .htaccess, or they restrict the things that can be configured in the .htaccess file. you might even have to rename the .htaccess file on Windows, i'm not real sure...

my apache httpd.conf has this:

<Directory "/var/www/localhost/htdocs">
Options Indexes FollowSymLinks
# the AllowOverride All lets me do *anything* in a .htaccess file
AllowOverride All
Order allow,deny
Allow from all
</Directory>

so.... i guess the steps towards debugging go like this:

make sure PHP works with the 'info.php' test.
make sure the book.php works by going to the 'ugly' url: http://localhost/richvh/book.php?chapter=1&ruby=yes
make sure the mod_rewrite works by going to the nice url: http://localhost/richvh/chapter1.html

then, in theory, everything else should work. you might try commenting out these lines in book.php:

$string = preg_replace( '{<ruby.*?<rb>}i', '', $string);
$string = preg_replace( '{</rb>.*?</ruby>}i', '', $string);

it's possible that your PHP is not built with the Perl Compatible Regular Expression (PCRE) library. if that's the case, these lines would cause PHP to croak when trying to remove the ruby.

your directory structure should look something like this:
.
|-- .htaccess
|-- README.TXT
|-- book.php
|-- chapter1.html --- these are the 'content' parts.
|-- chapter2.html
|-- chapter3.html
|-- chapter4.html
|-- chapter5.html
|-- chapter6.html
|-- contents.php --- this is the 'index of chapters' part.
|-- info.php --- for testing PHP
|-- static_version --- this directory holds the results of the wget command.
| |-- chapter1.html -- these are the 'static' versions of the pages.
| |-- chapter2.html -- suitable for uploading to a non-PHP server.
| |-- chapter3.html
| |-- chapter4.html
| |-- chapter5.html
| `-- chapter6.html
|-- template.html --- all the good stuff is in here.
`-- wget.command.txt
Last edited by zengargoyle on Sun 12.10.2006 4:46 pm, edited 1 time in total.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Sun 12.10.2006 5:48 pm

The first problem I had was that the <? tags had to be changed to <?php tags to work, then I had to enable rewrite in the Apache config file. A few typos fixed here and there, then I found out the ruby files didn't pass certification as XTHML 1.0 Strict, so I changed the DOCTYPE and certification image to XTHML 1.1.

What is the base directory for relative file references from an included CSS file? The directory of the included CSS file, the directory of the including file, or what?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Sun 12.10.2006 6:00 pm

http://archivist.incutio.com/viewlist/css-discuss/75934

looks like the BASE for CSS files is the directory where the CSS file lives.

so if you had:

foo.html
css/default.css
img/blah.jpg

then in default.css you would use: url(../img/blah.jpg)
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Sun 12.10.2006 6:26 pm

I decided to go live with it. You can see it now at http://www.citlink.net/~richvh with a slightly redesigned front page.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Sun 12.10.2006 6:52 pm

Looks just fine in IE7.
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby richvh » Sun 12.10.2006 7:07 pm

ashitaka wrote:
Looks just fine in IE7.

Unless you change the text size, then it gets seriously broken.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby richvh » Mon 12.11.2006 10:23 am

IE 6 glitches:

The top (with text size medium or larger) and bottom (at any text size) of the center panels are cut off.
A white band becomes visible between the top panel and center panels at text size smaller and smallest.

IE7 glitches:
Panel placement gets messed up when text size is changed.

Netscape 8:
IE rendering engine: same problems as IE6. (No surprise here.)
Mozilla rendering engine: can't use the mouse wheel to scroll individual panels (whole window scrolls slightly instead.)

If someone could help fix the IE6 display problems, I'd appreciate it. The CSS file is here.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby richvh » Tue 12.12.2006 12:19 pm

I managed to fix the top of the inner panels in IE 6 problem on my own (change *html #left1, *html #left2{border-top: ** solid #fff ;} from 100px to 8em), but can't figure out what to do to fix the bottom of the inner panels, so it isn't hidden under the footer (and, in fact, go off the bottom of the screen.)

Here is my current default.css:
Code: Select all
html {
   height:100%;
   max-height:100%;
   padding:0;
   margin:0;
   border:0;
   background:#fff;
/* hide overflow:hidden from IE5/Mac */
/* \*/
   overflow: hidden;
/* */
}

body {
   height:100%;
   max-height:100%;
   overflow:hidden;
   padding:0;
   margin:0;
   border:0;
}
h1, h2, h3, h4 {
   text-align: center;
}
h1 {
   font-family: "EPSON 太行書体B", "fantasy";
}
h2 {
   font-family: "EPSON 太明朝体B", "MS 明朝", "serif";
}
.title {
   font-size: 2em;
   font-family: "EPSON 太行書体B", "fantasy";
}
#head {
   position:absolute;
   margin:0;
   top:0;
   left:0;
   display:block;
   width:100%;
   height:8em;
   background:url(./img/navbkgd.jpg)
   rgb(233,238,242);
   background-repeat:repeat;
   font-size:1em;
   z-index:5;
   color:#000;
   text-align: center;
}
#foot {
   position:absolute;
   margin:0;
   bottom:0;
   left:0;
   display:block;
   width:100%;
   height:50px;
   background:url(./img/navbkgd.jpg)
   rgb(233,238,242);
   font-size:0.8em;
   z-index:5;
   text-align:right;
   color:rgb(157,78,84);
}
#nav ul{
   margin:0;
   padding:0;
   list-style:none;
}
#nav li{
   display:inline;
   margin:1em;
   font-size: 1.5em;
}
#left1 {
   position:absolute;
   left:0;
   top:8em;
   bottom:50px;
   width:25%;
   font-size:1em;
   z-index:4;
   overflow:auto;
   background:url(./img/navbkgd.jpg) rgb(237,228,214);
   font-family: "EPSON 太丸ゴシック体B", "MS ゴシック", "sans-serif";
}
#left2{
   position:absolute;
   left:25%;
   top:8em;
   bottom:50px;
   width:75%;
   font-size:1em;
   z-index:4;
   overflow:auto;
   background:url(./img/bkgd.jpg) rgb(243,217,188);
}
* html #left1, * html #left2 {
   height:100%;
   top:0;
   bottom:0;
   border-top:8em solid #fff;
   border-bottom:50px solid #fff;
}
.has_ruby { line-height: 150%; }
.has_ruby ruby { line-height: 100%; }
.has_ruby rt { line-height: 50%; }

#inner1, #inner2 {display:block;}
#inner1 {padding:0 10px 10px 10px;}
#inner2 {padding:0 10% 10px 10%;}
.bold {font-size:1.5em; font-weight:bold;}

Any ideas? Increasing border-bottom does not seem to help. If you don't know, can you suggest a forum/newsgroup better suited for this query?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby richvh » Tue 12.12.2006 2:29 pm

Found the fix, I had to put a comment before the head into the HTML to put IE into quirks mode. All that time trying to find a difference in the CSS, and it wasn't in that part...
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Tue 12.12.2006 3:12 pm

cool, i was just about to send you here: http://www.quirksmode.org/, and say that it probably had something to do with IE quirk mode. woot!
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

PreviousNext

Return to General off topic

Who is online

Users browsing this forum: No registered users and 8 guests