Change Navigation Menu to be Left Aligned

I am using Theme 5 and the Navigation Bar Menu is Right Aligned and I want to make it Left Aligned. The page template script is as follows:
<table summary="" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top">#LOGO##REGION_POSITION_06#</td>
<td width="100%" valign="top">#REGION_POSITION_07#</td>
<td class="t5NavBar" valign="top">#NAVIGATION_BAR##REGION_POSITION_08#</td>
</tr>
</table>
I tried adding align="left" to the last td column above but it did nothing. Is it possible to make it left aligned?
Thanks,
Chris

Hello,
I am having a similar issue with the Navigation Bar with two Apex 2.2. applications. Both applications are in the same
workspace. I have one application where the navigation bar is aligned properly and one application where
the navigation bar is always right aligned. In that application, I can remove and re-create the navigation bar
and it remains right aligned. In both apps, there are no separate CSS files that are referenced. Only the existing
apex system CSS file(s). Any suggestions on what to check to correct the app with the right aligned navigation
bar?
Thanks

Similar Messages

Change the navigation menu in iweb

I have buy an iweb template that has the navigation menu always fixed. No matter is you move the mouse over the links to the pages, if you are in the welcome page or blog, the text is always the same.
I have ask to author of the template to make the active page text grayed out but he wants again money because this is customizing request of the template...
Is there a way to change the color of the text of the navigation menu? It is enough that the active page is highlighted.
Thank you

Thank you for the answers.
If it is possible I don't want create nothing because it complicates the stuffs (I'm a very beginner in this things). I have tried the javascript way but it don't modifies the behavior of the menu.
Excavating in the iWeb application folder I have reach this file that seems the responsable of the navigation bar: iWeb.app/Contents/Resources/Themes/_Simple\ Info\ orange.webtheme/Italian.lproj/Welcome.webtemplate/com.apple.iweb.widget.navbar. Welcome.plist
I have open it with Pref Setter:
.navbar {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: .8em;
color: #666666;
line-height: 30px;
border-bottom: 3px solid #ccc;
.navbar-bg {
text-align: right;}
.navbar-bg ul {
list-style: none;
margin: 0px;
padding: 0px;
li {
list-style-type: none;
display: inline;
padding: 0px 5px 0px 0px;
li a {
text-decoration: none;
padding: 10px;
color: #666666;
font-weight: bold;
li a:visited {
text-decoration: none;
padding: 10px;
color: #666666;
font-weight: bold;
li a:hover
color: #999999;
text-decoration: none;
li.current-page a
color: #66ABC5;
text-decoration: none;
I have change the color value but nothing happens. Have you any suggestion?
Thank you
Marco
PS: maybe in 10 days Apple publishes iWeb 10 that permits these modifies...

How to change the default left alignment setting in Word 2010 professional (personal use)

Hi, I use Word 2010 Professional for my personal use at home, and somehow the default setting for the left alignment in a new Word document has been changed to a hanging indent at .25. So every time I open a new Word document, the left margin
has an indent setting. I have to change it to 0.0 every time, which is annoying.
I've tried to go into the "Options" section, under "Custom Settings" to de-select an auto left margin indentation, but I can't seem to find an option to do that. Can anyone please tell me how to change this setting in the master Word 2010 template,
so that every time I open a new doc, the left side is aligned at the 1" margin with no hanging indent?
Thank you.

Page Layout-Page Setup-Margins-Custom Margins...-change your setting-Set As DefaultStay Hungry, Stay Foolish

Equal Space between Menu Items and Drop Down Menü left aligned not possible?

It seems like I can either have equal spacing between the horizontal menu items and the drop down menu will show up centered , or I say the menu items should be of equal size, and then drop down will be left aligned. Is there any way of having equal space AND left aligned drop down???? Thanks in advance!

Hello Anjum,
Thank you for reporting the issue. It seems to be a Bug and we have logged the same. Hopefully it will get fixed in coming releases.
As of now we do not have any workaround for same. However once we have some workaround, we will definitely share it with you.
Regards,
Sachin

How to Center Text in Menu and Left Align in Sub Menu

Hi - I'm looking to Center the text in the main menu of a Spry Menu in DW CS 5.5 but left align the sub menu's.
If someone could point me in the right direction it would be much appreciated.
Thanks
J

See here http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
Gramps

Graph legend width change - Left aligned or right aligned

Hello all,
when I place an XY-Graph with Plot-Legend shown in LV2012, the text of the plot name is left aligned, wich is, what I want. With this behaviour the little pictures, representing the plot attributes, are fixed. After migrating to LV2014 I realized, that the text is now right aligned, which means, that the little pictures are moving to left & right, depending on the plot name length.
I found no property controlling this behaviour.
As a workaround I could set the plot legend position depending on its width, when the plot name is changed, but there is no event, firing when the plot name is changed by the user. So I would have to poll the plot names in the timeout case of my event structure. Btw. I have to show six XY- graphs on my FP, so polling can cause a remarkable CPU load (when I do it 1000 times / s ).
Any suggestions?
Greets, Dave

Hello Dominik,
thank you for your reply.
I'd like to show you the problem with some pictures:
The left picture shows the original situation, the right picture demonstrates the behaviour with LV2012, the legend is right aligned.
The same situation in LV2014, the legend is right aligned.
Greets, Dave

Does and one know if you can change the navigation menu at the top of the iWeb template pages?

Does and one know if you can change the navigation menu at the top of the iWeb template pages? I need to make the background a little wider.

It depends on which template you use.
You can also hide the default navigation and build your own which allows more freedom of design and is better for search engine optimization...
http://www.iwebformusicians.com/iWeb/Navigation.html
Make sure you use web-safe fonts in your navigation...
http://www.iwebformusicians.com/iWeb/Fonts-Colors.html

Change position of button in navigation menu

I hope this is a simple issue. I want to make it so that if I change the position of a button I put in the navigation menu the position will change throughout the whole site.
Thanks

Georgeonetwothree wrote:
it is part of a dreamweaver template
If it's part of a DW template then once you save the page all pages using that template should update automatically.

How do I Change Font and Font Color in Navigation Menu?

I recently purchased iLife 08 and i'm having a hard time finding the tool to change the fonts in the navigation menu at top of page. Is it even possible?

If you open one of your HTML pages with a suitable text editor, and search for "new NavBar" you will find the section of the page which generates the navbar on-the-fly. It calls a javascript function NavBar with a load of parameters, which look largely like gobbledegook, and determine what the navbar will look like.
If you are at all familiar with CSS you will notice that if you replace all instances of "\n\t" with a line break and a tab, you will be looking at standard CSS information. The "\n\t" is there because you can't pass a literal carriage return / tab pair to a javascript function, you have to use the escape characters \n and \t.
In other words, if you expand:
.navbar {\n\tfont-family: 'Courier New', Courier, monospace, serif;\n\tfont-size: 1.1em;\n\tcolor: #AFAA9F;\n\tmargin: -2px 0 0 0px;\n\tline-height: 20px;\n\tpadding: 5px 0 12px 0;\n\tfont-weight: bold;\n\tbackground-image: url(homefiles/navfill-v2-21.jpg);\n}
it looks something like this:
.navbar {
  font-family: 'Courier New', Courier, monospace, serif;
  font-size: 1.1em;
  color: #AFAA9F;
  margin: -2px 0 0 0px;
  line-height: 20px;
  padding: 5px 0 12px 0;
  font-weight: bold;
  background-image: url(homefiles/navfill-v2-21.jpg);
So to change the font size, just find the font-size bit and change it:
.navbar {\n\tfont-family: 'Courier New', Courier, monospace, serif;\n\tfont-size: 0.9em;\n\tcolor: #AFAA9F;\n\tmargin: -2px 0 0 0px;\n\tline-height: 20px;\n\tpadding: 5px 0 12px 0;\n\tfont-weight: bold;\n\tbackground-image: url(homefiles/navfill-v2-21.jpg);\n}
Likewise any of the other properties.
I can't believe Apple didn't spend the few hours required to present the user with the options to change this stuff. The fact that it would have been SO easy makes me believe there has to be more to it than that; some sort of policy. Upgrade carrot? Who knows.
Sorry if this is less than 100% clear. I'm the wrong side of a fine cabernet.
Bruce

Best way of having left-side navigation menu?

Hello Folks,
I'm interested in developing an application using JSP and the design requirement is that it should have a left-side navigation menu. Is there an Oracle recommended way of doing this or should I resort to using DHTML? In addition, please let me know if you have any suggestions.
Thanks!

You have two parts in your question: left side navigation menu;
You can define and use templates (HTML Templates) for your Pages in the Portal to structure your pages, such that Navigation or navigational tools can be placed on the page wherever you like. That is for the positioning of the navigational tools.
To define your navigational tools (menus, for eg), you may still use DHTML and/or a combination of other methods.
hope that helps!
AMN

Changing color of Navigation menu items

I can't figure out how to change color of the navigation menu. any help?

The treatment of the navigation bar is hard-coded in XML files which control the appearance of iWeb templates. You cannot change this from within iWeb itself.
In fact, iWeb treats items on the navigation bar as images, as you'll see if you open a folder for one of your iWeb pages on your iDisk. Go to iDisk/Web/Sites/iWeb/SIteName/PageName_files and you'll find files such as navbar0normal.png, navbar0rollover.png, navbar1normal.png, navbar1rollover.png and so on. iWeb generates these based on the names you assign to your pages, using the font and colours specified in the controlling XML.
It is possible to change the appearance of the navigation bar, but only by editing the XML files within the iWeb application itself. Take a look at the 11 Mystics site, where Suzanne Boben provides a detailed description of what's involved. It's not something for the faint-hearted to tackle.
[ Visit here for iWeb Tips, Tricks and Hacks ]

How to create a project's Menu in PeopleSoft left hand Menu Navigation ?

Folks,
Hello. My PeopleSoft project has 3 items (item1, item2 and item3). Each item has 5 components (Component1, Component2, Component3, Component4 and Component5).
Currently, I can acces each component by type in the URL in Browser as follows:
http://127.0.0.1/psp/ps/NodeName/PortalName/c/MenuName.ComponentName.GBL
But I want my project to appear in the left hand "Menu" navigation after we sign on PeopleSoft. My project Menu will look like a hierarchical tree. When the user click on it, the user can see all the project's items and components and link to a component directly. But I don't understand how to do it.
Do any folks understand how to create a project's Menu in PeopleSoft left hand Menu navigation ?
Thanks in advance.
:

>
>
I have registered each component using Registration Wizard in Application Designer. Since each Menu holds a Component, the Menu is also registered while registering its Component. So far, I can access each component online using the URL: http://127.0.0.1/psp/ps/NodeName/PortalName/c/MenuName.ComponentName.GBL
But I want to create a Menu for my project as a hierachical tree ( Project -> Item1 -> Component1, Compoent2, ...),
and I want the project Menu appears in PeopleSoft left hand Menu navigation so that a user can simply click on it to access a component and don't need to type in the above URL. Please answer me 2 questions:
First, how to make the project Menu appear in PeopleSoft left hand Menu navigation ? I am still not sure what you are trying to do(It is surprising that you registered the component and still dont have it in the main navigation; did you run the portal security sync process?? ).
If it is all a matter of having a hierarchical structure, then you can create folders and subfolders and register each item accordingly(into different folders and subfolders as you want)
Second, if need to register each Menu seperately again, how to do it ?Delete entries for content references that you added earlier while registering(by navigating to portal), as well as the entry from permission lists. After that you should be able to register again.

How to change the color of navigation menu text?

Hello guys,
is there any way to change the color of navigation menu text? (Home, Contact About us,etc)
Thank you,
Cheers

To create your own navigation bar, you can use a textbox and use colour fill with any colour you want and then enter the names of your pages in this and create hyperlinks to these pages. The text can then be any colour you want.
You can also use shapes if you want to and use the shapes to create individual buttons.
To hide the original nav bar, go to page and it has a couple of boxes with hide nav bar and include in page. Uncheck these and the original nav bar will disappear. You can't delete them however.

Moving navigation menu to left hand side?

Is it possible to move the navigation menu from the top to the left hand side? If so, how?
I'm using the road trip theme at the moment.

Not the one that iWeb creates. You can create a text based navbar and place it on the side like in this demo page: Text Based Navbar and Drop Down Menus. It would have to be copied and pasted from the first page it was created on to all the other pages. Not convenient if you have a lot of pages.
There are numerous menu options that you could use. Do a search in the iWeb forum for "menu" and you'll get a number of topics that might have a type of menu that would work for you.
OT

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

Change Navigation Menu to be Left Aligned

Similar Messages

Maybe you are looking for