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

x
?
Solved

How to remove bullets from this list

Posted on 2013-06-30
7
Medium Priority
?
393 Views
Last Modified: 2013-06-30
Hello all experts.

Below is an excerpt from a page that i am working on.

For the life of me I cannot figure out how to reference the list so that the bullet-points can me removed from it.

<!-- horizontal-outer-widgets-2 Widget Area -->
	<div id="horizontal-outer-widgets-2" class="boxed warea fix">
		<!-- widget start --><aside id="flexible-recent-posts-widget-2" class="suf-widget suf-horizontal-widget suf-widget-3c widget_flexible-recent-posts-widget "><div class="dbx-content"><div class="frp-clear"></div>
<ul class="frp-widget">
			<li class="frp-news">
			<div class="news-widget-title"><a href="http://localhost/food/third-post/">Third Post</a></div>
<div class="news-widget-excerpt"><a href="http://localhost/food/third-post/"><?php _e( 'read more', 'frp' ); ?></a></div>
<p><!--
<div class="news-widget-date">30.06.2013</div>
<p>--></p>
		</li>
				<li class="frp-news">
			<div class="news-widget-title"><a href="http://localhost/food/second-post/">Second Post</a></div>
<div class="news-widget-excerpt"><a href="http://localhost/food/second-post/"><?php _e( 'read more', 'frp' ); ?></a></div>
<p><!--
<div class="news-widget-date">30.06.2013</div>
<p>--></p>
		</li>
		</ul>
<div class="frp-all-category-news frp-all-category-news-footer"><a
	href=""></a></div>
</div></aside><!-- widget end -->	</div>
	<!-- /horizontal-outer-widgets-2 -->

Open in new window


Any help will be appreciated.

--d.
0
Comment
Question by:driven_13
  • 4
  • 3
7 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39288293
Add to your css

ul
{
    list-style-type: none;
}

Or if it is only for a specific list then add a class

ul.no_bullets
{
    list-style-type: none;
}

<ul class="no_bullets">
<li>stuff</li>
</ul>
0
 

Author Comment

by:driven_13
ID: 39288304
Thanx for the response but I actually know how to remove the bullets.

I was looking for some help in how to reference that list in the hierarchy of DIVs and CLASSes.

This is not working:

#horizontal-outer-widgets-2 .frp-widget ul {list-style-type: none;}

Open in new window


Thoughts...??

--d.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39288316
This is a working sample of your code using the css below http://jsbin.com/ihunod/1/edit

ul.frp-widget
{
    list-style-type: none;
}

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:driven_13
ID: 39288345
Hi.

Unfortunately, that is not working ....[:0(

Here is the link to my site:  http://bit.ly/YMA3zW

Any ideas..??

Thanx.

--d.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39288364
Starting at line 1383 of your css remove this stuff or at least anything having to do with the background. It is over riding the code you are trying to do.

.suf-mag-category ul li,
.sidebar-tab-content ul li,
.suf-widget ul li,
.suf-flat-widget ul li,
.suf-panel-widget ul li {
	background-repeat: no-repeat;
	padding-left: 22px ;
	background-position: 0 1px;
	padding-bottom: 3px;
}

.tab-box div.sbtab-content-archives ul li,
.tabbed-sidebar div.sbtab-content-archives ul li,
.widget_archive ul li {
	background: url(images/icons/calendar_date.png) no-repeat;
	padding-left: 20px;
	padding-bottom: 3px;
}

Open in new window

0
 

Author Comment

by:driven_13
ID: 39288388
Hi.

Ok, I removed the CSS as per your suggestion and the bullets are gone. Thank you.

But, as per my attached snapshot, there are dots now showing up in the background.

--d.
dots in background
0
 

Author Comment

by:driven_13
ID: 39288392
Scratch that last post as I have figured it out.

Thank you very much for all your help.

--d.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

971 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