Web Development

General discussion

Gravatar
0 Votes
Locked

Create a pure CSS horizontal navigation bar

By MaryWeilage Editor ·
This week's Design and Usability Tactics e-newsletter provides details on how you can create a pure CSS horizontal navigation bar.

Will you use the technique described in this column to create a pure CSS horizontal navigation bar? Do you also think you might use variations of the technique in order to create a variety of navigation bar effects?

If you aren't subscribed to the Design and Usability Tactics e-newsletter, visit our e-newsletter subcenter to subscribe to this free e-newsletter:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&;;tag=fb

* Please delete any extra spaces that appear when you paste this link into your browser.

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

gravatar
Collapse -

Builder.com Lack Originality & Timeliness

by cmessina In reply to Create a pure CSS horizon ...

I don't mean to be entirely negative, but the value of
builder.com's CSS articles is somewhat marginal for me since I
tend to dwell near the cutting edge of CSS development. While I
realize that there are a lot of folks who stand to benefit from
this information who normally wouldn't have known about this, I
still feel that builder.com could at least make some efforts
towards _contributing_ something to the discussion rather than
just repeat what's been said and left elsewhere.

Try this page: http://www.alistapart.com/articles/taminglists/

And the look into the "Sliding Doors" float technique instead of
the inline technique: http://www.alistapart.com/articles/
slidingdoors/

Again, I'm not trying to be negative, but I would find builder.com
more of a resource if it provided fresh content rather than just a
rehashing of what I can and probably already have found
elsewhere.

gravatar
Collapse -

Builder.com Still Serves

by Convert In reply to Builder.com Lack Original ...

cmessina, thanks for sharing the "Sliding Doors" tip, but don't be so quick to slam Builder.com. For those of us that are first exploring CSS, these elementary articles are very helpful. I look forward to seeing more!

gravatar
Collapse -

Why not contribute an article or two?

by RexWorld In reply to Builder.com Lack Original ...

Very good feedback, and much appreciated. Why not share some of your more advanced CSS techniques--email me about submitting some articles on CSS?

I'd love to get more coverage on the more advanced aspects of this topic but that means more contributors. Hope to hear from you.

gravatar
Collapse -

E-newsletter author's response

by MaryWeilage Editor In reply to Builder.com Lack Original ...

Note from the editor: The following comments are from Michael Meadhra, the author of the Design and Usability Tactics e-newsletter:

"I'm currently aiming these articles at mainstream web builders who are too busy with day-to-day responsibilities to spend much time exploring the cutting edge. I'm looking
for previously cutting edge techniques that are making the transition to the mainstream and then delivering that info to the folks working in the
trenches. Is this aiming too high or too low? You tell me. Numerous reader comments suggest that this level of information is appropriate for many, but if there are enough readers who want more cutting edge stuff, I can certainly look into kicking it up a notch."

gravatar
Collapse -

how to figure out the padding value?

by igorkik In reply to Create a pure CSS horizon ...

Nice article, concise and brief to the point. One little thing is not clear to me ? how did you figure out the padding for ?div#navbar2 li a? element to fit the bar.

Thanks for providing valuable information!
IK

gravatar
Collapse -

E-newsletter author's response

by MaryWeilage Editor In reply to how to figure out the pad ...

Note from the editor: The following comments are from Michael Meadhra, the author of the Design and Usability Tactics e-newsletter.

"The padding-left and padding-right values
control spacing between the button text and you can set those values to whatever you want. The padding-top and padding-bottom values are the ones that must add up to match the height of the containing div. The formula font-size (in pixels) + padding-top + padding-bottom = div height gives you approximate values, which you can then fine tune a pixel or two as needed."

gravatar
Collapse -

What - no tables!

by miked In reply to Create a pure CSS horizon ...

I use css for many aspects of formatting but still need to use tables to enable a page to re-size to the viewer's browser window size. As I understand it css positioning is absolute and not relative resulting in pages of fixed width - a major limitation from the design viewpoint.

gravatar
Collapse -

E-newsletter author's response

by MaryWeilage Editor In reply to What - no tables!

Note from the editor: The following comments are from Michael Meadhra, the author of the Design and Usability Tactics e-newsletter.

"Although CSS positioning can be absolute,
it can also produce liquid layouts that dynamically resize with the browser window. Look for more on this topic in future articles."

gravatar
Collapse -

Relative positioning

by miked In reply to E-newsletter author's res ...

Would be very interested in an article on this especially with regard to cross browser compatibility.

Regards

Mike

gravatar
Collapse -

Printable character helps accessibility

by richard.s In reply to Create a pure CSS horizon ...

Some screen reader programs used by people with visual problems need a printable character between hyperlinks. Otherwise the program becomes confused.

I am still looking for the "holy grail" of a navigation scheme which is:
- accessible
- intuitive
- attractive
- compact
Oh, and works with all browsers etc.

Nice article. Thanks.

Back to Web Development Forum

Start or search

Related Discussions

Related Forums