Announcement

Collapse
No announcement yet.

Spacing between li's?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Spacing between li's?

    Ok, I hate to abuse the forum, but I'm dying here. I have a UL that has space between the lines of each individual li. Like this:

    -Li lalalalalalalalala
    -Li lalalalalalalalala

    lalalalalallala
    -Li lalalalalalalalala

    It's only if the text on 1 particular li spans more than one line. How do I get the spacing right?

    Thanks again SO much for everyone's help! Obviously, I'm fairly new to all this!

  • #2
    Hi there kedel,


    may we see the relevant code?


    ~ the original bald headed old fart ~

    Comment


    • #3
      Code

      Oh, sorry! I'll give you the whole thing, cuz I dunno what would be relevant... Here ya go:

      Code:
      #header {
        background-color: gray;
        height: 100px;
        border-radius: 25px;
        margin-left: 110px;
      }
      
      #content {
        background-color: #f2f2f2;
        border-radius: 25px;
        padding-bottom: 19px;
      }
      
      #nav {
        background-color: #999999;
        border-radius: 20px;
        width: 100px;
        height: 100vh;
        float: left;
        padding-top: 110px;
        text-align: left;
      }
      
      li {
        list-style-type: none;
        border-style: groove;
        border-width: 2px 0px 2px 0px;
      }
      
      li a {
        text-decoration: none;
        color: white;
        font-family: Helvetica;
        font-variant: small-caps;
        font-weight: 700;
        font-size: 20px;
      }
      
      ul {
        margin: 0;
        padding: 0;
        padding-top: 5px;
        text-indent: 0.6em;
      }
      
      li a:hover {
        color: pink;
      }
      
      #noborder {
        border-style: none;
      }
      
      h1 {
        font-variant: small-caps;
        font-size: 25px;
        background-color: #ccc;
        padding-left: 120px;
        border-radius: 25px;
      }
      
      p {
        font-family: "Calibri", sans-serif;
        padding-left: 135px;
        padding-right: 20px;
      }
      
      h2 {
        color: white;
        font-size: 60px;
        padding-top: 15px;
        text-align: center;
        margin: 0;
      }
      
      .a {
        border: none;
        list-style-type: circle;
        margin-left: 85px;
        margin-top: -10px;
        margin-bottom: 7px;
        font-family: Calibri;
        line-height: 20px;
        text-indent: -4px;
        padding-right: 20px;
      }
      
      #footer {
        color: white;
        font-size: 14px;
        font-family: Helvetica;
        position: absolute;
        bottom: 0px;
        padding-left: 8px;
      }
      
      #alignright {
        float: right;
        margin: 0;
        padding: 0;
        padding-right: 20px;
      }
      
      #alignleft {
        float: left;
        margin: 0;
        padding: 0;
        padding-left: 30px;
      }



      Code:
      <body>
        <div id="nav">
          <ul>
            <li><a href="resume.html">resume</a></li>
            <li id="noborder"><a href="portfolio.html">portfolio</a></li>
            <li><a href="contact.html">contact</a></li>
          </ul>
          <div id="footer">&copy; FIL 2016<br>City, CA</div>
        </div>
        <div id="header">
          <h2>First I. Last</h2></div>
        <div id="content">
      
          <h1>Summary</h1>
          <p>Dynamic and industrious Computer Science major with Guest Service experience at <em>blahblah</em> and Social Media and Graphic Marketing experience at <em>blahblah.</em></p>
          <ul class="a">
            <li class="a">Results-oriented professional focused on efficiency and timeliness.</li>
            <li class="a"> Recognized for being both an exceptional motivator and self-starter.</li>
            <li class="a">Related skills: Exceptional verbal and written communication, training and development, project management, team leadership.</li>
          </ul>
          <h1>Education History</h1>
          <p id="alignleft"><b>school</b></p>
          <p id="alignright">location</p>
          <br>
          <p>ddfg</p>
          <h1>Summary</h1>
          <p>This is where the summary goes.</p>
          <ul class="a">
            <li class="a">1</li>
            <li class="a">1</li>
            <li class="a">1</li>
          </ul>
          <h1>Summary</h1>
          <p>This is where the summary goes.</p>
          <ul class="a">
            <li class="a">1</li>
            <li class="a">1</li>
            <li class="a">1</li>
          </ul>
        </div>

      Comment


      • #4
        Class A

        It's the bullets in class "a" that are giving me trouble... Any other design elements you can think of that need some help, I'm open to suggestions!
        Last edited by kedel; 04-30-2016, 06:48 PM.

        Comment


        • #5
          Hi there kedel,

          check out the attachment which has amendments to your CSS.

          I have commented out your CSS rather than removed it.

          This will make it easier for you to see what is going on.

          You will also notice that your page is now responsive and
          should fit OK on all devices.

          Attached Files


          ~ the original bald headed old fart ~

          Comment

          Working...
          X