(Spry) Alignment of the horizontal Menu

I am currently working on my first web page design. Never. I can't make my horizontal Spry menu to reach both sides of my page, which is I forced to 720px wide. I followed some of the answers suggested in other threads, but nothing helped. Any help would be appreciated, because there are obviously a ton that I do not know this! The page is published on fivepinesphotography.com/index.php thanks! I'm having a blast learning this kind of thing! Here's a screenshot if it helps...

menubar_ss.jpg

You must give the li elements fixed wide. Since you have 8 items in a menu of 720px, i.e. 90px each. Change the width property of the ul. MenuBarHorizontal li auto to 90px.

This will result in some of your menu on two lines of packaging items. Solve the problem by changing the padding in ul. MenuBarHorizontal a 0.5em 0.75em to 0.5em 0.3em 0.5em 0.1em.

For the menu look better, you need to choose slightly shorter labels for each menu item or slightly reduce the size of the police.

While you make changes, get rid of this stupid blocker right click. Anyone who wants to look at your code or save your images can bypass this blocker in a few seconds.

Tags: Dreamweaver

Similar Questions

  • How the horizontal menu widget to show 100%?

    How the horizontal menu widget to show 100%?

    Instead of making the menu 100% width create the illusion of it.

    Create a rectangle and 100% of the width, then place your menu on it and align it with the rectangle.

    Background color of the menu and the rectangle must be the same.

    Kind regards

    Vivek

  • column width of cells using the horizontal menu spry

    Hello

    Try to set the column width of cells using the Horizontal Spry DWCS5.5 menu.

    View-source: http://www.roatan.ws/spry-menu-bob

    I used the help to get directions and I think I did it correctly, but I don't know about you.

    / * Container of menu items are same fixed width parent * /.

    UL. MenuBarHorizontal ul li

    {

    background-color: #356A 68.

    float: none;

    background-color: transparent;

    height: auto;

    Width: auto;

    }

    Try to clean up my site and make things just one in search of work.

    Any suggestions appreciated

    Bob

    Spry menus contain all the columns in the table or cells.    They are just lists

    • with CSS style tags.

      UL. MenuBarHorizontal li

      {

      margin: 0;

      padding: 0;

      list-style-type: none;

      do-size: 12px;

      position: relative;

      text-align: center;

      cursor: pointer;

      Width: 8th; / * adjust top-menu width * /.

      float: left;

      text-decoration: underline;

      }

      UL. MenuBarHorizontal ul

      {

      margin: 0;

      padding: 0;

      list-style-type: none;

      do-size: 10px;

      z index: 1020;

      cursor: default;

      Width: 8th; / * Adjust submenu width * /.

      position: absolute;

      left:-1000em;

      background-color: #356A 68.

      }

      Nancy O.

      ALT-Web Design & Publishing

      Web | Graphics | Print | Media specialists

      http://ALT-Web.com/

      http://Twitter.com/ALTWEB

      http://ALT-Web.blogspot.com/

  • No option to align on the Format menu in Dreamweaver CM³

    I downloaded and installed version of Dreamweaver CC track about 15 days ago.  Today, I bought (perhaps a mistake) DW CC. When you try to use the command of text align, there is no alignment command in the Format menu.

    I have taken a class DW this semester and available in the classroom and the laboratory DW have both this command located under the Format menu.

    Online help on the topic of formatting text, using online instructions indicate to underline the text, go to the Format menu > align, etc., etc.  Well, guess what?  It is not on my copy.

    I'm doing something wrong or is there something wrong with my copy of DW CC?

    Align is deprecated coding - news yesterday. Adobe removed the option of more recent versions of DW.

    Use css to align elements. So if you have a heading h1 tag where you want to center text use:

    H1 {}

    text-align: center;

    }

    Welcome

    Start as you want to go on – using up-to-date coding methods

  • Problem of formatting in the content with the horizontal menu widget area

    I use a regular horizontal menu widget with several different taps within an empty page.  I lived as if the content field under the first tap, for example, is 300 pixels long, all other fields of content under other taps will inherit the same height.  Because I have different amounts of text in various taps, I need to be able to REDUCE the height of the text field. But it won't let me.

    Any input is much appreciated!

    Fred

    Hi ACW100,

    Please select size spacing: uniform point in the menu dropdown.

    It does not resize the tabs separately, but it might serve your purpose (spacing problems).

    Kind regards

    Akshay

  • How I evenly space the horizontal menu buttons?

    I am following the tutorial for Kate Café (part 3,http://www.adobekb.com/building_your_first_website_pt03.html#adding) and I'm trying to customize the menu headers. According to, I have to use the default settings. Later, I put the logo on the menu for the 'home' button below the logo, so when you click on the logo, it takes you to the home page.

    I used the Menu > Horizontal option. Here's how mine as:

    Screen Shot 2013-05-16 at 2.27.34 PM.png

    The problem is that my menu buttons are not evenly spaced but tense.

    This is what looks like the demo version:

    fig_37_building.jpg

    Also, I noticed on some online tutorials that others have a Menu > Bar option, it is related to that?

    I checked and my Application Manager said that my version is up-to-date (I use cloud creative).

    Thanks for any help in advance!

    Select a menu item to set its appearance, then press ESC to select the whole menu, go to your control panel space and add horizontal space + in the option of the blue arrow for your menu widget, be sure to have "same size" (sorry, human translation from the french)

  • Alignment of the Flash menu in table problem/margins between images

    Hi, I built a website using Dreamweaver (I'm a complete newb to CSS and HTML, I'm a kiltmaker!). It uses a table layout that will connect eventually to a shopping cart. I'm just working on the html part, and I would include a Flash menu bar. When I add the SWF file, I would like to align with the top of my product images, but unfortunately, ends up looking like this:

    http://amhamiltonhandmadekilts.co.UK/test/flashtestdresssporrans.html

    I would really like it if the top of my menu flash would align at the same height as the rest of the images, for example at the same height as "dress sporran" etc so that the design is flush.

    Any ideas on how I could solve this problem would be greatly appreciated!

    Also, I would like that the spacing between the images were not as big table, so that it looks a bit neater, is this easy to do?

    Thank you very much

    Steve

    I see you still seem to be placing the menu and products in the structure of the table.  First create an external table which has two cells side by side.  Make sure that the 100% table.  In the left cell of the table, place the Flash menu with its setting valign to the cell.  In the right cell of this place of menu a new table that contains only products.  This approach allows you to remove any dependence on the menu arrangement of the products and vice versa.

    Play with it in a new page of practice... feel free to try different things.  I think it's good for you to gain experience with the handling of the page layout using tables.  That way, if/when you move to the side of the css, you will be able to say why it is preferable (if you do) by personal experience, and not because someone else said it.

  • Comment do pay have the horizontal menu start

    How to have the menu start horizontal instead of vertical

    It is not possible.

    You can have the taskbar on the top or on the left or right side of the "screen, but the menu start display always vertically independent of the position of the Start button."

  • Another problem of horizontal menu SPRY with IE7

    I've posted this before, with no responses, but I think I narrowed down it to a problem of CSS with IE7.0 response. If you view the attached link with Firefox or Opera, the background color of menu responds correctly on the bottom of the fall. In IE7, the background color is ignored, causing the menu to be translucent and, uh, ugly. Does anyone else has had a problem with the CSS background-color in the horizontal menu css SPRY attribute does not?

    HELLLLLP! and, uh, thank you.
    Karl

    Prototype link using spry, css, ajax sprites and other magic.

    I posted on the forum Spry in Adobe labs and got the answer. He resided in the z-index of the horizontal menu style. I invite you to consult the answer suggested in this forum. I tried 3 times to put a link in this response and it wrong three times. Sorry "about it.

    Karl

  • horizontal menu with horizontal submenu

    I am trying to create a horizontal menu with a submenu horizontally directly underneath.  Thus, when you hover over the items in the top menu, the list of subitems appears as a horizontal menu directly below the top menu.  I was able to change the widget spry Panel tabs to do for the most part, but there must be a better way. It seems that the widget menu spry for the horizontal menu has just a drop of water to the bottom of the sub-elements in a vertical list below the top menu item.   I searched but not found the answer.  Could someone please help me with suggestions?  Thank you.

    Tutorial:

    http://www.sohtanaka.com/Web-design/horizontal-sub-nav-with-CSS-jQuery/

    Example:

    http://www.sohtanaka.com/Web-design/examples/horizontal-subnav/

  • How to remove white space at the bottom of the start menu

    Hi, anyone knows how to remove the little white space between the bottom of the horizontal menu and the top of the vertical menu collapse (see below).  Code below is also included.  Is or, if it is not removable, possible to change its color?  Thank you very much.

    bootstrap_menu_2.jpg

    < nav class = "navbar, navbar-default" >

    < div class = "container-fluid" >

    <!-brand and toggle get grouped together for better mobile display->

    < div class = "bar navigation-header" >

    < button type = "button" class = "toggle navigation bar has collapsed" data-toggle = 'collapse' data-target = "#defaultNavbar1" >

    < span class = "sr only" > toggle navigation </span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < / button >

    < a class = 'bar of navigation-brand' href = "index.html" > < /a > brand

    < / div >

    <!-collect the nav links, forms, and other content to alternate->

    < div class = "navbar-collapse custom class collapse" id = "defaultNavbar1" >

    < ul class = "navbar-nav, navbar-right nav" >

    < li > < a href = "Music.html" > music < /a > < /li > ""

    < li > < a href = "Images.html" > pictures < /a > < /li > ""

    < li > < a href = "Unity3D.html" > Unity3D < /a > < /li > ""

    < li > < a href = "Flash.html" > Flash < /a > < /li > ""

    < li > < a href = "About.html" > on < /a > < /li >

    < /ul >

    < / div >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / nav >

    @media (max-width: 768px) {}

    {.custom-class

    Overflow-x: visible;

    -webkit-too-full-scrolling: touch;

    background-color: #4A72C0;

    height: auto;

    }

    . NAV > li {}

    display: block;

    position: relative;

    -webkit-box-shadow: 0px 2px #8EC1FF;

    box-shadow: 0px 2px #8EC1FF;

    border: 1px solid #005092;

    }

    }

    Massi says:

    Hi, here is an update.  I managed to get rid of the white line in the menu expanded by increasing the height of the image (sorry, I don't think than forward).  So, there is only a thin white line on the left in the menu of the collapse.  If she can't get rid of, its color can be changed?  Thank you.

    Here ya go - save you messing around hunting which was placed on what element and then combination of css classes, get rid of him.

    .NavBar - default .navbar-collapse {}

    border: none;

    }

  • Adobe muse right at the main menu on the left site

    Hello

    How can I customize the horizontal menu of the widget library to display the names of the pages from right to left?

    You need to reorganize your pages in the plan view to take into account that you want to display.

    Or you can use the manual option to create your menu.

  • The alignment of the text to the left so that it starts exactly the same point

    Hello

    I'm working on a document in Illustrator where exist dispatches and then numbered chips below. Everything is aligned to the left, but when you zoom in at most closely, you can see the title and the number not all aligned left exactly in the same place. The numbered chips all left the title start as well as the numbers don't line up exactly between them, because of some characters who have parts of them that start earlier. For example, a 4 starts before a 1, because the left side of the 4 goes further to the left.


    Y at - it a shortcut for setting this without me having to go kern just so that it aligns all really left?

    Thank you!

    Try optical margin alignment in the Type menu.

  • Horizontal menu moves when opening new pages

    I have seven top-level pages and have used the horizontal menu widget in my master page. When I view the site in my browser the first four pages loading without problem, but when I opened the last three pages the menu moves to the 20pixles right. If I can open say page this page menu 2 then returned to the original location as it was in the home page.

    Can anyone advise me as to why this is happening. I also tried with the last four pages left in white, and the problem persists, so I guess that the content of the page is not the cause.

    Thank you in advance

    John

    One way that it could move is if the first pages are longer than the others and scrolling side displays or disappears.

  • Dynamic alignment of the value of element column and report page

    Hi friends,

    I have an interactive report that contains the columns as

    < li > empno
    < li > name

    In the light of the foregoing, I 'empno' with an alignment of the left column and a 'name' with an alignment of the left column.

    It is possible to substitute the alignment of the data that we put into the report according to the value of the application as element

    If my application point is about US, so I need the alignment of the column 'empno' and 'Name' to the left, and if the value of point of my app's AR, I need the alignment of the column 'empno' and 'Name' to be right. What is possible to achieve dynamic alignment for the report data to two columns 'empno' and 'Name', according to the value of application page element.

    And also, in the case of the page element, I have a page element with a name of P1_NAME in which he has an alignment of the Horizontal/Vertical element on the left.

    I need to this alignment of the element of the page element behave dynamically according to the order of the day of the application page, as if the order of the day of the application page called WE then the alignment of the element of the page item must be left and if the order of the day of the application page called AR and then the alignment of the element of the page element has to be right.

    Is it possible to make some friends of my scenario two above. Kindly help me with this.

    Thanks in advance.

    Brgds,
    Mini

    Hey Mini,

    To change the alignment on the fly, you need a change in your IR and javascript.

    First change the columns that you want to change the alignment for. Add the following code in The HTML Expression in the column formatting part. (Detail of the column)

    #HERE _THE_COLUMN_NAME#
    

    Then you can change the easy alignment for these areas with the following code

    $(".align_style").css("text-align","left")
    

    This can be in a DA, or just on the loading of the page.

    Kind regards
    Kees Vlek
    -----
    Company: http://www.orcado.nl
    Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
    Twitter: http://www.twitter.com/skier66
    If the answer to question please change replied and mark the appropriate post as correct / helpful.

    Published by: kvlek on 7-mei-2013 14:47

Maybe you are looking for