• Be sure to join the discussion on our discord at: Discord.gg/serebii
  • If you're still waiting for the e-mail, be sure to check your junk/spam e-mail folders

HTML help seriously needed.

Status
Not open for further replies.

Magma Leader Maxie

Non caedor caedo
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).

Code:
<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.

Code:
<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.
 
Last edited:
Status
Not open for further replies.
Top