Forum Moderators: not2easy
I'm a newbie trying to use CSS to design a site and it's not working like I'd hoped. After searching the web and not finding answers, thought I'd try here.
Can CSS styles be set to do the following in regular text and table text:
- Assign space following a paragraph. For example, at the end of a paragraph, hit return and there would be 5 pixels of separation before the next paragraph
- For bullets, set the space between the bullet and text while making sure the left margin of each line of text after the first stays justified with the text itself, not the bullet. I keep making bullet styles that work for the first line of text, but if the text extends into a second line, that line's margin goes to the bullet instead of left aligning with the first line of text.
If that style can be created, will it also work for multiple levels of bullets? For example:
o Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Sheesh, I tried to indent the example bullets above but it won't work, hope you get the idea: each bullet level is indented further than the higher level, the text is left justified with itself, not the bullet.
If if can be done, please explain exactly how I apply the styles (i.e., where do I put the tags and how should the style be added to the stylesheet). I do have Dreamweaver 8, if that helps.
Thanks in advance for any assistance.
Chris
Paragraphs are marked in HTML with a <p> tag wrapped around the paragraph. This is a block level element, meaning it will make a new line before and after the tag. It's a somewhat exception of a block level element for HTML, because it cannot properly contain any other block level elements.
With CSS, you can do anything to the styling of the P tag. You can add a left-margin, you can add a text indent, you can add top or bottom padding (in either pixels, lines (em), or percentage of it's conainer), and other stuff.
Now if you wanted to be able to just write normal text without any tags, and have it automatically add padding and stuff...
It can still be done, but it might be a bit tricky. Take a look at a wiki, such as wikipedia. It automatically encases things in Ps I think, and every time you press enter twice (skip a line) it makes a new tag. Single line breaks are ignored by it (you need to override it with a <br> element).
wikis do this with server side technology. it looks at the string submit from the textarea, and parses the various tags and stuff that it was trained to change.
I'm sure you can find scripts on how to do this sort of stuff (if you need it done) on various server side script websites.
The second one, I think the answer is yes, but it also varies a bit with browsers. If you didn't know, there's three spacing options for elements, and two parts (typically) of a list. This makes for several combinations of spacing, as far as I know. I have not tested all the different spacing combinations, but if you play with the margin, padding (just the -left ones) and text-indent settings on both the UL and LI elements (assuming you're doing an unordered list), and you may get the desired results.
Also realize you can nest lists. nesting a UL in a LI automatically changes the bullet type and adds more padding, you can customize the bullet style by changing the "ul{list-style:}" and "ul ul{list-style:}"
If that's not helping, you can try checking the W3C, or other pages which give info on the subject, such as:
[meyerweb.com...]
[#*$!.com...]
[css.maxdesign.com.au...]
Use margin-bottom:
to set spacing after a P element
