SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <ul> bullet list with image as bullet, line up start of <li>

    hi, i have a bullet list. i want to have the text in the <li> go on two lines without it distorting..

    here is what it currently looks like..

    http://www.londonheathrowcars.com/bulletprob1.jpg

    i want it took look like this.

    http://www.londonheathrowcars.com/bulletprob2.jpg


    can this be down within the actual bullet list itself?

    thanks

    Code:
    ul.bullet {
     list-style-type: none;
     padding-left:0;
     margin-left:20px;
     margin-bottom:0px;
     margin-top:30px;
    
    }
    
    li.bulletlist {
     background: url(http://www.londonheathrowcars.com/arrowbullet.png) left center no-repeat;
     color:#666666;
     font-family:arial;
     font-size:9pt;
     margin-bottom:8px;
     margin-right:20px;
    }
    
    <ul class="bullet">
    			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Heathrow Based</b> - Pre-book or call on arrival, we are based at Heathrow (LHR).</li>
    			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Fixed Prices</b> - Set fares per vehicle from A to B, no taxi meters, no hidden charges.</li>
    			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Flight Time Monitoring</b> - We monitor your flight, guaranteed no waiting time costs.</li>
    
    			<li class="bulletlist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Nationwide Service</b> - We also transfer between London and any UK destination.</li>
    		</ul>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of the classes and the non-breaking space entities in your list items. Then set the bullet as a background image on the list item, set its position to left top and finally give the list items a left padding equal to the width of the background image, plus some extra space to accomodate the space between the background image and the text.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, i have done the above and there is still a slight problem.

    here is the code and a screen shot.. i want the top of the text to line up with the top of the bullet point..

    what am i doing wrong?

    Code:
    <ul class="bullet">
    
    			<li class="bulletlist"><font style="color:#393b44;"><b>Heathrow Based</b></font> Pre-book or call on arrival, we are based at London Heathrow Airport (LHR).</li>
    			<li class="bulletlist"><font style="color:#393b44;"><b>Fixed Prices</b></font> Set fares per vehicle from A to B, no taxi meters, no hidden charges.</li>
    			<li class="bulletlist"><font style="color:#393b44;"><b>Flight Time Monitoring</b></font> We monitor your flight free of charge, guaranteed no waiting time costs.</li>
    			<li class="bulletlist"><font style="color:#393b44;"><b>Nationwide Service</b></font> We transfer between London and any destination in the UK.</li>
    
    		</ul>

    Code:
    ul.bullet {
     list-style-type: none;
     padding-left:0;
     margin-left:15px;
      margin-right:15px;
     margin-bottom:0px;
     margin-top:24px;
    }
    
    li.bulletlist {
     color:#666666;
     font-family:arial;
     font-size:9pt;
    background: url(car.gif) left top no-repeat;
    padding-top:0px;
    padding-left:25px;
    padding-bottom:10px;
    }
    you can see it not lining up here:

    http://londonheathrowcars.com/gg/untitled.jpg

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can adjust the background bullet top position here (red 5px)
    Code:
    li.bulletlist { 
      color:#666666; 
      font-family:arial; 
      font-size:9pt; 
      background: url(car.gif) 0 5px no-repeat; 
      padding-top:0px; 
      padding-left:25px; 
      padding-bottom:10px; 
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you sir, that has done the trick


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
  •