20 replies [Last post]
abates
Offline
Enthusiast
Buffalo NY
Last seen: 11 years 33 weeks ago
Buffalo NY
Timezone: GMT-4
Joined: 2007-10-19
Posts: 79
Points: 0

Hi Everyone,

I'm new to CSS, and I was hoping someone might provide a link to a tutorial or something either here or elsewhere that will help me do what I want. Essentially, I have a multi-item unordered list, each item consists of multiple lines of text. I need the text to justify left, and I need the bullets to hang off and be justified also. Please see my thumbnail. Thanks for any help.

AttachmentSize
blah.gif1.33 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Looks like a normal list to

Looks like a normal list to me.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 8 years 20 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

for expample ...<ul

for expample ...


  • line 1

    blahblah
    blah

  • line2
  • A perfection of means, and confusion of aims, seems to be our main problem.
    Albert Einstein

    http://www.creategg.de

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 5 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    BR

    Or just give t a fixed-width and ditch the breaks Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Thanks guys, your advice

    Thanks guys, your advice worked. I don't know what I was doing wrong. One more question. Is there a way I can insert a break between the two list items without inserting a break into my html? Please see attached. Thanks.

    AttachmentSize
    blah2.gif 8.85 KB
    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 9 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    padding or margins on the li

    padding or margins on the li

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    vivxdesign
    vivxdesign's picture
    Offline
    Regular
    Last seen: 11 years 47 weeks ago
    Timezone: GMT-5
    Joined: 2007-10-12
    Posts: 17
    Points: 0

    ul li{margin-bottom:15px;}

    ul li{ margin-bottom:15px; }

    I never met anybody who said when they were a kid, "I wanna grow up and be a critic."
    - Richard Pryor

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Is there a way I can do this

    Is there a way I can do this with one unordered list? Perhaps I'm misunderstanding, doesn't the above solution apply to the end of a singular list item only? See my attachment, blah 2. I actually have three list items. I would like each item to have a nice blank space between them. Preferably within one unordered list and without any additional divs.

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 2 years 9 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    How about you show the code

    How about you show the code you have and then show an image of what you want it to look like.
    I am sure we can help you further then.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    I got it Deuce, thanks alot

    I got it Deuce, thanks alot for the offer to help. I was placing the declaration for li in the wrong place.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    OK I don't have it..

    O.K. guys, I thought I had it, but I don't. WHat I want is for the first image blah3.gif, to look like blah4.gif. Notice the difference in the justification of the text in relation to the bullets. blah3 is what I get out of the code below. Blah4 is what I want. I used photoshop to do that.

    My CSS:

    #wrapper { margin: 0 auto; width: 600px; } #base { border: 1px solid #000; margin: 2em; width: 20em; padding: 2em; font-size: 10px; } ul li { margin-bottom: 1em; list-style-position: inside; }

    My XHTML:

    Untitled Document

    • Item 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis. Proin volutpat sodales turpis. Donec elementum turpis vel turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vel sem. Donec vitae massa. Aenean massa purus, pharetra sit amet, ullamcorper sit amet, pulvinar faucibus, massa. Nunc at lectus.
    • Item 2
    • Item 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis.
    • Item 4
    • Item 5 Item 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis. Proin volutpat sodales turpis.

    AttachmentSize
    blah3.gif 4.24 KB
    blah4.gif 4.27 KB
    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 19 hours 3 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Why did you do this?ul li

    Why did you do this?

    ul li {
      margin-bottom: 1em;
      list-style-position: inside;
    }

    The default, {list-style-position: outside;}, is exactly what you're asking for. It's automagic; don't even use the property, i.e.
    ul li {
      margin-bottom: 1em;
      }

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Hi Gary, Thanks for the

    Hi Gary,

    Thanks for the fast reply. I made the changes, please see the attached image. Works like you say, but there is a big margin on the left. How can I maintain the nice bullets/text justification and center this better?

    AttachmentSize
    blahedit.gif 3.81 KB
    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 19 hours 3 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    By default, lists (ol and

    By default, lists (ol and ul) have an indention. IE and Opera use {margin-left: 40px;}, and Firefox and Safari/Konqueror use {padding-left: 40px;} to create that indention.

    Zero one property, and set some value smaller than the 40px default on the other. You must leave some indention to allow for the marker. To start, try

    ul {
      padding: 0;
      margin-left: 15px;
      }
    Adjust the value as required.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Gary, I was messing about

    Gary, I was messing about with those settings earlier, I had read about the padding/margin adjustment and had no luck. I tried it again with your specs. I started with 15px, went down to zero and see below for the result. I was still getting that margin/padding on the left. (see blahedit2) Just for laughs I specified a negative value and it worked. (see blahedit3) However, I want my code to validate. I ran the CSS through the W3C validator and it validated. So, I then crossed my fingers and tried viewing the markup with IE and saw a problem with the top margin/padding (see blahedit3IE) any clues how I can cure that?

    AttachmentSize
    blahedit2.gif 6.7 KB
    blahedit3.gif 6.68 KB
    blahedit3IE.gif 6.53 KB
    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 19 hours 3 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Those pictures don't mean

    Those pictures don't mean much without being able to see the exact style rules and markup.

    Since we'll stipulate valid html, just post the html between the <body></body> tags. It's the same for all versions, right?

    For the css, show us all the rules used in each image.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Of course, sorry..I think I

    Of course, sorry..I think I might know a simple solution, but I'd like to hear what you guys suggest.

    my CSS:

    #wrapper { margin: 0 auto; width: 600px; }

    #base {
    border: 2px dotted #ccc;
    background-color: #CCEEEE;
    margin: 0px auto;
    width: 30em;
    padding: 0em;
    font-size: 1em;
    }

    ul li {
    margin-bottom: 1em;
    padding: 0;
    margin-left: -20px;
    }

    my XHTML:

    Untitled Document

    • Item 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis. Proin volutpat sodales turpis. Donec elementum turpis vel turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vel sem. Donec vitae massa. Aenean massa purus, pharetra sit amet, ullamcorper sit amet, pulvinar faucibus, massa. Nunc at lectus.
    • Item 2
    • Item 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis.
    • Item 4
    • Item 5 Item 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nulla. Curabitur lobortis. Proin volutpat sodales turpis.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Guys, I validated this and

    Guys,

    I validated this and it is green. Can you tell me what you think of this solution which apparently works in both IE and FF? here is my updated CSS. Note the addition of the margin-top for the ul li ruleset:

    my CSS:

    #wrapper { width: 600px; }

    #base {
    border: 2px dotted #ccc;
    background-color: #CCEEEE;
    margin-top: 40em;
    margin: 0px auto;
    width: 40em;
    padding: 0em;
    font-size: 1em;
    }

    ul li {
    margin-bottom: 1em;
    /* margin-top needed to format correctly in IE */
    margin-top: 1em;
    padding: 0;
    /* negative margin-left needed to force list bullets to center */
    margin-left: -20px;
    }

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    O.K., I redid EVERYTHING

    O.K., I redid EVERYTHING Smile one piece of advice I should have taken to heart earlier, CODE BY HAND. I used Dreamweaver and I was getting lazy in the code cleanliness. Everything working now. Thanks for bearing with the newbie.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 19 hours 3 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    The indention is on the ul,

    The indention is on the ul, not the li. Also your top margin on the containing box was nullified by your centering rule. Compare this this style ruleset to yours. See also the attached screen dump (cropped and scaled 50%).

    ul {
      margin: 0 0 0 15px;
      padding: 0;
      }
    
    ul li {
      margin: 1em 0;
      }
    
    #base {
    border: 2px dotted #ccc;
    background-color: #CCEEEE;
    margin: 40px auto 0;
    width: 40em;
    padding: 0em;
    font-size: 1em;
    }

    Even better, unless there are unknown compelling reasons, would be to eliminate the #base div completely, and style like so:

    ul {
      border: 2px dotted #ccc;
      background-color: #CCEEEE;
      margin: 40px auto 0;
      width: 40em;
      padding-left: 15px;
      font-size: 1em;
      }
    
    li {
      margin: 1em 0;
      }

    cheers,

    gary

    AttachmentSize
    screendumpFF50.jpg 4.84 KB

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    abates
    Offline
    Enthusiast
    Buffalo NY
    Last seen: 11 years 33 weeks ago
    Buffalo NY
    Timezone: GMT-4
    Joined: 2007-10-19
    Posts: 79
    Points: 0

    Thank you very much Gary!

    Thank you very much Gary!