SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 28 of 28
  1. #26
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've uploaded it again... menu is now always on right, but you will see what happens when you resize browser down.

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Instead of float: right on the LIs, you could use display: inline-block. Then they will drop as you want, and the HTML order is better (back to the original order).

  3. #28
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Another way to change the direction of alignment of the menu items without changing their order in HTML is to change:
    Code:
    .menu li {float:left|right;}
    to:
    Code:
    .menu li {display:inline-block;}
    FYI:the direction of menu item alignment is inherited from:
    Code:
    .menu {text-align:right}
    There is one more nuance that is only noticable at very narrow window widths and when menu items contain multiple words.
    The alignment of the text within the menu item is set in .menu li a {}. To change that behavior from left justify to right justify, change:
    Code:
    .menu li a {text-align:left;}
    to:
    Code:
    .menu li a {text-align:right;}
    The attached screen shot demonstrates this behavior I'm referring to.

    nuance.jpg


    Off Topic:

    Edit: sorry Ralph, I didn't turn the page and see yours and the OP's exchanges before posting this.


    May as well add the current version:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?953882-Vertically-align-text-in-responsive-css-menu-%28with-a-logo-on-right%29
    Thread: Vertically align text in responsive css menu (with a logo on right)
    2013.01.14 09:34
    ninostar
    
    Tested in IE 8 & 9, Firefox 18 and Chrome 24
    -->
    <head>
        <title>Sliding Menu Items 3</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .header {
        outline:1px solid #00f;
        width:90%;
        display:table;
        table-layout:fixed;
        vertical-align:middle;
        margin:0 auto;
    }
    .logo {
        display:table-cell;
        text-align:center;
        vertical-align:middle;
        border:1px solid #0ff;
        width:200px;
    }
    h1 {
        background-color:#ddd;
        width:200px;
        padding:.4em 0 .6em;
        margin:0;
    }
    .menu {
        display:table-cell;
        text-align:right;
        vertical-align:middle;
        padding:0 10px;
    }
    .menu ul {
        list-style-type:none;
        display:inline-block;
        border:1px solid #f00;
        padding:0;
        margin:0;
    }
    .menu li {
        border:1px solid #0f0;
    /*    float:left; */
        display:inline-block;
        padding:0;
        margin:0;
    }
    .menu li a {
        display:block;
        text-align:left;
        font:1em Georgia,serif;
        padding:.25em .6em;
        margin:0;
    }
        </style>
    </head>
    <body>
    <div class="header">
        <div class="logo"><h1>Logo</h1></div>
        <div class="menu">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">OUR SERVICES</a></li>
                <li><a href="#">ORDER NOW</a></li>
                <li><a href="#">MEET OUR TEAM</a></li>
                <li><a href="#">CONTACT US</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Last edited by ronpat; Jan 16, 2013 at 12:40. Reason: include anchors


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •