How to center menu and add spacing between buttons?

Here is my site: http://lauraportfolio.hostoi.com/index.html (If you are using Google Chrome you can right click and select "view page source" to see the html of the page)
See how the menu button are justified the left of the light pink menu bar? How can I put them in the center?
I would like to know how to center the menu, and then add spacing between the buttons.
At one point I added spacing between the buttons using CSS padding, but when I did that the last menu button, "Graphics" ran off the pink menu bar and became invisible and all kinds of crazy ugly stuff!
Below is what I beleive to be all of the CSS styling for the menu:
#menubar
          width: 900px;
          height: 72px;
          padding: 0;
          background-color: transparent;
          background-image: url(transparentpink.png);
          background-repeat: repeat;
ul#menu, ul#menu li
{ float: left;
  margin: 0;
  padding: 0;}
ul#menu li
          list-style: none;
          padding-right: 0px;
          padding-left: 0px;
          margin-right: auto;
          margin-left: auto;
ul#menu li a
          letter-spacing: 0.1em;
          display: block;
          float: left;
          height: 37px;
          text-align: center;
          color: #f0dbca;
          text-transform: none;
          text-decoration: none;
          background: transparent;
          font-family: bonvenoCF, verdana, Geneva, sans-serif;
          font-size: 150%;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          padding-top: 29px;
          padding-right: 26px;
          padding-bottom: 6px;
          padding-left: 26px;
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
          color: #F0DBCA;
          background-color: #F1836A;

PART 1
So as long as the width of the buttons plus the padding doesn't go over 900px it won't run off the page?
Right.   The "box model" in CSS works like this:
width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box.
PART 2
And do you know how I can center the whole thin instead of it being left-aligned on the menu bar?
You can't center floated menu items.  The best you can do is make your menu fit the entire width of the container (or as close as you can) as described in PART 1 above. 
To center your #menu container, use margin:0 auto;
To center text, use text-align:center on the #menu li a.
Nancy O.

Similar Messages

  • I deleted all the music on my iPhone, but all the albums still exist. How do I clear and add a fresh batch of music?

    I deleted all the music on my iPhone, but all the album artwork still exist. How do I clear and add a fresh batch of music?  Also my iTunes no longer recognizes my iPhone under the "devices" tab so I am unable to manually sync. I have disconnected it makes a beep sound when reconnected so I know my computer is finding the phone, the iPhone also appears on Explorer. Stupid question but I can't figure it out and wasting too much time.  Thank you.

    It has always been very basic to always maintain a backup copy of your computer for this very occasion.  Use your backup copy of your computer to put everything on the new one.
    If for some reason you have failed to backup, big mistake, then you can transfer itunes purchases from the iphone to the computer:  File>Transfer Purchases
    You may be able to buy a 3rd party program to get any other music off of the iphone ( not supported by Apple).
    When you sync the iphone, it will erase the current content and replace with content form the new computer.
    "Not happy with itunes right now, more then a bit of a joke"
    Not itunes fault that you did not do the very basics and maintain a backup copy.

  • I have a new IPAD. There are no "list", "date," and "add a reminder" buttons on the Reminder app. There are also no "calendar" and "add an event" bottons on the Calendar App. Why?

    I just bought a new IPAD. There are no "list", "date," and "add a reminder" buttons on the Reminder App. There are also no  "calendar" and "add an event" buttons on the Calendar App. Why? Is there a way to add either a reminder or an event?

    For the reminders app - just tap on an open space on the ruled paper window under the heading in order to create a new reminder. Or tap on the + sign in the upper right corner of the app. You do not have the + sign on the app?
    For the calendars app to go Settings>iCloud>Calendars>On. Toggle the setting on and off and the + sign should appear in the lower right corner of the calendars app. Tap the + sign to create a new event.

  • How to catch Find and add event of toolbar in UDO addon ?

    Hi experts ,
        please help me anyone How can i catch Find and add event of SAP  toolbar in my UDO addon ?
    thanks in advance
    Surajit

    Hi,
    Try This.....
    'In Menu Event
    If pVal.MenuUID = "1281" And pVal.BeforeAction = True Then   'Find
                      sbo_application.Messagebox("Find Mode")
    end if
    If pVal.MenuUID = "1282" And pVal.BeforeAction = True Then     'Add
                      sbo_application.Messagebox("Add Mode")
    end if
    Thanks
    Shafi

  • How do i grab datalist ID and add it to button onclick to update that item

    Hi, I have pulled over some data from my sql server 2012 in VB C# DataList view. I would like to add a custom button to each item that will allow me to delete an item from the database and also update a database column onclick. EG: Update the paid (bit)
    column to 1 when the paid button is clicked. Here is what i have so far as i am new at this:
    my aspx page:
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:DataList ID="dlActiveBills" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
    Amount:
    <asp:Label ID="AmountLabel" runat="server" Text='<%# Eval("Amount") %>' />
    <br />
    DateReg:
    <asp:Label ID="DateRegLabel" runat="server" Text='<%# Eval("DateReg") %>' />
    <br />
    Deadline:
    <asp:Label ID="DeadlineLabel" runat="server" Text='<%# Eval("Deadline") %>' />
    <br />
    Notes:
    <asp:Label ID="NotesLabel" runat="server" Text='<%# Eval("Notes") %>' />
    <br />
    Name:
    <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
    <br />
    <br />
    <asp:Button id="btnPaid" runat="server" Text="Paid" Commandname="update" />
    </ItemTemplate>
    </asp:DataList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>" SelectCommand="SELECT
    d.Amount,
    d.DateReg,
    d.Deadline,
    d.Notes,
    r.Name
    FROM
    Details d
    LEFT JOIN
    ReminderTypes r
    ON
    d.ReminderTypesId = r.ReminderTypesId
    WHERE
    d.Paid = 0"></asp:SqlDataSource>
    </asp:Content>
    my aspx.cs page
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    public partial class active_bills : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
    protected void MainContent_dlActiveBills_btnPaid_0_Click(object sender, EventArgs e)
    string dbConnection ="Data Source=somthing;Initial Catalog=somthing;Integrated Security=true;";
    SqlConnection sqlConnection;
    sqlConnection = new SqlConnection(dbConnection);
    sqlConnection.Open();
    SqlCommand cmd = new SqlCommand();
    cmd.Connection = sqlConnection;
    cmd.CommandText = "UPDATE Details SET Paid = 1 WHERE DetailsId = ?";
    cmd.ExecuteNonQuery();
    sqlConnection.Close();
    This doesn't work but can it be done in this way somehow?

    Hi irishwestman,
    Thank you for posting in MSDN forum.
    Since this forum is to discuss: Visual Studio WPF/SL Designer, Visual Studio Guidance Automation Toolkit, Developer Documentation and Help
    System, and Visual Studio Editor.
    Based on your issue, it is related to the ASP.NET, so I suggest you can post this issue directly to the ASP.NET forum:http://forums.asp.net/
    you will get better support.
    Thanks for your understanding.
    Best Regards,
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • How do I view and add photos on the mobile app?

    QuestionHow do I view my photos and add new photos on the mobile app?
    Answer 
    To view your photos, you may either select the Photos icon from the Home screen:
    Or, you may select the Profile icon from the Home screen.
    From your profile picture, you can start scrolling to view your photos one by one. Or, touch the camera icon on your profile picture to view all your photos at once.
    To add new photos to your account, touch the camera icon on the top-right corner of your Photos page:

    http://support.apple.com/kb/DL1455?viewlocale=en_US&locale=en_US

  • How to set Menu and Title functionality for a remote control in a menu?

    I have a main menu (countries) and under each country there is a submenu (regions). When I play my DVD on my Mac it seems to function alright:
    If I go to country C and hit the "menu" button, nothing happens (I see the "action prohibited" line popping up). And nothing should happen of you hit menu in a submenu. Only if you hit Title/Top menu you should be able to go to the main menu.
    However... When I play my DVD on a DVD player (and I tested it on 2 different ones) and I go to a the Country C and hit the "menu" button, I am suddenly transfered to Country A. And if I go from the main menu to Country D and I hit the "menu" button, I go to... Country A. The menu button seems to be linked to the first submenu. Which is very odd!
    So there is definately something going very wrong when using the menu/title buttons during playback when I am in a submenu (not while playing a track).
    Can someone help me? Is there a way to define what happens with the remote control buttons menu or title when you are in a submenu and NOT playing a track? I can not find any controls for that.
    Thanks!

    Does this mean I should select "not set" in the general tab at the dropdown menu's for Title, Menu and Return in the Remote Control section? I can't find any other place where I can select menu or title.
    But if I set these to "not set",the menu and title buttons still work in simulation mode... So I guess I should do something else in order to disable menu and title? Sorry for the amount of questions from my side!

  • How to Deactivate MENU and SYSTEM button in Portal.

    Hello,
    I have created a SAP transaction iView of Y Transaction. Now it showing me all the buttons and Transaction Box on selection screen in EP. My requirement is to have only EXECUTE rest buttons should be hide.
    Some of the buttons I have controlled from ABAP Program.Like SAVE,CANCEL,BACK etc.
    And T-Code Box I have controlled from ICF transaction.
    Follows the route:  sicf->sap->bc->gui->sap->its->webgui->GUI Configuration
    ~WEBGUI                                     1
    ~THEME                                     sl
    ~LOGIN                                                                               
    ~PASSWORD                                                                               
    ~NOHEADEROKCODE     1
    Now Still it showing me MENU,SYSTEM and EXECUTE button.
    I want to hide MENU and SYSTEM.
    Please provide me the solution.Its really very important for me.Helpful answer definely be appreciate!
    Regards,
    Supriya.

    Hi santosh,
    Thanks.
    I have already checked the related note.And I am getting only Execute button when I set the parameter
    ~WEBGUI_SIMPLE_TOOLBAR     32 .It hides other button as well.
    But I have to show another T-Code in EP it should have all the buttons SAVE,CANCEL,BACK etc.
    Therefore in one report I want to show only Execute Button and in another report it should show all the button Except T-Code box.
    I have hide SAVE,CANCEL,BACK button from ABAP program,except Execute Button and T-Code Box from sicf Transaction.
    But shows MENU and SYSTEM button which I want to hide.
    Suggest me.
    Regards,
    Supriya.

  • How to change country and add credit card details

    Hi
    I'm unable to change my itunes store account permanently.  I can change my store from "UK" to "UAE" and then the store I'm in is the UAE's, however when I then go to the top left, choose account to try and add my cc details the country still shows UK.  I then go back to Account info where I'm offered the chance to chanage my country, I then change it to "UAE" and am brought back to the iTunes home page, now again in the correct country.  However when I go back to the account to once again try and add my cc details the country shows as "UK". 
    I have successfully changed the country through the Apple website and so my Apple ID has the correct address associated with it, but not so when I try to log into it in iTunes.
    Grateful for any help.

    Problem fixed - once I changed the country to UAE and was brought back to what looked like a home page for iTunes UAE offering to set up an ID however once I followed the screens and agreed to the terms (all in Arabic - I couldn't find a way to show English) I was then brought to the screen for adding CC details but this time my country was listed as UAE.

  • How can you copy and transfer tracks between songs in Garageband for iPad air 2?s

    I have just started with GarageBand for iPad air 2 and want to know more about copying tracks between songs and also saving and using samples between songs too. Anybody have any good links or advice? Thanks

    This has nothing to do with Classic, the operating system on Macs from 2001 and earlier.  Please post in the forums most likely to have an answer if you want a quick one:
    This guide should help:
    http://discussions.apple.com/docs/DOC-2463

  • Menu widget (horizontal) space between buttons

    How do I get spaces between navigation buttons on the horizontal menu widget?
    In the basic Katie video, she does this as a "pre-set". Then in the advanced video it shows up in the images with no discussion. Thanks for helping.

    Hello,
    You can either choose to use manual menus for this and place the menu as per your requirement, or you can use the "uniform spacing" option in the item size section of menu options for some spacing between the menu items.
    Cheers
    Parikshit

  • Line spacing between buttons

    Hi!
    The problem what I'm having is I want to have line spacing between these buttons
    but I don't know how. If I let them as below shown there isn't any space among them.
    You can see that when you run the program.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb1 USER-COMMAND pb1.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb2 USER-COMMAND pb2.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb3 USER-COMMAND pb3.
    Regards
    sas

    HI,
    u can do like this.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb1 USER-COMMAND pb1.
    SELECTION-SCREEN skip.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb2 USER-COMMAND pb2.
    SELECTION-SCREEN skip 4.
    SELECTION-SCREEN PUSHBUTTON /1(20) text-pb3 USER-COMMAND pb3.
    rgds,
    bharat.

  • How to Link Text and Image as One Button?

    I can easily convert an image or text to a button, but how do I link them both as one button so when you mouseover either one, they both turn a color and when you click on one, they both turn a color before jumping to the scene?

    Include the image and the Text in the Button's Layer Set. Design the Sub-picture Highlight to affect both.
    Just remember that a Button is defined by a rectangle, that encompasses all elements in the Button, and that Buttons (no part) may overlap any other Button.
    Good luck,
    Hunt

  • Outlook Integration Tool - 'Send and Add to CRM' button missing

    Hey Folks,
    We have an interesting issue with the Outlook 2003 - SP3. On some of our machines the button 'Send and Add to CRM' does not appear with you hit 'New Email'. The tool is installed and the 'Add to CRM' button is there as expected.
    If we install the tool (downloaded from an R16 environment) is still does not appear? Any ideas? Seems strange that some machines with the same version of Outlook have it and others don't?
    Thanks
    Oli @ Innoveer

    I would also check to see if the OEI Add-In is present and selected within Outlook. You may need to reselect it. If it is already selected you may need to manually register (they need to be present) the OEI DLL Files:
    regsvr32 "C:\Program Files\Siebel CRM OnDemand\Siebel OEI OnDemand\SiebelOnDemand.dll"
    regsvr32 "C:\Program Files\Siebel CRM OnDemand\Siebel OEI OnDemand\SiebelOnDemandEmail.dll"

  • How can I hide the "Add Page Text" button in Lightroom 5 Book Module

    In Lightroom 5's Book Module, there is an "Add page text" button that appears when you are in either two-page or single-page view.
    More often than not, it sits right on top of my photo caption text causing that text to be unreadable.
    Is there an option to hide that button?

    If there is no specific reason that you have to use sendredirect...thne you can try request.forward.....
    RequestDispatcher rd = request.getRequestDispatcher("pathToResource");
      rd.forward(request, response);

Maybe you are looking for