SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Spreading text & Lists

    Hi,

    I'm going to hit two birds with one stone here and ask two questions in one thread

    1) I have a small 10px high layer at the bottom of my page, its width is 100%. Say I have three words in it, I want those three words to spread to take up the whole width. Character spacing shouldn't stretch, just the space between the words.

    2) I know this is easy but I forget, whats the CSS property to change the bullet image in an unordered list?

    Thanks

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

    I think this should accomplish what you want.

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .box {
     background-color: #FFFFCC;
     height: 20px;
     width: 100%;
    }
    .box span {
     width:33%;
     float:left;
     text-align:center; 
    }
    li {
     list-style-image:  url(m.gif);
    }
    -->
    </style>
    </head>
    <body>
    <div class="box">
    <span>Word1</span><span>Word2</span><span>Word3</span>
    </div>
    <ul>
    <li>Hello</li>
    </ul>
    </body>
    </html>
    If you didn't want it to be exact you could just use a margin-left:22% (approx) on the span instead.

    Hope this helps.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hmmm, sorry that wasn't right was it. It spreads the words out but the two outside words only have margins of half the size of the centre word.

    Without getting too complicated it's probably easier to change the span to this:

    Code:
    .box span {
     margin-left:22%; 
    }
    25% would divide the line exactly into three but that doesn't account for the length of each word , so just tweak the % until it looks ok.

    Otherwise it might be more complicated to get it exact (unless I'm missing the obvious, which is quite likely).

    Paul

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    What about the ever-so-simple "text-align: justify"? Alternatively, you can change the "word-spacing" property as well, which will put a greater space between words.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by vinnie
    What about the ever-so-simple "text-align: justify"?
    Hi Vinnie, sorry to disagree again (so soon ) but justify doesn't seem to work on just three words. There seems to be a line length applied before it takes effect.

    Also word spacing will put space after a word but not on either side and for some reason you can't use % values.

    I originally thought that this was a simple question but it appears to be slightly more complicated than at first sight. (To get it exact that is.)

    Paul

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Vinnie, sorry to disagree again (so soon ) but justify doesn't seem to work on just three words. There seems to be a line length applied before it takes effect.

    Also word spacing will put space after a word but not on either side and for some reason you can't use % values.

    I originally thought that this was a simple question but it appears to be slightly more complicated than at first sight. (To get it exact that is.)

    Paul
    I agree, and see what you mean. Your suggestion is probably best then.

    Also, to answer the orignal question #2, to change a list bullet, use:
    Code:
    ul {
      list-style-type: square; /*if you want to use the standard bullets, or */
      list-style-image: url('/images/mybullet.gif'); /*if you want to use an image*/
    }
    The value of "none" can also be applied to either of those properties to give you a list with no bullets, which is quite useful for navigation.
    http://www.alistapart.com/stories/taminglists/

  7. #7
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Thanks guy, I tried text-align: justify; and came up with what you guys obviously did. It might work though because there will be more that three words there, I just used that as an example because I was unsure how many.

    I'm trying to use HTML rather than Powerpoint for a slide presentation at school. I've done it before but I'm trying to do it a little differently this time.

    Thanks for the help!


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
  •