PDA

View Full Version : HTML help seriously needed.



-:Buro-kun Tsubasa:-
14th February 2006, 7:31 AM
I know I've been a bit of a n00b on this board, I'm sorry for that, but I seriously need some help.

How do I add a NavBar into a HTML document? I'm using MS Notpad. I need some help. Please!
And Also, how do I make a splash page for something thats not on the net yet?

Magma Leader Maxie
14th February 2006, 3:54 PM
Errm... there are two well-known ways for doing that.

1) Make your page with tables
By doing this, you can easily make your navbar in a cell of the table you've made. This is the way I like to make navbars. Also, the Serebii.net navbar is made with this method.
Imagine this to be a simple page scheme.

+----------------------+---------------------------------------------+
|*****************|
|*****************| (PAGE TITLE)
|**** (LOGO) *******|
|*****************|
+----------------------+---------------------------------------------+
|*****************|
|*****************|
|** (NAVBAR) *******| (PAGE CONTENT)
|*****************|
|*****************|
|*****************|
|*****************|
|*****************|
|*****************|
|*****************|
|*****************|
+----------------------+---------------------------------------------+
In this case, the navbar would be a cell of the second table row.
You might want to make it a little more complex than that, in which case I suggest using the attributes colspan="" and rowspan="" to make a cell strech over the surrounding ones.
Here's the simple code of the above table. I've left out the table width, height, etc. For that, just add height="", width="" and border="", bgcolor="" etc. Look at the HTML tags and see what they do to make the table look as it does (assuming you're not good at tables).



<table>
<tr>
<td><img src="logo"></td>
<td>*page title*</td>
</tr>
<tr> (second table row starts)
<td> (navbar) <td>
<td> (page content )<td>
</tr>
</table>


That's a nice way to make a navbar, and you get a lot more out of it if you use a CSS docment to get mouseover effects on those links.

2) The <div> way.
Even though I don't really like the <div> tag because I've never made much use of it except for aligning text, it's possible (and some say recommended) to use this for a functional and nicely set up navbar. It's not exactly eye candy, but it's pretty cool especially if you're shaky with HTML.



<div style="position:absolute;margin-left:11em;margin-right:11em;"> (Main content) </div>
<div style="position:absolute;left:0;top:0;width:10em;border:1 px black solid;margin:.5em;"> (Left navbar) </div>
<div style="position:absolute;right:0;top:0;width:10em;border: 1px black solid;margin:.5em;"> (Right navbar) </div>

This is simple use of the <div> tag, which will produce a navbar if you use it directly as it is now, but you should change the border thickness, colour, etc.

So, from this above, I could only suggest you try both methods, and see which you like better. Create a simple HTML document and try altering the tag's attribute values until you get something you like.

-:Buro-kun Tsubasa:-
14th February 2006, 4:08 PM
I've got it sorted now thanks!
Could someone close this please?