Nav table into css?

[Jane Withnolastname]

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table:

<table align=center width="40%">
<tr>
<td align=left width="13%"><a href="#auctions">Auctions</a></td>
<td align=center width="13%"><a href="gallery.htm">Gallery</a></td>
<td align=right width="13%"><a
href="mailto:Ja**********************@yahoo.com">C ontact</a></td>
</tr>
</table>

I can already hear you yelling "Don't use tables for layout!" Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following:

<div style="text-align: center;">
<div style="text-align: left; width: 13%; display: inline;">
<a href="#auctions">Auctions</a>
</div>
<div style="text-align: center; width: 13%; display: inline;">
<a href="gallery.htm">Gallery</a>
</div>
<div style="text-align: right; width: 13%; display: inline;">
<a href="mailto:Ja**********************@yahoo.com">C ontact</a>
</div>
</div>

It worked in IE but not Moz.
Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it
didn't work in either browser, which indicates to me that it just
won't work. (Note to MS: stop fixing my mistakes!)
Is there any way to replicate the table layout using only CSS?
Thanks

[kayodeok]

Jane Withnolastname <Ja**********************@yahoo.com> wrote in
news:p5********************************@4ax.com:

I have a very simple navigation "menu" in the middle of my page.
It is three simple links and it lays out horizontally. To
achieve this, I used the following table:

[snip HTML]

[snip CSS]

It worked in IE but not Moz.

Try these sites; they have tutorials on Horizontal Menus
(as well as vertical ones):

Listamatic: http://www.maxdesign.com.au/presentation/listamatic/
Listutorial: http://www.maxdesign.com.au/presentation/listutorial/
List-o-matic: http://www.accessify.com/tools-and-w...st-o-matic.asp
Taming Lists: http://www.alistapart.com/stories/taminglists/

--
Kayode Okeyode
http://www.kayodeok.btinternet.co.uk.../webdesign.htm

[Stephen Poley]

On Thu, 25 Sep 2003 04:49:24 GMT, Jane Withnolastname
<Ja**********************@yahoo.com> wrote:

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table:

<table align=center width="40%">
<tr>
<td align=left width="13%"><a href="#auctions">Auctions</a></td>
<td align=center width="13%"><a href="gallery.htm">Gallery</a></td>
<td align=right width="13%"><a
href="mailto:Ja**********************@yahoo.com"> Contact</a></td>
</tr>
</table>

I can already hear you yelling "Don't use tables for layout!" Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.

It looks as if you are trying to do the same as I do in the footer on my
pages - see sig. Have a look and see if that helps.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

[I tried to post this about 10 hours ago; seems to have gotten eaten.]

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table: <snip table>
I can already hear you yelling "Don't use tables for layout!"
"Don't use tables for layout!"
Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following: <snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.
The above tested in IE6 and Firebird.
Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

If you want them to look like buttons (with CSS), holler. Others will
tell you about not using "mailto:" <g>

--
-bts
-This space intentionally left blank.

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table: <snip table>
I can already hear you yelling "Don't use tables for layout!"
"Don't use tables for layout!"
Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following: <snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.
The above tested in IE6 and Firebird.
Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

If you want them to look like buttons (with CSS), holler. Others will
tell you about not using "mailto:" <g>

--
-bts
-This space intentionally left blank.

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table: <snip table>
I can already hear you yelling "Don't use tables for layout!"
"Don't use tables for layout!"
Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following: <snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.
The above tested in IE6 and Firebird.
Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

If you want them to look like buttons (with CSS), holler. Others will
tell you about not using "mailto:" <g>

--
-bts
-This space intentionally left blank.

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

[I tried to post this about 10 hours ago; seems to have gotten eaten.]

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table: <snip table>
I can already hear you yelling "Don't use tables for layout!"
"Don't use tables for layout!"
Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following: <snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.
The above tested in IE6 and Firebird.
Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

If you want them to look like buttons (with CSS), holler. Others will
tell you about not using "mailto:" <g>

--
-bts
-This space intentionally left blank.

[Beauregard T. Shagnasty]

Beauregard T. Shagnasty replied to hisself:

[I tried to post this about 10 hours ago; seems to have gotten eaten.]

Egad. Now they show up, ~12 hours later, whereas normally they are
instantaneous. Sorry about that.

--
-bts
-This space intentionally left blank.

[Jane Withnolastname]

On Thu, 25 Sep 2003 05:50:13 GMT, Beauregard T. Shagnasty
<a.*********@example.invalid> wrote:

Jane Withnolastname pounced upon this pigeonhole and pronounced:

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table:<snip table>

I can already hear you yelling "Don't use tables for layout!"

"Don't use tables for layout!"

Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following:

<snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.

The above tested in IE6 and Firebird.

Thanks. This almost worked exactly as I wanted, but refused to be
centered. Combined with one of the tutorials that kayodeok posted, I
added

#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

to the style and it works perfectly in both browsers.

Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

This isn't a new document, it's a revision of an older one. Once I get
it working as a Transitional, I'll switch it over to Strict and start
all over again :)
Others will
tell you about not using "mailto:" <g>

OK, I'll bite: why not?
If it's about the spam-bots, I actually use
mailto: instead of mailto:
I just changed it for display purposes here.
If there's another reason, I'd like to hear (read) it....

[Jane Withnolastname]

On 25 Sep 2003 06:20:30 GMT, kayodeok <ne*********@btopenworld.com>
wrote:

Jane Withnolastname <Ja**********************@yahoo.com> wrote in
news:p5********************************@4ax.com :

I have a very simple navigation "menu" in the middle of my page.
It is three simple links and it lays out horizontally. To
achieve this, I used the following table:

[snip HTML]

[snip CSS]

It worked in IE but not Moz.

Try these sites; they have tutorials on Horizontal Menus
(as well as vertical ones):

Listamatic: http://www.maxdesign.com.au/presentation/listamatic/
Listutorial: http://www.maxdesign.com.au/presentation/listutorial/
List-o-matic: http://www.accessify.com/tools-and-w...st-o-matic.asp
Taming Lists: http://www.alistapart.com/stories/taminglists/

Thanks. I only got as far as the second tutorial before I found out
what I needed to know. Needless to say, these have been added to my
bookmarks!

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

On Thu, 25 Sep 2003 05:50:13 GMT, Beauregard T. Shagnasty
<a.*********@example.invalid> wrote:

Jane Withnolastname pounced upon this pigeonhole and pronounced:

I have a very simple navigation "menu" in the middle of my page. It is
three simple links and it lays out horizontally. To achieve this, I
used the following table:<snip table>

I can already hear you yelling "Don't use tables for layout!"

"Don't use tables for layout!"

Well,
that's why I'm here, because I cannot figure out how to achieve the
above "layout" without using a table.
I tried the following:

<snip try>

The CSS:
<style type="text/css">
#nav {
text-align: center;
}
#nav li {
display: inline;
list-style-type: none;
padding: 0 5% 0;
}
</style>

The HTML:

<div id="nav">
<ul>
<li><a href="#auctions">Auctions</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="mailto:Ja**********************@yahoo.com">C ontact</a></li>
</ul>
</div>

It worked in IE but not Moz.

The above tested in IE6 and Firebird.

Thanks. This almost worked exactly as I wanted, but refused to be
centered.

Dunno. It's centered in my browser...
Combined with one of the tutorials that kayodeok posted, I
added

#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

to the style and it works perfectly in both browsers.

This moved it a bit closer to the top of the browser canvas.

Then I added http://www.w3.org/TR/html4/loose.dtd to the DTD and it

New documents should be Strict...

This isn't a new document, it's a revision of an older one. Once I get
it working as a Transitional, I'll switch it over to Strict and start
all over again :)

Others will
tell you about not using "mailto:" <g>

OK, I'll bite: why not?
If it's about the spam-bots, I actually use
mailto: instead of mailto:
I just changed it for display purposes here.
If there's another reason, I'd like to hear (read) it....

Ok, if you are obfuscating, that will help keep you from spambots. Not
guaranteed. The real reason is that not every visitor will have an email
client. To quote from Richard in alt.html in a two-year-old post:

"The answer was, of course, don't use mailto, it does not work.

Mailto does not work on three of the four computers I have connected to
the internet, simply because those three computers do not have an email
client installed. Call that reliable? And don't tell me to configure my
computers. I won't. Its you who want my information sent to you, not the
other way around. I can just go elsewhere."

--
-bts
-This space intentionally left blank.

[Jane Withnolastname]

On Sat, 27 Sep 2003 22:20:43 GMT, Beauregard T. Shagnasty
<a.*********@example.invalid> wrote:

<snip>

>The above tested in IE6 and Firebird.

Thanks. This almost worked exactly as I wanted, but refused to be
centered.

Dunno. It's centered in my browser...

It looks centred, but it's not. At least not on my browsers....
Check here for an easy example using a default-centred HR:
http://www.geocities.com/janewithnolastname/test05.html

>Others will
>tell you about not using "mailto:" <g>

OK, I'll bite: why not?
If it's about the spam-bots, I actually use
mailto: instead of mailto:
I just changed it for display purposes here.
If there's another reason, I'd like to hear (read) it....

Ok, if you are obfuscating, that will help keep you from spambots. Not
guaranteed. The real reason is that not every visitor will have an email
client. To quote from Richard in alt.html in a two-year-old post:

"The answer was, of course, don't use mailto, it does not work.

Mailto does not work on three of the four computers I have connected to
the internet, simply because those three computers do not have an email
client installed. Call that reliable? And don't tell me to configure my
computers. I won't. Its you who want my information sent to you, not the
other way around. I can just go elsewhere."

Huh? If a user doesn't have a mail client, how would they email me?
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

[Brian]

Jane Withnolastname wrote:

Huh? If a user doesn't have a mail client, how would they email me?
They wouldn't. That's the point. But they might contact you anyways,
if you provided the means, e.g, html form.
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

think library computer users

--
Brian
follow the directions in my address to email me

[Tina Holmboe]

Jane Withnolastname <Ja**********************@yahoo.com> exclaimed in <uj********************************@4ax.com>:

Huh? If a user doesn't have a mail client, how would they email me?
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little

In order for "mailto" to function as *expected*, the browser needs to
start a mail client and supply it with the address. There is no standard
for doing so, nor - as far as I know - any standard proposed for it.

Hence - it doesn't work as expected unless the use has a setup that
integrates the mail- and web clients. Trust me, tkrat - which I use - does
not "work" with Netscape, Mozilla, Opera, or Lynx.

--
- Tina Holmboe Greytower Technologies
ti**@greytower.net http://www.greytower.net/
[+46] 0708 557 905

[Beauregard T. Shagnasty]

Jane Withnolastname pounced upon this pigeonhole and pronounced:

On Sat, 27 Sep 2003 22:20:43 GMT, Beauregard T. Shagnasty
<a.*********@example.invalid> wrote:

<snip>

>The above tested in IE6 and Firebird.

Thanks. This almost worked exactly as I wanted, but refused to be
centered.
Dunno. It's centered in my browser...

It looks centred, but it's not. At least not on my browsers....
Check here for an easy example using a default-centred HR:
http://www.geocities.com/janewithnolastname/test05.html

Ah, ok. In my browser the distance was small and I didn't notice it.

<snip> Huh? If a user doesn't have a mail client, how would they email me?
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

Others have adequately explained about the mail client.

--
-bts
-This space intentionally left blank.

[kchayka]

Jane Withnolastname wrote:

It looks centred, but it's not. At least not on my browsers....
Check here for an easy example using a default-centred HR:
http://www.geocities.com/janewithnolastname/test05.html

First, fix your coding errors.
<URL:http://validator.w3.org/>
<URL:http://jigsaw.w3.org/css-validator/>

Secondly, all browsers have default indent values for lists. Some use
the margin property, others use padding instead. To change the indent
value, you should specify both properties.
#nav ul {
margin-left: 0;
padding-left: 0;
}

>Others will
>tell you about not using "mailto:" <g>

Huh? If a user doesn't have a mail client, how would they email me?
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

There are quite a lot of folks that use only web mail. Will your
mailto: links open their web mail? I'd think not.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[Stephen Poley]

On Sun, 28 Sep 2003 11:55:26 GMT, Jane Withnolastname
<Ja**********************@yahoo.com> wrote:

Mailto does not work on three of the four computers I have connected to
the internet, simply because those three computers do not have an email
client installed.

Huh? If a user doesn't have a mail client, how would they email me?
Via a contact form. It's actually best to give the reader the choice of
e-mail or a form. See
http://www.xs4all.nl/~sbpoley/webmatters/contact.html for an example.
Most of my feedback comes via the form.
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

Consider:
1) People in internet cafes or libraries.
2) People using an e-mail client that isn't triggerable from the
browser: I believe Lotus Notes is an example, and that is quite common
in corporate environments.
3) People borrowing a friend's computer, who could use the e-mail client
but consider it inappropriate to send mail under someone else's name.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Jane Withnolastname]

On Sun, 28 Sep 2003 13:00:00 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Jane Withnolastname wrote:

Huh? If a user doesn't have a mail client, how would they email me?

They wouldn't. That's the point. But they might contact you anyways,
if you provided the means, e.g, html form.

Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

think library computer users

Oops. I didn't think of that. Of course that makes perfect sense. So
off I go to investigate form mail. Thanks :)

[Jane Withnolastname]

On Sun, 28 Sep 2003 09:17:25 -0500, kchayka <kc*********@sihope.com>
wrote:

Jane Withnolastname wrote:

It looks centred, but it's not. At least not on my browsers....
Check here for an easy example using a default-centred HR:
http://www.geocities.com/janewithnolastname/test05.html
First, fix your coding errors.
<URL:http://validator.w3.org/>
<URL:http://jigsaw.w3.org/css-validator/>

This is an example page. It has no DTD. The purpose was not to have it
validate but to show why it didn't work without UL styles.
Secondly, all browsers have default indent values for lists. Some use
the margin property, others use padding instead. To change the indent
value, you should specify both properties.
#nav ul {
margin-left: 0;
padding-left: 0;
}

If you had read previous posts in this thread, rather than jumping
right in in the middle, you would see that that is exactly what I
implemented. The above example was to show why the original styles
given to me didn't work.

>Others will
>tell you about not using "mailto:" <g>

Huh? If a user doesn't have a mail client, how would they email me?
Are there actually people connected to the internet, using www
browsers, who do not have any email client at all? That seems a little
odd to me....

There are quite a lot of folks that use only web mail. Will your
mailto: links open their web mail? I'd think not.

Thanks. Got it.

[Brian]

Jane Withnolastname wrote:

off I go to investigate form mail.

[OT for ciwas]

Don't: use Matt's Script Archive formmail script.

Do: use NMS formail script.
< http://nms-cgi.sourceforge.net/ >

--
Brian
follow the directions in my address to email me

[Jane Withnolastname]

On Mon, 29 Sep 2003 18:24:14 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Jane Withnolastname wrote:

off I go to investigate form mail.
[OT for ciwas]

It wasn't when it started. It just sorta drifted that way ;)
Don't: use Matt's Script Archive formmail script.
Why? It seems to be the most popular. Used everywhere. Hmm. MSIE seems
to be the most popular, too.
I'm sure you have good/valid reason for steering me clear of it.
Please say?
Do: use NMS formail script.
< http://nms-cgi.sourceforge.net/ >

[Brian]

Jane Withnolastname wrote:

On Mon, 29 Sep 2003 18:24:14 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Don't: use Matt's Script Archive formmail script.

Why? It seems to be the most popular. Used everywhere.
I'm sure you have good/valid reason for steering me clear of it.
Please say?

Do: use NMS formail script.
< http://nms-cgi.sourceforge.net/ >

Please read about Matt's Script Archive at the nms project. In short,
Matt's scripts were written with many secutiry holes. The nms project
scripts are better written alternatives.

--
Brian
follow the directions in my address to email me

[Chris Morris]

Jane Withnolastname <Ja**********************@yahoo.com> writes:

On Mon, 29 Sep 2003 18:24:14 GMT, Brian

Don't: use Matt's Script Archive formmail script.
Why? It seems to be the most popular. Used everywhere. Hmm. MSIE seems
to be the most popular, too.

And both are full of huge security holes. Lots of similarities. :) At
least MSIE gets its fixed occasionally.
I'm sure you have good/valid reason for steering me clear of it.
Please say?

It's very easy to use the formmail script to send an arbitrary message
to an arbitrary address. So it's great if you want to be a spam relay.

--
Chris

[Jane Withnolastname]

On 30 Sep 2003 13:21:21 +0100, Chris Morris <c.********@durham.ac.uk>
wrote:

Jane Withnolastname <Ja**********************@yahoo.com> writes:

On Mon, 29 Sep 2003 18:24:14 GMT, Brian

>Don't: use Matt's Script Archive formmail script.

Why? It seems to be the most popular. Used everywhere. Hmm. MSIE seems
to be the most popular, too.

And both are full of huge security holes. Lots of similarities. :) At
least MSIE gets its fixed occasionally.

I'm sure you have good/valid reason for steering me clear of it.
Please say?

It's very easy to use the formmail script to send an arbitrary message
to an arbitrary address. So it's great if you want to be a spam relay.

Thanks to you and also to Brian who gave me some extra reading. Very
interesting. Needless to say, I'll be taking the NMS route.
Thanks again!

[Dave Cross]

Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message news:<7yeeb.643799$uu5.104633@sccrnsc04>...

Jane Withnolastname wrote:

On Mon, 29 Sep 2003 18:24:14 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Don't: use Matt's Script Archive formmail script.

Why? It seems to be the most popular. Used everywhere.
I'm sure you have good/valid reason for steering me clear of it.
Please say?

Do: use NMS formail script.
< http://nms-cgi.sourceforge.net/ >

Please read about Matt's Script Archive at the nms project. In short,
Matt's scripts were written with many secutiry holes. The nms project
scripts are better written alternatives.

In fact, see what Matt Wright himself has to say on the issue.

<http://www.scriptarchive.com/nms.html>

Dave...