SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically align text in responsive css menu (with a logo on right)

    Hi,

    I'm trying to vertically align to center text in responsive css menu with a logo on right side. I've tried to add "vertical-align: middle" to all appropriate divs (ul, ul li, ul li a), but the problem is that text (menu) stays in almost same position.

    Regards

  2. #2
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The property "vertical-align" is a tough cookie, and will only work for images and content nested in tables. That being said, I would suggest adding a line height equal to the height of your logo image to to the "ul"

    It might look something like this..
    HTML Code:
    ul {
     list-style: none;
     line-height: 50px;
    }
    
    img{
     height: 50px;
     width: 150px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for reply... sadly that didn't worked. Menu even got broader then it was before.

    I use hgroup tag and ul in one div tag.


    Code:
    <div id="menu">
          <a href="/index.html">
          <hgroup id="title">
            <img id="logo" src="images/logo.png"/>
          </hgroup>
          </a>
          <ul>
            <li class="selected"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Order</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>

  4. #4
    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
    7 Thread(s)
    You could try putting the line height on the <a>s themselves, and set them to display: block. We'd need to see your full code to know exactly what conditions you are working in, though.

    Quote Originally Posted by ninostar View Post
    I use hgroup tag ...
    Have you checked what that element is actually for?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could try putting the line height on the <a>s themselves, and set them to display: block. We'd need to see your full code to know exactly what conditions you are working in, though.

    Have you checked what that element is actually for?
    No, didn't checked so far. I've tried to find solution on internet and one blog it was described as solution how to add logo with css menu. So, I've added it and it seems to work. However I have problems with getting logo and menu automatically vertically aligned to logo. If menu would be fixed, this won't be a problem, but since it needs to be responsive I don't know how to make it.

    Should I paste all related css in here? Oh and thanks for helping me out...

  6. #6
    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
    7 Thread(s)
    Quote Originally Posted by ninostar View Post
    Should I paste all related css in here?
    Ideally a link, or the full page code (with CSS in the head), so we can see this in context.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ideally a link, or the full page code (with CSS in the head), so we can see this in context.
    Here's the link to what I'm doing:
    http://ninostar.atwebpages.com/

  8. #8
    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
    7 Thread(s)
    Cool. OK, try this:

    Code:
    #menu ul {margin: 0; float: right;}
    
    #menu ul li {float: left;}
    
    #menu li a {display: block; line-height: 70px;}

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, seems not to work when resizing browser down... have uploaded new css on provided link

  10. #10
    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
    7 Thread(s)
    Quote Originally Posted by ninostar View Post
    Hmm, seems not to work when resizing browser down...
    The menu has to drop when there's no longer room for it. You need to decide what you want to do when it gets too wide for the space available.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The menu has to drop when there's no longer room for it. You need to decide what you want to do when it gets too wide for the space available.
    Don't I do that with "float: left/right"? Menu should move below like it did before, but it should auto align (vertically) when that happens...

  12. #12
    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
    7 Thread(s)
    Quote Originally Posted by ninostar View Post
    it should auto align (vertically) when that happens...
    Auto align with what, though?

  13. #13
    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)
    ninostar, there doesn't seem to be any code that tells the page how to behave below a width of about 752px. Is that the issue?

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I've just started with converting website from psd to html. Since some words in menu will be longer, they should automatically align (vertically) in the middle of logo when changing size of browser - I'm sorry if I don't find right words to describe what I wish to achieve, so I've attached two samples of how menu should look like (first sample is when you shrink down browser and second one is with fully opened browser).

    http://ninostar.atwebpages.com/sample.html

  15. #15
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great I see... This code will work if you add it to the end of your global stylesheet. But, it would be smart to move them thoughtfully into already existing selectors, making it easier to go in and edit your CSS smoothly in the future.
    HTML Code:
    #menu {
      min-width: 700px;
    }
    
     div#slider div#menu ul{
      padding: 0;
      border: 1px solid red;
      float: left;
    }

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for help, but this didn't solved the issue entirely. As you can see on previously mentioned link, menu isn't fully responsive, as right before you resize browser to tablet size, part of menu (contact) disappears on right side of browser - it should be automatically moved below (as seen on sample page).

    http://ninostar.atwebpages.com/sample2.html

  17. #17
    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)
    ninostar, Thank you for posting the example images. Please try this test page and see if it works the way you wish. There are lots of outlines and borders and one gray background so you can see how everything moves. Tested in IE 8 & 9, Firefox 18 and Chrome 24
    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
    -->
    <head>
        <title>Rolling Menu Items</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-left:15px;
    }
    .header ul {
        list-style-type:none;
        display:inline-block;
        border:1px solid #f00;
        padding:0;
        margin:0;
    }
    .header li {
        border:1px solid #0f0;
        float:left;
        text-align:left;
        font:1em Georgia, serif;
        padding:0;
        margin:.25em .6em;
    }
        </style>
    </head>
    <body>
    <div class="header">
        <div class="logo"><h1>Logo</h1></div>
        <div class="menu">
            <ul>
                <li>HOME</li>
                <li>ABOUT US</li>
                <li>OUR SERVICES</li>
                <li>MAKE YOUR ORDER NOW</li>
                <li>MEET OUR TEAM</li>
                <li>CONTACT US</li>
            </ul>
        </div>
    </div>
    </body>
    </html>

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for help... your code works fine, but will have to implement it to my design. It's late here, so will update all of you tomorrow. Again thanks to all for help

  19. #19
    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
    7 Thread(s)
    Nice work, Ron. An interesting solution to study.

  20. #20
    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)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    Nice work, Ron. An interesting solution to study.
    I hope that's a good thing. The code seems a bit complicated, so I imagine there is an easier way to accomplish this. It's a start, though.

  21. #21
    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)
    Post #17 errata:

    .header ul {
    and
    .header li {

    should have been classed as

    .menu ul {
    and
    .menu li {


  22. #22
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again thanks for the help... really great solution, I was trying a lot of things, but wasn't successful at all. I think this might help many others too. How come that I can't align text to right side (when resizing browser down and menu gets into second line)? I tried with text-align and with float, but it doesn't want to stay on right side - this is not such a big deal, but it would be nice since menu is meant to be on right by default.

    I've uploaded your code to server, so others will be able to see it in action:
    http://ninostar.atwebpages.com/responsive-css-menu.html
    Last edited by ninostar; Jan 16, 2013 at 03:14. Reason: edited url

  23. #23
    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
    7 Thread(s)
    Quote Originally Posted by ninostar View Post
    How come that I can't align text to right side (when resizing browser down and menu gets into second line)?
    You should be able to change float: left to float: right here:

    Code:
    .menu li {
    border: 1px solid lime;
    float: right;
    text-align: left;
    font: 1em Georgia, serif;
    padding: 0;
    margin: .25em .6em;
    }
    But you may want to reorder the links in that case, as they will appear in reverse order. It's not ideal.

  24. #24
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changed float attribute and text order... problem is that "home" gets in second line, instead of "contact"... you can check online (on previously mentioned link).

  25. #25
    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
    7 Thread(s)
    You haven't updated the page online yet.


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
  •