Sat, 2007-10-20 23:22
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.
| Attachment | Size |
|---|---|
| blah.gif | 1.33 KB |
Sun, 2007-10-21 00:22
#1
Looks like a normal list to
Looks like a normal list to me.
Sun, 2007-10-21 10:31
#2
for expample ...<ul
for expample ...
blahblah
blah
Sun, 2007-10-21 10:59
#3
BR
Or just give t a fixed-width and ditch the breaks 
Mon, 2007-10-22 00:14
#4
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.
| Attachment | Size |
|---|---|
| blah2.gif | 8.85 KB |
Mon, 2007-10-22 01:58
#5
padding or margins on the li
padding or margins on the li
Mon, 2007-10-22 02:28
#6
ul li{margin-bottom:15px;}
ul li{
margin-bottom:15px;
}
Mon, 2007-10-22 17:56
#7
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.
Mon, 2007-10-22 17:57
#8
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.
Mon, 2007-10-22 22:21
#9
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.
Tue, 2007-10-23 10:53
#10
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.
| Attachment | Size |
|---|---|
| blah3.gif | 4.24 KB |
| blah4.gif | 4.27 KB |
Tue, 2007-10-23 12:04
#11
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
Tue, 2007-10-23 13:17
#12
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?
| Attachment | Size |
|---|---|
| blahedit.gif | 3.81 KB |
Tue, 2007-10-23 14:17
#13
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
Tue, 2007-10-23 18:06
#14
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?
| Attachment | Size |
|---|---|
| blahedit2.gif | 6.7 KB |
| blahedit3.gif | 6.68 KB |
| blahedit3IE.gif | 6.53 KB |
Wed, 2007-10-24 05:08
#15
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
Wed, 2007-10-24 10:53
#16
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.
Wed, 2007-10-24 12:40
#17
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;
}
Wed, 2007-10-24 18:46
#18
O.K., I redid EVERYTHING
O.K., I redid EVERYTHING 
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.
Wed, 2007-10-24 21:12
#19
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
| Attachment | Size |
|---|---|
| screendumpFF50.jpg | 4.84 KB |
Wed, 2007-10-24 22:17
#20
Thank you very much Gary!
Thank you very much Gary!