Equispacing items on a line

[Neil Rossi]

I'm sure this has been answered before but a search doesn't turn up
anything. I am converting to CSS an HTML site that used tables for
positioning and layout. I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site. The menu bar is now
defined by a DIV (see below). My stumbling block is as follows: I
need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's. Is this
even possible to do without using tables? TIA.

Here's the DIV
#banner
{
BACKGROUND: #005d73;
BORDER-LEFT: #000 1px solid;
BORDER-RIGHT: #000 1px solid;
BORDER-TOP: #000 1px solid;
COLOR: white;
HEIGHT: 35px;
LEFT: 0px;
MARGIN-BOTTOM: 15px;
MARGIN-LEFT: 0px;
MARGIN-TOP: 0px;
TEXT-ALIGN: center;
TOP: 0px
}

[Jukka K. Korpela]

ro***@kdvsystems.com (Neil Rossi) wrote:

I am converting to CSS an HTML site that used tables for
positioning and layout.
I wonder why. What is the expected gain? If you want to achieve just the
same rendering, what will you win?
I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site.
Menu bars are a permanent source of problems. It's less clear which
problems they are meant to solve. Anyway, a menu bar is a collection of
similar items, namely tables, so it's much closer to a structural table
than most other uses of table markup on Web pages.
The menu bar is now defined by a DIV (see below).
Why didn't you post the URL?
My stumbling block is as follows: I
need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's.
Why do you need that? And what did you try? By default, a DIV element is
rendered as a block element, so that each DIV begins on a new line. You
don't seem to have tried anything to change that.
Is this
even possible to do without using tables? TIA.
Yes, use display: table-cell. Well, that was just semi-serious. If the
most natural CSS property would be one that begins with table-, the odds
are that you have actually changed a structural table, a data table, to
something less structured, then try to put Humpty-Dumpty together again.
Here's the DIV
#banner
_The_ DIV, and with a #banner selector? You really have one such DIV only?
Then what's the point? Where are the links? What markup is used for them?
This would be _much_ easier if you had posted the URL (or two URLs - the
current design and your best attempt so far to "fix" it).
HEIGHT: 35px;

And what happens when the font size is bigger than fits into that height?

OK, now, engaging the ESP unit, I see that the DIV is the container for
links and you have tried to set the width for those links. This won't work
that simply, since the width property is ignored for inline elements.
Something like the following may work, if you adjust the width property to
reflect the length of the longest element (6em roughly corresponds to
about 12 characters):

#banner a { display: block;
float: left;
width: 6em; }

Your choice of colors will, however, cause quite some problems. The link
colors will work poorly against the chosen background. And changing link
colors substantially from typical defaults is really bad for usability.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[viza]

and then Neil Rossi said:

I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site ...
I need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's.

<div id="links">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>

div#links {width:100%}
div#links div {width:20%;float:left;text-align:center}

If the links don't fit they'll go onto two lines. Play with it.

[Neil Rossi]

Thank you, Viza. I'll give that a try.

viza <no**@example.invalid> wrote in message news:<r3*********************@newsfep2-win.server.ntli.net>...

and then Neil Rossi said:

I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site ...
I need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's.

<div id="links">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>

div#links {width:100%}
div#links div {width:20%;float:left;text-align:center}

If the links don't fit they'll go onto two lines. Play with it.

[Neil Rossi]

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message news:<Xn*****************************@193.229.0.31 >...

ro***@kdvsystems.com (Neil Rossi) wrote:

I am converting to CSS an HTML site that used tables for
positioning and layout.
I wonder why. What is the expected gain? If you want to achieve just the
same rendering, what will you win?

The goal, of course, is to reduce the dependency on tables as a design
aid, since tables enforce a certain layout on the site by their very
nature. Otherwise, as you say, there is no gain from rewriting it.

I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site.

Menu bars are a permanent source of problems. It's less clear which
problems they are meant to solve. Anyway, a menu bar is a collection of
similar items, namely tables, so it's much closer to a structural table
than most other uses of table markup on Web pages.

The menu bar is now defined by a DIV (see below).

Why didn't you post the URL?

Because the development site is an internal, password-protected site
and you can't get there from here.

My stumbling block is as follows: I
need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's.

Why do you need that? And what did you try? By default, a DIV element is
rendered as a block element, so that each DIV begins on a new line. You
don't seem to have tried anything to change that.

My mistake. I didn't show you everything I had defined in the style
sheet. I had also defined properties for the anchors.

<snip>
OK, now, engaging the ESP unit, I see that the DIV is the container for
links and you have tried to set the width for those links. This won't work
that simply, since the width property is ignored for inline elements.
Something like the following may work, if you adjust the width property to
reflect the length of the longest element (6em roughly corresponds to
about 12 characters):

#banner a { display: block;
float: left;
width: 6em; }

Thank you. I'll try playing around with that.

[Matt Rushton]

ro***@kdvsystems.com (Neil Rossi) wrote in message news:<9c**************************@posting.google. com>...

I'm sure this has been answered before but a search doesn't turn up
anything. I am converting to CSS an HTML site that used tables for
positioning and layout. I have a menu bar at the top with 4 or 5
hyperlinks back to the main areas of the site. The menu bar is now
defined by a DIV (see below). My stumbling block is as follows: I
need to have the hyperlinks spaced evenly across the menu bar WITHOUT
reverting to the use of a one-row table with 4 or 5 TD's. Is this
even possible to do without using tables? TIA.

a menu bar is a list of links so should be set up as an UL with each
link being a LI. You can then set the UL to display:inline, turn off
the bullet point and apply spacing etc.

the point of doing it this way is that when the stylesheet is turned
off, the links are completly usable and correctly spaced. this is
also important if you are trying to get your site accessability
approved i.e Bobby Approved.

Matt

[Neil Rossi]

Thanks for all the suggestions. I still find CSS pretty intimidating
because it's really easy to create non-conformal markups. Anyway, if
anyone's interested, here's some code I found and modified which does
pretty much what I wanted it to do. As I learn more, I'll probably
find ways to tweak this. Note that the fonts, positioning, color
choices, and height of the menu bar are dictated by this customer's
style guidelines. YMMV.

The stylesheet:
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#Banner
{
BACKGROUND: #005d73;
COLOR: white;
FONT-FAMILY: Verdana, Arial, Helvetica, 'MS Sans Serif';
FONT-SIZE: x-small;
HEIGHT: 35px;
MARGIN: 0px auto 15px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
WIDTH: 100%
}
#Banner LI
{
DISPLAY: inline;
FLOAT: left;
LIST-STYLE: none;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
WIDTH: 16.6%
}
#Banner LI A
{
BACKGROUND: #005d73;
BORDER-BOTTOM: #555 1px solid;
BORDER-LEFT: #555 1px solid;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #555 1px solid;
COLOR: white;
DISPLAY: block;
FONT-WEIGHT: bolder;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0.5em;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
WIDTH: 100%
}
#Banner LI A:hover
{
BACKGROUND-COLOR: #deebef;
BACKGROUND-IMAGE: none;
BACKGROUND-REPEAT: repeat;
COLOR: #005d73;
FONT-WEIGHT: bold
}
#clear
{
CLEAR: both;
FONT-SIZE: 1px;
VISIBILITY: hidden
}
</style>

and just after the <BODY>, insert:

<ul id="Banner">
<li><a href="#">Home</a></li>
<li><a href="#">Main Menu</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li id="clear"></li>
</ul>
<br><br>
<P>Page content here</P>

and so on.