SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for formatting: Bullets points

    Hi,

    (where it says "PHP code" it is actually CSS code)

    I only recently discovered that CSS can be used to insert images like backgrounds:

    PHP Code:
    backgroundurl("../image.png"no-repeat scroll -2640px 0 #3A3A3A; 
    So I was thinking can it be used to format bullet points? Say I had these 3 points. (where the bullet point is an image)


    This is bullet point 1.
    This is bullet point 2.
    This is bullet point 3.


    At the moment I am using:

    PHP Code:
    <img src="image.gif" width="8" height="8" /> This is bullet point 1.<br /> 
    Is there a style I can use in CSS which would insert the image and format it?

    Also, is there a way with CSS to apply a style, such as in this bullet point example, whereby each line is given the same formatting? Ideally I want code like this:

    PHP Code:
     <div id="bulletpoints">

    This is bullet point 1.
    This is bullet point 2.
    This is bullet point 3.

    </div
    What can be done with CSS for bullet points?

    Look forward to your suggestions,

    Matt.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If that is a list of items then use a list structure and target each list for the bullet image. If its just random text then use a paragraph tag and target that instead.
    A basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .bullet,.bullet2 {
        list-style:none;
        margin:0 0 1em;
        padding:0;
    }
    .bullet li, 
    .bullet2 p {
        padding:0 0 0 15px;/* make space for image*/
        margin:0 0 5px;
        background:url(bullet.gif) no-repeat 0 4px;/* adjust to suit*/
    }
    </style>
    </head>
    <body>
    <ul class="bullet">
        <li>This is bullet point 1.</li>
        <li> This is bullet point 2.</li>
        <li>This is bullet point 3.</li>
    </ul>
    <div class="bullet2">
        <p>This is bullet point 1.</p>
        <p> This is bullet point 2.</p>
        <p>This is bullet point 3.</p>
    </div>
    </body>
    </html>
    Or if you need to be more specific then you would add a class to the p tag.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - that is a good idea. But there is too much space between each line. What do I need to do to reduce the gap?


    This is an exaggerated example of the problem:
    This is what I get with your example:

    Bullet point 1

    Bullet point 2

    It should be:

    Bullet point 1
    Bullet point 2

    Hope it's just a small problem.

    Matt.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Code:
    .bullet li, 
    .bullet2 p {
        padding:0 0 0 15px;/* make space for image*/
        margin:0 0 5px;
        background:url(bullet.gif) no-repeat 0 4px;/* adjust to suit*/
    }
    Look at the code above and see if you can guess where the space between lines is coming form?

    There's not too much code in the above and so you should be able to spot it yourself quite easily.

    If you still can't guess where the space between the lines is coming from then shout and I'll point it out but you'll learn more if you can find it yourself

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - I tried it and I worked it out. I also made the text smaller and that is helping with the spacing too. This is what I have:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .bullet,.bullet2 {
    list-style:none;
    margin:0 0 1em;
    padding:0;
    font-family: arial,sans-serif;
    font-size: 12px;;
    }
    .bullet li,
    .bullet2 p {
    padding:0 0 0 12px;/* make space for image*/
    margin:0 0 0px;
    background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/
    font-family: arial,sans-serif;
    font-size: 12px;;
    }
    </style>
    </head>
    <body>
    <ul class="bullet">
    <li>This is bullet point 1.</li>
    <li> This is bullet point 2.</li>
    <li>This is bullet point 3.</li>
    </ul>
    <div class="bullet2">
    <p>This is bullet point 1.</p>
    <p> This is bullet point 2.</p>
    <p>This is bullet point 3.</p>
    </div>
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Now that you have removed the bottom margin the only space bewteen lines will be the default line-height. You can reduce the line-height but anything less that 1 will start to get clipped.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .bullet, .bullet2 {
        list-style:none;
        margin:0 0 1em;
        padding:0;
        font-family: arial, sans-serif;
        font-size: 77%;
        line-height:1.0;/* adjust line-height for finer control*/
    }
    .bullet li, .bullet2 p {
        padding:0 0 0 12px;/* make space for image*/
        margin:0 0 0px;
        background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/
        font-family: arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <ul class="bullet">
        <li>This is bullet point 1.</li>
        <li> This is bullet point 2.</li>
        <li>This is bullet point 3.</li>
    </ul>
    <div class="bullet2">
        <p>This is bullet point 1.</p>
        <p> This is bullet point 2.</p>
        <p>This is bullet point 3.</p>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - thanks for that.

    I just had a small problem. I copied your code into a new php web page and this works fine:

    background:url(bullet.gif) no-repeat 0 3px;/* adjust to suit*/


    But then I tried to work it into my template page and I need to use:

    background:url("../bullet.gif") no-repeat 0 3px;/* adjust to suit*/


    What is stopping the more simple image locating working with my template? (Obviously the code above is within the CSS file, but maybe the <li> tags etc. in the template page are something to do with the problem? Or is it trivial and not worth looking into? I just thought yours looks more simple - and may load quicker!?

    Matt.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about the ../ before the image name then that is telling the browsers to go up one directory before it can find the file. You obviously need to keep that in place or your image won't be found.

    Images referenced in the external css file are relative to the css file and not the html page.

    There is no need for the quote marks around the image path though as they are optional and I always remove them.

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok. I've deleted the quotations.

    A problem I have now is the bullets look fine in Safari on my Mac. But I have just looked on my iPhone 4 and the bullets appear at the top right of each line. So the bullet needs moving downwards but only on iPhone4!

    The other problem with the iPhone 4 is the horizontal navigation bar. If you go to Apple on an iphone the horizontal navigation appears very small but IT ALL FITS ALONG THE SCREEN IN ONE LINE. When i load my site the horizontal navigation bar appears lager than Apple's site and IT ALL FITS ALONG THE SCREEN IN TWO LINE. Repeat, TWO LINES! I would prefer it to look smaller and fit across the screen.

    Is there something I need to consider when viewing on iPhone!?!

    Matt.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd need to see your live site to see if there's anything simple that can be done but you should never expect that a page is going to render the same on a small screen device as it does in a web browser.

    You would need to specifically design for small devices and that means a fundamental design concept change and using extremely advanced methods such as media queries to cater for different device widths.

    Read this for the general overview.

    http://yiibu.com/articles/rethinking-the-mobile-web/
    Rethinking the Mobile Web by Yiibu

    It is not something that you can just expect to work unless you put an awful lot of planning and care into it from the start.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You also have to remember that the base font size varies from computer to computer and browser to browser...

    so you have two choices: make it smaller by adjusting the value used for font-size ...
    OR
    here is a clever solution.. you could adjust the width of your site to to it elastic...

    for viewing on mobile devices, well you have to think logical, no matter how fluid or scalable your site is... 320px x 480px is a SMALL WINDOW... if you reduce your site to fit it will be too small to read , if you dont , it will break and/or need you to scroll about all over the place.. this is not a matter of being a good designer or not... it's just the laws of physics and mathematics. So the answer is to develop an alternate interface for smaller screens. Paul's suggested reading gives you the TECHNICAL beginnings on how to do so.

    But I notice that you are trying to emulate a particular site (APPLE) effect. You should not that Apples navigation is image based. The text is there, but the dimensions are fixed, and then the element are covered up with a graphical representation of what they say. It makes for a heavier site .. but it is the reason why it doesn't seem to break.


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
  •