SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you get a <li> to line up with first line only

    Is there anyway to get the bullets to line up on the first line rather than the middle of a
    sentence wherwe you might have 3 sentences for a bullet point.

    For example the first two bullet point in this article are in the middle of the sentence and not
    at the start of the sentence.

    http://www.askaboutvalidation.com/fe...ded.php?uid=10



    Here is the css code I use

    CSS


    ul.circle
    {
    color:#222222;
    list-style-type: none;
    padding-bottom:0px;
    margin-left: 1.2em;
    margin-right: 1em;
    margin-top: 0px;
    }

    li.circle
    {
    font-size:10pt;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:0.55cm;
    font-style:italic;
    letter-spacing:0.01cm;
    padding-bottom:2px;
    background-image: url(images2/bullet8.gif);
    background-repeat: no-repeat;
    background-position: 0em;
    padding-left: 1.2em;
    }


    Is there a solution at all?

    Thanks in advance

    Graham

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yep background-position: 0 .6em;

    You can also make your CSS and HTML more efficient
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul.circle {
    	color: #222;
    	list-style-type: none;
    	margin: 0 1em 0 1.2em;
    }
    ul.circle li {
    	font: 10pt italic Verdana, Arial, Helvetica, sans-serif;
    	line-height:1.5em;
    	background: url(http://www.askaboutvalidation.com/images2/bullet8.gif) no-repeat 0 .6em;
    	padding-left: 1.2em;
    }
    </style>
    </head>
    <body>
    <h3>1. There are some basic elements to be considered:</h3>
    <ul class="circle">
      <li> An electronic signature solution must make electronic signatures secure through the use of a copy protection mechanism that makes it impossible to copy, cut or paste signatures and audit trails from an approved record. This is an element that is necessary in order to ensure the integrity of digitally signed records. </li>
      <li> In an electronic environment, an electronic signature on an electronic record must carry the same legal weight as an original signature on a paper-based document. </li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work, it only makes the bullet closer to the text, what I mean is that the bullet starts on the top line and stays there not moving to the middle of the line

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then you must've done it wrong. Works as intended for me.

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your right, my apologies

    sorry


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
  •