CSHTech
asked on
Bulleted list - need to indent second line of long sentence
Hi
I've got a Wordpress site which has bulleted lists, but where the sentence is long, the text wraps to the second line directly under the bullet instead of where the text is indented....such as : -
* This is where the text starts
and continues
Is there a way of moving the second line of text to the right, in CSS or HTML? I've tried various ways but they all seem to create a paragraph space, which I don't want.
Any help appreciated as I need to finish this site. Thanks.
I've got a Wordpress site which has bulleted lists, but where the sentence is long, the text wraps to the second line directly under the bullet instead of where the text is indented....such as : -
* This is where the text starts
and continues
Is there a way of moving the second line of text to the right, in CSS or HTML? I've tried various ways but they all seem to create a paragraph space, which I don't want.
Any help appreciated as I need to finish this site. Thanks.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
My second link above suggests two different ways of achieving this
-- use nested list, with second level list having no bullets
-- use negative indentation
-- use nested list, with second level list having no bullets
-- use negative indentation
ASKER
Thank you for the quick replies.
I just need to clarify something - I can create the "mylist" on the page but what is the best way to implement this in Wordpress? For example couldn't this be placed into style.css (if so I'd appreciate a steer as to how it is presented)?
I'm a little confused as I thought that the <style type+"text/css"> section is meant to be in the head section of page html?
I just need to clarify something - I can create the "mylist" on the page but what is the best way to implement this in Wordpress? For example couldn't this be placed into style.css (if so I'd appreciate a steer as to how it is presented)?
I'm a little confused as I thought that the <style type+"text/css"> section is meant to be in the head section of page html?
he has just given an example only.
you can put this in head section also
you can put this in head section also
ASKER
Sorry, I think I may not have explained.
As far as I know, the easiest way of implementing this in Wordpress would be by using style.css with a "mylist" class - is this correct? (Particularly as there are a number of lists in the site).
If so, what would need to be placed in style.css to implement this (as there is no html 'head' section for individual pages as such)....?
As far as I know, the easiest way of implementing this in Wordpress would be by using style.css with a "mylist" class - is this correct? (Particularly as there are a number of lists in the site).
If so, what would need to be placed in style.css to implement this (as there is no html 'head' section for individual pages as such)....?
check this code (modified his code a little bit).
You just need to put this css in the style section
You just need to put this css in the style section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
ul.mylist {list-style-position: inside;}
ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
ul.mylist li p {display: inline;}
</style>
</HEAD>
<BODY>
<ul class="mylist">
<li>
Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
</li>
<li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item
</li>
</ul>
<ul class="mylist">
<li>
<p>
Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
</p>
</li>
<li>Second list item
</li>
</ul>
</BODY>
</HTML>
ASKER
Thank you - is this how it should be entered onto style.css?
ul.mylist
{
ul.mylist {list-style-position: inside;}
ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
ul.mylist li p {display: inline;}
}
You only need lines 5-7 in style.css.
Of course, this assumes your unordered list has a class of "mylist" and your html structure matches gurvinder372's example above.
Can you provide a link to the page you're referring to?
ul.mylist {list-style-position: inside;}
ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
ul.mylist li p {display: inline;}
Of course, this assumes your unordered list has a class of "mylist" and your html structure matches gurvinder372's example above.
Can you provide a link to the page you're referring to?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Quick resolution - many thanks.
http://stackoverflow.com/questions/4414973/css-negative-text-indent-in-lists-bullet-problems-with-opera
http://groups.google.com/group/macromedia.dreamweaver/browse_thread/thread/905e0f60c9893bb2