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 zengargoyle » Tue 12.05.2006 8:48 pm

hehe, you're asking the wrong person... muahaha. nah, the background is fine. but my anti-90's websense is tingling.

imagemaps are a little on the evil side, hard to change when needed. you could possibly just use a single-row table and but the background image on the row, and plaintext links in the cells. or if you wanted a special font, make transparent background gifs for the text and use them as image links. just a bit easier if later on you want to add more links, you won't have to create a new imagemap. i would recommend going the "Web2.0" way and making the navigation just be a simple <ul> list inside a <div class="nav">... but i don't remember all of the magic CSS off the top of my head. in your CSS you can make the list format "look" like a table, where the <li> just go across like table cells. the real benefit being that it degrades nicely to text based browsers, or lets people disable CSS and get a plain old-school view of the page.

in sorta the same way, frames are evil. i even think that the w3 people have taken the frameset stuff out of the latest HTML spec, which nobody ever follows anyway. they also don't work well with most text broswers. but you have a no-frame version, so that's OK. :)

something to think about for later... there are some more advanced tools/formats like DocBook that you could look into. they are usualy XML based, so you can mostly just re-use the HTML that you have without much difficulty. the plus is that they can turn your document into Web pages (all on one page, or one page per chapter), or PDF files, or LaTeX files suitable to take to a publisher. they can do automatic TOC and Index and Footnotes and Cross-References and all that sort of stuff. if you're going to write more books, it may be worth investigating these sorts of tools.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby zengargoyle » Tue 12.05.2006 9:05 pm

to bounce off of what ashitaka said... ideally if you want to go the modern CSS way, you would just start with a very basic HTML of everything:

... head stuff ...
<body>
<div class="navigation">
<ul>
<li>first</li> <li>previous</li> <li>next</li> <li>last</li>
</ul>
</div>
<div class="index">
<ul>
<li><a ... >Chapter 1</a></li>
...
</ul>
</div>
<div class="content">
<h1>...</h1>
<p>blah blah</p>
</div>
</body>
...

then you craft a CSS file to include and start tweaking things to make it look how you like:

div.navigation { float: top; }
div.navigation ul { layout: inline; background-image: url(URL); }
div.index { float: right; }
div.content { ... }

by doing so, you seperate your content from the display. there are a bunch of sites out there dealing with the use of CSS to layout the content, but it is sometimes a bit hard (for me at least) to grok all of the little details.

you can make the navigation part always be visible at the top of the page (so you don't need it at the bottom), the index part float over to the left with a slightly different background or a border, and have the content text wrap around the index box at the bottom. then with a bit of Javascript you can hide/unhide the index, or make pop-up menus or almost anything else you want.

but i'll admit, it is harder to "just simply do it" with the CSS/Javascript stuff than it is to just use a couple tables or a frameset if that's what you already know how to do.

if you've never seen it before, visit http://www.csszengarden.com. this is a site for CSS *crazy* people. all of the different themes available work against the same plain HTML file. it's pretty amazing what some people can do with CSS.
Last edited by zengargoyle on Tue 12.05.2006 9:09 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 » Tue 12.05.2006 10:21 pm

I'm just picking up the minimum to get the website working and (for the most part) passing certification. The CSS file in the ruby side is something I needed for the ruby stuff to pass; I think I copied it from the Aozora Bunko files.

Edit: Oh, and I went to frames in the first place, because furin thought my website was harder to read than the forum, because the frames here narrow the viewing field.

If anyone knows of freely available artwork that would be suitable, please let me know.

Edit^2: The ruby side is updated, if you want to give it a tour. I didn't check all the links, but I think it's all working.
Last edited by richvh on Tue 12.05.2006 11: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 richvh » Thu 12.07.2006 10:35 am

I'm working through the HTML and CSS tutorials at HTML Dog. What are good font families to put in a font-family line for Japanese text?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Thu 12.07.2006 11:11 am

I would just leave the font blank, then if someone doesn't have a certain font they can still see it.
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby richvh » Thu 12.07.2006 12:50 pm

ashitaka wrote:
Please tell me you used an editor for the furigana, way to many <rp> </rp> tags in there to do it by hand.

I use this interface to add the furigana, then import the ruby markup into a text editor and add <rb></rb> tags using a search and replace, and proof-read to make sure the right readings were added, unless the current chapter has something that won't make it past the kids.goo censor, in which case I cut and paste the ruby tags around the kanji and edit the reading.

Is there a way to set up a seperate index file, and include it in each chapter file?

After some experimentation, it seems that (at least for Firefox and IE6+), if the fontfamily you specify isn't installed, it will drop back to something standard.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Thu 12.07.2006 1:34 pm

see:
http://www.w3.org/TR/html4/present/frames.html#h-16.5
http://www.w3.org/TR/html4/struct/objects.html#embedded-documents
and possibly depending on your server, google for 'serverside include'. some places don't support SSI for security reasons, some may still support the 'include' command. you may be able to just do a simple:
<!-- #include file="index.html" --> or something similar.

otherwise, it could be done with Javascript to fetch the index and write it into the file in the appropriate place. or you could use a template system to build your pages.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Thu 12.07.2006 5:29 pm

Zengargoyle wrote:
imagemaps are a little on the evil side, hard to change when needed. you could possibly just use a single-row table and but the background image on the row, and plaintext links in the cells. or if you wanted a special font, make transparent background gifs for the text and use them as image links.

I'm trying this, but not getting something I like yet. And when I tried using transparent background pngs for the text, they weren't transparent in IE.

you can make the navigation part always be visible at the top of the page (so you don't need it at the bottom)

How? I'm not finding anything telling how to do that without using frames.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Thu 12.07.2006 6:19 pm

richvh wrote:
I'm trying this, but not getting something I like yet. And when I tried using transparent background pngs for the text, they weren't transparent in IE.

try transparent GIFs. IE has notoriously bad support for PNG. they've hade *years* to fix it but they never have.
you can make the navigation part always be visible at the top of the page (so you don't need it at the bottom)

How? I'm not finding anything telling how to do that without using frames.


check here for some basic examples, i'm not really sure of all of the details myself....
http://limpid.nl/lab/css/fixed/header-and-left-sidebar
Last edited by zengargoyle on Thu 12.07.2006 6:21 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 » Thu 12.07.2006 9:11 pm

zengargoyle wrote:
I wrote:
zengargoyle wrote:
you can make the navigation part always be visible at the top of the page (so you don't need it at the bottom)

How? I'm not finding anything telling how to do that without using frames.


check here for some basic examples, i'm not really sure of all of the details myself....
http://limpid.nl/lab/css/fixed/header-and-left-sidebar


This one looks more like what I want, but can I make that left sidebar scrollable?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Thu 12.07.2006 10:01 pm

i know formatting will mess this up... but yes. this is the *actual* embedded CSS from that example page modified to let the left side stay with the content and scroll under the title...

body{
margin:0;
padding:100px 0 0 150px;
}
div#header{
position:absolute;
top:0;
left:0; # was like 150px, move to the left margin
width:500%;
height:100px;
z-index: 2; # play with the z-index to get the leftside/content to go *under* the header and not over.
}
div#left-sidebar{
position:absolute;
top:100px; # move top to match the bottom of the header.
left:0;
width:150px;
height:100%;
z-index: 0; # play with z-index to go under header.
}
@media screen{
body>div#header{
position:fixed;
}
# remove the left side position:fixed setting
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby ashitaka » Thu 12.07.2006 11:59 pm

I use this interface to add the furigana, then import the ruby markup into a text editor and add <rb></rb> tags using a search and replace, and proof-read to make sure the right readings were added, unless the current chapter has something that won't make it past the kids.goo censor, in which case I cut and paste the ruby tags around the kanji and edit the reading.

Thank you thank you thank you thank you thank you thank you thank you!!!!!!
i know formatting will mess this up... but yes. this is the *actual* embedded CSS from that example page modified to let the left side stay with the content and scroll under the title...

looks fine to me.... or ts an omen of the end of the world.
try transparent GIFs. IE has notoriously bad support for PNG. they've hade *years* to fix it but they never have.

YOU CAN MAKE PNG'S TRANSPARENT!?!?!?!?!?!?!?
IE 7 would probably have it fixed. VISTA POWER!
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby richvh » Fri 12.08.2006 10:35 am

Here is the CSS file I'm currently playing with:
Code: Select all
body {
   font-family: "EPSON 太丸ゴシック体B", "MS 明朝";
   margin: 0;
   background: url(/img/bkgd.jpg);
  padding: 60px 0 0 25%;
  }
div { line-height: 150%; }
div#navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2;
  text-align: center;
  background: url(/img/navbkgd.jpg);
  }
div#contents {
  position: absolute;
  top:60px;
  left: 0;
  width: 25%;
  height: 100%;
  z-index: 0;
  }
 
p {
  line-height: 150%;
  text-align: left;
  }
h1 {
   font-family: "EPSON 正楷書体M", "MS 明朝";
   text-align: center;
   line-height: 150%;
  }
h2 {
   font-family: "EPSON 太角ゴシック体B", "MS 明朝";
   text-align: center;
   line-height: 150%;
  }
ruby { line-height: 100%; }
rt { line-height: 50%; }
/*#navigation a { text-decoration: none; }*/
/*#contents {float: left; width 25%}*/
div#story {
  margin: 0, 10%
  }
@media screen{
  body>div#navigation {
    position: fixed;
    }
  }
*html body{
  overflow: hidden;
  }
*html div#story{
  height:100%;
  overflow: auto;
  }

Problems I'm having:
1. I'm currently putting the navigation buttons and title in a centered table in div#navigation. When I narrow the screen enough, the right-hand buttons disappear off the right edge, and no scroll-bar is generated.
2. I want more visual space between the contents sidebar and the main text, and leave a margin on the right side of the main text. Do I code that in the overall body margin? Or how?
3. In IE, the vertical scroll bar only effects the main text, not the sidebar.
4. In IE, the ruby for the top item disappears has its top cut off by the header.

Any suggestions?

Oh, one more thing:
5. in IE, the main text does have margins - probably too generous.

Another quirk found:

6. In Firefox, the background image on the left sidebar ends before the sidebar does, if there's enough text to extend down off the bottom of the page and you scroll up far enough.
Last edited by richvh on Fri 12.08.2006 11:32 am, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Fri 12.08.2006 12:13 pm

First of all nice css,
3. In IE, the vertical scroll bar only effects the main text, not the sidebar.

Thats because they use seperate scroll bars.
1. I'm currently putting the navigation buttons and title in a centered table in div#navigation. When I narrow the screen enough, the right-hand buttons disappear off the right edge, and no scroll-bar is generated.

If your useing tables change them to 100%, this alows resizing as you adjust the screen, but only to a certaqin width.

I'll help more when i get back from work
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby richvh » Fri 12.08.2006 12:25 pm

ashitaka wrote:
First of all nice css,
3. In IE, the vertical scroll bar only effects the main text, not the sidebar.

Thats because they use seperate scroll bars.

So how do I generate a scroll bar for the sidebar? Is this something I'll have to jump through hoops for to support both Firefox and IE?
1. I'm currently putting the navigation buttons and title in a centered table in div#navigation. When I narrow the screen enough, the right-hand buttons disappear off the right edge, and no scroll-bar is generated.

If your useing tables change them to 100%, this alows resizing as you adjust the screen, but only to a certain width.

Note that I'm using a table of images; the navigation buttons are in 50x100 pixel images, and the title in a 50x200 pixel image.

What code do I change to change them to 100%?

Here's a sample page, so you can see what my problems are.
Last edited by richvh on Fri 12.08.2006 1:13 pm, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

PreviousNext

Return to General off topic

Who is online

Users browsing this forum: No registered users and 4 guests