menu align

Discussion in 'HTML & Website Design' started by Alex Petrus, May 8, 2013.

  1. #1
    http://arad-webdesign.ro/croupers/

    How to inline the text from the right of the menu bar, "Cart Register / Login" to be inline with the paypal image and the other text from the menu?
     
    Alex Petrus, May 8, 2013 IP
  2. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #2
    you should put menu center on float: left as well.

    Or you can put it to absolute position and then position it to pixel if you really want to be exact.

    Whole CSS:
    body {
       background-color:#f9ee9f;
       background-image:url(../images/bg.png);
       background-position: center top;
       background-repeat:repeat-x;
       margin:0;
       padding:0;
    }
     
    #container {
       width:1024px;
       margin:0 auto;
    }
     
    .clear {
       clear:both;
    }
     
    a {
       color:#ffffff;
    }
     
    a:hover {
       text-decoration:none;
    }
     
     
    #header {
       background-image:url(../images/header_bg.png);
       background-position: left top;
       background-repeat:no-repeat;
       height:214px;
    }
     
    #logo {
       margin-top:10px;
       margin-left:100px;
       float:left;
    }
     
    #slogan {
       float:right;
    }
     
    #headline {
       margin-top:-80px;
       padding-left:20px;
    }
     
    #menu {
       background-image:url(../images/menu.png);
       background-position: left top;
       background-repeat:no-repeat;
       height:71px;
       margin-top:-28px;
       padding-top:32px;
       color:#ffffff;
       font-size:18px;
       width:100%;
       
    }
     
    #menu-left {
        float:left;
        width:200px;
        height: 30px;
        background: #313131;
       text-align:center;
    }
     
    #menu-center {
        display: inline-block;
        margin:-20px auto 0 auto;
        height: 30px;
       
        width: 440px;
        float: left;
    }
     
    #menu-center ul li {
       padding:0 10px;
       list-style-type:none;
       display:inline;
    }
     
     
    #menu-right {
        float:right;
        width: 380px;
        height: 30px;
        background: #313131;
       text-align:right;
        bottom: 10px;
        display: block;
        display: block;
        display: block;
    }
     
    .span-menu-right {
       padding: 0 5px;
       display: block;
       float: left;
       margin-top: 5px;
    }
    
    Code (markup):
     
    Last edited: May 8, 2013
    ntmedia, May 8, 2013 IP