SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 line-height issues

    Having a bit of an issue with the line-height of a styled h1 heading. I would like it to be inside a banner, but it sits on the bottom of the container, instead of in the middle as I'd like.

    If anyone could help I'd be really grateful.

    The URL is:

    Title

    The HTML is:

    Code:
    <div id="canvasouter">
    	<div id="canvas">
    		<h1 id="aqua"><span></span>Why doesn't the line-height work :(</h1>
    	</div><!--canvas-->
    </div><!--canvas-->
    The CSS is:

    Code:
    #canvasouter { background:#eeeeee; margin:0 auto; padding:10px; width:977px; }
    #canvas { background:#fff; border:1px solid #dcdcdc; padding:1px; }
    
    h1#aqua { display:inline-block; }
    
    h1#aqua { background:url(aquamarine-right.png) no-repeat right center; /*color:#fff;*/ font-weight:normal; font-size:28px; font-family:Georgia,times,serif; line-height:20px; letter-spacing:-2px; height:73px; margin:15px 0; padding:0 60px 0 10px; }
    h1#aqua span { display:inline-block; background:url(aquamarine-left.png) no-repeat right center; height:73px; left:-23px; position:relative; width:14px; }
    Many thanks for any help in advance

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this and see if it works for you

    Code:
    		/*Canvas*/
    		#canvasouter { background:#eeeeee; margin:0 auto; padding:10px; width:977px; }
    		#canvas { background:#fff; border:1px solid #dcdcdc; padding:1px; }
    
    		/*Banner Headers*/
    		h1#aqua { display:inline-block; }
    
    		h1#aqua { background:url(aquamarine-right.png) no-repeat right center; /*color:#fff;*/ font-weight:normal; font-size:28px; font-family:Georgia,times,serif; line-height:60px; letter-spacing:-2px; height:73px; margin:15px 0; padding:0 60px 0 10px; }
    		h1#aqua span { display:inline-block; background:url(aquamarine-left.png) no-repeat right center; left:-23px; position:relative; width:14px; }

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks purves but that doesn't work, it collapses the span which is needed for the left side of the banner

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

    The span which you have set to display:inline-block moves the baseline down to the bottom and the subsequent text sits on the baseline because that is the default.

    Try this.

    Code:
    h1#aqua span {
      background: url("aquamarine-left.png") no-repeat scroll right center transparent;
      display: inline-block;
      height: 73px;
      left: -23px;
      position: relative;
      vertical-align: middle;
      width: 14px;
    }

  5. #5
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that's great, however, it makes the content sit in the middle of the banner, but slightly off center vertically, and now adjusting the line-height of the h1, even to the extremes doesn't seem to budge the text :S

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

    It is vertically centered but the height is the height of the wraparound so its slightly offset.

    What you should do is remove the element from the flow so it doesn;t impact on your text.

    e.g.
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
    <title>Title</title>
    <meta name="description" content="Content here" />
    <meta name="keywords" content="Content here" />
    <style type="text/css">
    /*Canvas*/
            #canvasouter {
        background:#eeeeee;
        margin:0 auto;
        padding:10px;
        width:977px;
    }
    #canvas {
        background:#fff;
        border:1px solid #dcdcdc;
        padding:1px;
    }
    /*Banner Headers*/
            h1#aqua {
        display:inline-block;
    }
    h1#aqua {
        background:url(http://dev.pelli.co.uk/h1s/aquamarine-right.png) no-repeat right center; /*color:#fff;*/
        font-weight:normal;
        font-size:28px;
        font-family:Georgia, times, serif;
        line-height:60px;/* tweak here*/
        letter-spacing:-2px;
        height:73px;
        margin:15px 0;
        padding:0 60px 0 10px;
        position:relative;/* stacking context */
    }
    h1#aqua span {
        background:url(http://dev.pelli.co.uk/h1s/aquamarine-left.png) no-repeat right center;
        display:inline-block;
        height:73px;
        left:-14px; /* move into position*/
        top:0;
        position:absolute;/* out of flow*/
        width:14px;
    }
    </style>
    </head>
    <body>
    <div id="canvasouter">
        <div id="canvas">
            <h1 id="aqua"><span></span>Why doesn't the line-height work :(</h1>
        </div>
    </div>
    </body>
    </html>
    The element is placed absolutely then you can set the line height to the height of that blue strip and it will be vertically centred. Just increase the line height up or down a pixel to move it as required.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You also need this to follow the original rule if you want to support ie6 and 7.
    Code:
    * html h1#aqua{display:inline}
    *+html h1#aqua{display:inline}

  8. #8
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's really complex!

    Thanks a lot Paul, you are a star


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
  •