Positioning Spry Menu Bar, etc.

(First time using DW, bear with me ...)

I'm trying to modify my spry menu bar so it integrates with my page like this:

nav2mh3.jpg

But right now it looks like this:

nav3wy2.jpg

The menu bar is in a table cell, along with a sliced 800 x 25 px .gif (the gradiant image right below it) which I'd like the menu bar to be on top of.

I'm stuck on how do the following, and I've searched everywhere:

1. What CSS property to I chage to align the menu bar to the right, just so it aligns with the right edge of the large content box below it?

2. How can I make the menu bar be on top of the 800 x 25 px .gif (currently right below it, in the same table cell). I tried to delete the .gif from the table and set it instead as a background image of the Spry Menu, but that didn't work (I may have set the wrong CSS property.)

3. How do I decrease the height of the pipes (actually, solid right borders) which separate the menu items? (see first image for desired look). I tried to change the height and padding properties for Box in ul.MenuBarHorizontal a. I changed the height from "auto" to something like 7 px (or should I use points? ems?). That decreased the height but the words were no longer centered vertically within the menu (too close to the bottom border), so I changed the Box padding from 0.5 em 0.75 em to 0.3 em 0.75 em but that moved the bottom of the box closer to the text. (I also tried 0.5 0.75em 0.5em but that made it worse.)

4. How can I not show the last pipe (after CONTACT).

Thank you for any pointers. There are so many css properties for the spry menu and I'm having trouble finding good documentation about what each one does.

I just somehow managed to screw it up further and the menu is now vertical. I can't figure out what I changed and clicking undo didn't restore it.

Do you have a development site with this so we can work on it for you. It'd be a lot easier to just open up my web dev toolbar and slap some css changes and get it all squared away for you.

(if not, you'll need to set the LI to either display: inline; or float: left; depending on your situation. Then you'll likely need to use position: absolute; and adjust the top and left values to position it where you want it. Keep in mind though this is just speculation since I don't know how you've coded it)

- James

I gave you some code in your other thread which should get "almost" the desired result ...

http://www.webforumz.com/graphics-fo...htm#post262505

Yes! This is working much better than the 400 other options I've tried.

Now, just to verify some of my learning:

This code defines the (overall?) properties for the "navigation" div id listed in the HTML code:

Code: Select all

#navigation {
    margin: 0;
    padding: 0;
}

This code further defines it as an unordered list (ul):

Code: Select all

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

This code defines (which?) properties for the list items (li) that are in the underordered list:

Code: Select all

#navigation ul li {
   margin: 0;
   padding: 0;
   display: inline;
   float: right;
}

This code defines the text properties for the list items (li); the "a" makes it a hyperlink:

Code: Select all

#navigation ul li a {
   text-transform: uppercase;
   padding: 0 10px;
   border-right: 1px solid #fff;
   color: #fff;
}

This code defines the properties when the mouse hovers over the list items ...

Code: Select all

#navigation ul li a:hover {
   color: #900;
}

I changed the float property for #navigation ul li to "right", and now need to move the list over to the left a bit. I tried making changes to padding, margin, and position but this had no noticable affect. Since the list div is inside a table cell, should I change the properties of the table cell instead?

Thank you again for your help.

I took a tip from Alistapart's Taming List article and tried to get rid of the right border on the last list item (CONTACT). THe changes I made had no obvious impact:

I edited the navigation div like so:

Code: Select all

 
<div id="navigation">
   <ul>
      <li class="last"><a href="contact.html">Contact</a></li>
      etc.
   </ul>
</div>

I then added this to the .css file:

Code: Select all

 
#navigation ul li a.last {
   border-right: none;
}

Also, when I floated the list to the right, the order of the items reversed when viewed in the broswer. I had to edit the div by listing the items in reverse order (starting with CONTACT and ending with HOME) for them to appear in the proper order in the browser. Odd?

Code: Select all

 
#navigation ul li a.last {
   border-right: none;
}

Your selector does not match your HTML. a.last selects all <a> elements with the className "last". Since you don't have any of these, the CSS does nothing to your page.

You need this instead:

Code: Select all

 
#navigation ul li.last a {
   border-right: none;
}

Thank you! That did it. Any idea what property I need to edit to move the navigation div a few pixels to the left? It seems I've tried everything. (When I made the float property of the #navigation ul li to "right," everything flushed to the right side of the table cell. I need to nudge the navigation items to the left a bit.)

The relevant code looks like this:

Code: Select all

   
...
 
<tr class="navbackground">
   <td height="24" colspan="2" background="images/global/index_03.gif" class="nav">
 
<div id="navigation">
   <ul>
      <li class="last"><a href="contact.html">Contact</a></li>
      <li><a href="thearts.html">The Arts</a></li>    
      (etc...)
   </ul>
</div>
 
   </td>
</tr>

As you can see, the background image and navigation div are both within a single table row.

For a start, you'd better check your HTML is valid. I have no idea whether <div>s are allowed inside <table>s (I never use <table> for layout). It seems rather an odd thing to do.

To move #navigation a few pixels left, try:

Code: Select all

#navigation {
margin-left: -5px;
}

Or:

Code: Select all

#navigation {
padding-right: 5px;
}

Or if you're desperate, the slightly hacky:

Code: Select all

#navigation {
position: relative;
left: -5px;
}