Solved

How to remove bullets from this list

Posted on 2013-06-30
7
375 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 52

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 52

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

22 Experts available now in Live!

Get 1:1 Help Now