Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Bulleted list - need to indent second line of long sentence

Posted on 2011-09-20
11
Medium Priority
?
1,938 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:CSHTech
11 Comments
 
LVL 4

Assisted Solution

by:h4hardy
h4hardy earned 600 total points
ID: 36565881
<style type="text/css">
       ul.mylist {list-style-position: inside;}
  ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;}
  ul.mylist li p {display: inline;}

   </style>
    <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>

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36565895
My second link above suggests two different ways of achieving this

-- use nested list, with second level list having no bullets
-- use negative indentation
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:CSHTech
ID: 36565926
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?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36565945
he has just given an example only.
you can put this in head section also
0
 

Author Comment

by:CSHTech
ID: 36565987
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)....?

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36566042
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

0
 

Author Comment

by:CSHTech
ID: 36566189
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

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36566343
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?
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1400 total points
ID: 36566355
line 1-3 and 9 are not required. Since the selectors and styles are already defined in 5-7 lines.

line 5-7 can also be written this way

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

Author Closing Comment

by:CSHTech
ID: 36566999
Quick resolution - many thanks.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question