CSS Top panel

[techboy660181]

Hi all, I would like to create a thin navigation bar on the top of every page, using a PHP include(). However, I am not sure how to create it. Should I use a table, or...I don't know. If anyone has visited PSPicy.com, I want something exactly like that.

[Dead-i]

Usually when I create a header template with incldue I use table, since (compared to div) it offers ALIGN, meaning I can make it center if I want. Plus, table allows you to make multiple elements alongside each other quickly and professionally (eg. a logo and then a navigation bar next to it).

In order to make a header with include() and TABLE, you can follow these steps. On each page, enter the following code to include the header where you want the header to appear:

<?php
include 'header.php';
?>

Remember the webpage must have the .php extension. You could also use require() instead, which will make PHP show an error and stop the script if the file can't be found. You will also need to create header.php in the same directory with the HTML code you want. For example

<table align=center width=800><tr>
<td><img src=logo.png></td>
<td><a href=index.php>Home</a> | <a href=services.php>Services</a> | <a href=contact.php>Contact</a></td>
</tr></table>

I hope this helps

[techboy660181]

+1 rep thanks

[Dead-i]

Your welcome, and thanks for repping

[essellar]

Um, not to be obnoxious or anything, but centering in CSS (with a block element, or any element that's set to display as block) is trivial*; you absolutely do not need to use a table unless Netscape Navigator 4 is high on your "browsers to support" list. Your navigation bar is a list of links and actions that the user is able to carry out, so a list is how it should be presented in HTML (ul or ol is up to you); you may choose to indicate its separation form the page content by making it a logical division (a div) in pre-5 (X)HTML, or as a nav element in HTML5.

Tables are for tables. If there isn't a natural row/column relationship between the cell contents, then a table is the wrong element to use. It just makes things unnecessarily hard for people who are already having a hard enough time. Every developer should, at some point, grab an evaluation copy of Jaws to see how visually-impaired users (and machines/bots) experience their pages -- it's quite an eye-opener†.

Your markup should be semantically meaningful -- or at least as semantically meaningful as the tags and attributes allow. Remember, HTML is a language to describe the [i]content[i] of a document, not its appearance. We kind of forgot about that back in the '90s for a while (we pretty much had to, since the major browsers were running off in different directions and there was no real standard). We're sorry we did that, and we've worked hard to create an environment where you don't have to do what we did anymore.

* That includes centering the bar, centering the text or contained elements withing the bar, and centering the text/images within contained elements within the bar -- both horizontally and vertically.

† In this case, there is a lot of information about the table context thrown at the user. Blind users can't see your table, so they need to be told when the row and column change (and if there's a TH that applies, what the "tag" is for that cell's data).

[Dead-i]

@essellar - The reason I recommended tables was because if you do text-align:center on a DIV, it will just center the text inside instead of the DIV itself. Also, tables give you the flexibility of creating multiple cells side by side.

I understand your point though: There may be no need for a table if you only need one cell, since tables are tables

[techboy660181]

Thanks for that. However, I am not using this page for handicapped people, as you have to login first and the website is only for my friends.

[essellar]

@essellar - The reason I recommended tables was because if you do text-align:center on a DIV, it will just center the text inside instead of the DIV itself. Also, tables give you the flexibility of creating multiple cells side by side.

I understand your point though: There may be no need for a table if you only need one cell, since tables are tables

Horizontally centering a div in its containing element is easy. For any browser that's reasonably modern, it's simply a matter of using:

margin: <some value for vertical> auto;

... and the div is centered. If you need to support ancient versions of Internet Explorer (version 5.5 and below, IIRC, or maybe that includes 6, which I haven't supported for years), you can use this old trick:

left: 50%;
margin-left: -<half the horizontal size>;

Negative margins are legal. That trick, then, puts the "home box" of the div in a position where the left edge of the box is centered, then uses a negative margin to pull the left edge of the "display box" back to a centered position. Again, centering content (both the boxes and the content of the boxes) is trivial. And creating "multiple cells side by side" is also incredibly easy with non-tabular block elements. There is no excuse for using tables for something like this. None.

[Dead-i]

@essellar: I didn't know about that trick; thanks! :D

[essellar]

Oh, and just for the educational value, anyone who stumbles across this thread might want to take a quick boo at Mark Pilgrim's Dive Into Accessibility. None of the recommendations are all that hard to implement (it's not like trying to meet the impossible goal of a triple-A WCAG certification) and they'll pay you back several times over.

And for anyone who's interested, I care mostly because I'm rather more severely disabled than my online persona might lead you to believe -- but before being suddenly thrust into this world, I was a "pragmatic" developer who didn't have time for all of that accessibility crap. I can't think of a single site I developed (and there were dozens of large apps on that list) in the Before Time that I would be able to use now. Are you so sure that you or your friends are immune from accident and illness?