SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Line-Height

  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Line-Height

    I am trying to put line height in a menu that is made with <BR> to separate links.

    If I do the following, it works

    <div style="margin: 100px 0; line-height:
    0"><BR><span style="line-height: 5px; font-size:
    205px">gggg</span><BR><span style="font-size: 205px; line-height:
    205px">AAAA</span><BR></div>

    but I want to be able to just use a span class name or similar to avoid having to put all the style information in the tag but just have it in the style sheet and reference it.

    eg. (modified)

    <div>
    <span class=menu>link here</span><br>
    <span class=menu>link here</span><br>
    </div>

    menu would be defined in the style sheet with the line-height font size etc. However this is NOT working.

    Can somebody help.

    Cheers

    Sally

  2. #2
    SitePoint Enthusiast Decoy's Avatar
    Join Date
    May 2002
    Location
    UK
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sallyoz,

    Below is a crude sample of code that shows line-height with the use of a class. I've tried to compare normal line-height against that of 30px and 50px.

    Code:
    <html>
    <head>
    <title>Test</title>
    
    <style type=text/css>
    
    span.menunormal {
      font-family: verdana;
      font-size: 14px;
    }
    
    span.menu30pxlineheight {
      font-family: verdana;
      line-height: 30px;
      font-size: 14px;
    }
    
    span.menu50pxlineheight {
      font-family: verdana;
      line-height: 50px;
      font-size: 14px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div> 
    <span class="menunormal">link here</span><br /> 
    <span class="menunormal">link here</span><br /> 
    </div>
    
    <br />
    <br />
    
    <div> 
    <span class="menu30pxlineheight">link here</span><br /> 
    <span class="menu30pxlineheight">link here</span><br /> 
    </div>
    
    <br />
    <br />
    
    <div> 
    <span class="menu50pxlineheight">link here</span><br /> 
    <span class="menu50pxlineheight">link here</span><br /> 
    </div>
    
    </body>
    </html>
    I hope you find this useful.

    Good luck.

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for the record...

    the line-height specified in the span class will still work after a <br />, which means you don't need to close the span for a linebreak and open it again for each new line.

    This works and validates...

    Code:
    <html>
    <head>
    <title>Test</title>
    
    <style type="text/css">
    
    span.menunormal {
      color: red;
      font-family: verdana;
      font-size: 14px;
    }
    
    span.menu30pxlineheight {
      color: green;
      font-family: verdana;
      line-height: 30px;
      font-size: 14px;
    }
    
    span.menu50pxlineheight {
      color: blue;
      font-family: verdana;
      line-height: 50px;
      font-size: 14px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div>
    <span class="menunormal">link here<br /> 
    link here</span>
    </div>
    
    <div>
    <span class="menu30pxlineheight">link here<br /> 
    link here</span>
    </div>
    
    <div>
    <span class="menu50pxlineheight">link here<br /> 
    link here</span>
    </div>
    
    </body>
    </html>
    Incidentally, I know you said it was only crude, but it's worth remembering to put the double-quotes (") around the type in <style type="text/css"> otherwise embedded css won't be recognised as css content and won't validate through an xhtml checker.

    I only mention it as you went to the trouble of using xhtml linebreaks <br />

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Enthusiast Decoy's Avatar
    Join Date
    May 2002
    Location
    UK
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bill Posters,

    Thanks for pointing those errors out for me.

    I've actually used span tags in my current project, and have created a new span class after <br /> as done above. You've just helped me cut down my code slightly.

    Cheers


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
  •