Solved

How to remove bullets from this list

Posted on 2013-06-30
7
382 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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... …
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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