Solved

Bulleted list - need to indent second line of long sentence

Posted on 2011-09-20
11
1,237 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 40

Expert Comment

by:gurvinder372
Comment Utility
0
 
LVL 4

Assisted Solution

by:h4hardy
h4hardy earned 150 total points
Comment Utility
<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:gurvinder372
Comment Utility
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
 

Author Comment

by:CSHTech
Comment Utility
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:gurvinder372
Comment Utility
he has just given an example only.
you can put this in head section also
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:CSHTech
Comment Utility
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:gurvinder372
Comment Utility
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
Comment Utility
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 21

Expert Comment

by:Kim Walker
Comment Utility
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:
gurvinder372 earned 350 total points
Comment Utility
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
Comment Utility
Quick resolution - many thanks.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now