MOSTLY SOLVED: Tweaking my Remodel: side spacing, space around userpic, bullet lists

[cahwyguy]

I just converted my journal from Component (the style it has had since 2004) to Minimalist Green (Expressive). Reading through this community, I've found a few tricks already: changing the background color for the body, and making it so bullets don't go into the user picture. There are still some things I'd like to do: I've searched the community

Comments

[cahwyguy]

Re: #1. Solved, although I would still like to figure out how to widen the alpha box a bit, but I can live with thing.

Re: #2: Solved.

Re: #3: I still don't have true hanging indents -- when I remove the "inside", the bullet moves closer to the userpic box, or goes into the userpic box, or repeats on both sides.

Re: #4: Solved.

Feel free to look at my journal to see how things are working out so far. You should find some bulleted lists a few days ago to see what I mean. As noted above, I'm using mimimalist green with the following custom CSS:

body, #page-inner, #header, #footer, .asset-name-hover
{ color: black; background-color: #E6FFE6; }
.asset-body ol { margin-top: 10px; list-style: decimal inside; }
.asset-body ul { margin-top: 10px; list-style: disc inside; }
.user-icon {
float: left;
margin-right: 15px;
padding-left: 5px;
padding-right: 15px;
font-size: 10px;
}
.asset-body blockquote {
margin-top: 10px;
}
body {
font-family: lucida sans;
}
#page, #header, #content, #footer {
position: absolute;
left: 0;
}
#content {
top: 150px;
}
#header-inner {
width: 1280px;
}
#header-inner {
background: url("http://www.cahighways.org/lj-images/lj-journal-head.jpg");
height: 140px;
}
.post-asset .asset-body blockquote {
background: inherit;
}
.widget-header {
font-weight: bold;
}

[av8rmike]

For #1, what you have will work, but I like to point people to the tutorial for changing the header image, which also includes a section on changing the width of the layout to match. You can use this CSS:
#header-inner, #container-inner { width: 1280px; }
#alpha { width:1090px; }
.layout-tw #alpha-inner { width:1050px; }
although, you'll need to remove the part in your current CSS that does the absolute positioning.

For #2 and #3, I know there have been problems with list bullets intruding into floated images (like userpics). Although I can't find the posts now, I'm almost positive it's an issue across several browsers, not something specific to LJ or Expressive. I'm not sure what effect you're trying to achieve, though ...?

[cahwyguy]

For #1, I tried that, but that got rid of the sidebar. However, I did retain the widening of layout-tw and alpha-inner, which helped. Of course, I'd love it if the width could auto resize, but I don't think that will happen.

As for the hanging bullets, it could be a browser issue. What I want is bullets that look like:

o tes tes test tes tes test
tes tes tes tes tes tes
tes tes tes tes tes tes

instead of:

o tes tes tes tes tes tes tes
tes tes tes tes tes tes tes
tes tes tes tes tes
tes tes

Still, I think how I have tweaked things is starting to look better. Thanks.

[av8rmike]

OK, I know what you mean now. Find this in your CSS:
.asset-body ol { margin-top: 10px; list-style: decimal inside; }
.asset-body ul { margin-top: 10px; list-style: disc inside; }

and change the "inside" to "outside".

[cahwyguy]

That gets you the hanging, but as you can see from this entry, the bullets are now to the left of the margin of the first paragraph. It seems one can't get both (i.e., the first paragraph and the bullet having the same margin).

[av8rmike]

CSS only allows those two choices for list markers. I don't understand how else you could place it.

[cahwyguy]

Ideally, you would like something that would change the left margin for the entire OL or UL to move it to the right some pixels. Think about how you define such paragraphs in word processors: The first line has a different left margin than the subsequent lines of the paragraphs.

[av8rmike]

Ah, once again, I spent too long mucking about with pseudo-classes and other weird stuff, when the easy answer was right there. Add text-indent: 1em; to your .asset-body ol/ul rules (you can change the 1em to whatever you want).

[cahwyguy]

No, that indents the text at the beginning of the paragraph, giving:

Heres the line introducing the list:

o abc abc abc acb acb
abc abc acba

What I want is:

Here's the line introducing the list:

o jfklds jfklds jfkls fjklds
jfkdlsf jdksl fjklds fjskl
jfkdls fjdksl fdjskl fdsjkl

What I get, at least next to the userpic, is:

Here's the line introducting the list:

o Jjkflds jklfds jfklds fjklds jffds
jfklds jkl fjdsklf jdskl fjkdsl
fjdskl fjkdls; fjksld; fjkdslf jskl;

[av8rmike]

OK, I'm sorry, I thought you wanted to indent the first line of every bullet list item. The reason the first paragraph and first list item have the same left offset is because that's where the right margin on the userpic ends. If I'm reading the CSS2.1 spec correctly, it's not possible to have a list marker inside the containing block and pad the remaining lines in the list item so they're flush with the first line (what you wrote in your first example in the above comment). "Outside" will put the list marker in the paragraph's margin, but attempting to use padding to shift the text to the right won't affect the marker, because it's outside the containing block. Am I making sense?

[cahwyguy]

You're making sense ... it's just a problem with CSS, and it is probably the reason people used tables in the past (as they did in component, which doesn't have this problem). When dealing with HTML and CSS, you can't always get what you want :-)