Getting Started with CSS: Roughing Out a Nav Bar

07-01-2007, 1:17 PM

Hi everyone,

As the subject line suggests, I'm just getting started with using CSS. The
specific application I have in mind is a custom WordPress theme. When I'm
totally done, I'd like it to look like this:

http://wjm.org/csshelp/wp-template-concept.png

The idea is that the nav bar at the top expands dynamically to accommodate
the text of the main pages and their child pages (if they exist).

So my first baby-step is to try to get the bigger part of the nav bar to
look the way I expect. Already I've run into a lot of trouble! Here's what I
wrote so far:

=================================

<html>
<head>
<style type="text/css" media="screen">

</style>
</head>

<body>
<p>X</p>

<img src="images/major-nav-left.png" width="18" height="48" />
<span class="navcontainer" >PageOne PageTwo PageThree PageEight</span>
<img src="images/major-nav-right.png" width="18" height="48" />

<p>X</p>
</body>
</html>

=================================

You can see the result of this at:

http://wjm.org/csshelp/main-nav-01.html

The brushed-aluminum background is 48 pixels high. There is a left cap and a
right cap. The objective is for the caps to meet up with the middle bar,
which would shrink/expand horizontally to accommodate the text. However, you
can see that I'm totally off the mark so far:

1) I haven't been able to figure out the CSS necessary to properly align the
middle section with the endcaps. I can push the endcaps DOWN by adding

style="position: relative; top: 24px"

to each of the img tags, but that seems like a kludge, because it puts
everything below the actual starting position of the graphic and leaves
white space at the top. Putting

position: relative; top: -24px

into the navcontainer style section has no effect. What is the right way to
do this?

2) There's a gap between the caps and the middle section. How do I get rid
of this? I tried putting display: inline in a few places, but the best I can
do is to get rid of the gap on the right.

3) The graphic is 48px high; the text is 18px high. But my margins total
only 20 px on the top and bottom. This seems to be what I have to set it to
for it to work properly, but what is using up the other 10px?

4) I want to use Arial Black because that is an almost universal font; but
if it's not present I want to degrade down to Verdana and so on... but
specifically I want to go from Arial Black to Verdana BOLD, then Arial BOLD,
then Helvetica BOLD... not the plain versions of those fonts. How to specify
this properly?

5) The background image (which you will notice is slightly brighter in the
middle) is currently centered. Ideally I would want it to STRETCH to fill
the horizontal space occupied by the menu text. That way, the end caps will
mate more perfectly with the pattern and I won't have to make an excessively
wide background graphic. I haven't found a way to specify this in CSS -- am
I missing something?

Obviously I'm clueless on some key concepts, but hopefully once I get past
some of these starting hurdles I'll pick up speed. Thanks in advance for any
help...

- Bill

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Getting started with GPS	Dave Patton	GPS	0	06-25-2007 10:48 PM
How to get started?	Tasha	Software Programming	0	06-12-2007 8:39 PM
Getting Started	John Marks	Ebay Technical Questions	0	05-31-2007 12:16 PM
JUST STARTED!	Fam. Sundberg	Building An Internet Business	0	05-29-2007 12:44 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)