10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

need smaller spaces between lines

by paul66
7 replies
  • WEB DESIGN
    • |
I am doing some text and titles etc. in my header panel, and the spacing between lines is to much is there a way or reducing the spacing between sentences? I think I might need to do some css, but I have not got a clue, here is the code. I am using Xsite pro



<p align="center"><br align="center">
<font face="Arial Black"><font color="#ffff00"><span style="FONT-SIZE: 24pt"><span style=
"FONT-SIZE: 24pt"><strong><span style="FONT-SIZE: 24pt">Baby Swings</span></strong></span></span></font></font></p>

<h1 align="center"><font color="#ffffff"><font face="Arial Black"><span style="FONT-SIZE: 12pt"><span style=
"FONT-SIZE: 12pt"><span style="FONT-SIZE: 12pt">What The Best</span></span></span><span style=
"FONT-SIZE: 12pt">Deals On A Baby Swings? Then Have A Look Around</span></font></font></h1>

<p align="center"><span style="FONT-SIZE: 8pt"><a href="cheap-baby-swing.html"><span style=
"FONT-SIZE: 8pt"><font color="#ffffff"
face="Arial Black"><span style="FONT-SIZE: 8pt">Cheap Baby Swing</span></font></span></a>&nbsp; <font face=
"Arial Black"><span style="FONT-FAMILY: Verdana; COLOR: black; FONT-SIZE: 8pt"><span style=
"FONT-SIZE: 8pt"><font color="#ffffff"><span style="FONT-SIZE: 8pt"><font color="#ffffff"><u><a href=
"fisher-price-infant-to-toddler-rocker.html"><font color="#ffffff"
face="Arial Black"><span style="FONT-SIZE: 8pt">Fisher Price Infant To Toddler
Rocker</span></font></a></u>&nbsp; <font face="Arial Black"><u><a href=
"Fisher-Price-Aquarium.html"><font color="#ffffff"><span style="FONT-SIZE: 8pt">Fisher Price
Aquarium</span></font></a></u></font>&nbsp; <a href="outdoor-baby-swing.html"><font color="#ffffff"
face="Arial Black"><span style=
"FONT-SIZE: 8pt">Outdoor</span></font></a></font></span></font></span></span></font></span></p>

thanks
#lines #smaller #spaces
  • Profile picture of the author &lt;CrGeary.com/&gt;
    to decrease space between lines its this:

    line-spacing:100%;

    --
    you can obviously change that value to whatever you want (its defaulted to like 110% or something like that), and yes thats CSS
    {{ DiscussionBoard.errors[2163473].message }}
    • Profile picture of the author paul66
      Originally Posted by <CrGeary.com/> View Post

      to decrease space between lines its this:

      line-spacing:100%;

      --
      you can obviously change that value to whatever you want (its defaulted to like 110% or something like that), and yes thats CSS
      Tried that only seems to make the gap bigger, but then I do have a clue what I am at
      {{ DiscussionBoard.errors[2165365].message }}
      • Profile picture of the author paul66
        Anyone have any ideas on this I am totally lost
        {{ DiscussionBoard.errors[2169466].message }}
  • Profile picture of the author weaveronline
    Check this
    C21: Specifying line spacing in CSS | Techniques for WCAG 2.0

    Add adjust the spacing according to your need!
    Signature

    Thanks & Regards,
    Reach us at dukeduke600@gmail.com.
    Web Design| Logo Design | Banner Design | Web Development | Mobile Applications [iPhone/iPad/Android/Windows Phone]

    {{ DiscussionBoard.errors[2170058].message }}
  • Profile picture of the author BobJutsu
    Good god...sorry paul, but that is not markup...that is a coding disaster.

    All of that is completely unnecessary, here is all of the html you need for what you have up there:

    <h1>Baby Swings</h1>

    <h2>What The Best Deals On A Baby Swings? Then Have A Look Around</h2>

    <ul>
    <li><a href="cheap-baby-swing.html">Cheap Baby Swing</a></li>
    <li><a href="fisher-price-infant-to-toddler-rocker.html">Fisher Price Infant To Toddler Rocker</a></li>
    <li><a href="Fisher-Price-Aquarium.html">Fisher Price Aquarium</a></li>
    <li><a href="outdoor-baby-swing.html">Outdoor</a></li>
    </ul>

    Now, to apply styles to it. There are a few ways to do that. What you have is mangled mess of inline styling. Inline styling is not CSS, not by a long shot, it is neither cascading or in a style sheet.

    So, you have two options, either include a cascading style sheet section in the header of your page(s), or link to an external sheet. Either way, to achieve what you have up there, all the css you need is:


    body {
    font-size: 12pt;
    color: #ffffff;
    font-family: "Arial Black";
    }
    h1 {
    font-weight: bold;
    color: #ffff00;
    font-size: 2em;
    text-align: center;
    line-height: 1em;
    }
    h2 {
    font-size: 1em;
    text-align: center;
    line-height: 1em;
    }
    ul {
    list-style-type: none;
    text-align: center;
    }
    ul li {
    display: inline;
    padding: .2em;
    margin: 0;
    }

    ul li a {
    font-size: 8pt;
    color: #ffffff;

    }

    Much, much cleaner and all around better. To change the line spacing, just change the "line-height" property in the css. Currently I set it to 1em, which is the same as saying 100%. If you want less, you can change it to .8em or something similar.
    {{ DiscussionBoard.errors[2171820].message }}
  • Profile picture of the author lucidica
    try a - px setting?
    {{ DiscussionBoard.errors[2256094].message }}
    • Profile picture of the author SudoDevelopment
      try:

      .line-height:10px;

      add that class to your P tag or LI tag and change the value to what suits you.
      {{ DiscussionBoard.errors[2256383].message }}

Trending Topics