SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    line-height alternative - vert centering

    Hi all,

    Does anyone have any way of vertically aligning some text or a list item without using the line-height?

    My problem is the site is being built with % font values, which allows the user to change their font size via the browser.

    Unfortunately, with this, the text with a line height set, will not remain in the same position.

    The effect is similar to that of a table cell. if there is a height set on a table cell, and the vertical-align is set to middle. My text will be free to increase and decrease in size, whilst remaining vertically centered.

    Any idea's?

    Cheers

    Gav


  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    an example.. in your browser change the text-size or use CTRL and move your middle mouse wheel back and forth. Instead of the text being vertically centered, its moved up or down with the font size.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                #test {
                    height: 50px;
                    width: 200px;
                    text-align: center;
                    border: solid 1px;
                    font-size: 66&#37;;
                    font-family: verdana, tahoma, sans-serif;
                    line-height: 50px;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            
            <div id="test">Some text</div>
    
        </body>
    </html>


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You may need to explain in what situation you mean exactly as setting the line-height in the following way will ensure that the line height drows with the text.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p{
        border:1px solid #000;
        line-height:2em;
    }
    
    
    </style>
    </head>
    <body>
    <p>This is a test This is a test</p>
    </body>
    </html>
    Unless of course you have set the line height to an exact pixel height but I assume you wouldn't do anything so silly.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It looks like you did set a fixed pixel height so I'm not sure what you expect to happen as the pixel height can't change

    The correct way would be to size the container and line-height in ems so that it all scales together.

    Alternatively you could add display:table which will make it scale ok in Firefox. IE doesn't understand display:table but it doesn't look like it needs it anyway as the text stays centred.

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its for a menu. The main container is 100&#37; wide by 125px tall. I cannot have the main container height set to something like an em or percentage, as it needs to remain static. Although the UL element doesn't need to be any height as long as it appears correctly.


  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    as it needs to remain static.
    You can't expect to resize text and then complain when a fixed height/width element doesn't keep track with it. This is your basic design error and you should have accommodated this in your design .

    There are plenty of ways of creating flexible menus that will expand with text resize but it does take more effort and has to be built in from the ground up.

    If you have an example of your menu that we can look at then perhaps we could make some other suggestions but it sounds like your design concept is flawed in the first place and you may have to live with the consequences.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As I said above you could do this for firefox:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
                #test {
                    height: 50px;
                    width: 200px;
                    text-align: center;
                    border: solid 1px;
                    font-size: 66&#37;;
                    font-family: verdana, tahoma, sans-serif;
                                    display:table;
                            }
                            #test p{
                            display:table-cell;    
                        vertical-align:middle;
                            }
            </style>
    <script type="text/javascript"></script>
    </head>
    <body>
    <div id="test">
        <p>Some text</p>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    an example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                body {
                    margin: 0;
                    padding: 0;
                    text-align: center;
                }
                #header {
                    text-align: left;
                    margin: 0 auto;
                    width: 740px;
                    height: 125px;
                    border: solid 1px;
                }
                #logo {
                    float: left;
                }
                #menu {
                    float: right;
                }
                #menu li {
                    float: left;
                    margin-left: 10px;                
                    font-family: verdana, tahoma, sans-serif;
                    font-size: 66&#37;;
                }
                #menu:after {
                    content: "."; 
                    display: block; 
                    height: 0; 
                    clear: both; 
                    visibility: hidden;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            
            <div id="header">
                
                <div id="logo">Logo</div>
                <ul id="menu">
                    <li><a href="#">menu item</a></li>
                    <li><a href="#">menu item</a></li>
                    <li><a href="#">menu item</a></li>
                    <li><a href="#">menu item</a></li>
                </ul>
    
            </div>
    
        </body>
    </html>
    the header div needs to be 125px tall, or at least a fixed height.


  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think theres much you can do apart from minimizing the consequences unless you are able to re-design.

    Heres a very old em demo of mine and if you scale the text you see how perfectly it grows (within reason).

    http://www.pmob.co.uk/temp/emdemo.htm

    There is no reason why you can't convert you header to ems even if it means using background images that are bigger than the space available so the element can scale etc.

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've sorted it. As the background image is a gradient, I simply positioned it to the bottom of the container, and set the height to 8em. this was only about 5px off.

    Thanks



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
  •