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 » Fri 12.08.2006 5:28 pm

see, now i feel bad for even mentioning CSS... :(

browsers seem to implement things a bit differently, especially IE. there are a few pages out there that have some "pre-designed layouts" where they've tested on several browsers and worked around all the little details. maybe it's best to start from there.

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

that was the first one i found with a google "CSS column layout". and every so often i run across other pages of CSS templates for various styles. sadly i don't bookmark them, or if i do i forget where they are in my pile-o-bookmarks. maybe you can find what you need in that link. i'll try and dig up some more good CSS templates.

you can use:
div#story { padding-left: 1em; }
to put some space between the left and right parts.

Firefox and IE have different ideas of what settings a div (or whatnot) will inherit from the parent.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby ashitaka » Fri 12.08.2006 6:42 pm

Here's a sample page, so you can see what my problems are.

OK for the furigana on the header, just move the header down.
for example put an empty paragrah above it and after but a break
<p></p><br> that should move it down enough.
I guess you could put the navigation on the left inside a table and the story inside a table, that should fix the scroll bar. With the top part also inside a table.

Right now i have to higlight things to scroll down...

NVM.... Put the side navigation inside a paragraph and the story inside a paragraph, right now niether are designated a paragraph, which means they are both part of the same paragraph.
That should make the scrollbar scroll the entire page.

see, now i feel bad for even mentioning CSS...

speaking of CSS, can you please post the content of default.css
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby zengargoyle » Fri 12.08.2006 7:23 pm

ewww.. :(

try not to use empty paragraphs or whatnot to make whitespace. you can use CSS and the 'padding-top: 1em' or 2em or whatnot. or read up on "CSS box model" to figure out what to use to get some whitespace around the text.

as for paragraphs, maybe, maybe not. probably the same as wrapping both the sidebar and the content div inside another div. divs are outside of the paragraph model.

if you have:

<p>blah
<div>
<p>foo
</div>

it's really
<p>blah</p>
<div>
<p>foo</p>
</div>

so doing

<p><div>...</div>
<p><div>...</div>

is the same as

<p></p><div>...</div>
<p></p><div>...</div>

you really can't have a div inside a p. inside a p you use span for the same sort of functionality that div gets you outside of a p.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Fri 12.08.2006 7:44 pm

ashitaka wrote:
speaking of CSS, can you please post the content of default.css


I did, look up a few posts.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Fri 12.08.2006 9:35 pm

a few more neat CSS things to check out. some of these look almost perfect.

http://www.cssplay.co.uk/layouts/index.html
http://www.cssplay.co.uk/layouts/body5.html

edit:
here was my last attempt, don't know what it looks like in IE...
http://gir.usc.edu/tjp/richvh/finished.html

but don't look at the CSS/HTML, there's a *very* ugly hack in there. :)
Last edited by zengargoyle on Fri 12.08.2006 9:45 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 » Fri 12.08.2006 10:15 pm

Looks nice in Firefox, but man, is it oo-oo-gly in IE.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Fri 12.08.2006 10:56 pm

I did, look up a few posts.

And the award for idiot of the year goes to.........................................Ashitaka!

This thread is basicaly just us three......
chown -R us ./base

Havn't checked it out in firefox yet..........done! i would have to agree, oo-oo-gly
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby ashitaka » Sat 12.09.2006 2:04 pm

Frames sounds fine.

Sooooooo many browsers....... lets just make IE7 the universal browser.
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby richvh » Sat 12.09.2006 3:06 pm

Sooooooo many browsers....... lets just make IE7 the universal browser.

Maybe, when IE7 has a rikaichan-style plugin. ;)
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Sat 12.09.2006 3:07 pm

Here is a frame sample incase you dont know how,
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="*******" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="******" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="******" name="mainFrame" id="mainFrame" title="content" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>


It makes a top frame, left frame and a main frame, nested top. so it looks just like your page now.
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

RE: Navigation bars in HTML

Postby Chris Hart » Sat 12.09.2006 3:07 pm

Simple. Assuming the temp web server is localhost, and you can access it from (insert web browser of choice) by going to http://localhost

The following code will work fine if your page is using relative links. The files will be output in a folder in the same name as the server (ex: localhost)
Code: Select all
wget http://localhost -r


Web servers that dont support PHP should pass pages with .php extentions as regular html files.
Last edited by Chris Hart on Sat 12.09.2006 3:15 pm, edited 1 time in total.
-.. .   -.- -.-. ---.. ..- ..-. ...-

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 3:11 pm

ashitaka wrote:
Sooooooo many browsers....... lets just make IE7 the universal browser.


sure, pick the browser that only works on a single Operating System leaving all of us Linux, Mac, PDA, Cellphone, Nintendo, etc. users out in the cold and unable to use the "designed for IE" web.

sure, pick the browser that has the poorest compliance to standards. web design pages have giant sections of "IE quirks" compared to the "Mozilla/Opera/Netscape/Safari quirks" sections.

sure, pick the browser that is the leading cause of spyware, adware, and malware that turns your computer into a spam bot. using IE is like being a prostitute that doesn't use condoms, it's not a matter of 'if', it's a matter of 'when'.

sorry, IE is truly lame. i've never been able to see why people like it so much.
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Sat 12.09.2006 3:49 pm

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

Chris Hart wrote:
Simple. Assuming the temp web server is localhost, and you can access it from (insert web browser of choice) by going to http://localhost

The following code will work fine if your page is using relative links. The files will be output in a folder in the same name as the server (ex: localhost)
Code: Select all
wget http://localhost -r


Web servers that dont support PHP should pass pages with .php extentions as regular html files.

Huh? I must be dense; where exactly do I execute the wget command, and will it work for me on a Windows box?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby Chris Hart » Sat 12.09.2006 4:07 pm

richvh wrote:
Ok, this is close to what I want, if you guys can help me figure out the bugs: [url=http://www.citlink.net/〜richvh/test/noruby/chapter29.html]sample page[/url]

Chris Hart wrote:
Simple. Assuming the temp web server is localhost, and you can access it from (insert web browser of choice) by going to http://localhost

The following code will work fine if your page is using relative links. The files will be output in a folder in the same name as the server (ex: localhost)
Code: Select all
wget http://localhost -r


Web servers that dont support PHP should pass pages with .php extentions as regular html files.

Huh? I must be dense; where exactly do I execute the wget command, and will it work for me on a Windows box?


Sorry, I didn't mention what it runs on. On windows, you will need cygwin. wget is a program designed to run on *nix (Unix, Linux, Mac OSX...), cygwin is a *nix compatibility subsystem for windows. You also will set up a web server on your computer, probably the easiest to do with php would be apache. All these programs are open source, so you don't need to worry about paying any royalties.



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. The image map is in one html file, the buttons on the left are another html file. in both of those files, I leave out the <head> tags, as they are included in the page via PHP. The content is specified in the page itself.
Last edited by Chris Hart on Sat 12.09.2006 4:55 pm, edited 1 time in total.
-.. .   -.- -.-. ---.. ..- ..-. ...-

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 ashitaka » Sat 12.09.2006 4:19 pm

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.
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

PreviousNext

Return to General off topic

Who is online

Users browsing this forum: No registered users and 2 guests