Link to home
Start Free TrialLog in
Avatar of CSHTech
CSHTechFlag for United Kingdom of Great Britain and Northern Ireland

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.
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

SOLUTION
Avatar of h4hardy
h4hardy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
My second link above suggests two different ways of achieving this

-- use nested list, with second level list having no bullets
-- use negative indentation
Avatar of CSHTech

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?
he has just given an example only.
you can put this in head section also
Avatar of CSHTech

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)....?

check this code (modified his code a little bit).
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>

Open in new window

Avatar of CSHTech

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;}

}

Open in new window

You only need lines 5-7 in style.css.

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;}

Open in new window


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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CSHTech

ASKER

Quick resolution - many thanks.