Skip navigation

Spry Framework for Ajax (READ ONLY)

Currently Being Moderated

Spry bar text alignment

Jul 19, 2012 6:03 PM

Tags: #sprymenubar

I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.

I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.

1398 Views 10 Replies Latest reply: Debhel, Jul 27, 2012 9:13 AM

Replies

Currently Being Moderated

1. Ben Pleysier,

Jul 19, 2012 10:21 PM in reply to Debhel

Report

Assuming you have a horizontal menu bar, have a look here http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHoriz ontalMenuBarSample.html

Gramps

|
Mark as:
Currently Being Moderated

2. Debhel,

Jul 20, 2012 7:23 AM in reply to Ben Pleysier

Report

Thanks for the link, but it is the opposite of what I am trying to accomplish. I want the text to remain on 2 lines, but I want the 2nd line to align at the bottom with the one liners, and have the background depth be all the same. Which means that there would be more background above the one liners. Did I explain this correctly?

|
Mark as:

Currently Being Moderated

3. Ben Pleysier,

Jul 20, 2012 7:52 AM in reply to Debhel

Report

If I understand your requirement: auto width menu items with text flowing into a second line where applicable.

Try the following

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal li {
    width: auto;
}
ul.MenuBarHorizontal ul {
    width: auto;
}
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;
}
</style>
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">This is my very very<br>long item</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2<br> </a></li>
  <li><a class="MenuBarItemSubmenu" href="#">About our<br>business</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">This is a long item</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us<br>Jim's the word</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Gramps

Mark as:

Currently Being Moderated

4. Debhel,

Jul 20, 2012 8:56 AM in reply to Ben Pleysier

Report

Thanks again! Can you explain why you are giving me code for the submenu's? This bar does not have submenu's.

|
Mark as:
Currently Being Moderated

5. Ben Pleysier,

Jul 20, 2012 9:08 AM in reply to Debhel

Report

Can you explain why you are giving me code for the submenu's? This bar does not have submenu's.
Sorry, I am not a mind reader. I have already made a correct assumption in that you are talking about a horizontal menu bar. My second assumption that you have submenus was wrong.

This only enforces our continual request that you upload your site so that we can give you direct answers without having to guess.

Please come back when you can supply a link to your site.

Gramps

|
Mark as:
Currently Being Moderated

6. Debhel,

Jul 20, 2012 10:31 AM in reply to Ben Pleysier

Report

Sorry, as you probably can tell, I'm new at the forum, and have only been using Dreamweaver for 9 months. I've done several websites but this one problem has me stumped. I do not know how to give you a link to the website since I can't upload it to the outside server until its finished. How do other people handle that?

|
Mark as:
Currently Being Moderated

7. Ben Pleysier,

Jul 20, 2012 6:49 PM in reply to Debhel

Report

You can upload it to a temporary location. Apparently there are meny hosts that supply free training grounds for this sort of thing, just Google the subject.

To get back to the subject and referring to the markup that I supplied you with, have you tried to copy and paste the markup into a new document and viewed the result in a browser?

Gramps

|
Mark as:
Currently Being Moderated

8. Debhel,

Jul 23, 2012 9:41 AM in reply to Ben Pleysier

Report

Here is the link to the file I'm working on: http://temp-share.com/show/dPf3m5FOW

I tried your script and yes it worked with the only issue being that the area with only one line is reading at the top, not the bottom. I would assume that putting a break <br> before the text will solve that, correct?

I also need the entire bar to fill the 800 px width.

Deb

|
Mark as:

Currently Being Moderated

9. Ben Pleysier,

Jul 23, 2012 5:40 PM in reply to Debhel

Report

To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
* {
    margin: 0;
    padding: 0;
}
html {
    background: #FFF;
    height: 100%;
    color: #000;
    font: 100% Verdana, Geneva, sans-serif;
}
body {
    background: #FFC;
    width: 800px;
    margin: auto;
    font-size: 0.85em;
}
#header {
    height: 148px;
    background: #C2A4FF;
}
#nav {
    background: #EEE;
    height: 3.6em;
}
#aside {
    width: 197px;
    float: left;
    padding: 20px;
}
#article {
    margin-left: 240px;
    padding: 20px;
    background: #C2A4FF;
}
ul.MenuBarHorizontal li {
    font-size: 1.05em;
    width: auto;
    text-align: center;
}
ul.MenuBarHorizontal a {
    background-color: #EEE;
    padding: 0.5em 1.1em;
    color: #333;
}
</style>
</head>

<body>
<div id="header">
</div>
<div id="nav">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#"><br>Home</a>    </li>
    <li><a href="#"><br>Services</a></li>
    <li><a href="#">Benefits &amp;<br>Contraindications</a></li>
    <li><a href="#">Common  <br>Q&amp;A</a></li>
    <li><a href="#"><br>Pricing/Hours</a></li>
    <li><a href="#">Contact/About<br>Melanie</a></li>
    <li><a href="#"><br>Resources</a></li>
  </ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
  <p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
  <p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
  <p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>

Gramps

Mark as:

Currently Being Moderated

10. Debhel,

Jul 27, 2012 9:13 AM in reply to Ben Pleysier

Report

Thanks again Gramps, you've been very helpful.

Sorry for the delay, but other projects became priority and this one had to be put on the back burner. Now that I'm back on it, I've copied the code you provided into a new DW document and the words where just where I wanted them. My only challenge now is to have the words fill out the entire bar more!

Gratefully,
Deb

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Spry Framework for Ajax (READ ONLY)

Spry bar text alignment

Jul 19, 2012 6:03 PM

More Like This

Bookmarked By (0)

Answers + Points = Status