By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,089 Members | 2,069 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,089 IT Pros & Developers. It's quick & easy.

List without bullets

P: n/a
I have a page at http://www.develop.check.com.au/hols/ where I'm
trying to put a navigation strip on the left of the page. Try as I
may, I can't get rid of the bullets and move the list over to the
left.

The HTML is:
<ul>
<li><a href="area.html?a=ah">Alexandra Headland</a></li>
<li><a href="area.html?a=ca">Caloundra</a></li>
<SNIP>
</ul>

.... contained within a <DIV> to position it on the page.

The CSS is:

ul li a {
display: block;
list-style: none;
text-decoration: none;
width: 100%;
margin: 0;
padding-left: 4px;
color: #ffffff;
font-weight: bold;
background-color: #87714a;
border: 1px #666666 outset;
font-size: 11px;
}

ul li a:hover {
color: #4ba513;
}

TIA for a solution to this problem.

Jul 21 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Els
Howard Martin wrote:
I have a page at http://www.develop.check.com.au/hols/
where I'm trying to put a navigation strip on the left of
the page. Try as I may, I can't get rid of the bullets and
move the list over to the left.

The HTML is:
<ul>
<li><a href="area.html?a=ah">Alexandra Headland</a></li>
<li><a href="area.html?a=ca">Caloundra</a></li>
<SNIP>
</ul>

... contained within a <DIV> to position it on the page.

The CSS is:

ul li a {
display: block;
list-style: none;


You set list-style:none to the a element here.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 21 '05 #2

P: n/a
Howard Martin wrote:
The CSS is:

ul li a {
display: block;
list-style: none;
text-decoration: none;
width: 100%;
margin: 0;
padding-left: 4px;
color: #ffffff;
font-weight: bold;
background-color: #87714a;
border: 1px #666666 outset;
font-size: 11px;
}
ul li a:hover {
color: #4ba513;
}


This only defines the style for the <a> element inside the <li> element
inside the <ul> element.

Try this:

ul, li, ul li a {
display: block;
list-style: none;
text-decoration: none;
width: 100%;
margin: 0;
padding-left: 4px;
color: #ffffff;
font-weight: bold;
background-color: #87714a;
border: 1px #666666 outset;
font-size: 11px;
}

ul li a:hover { color: #4ba513;
}
Jul 21 '05 #3

P: n/a
Els
Ståle Sæbøe wrote:
Howard Martin wrote:
The CSS is:

ul li a {

[snip]
This only defines the style for the <a> element inside the
<li> element inside the <ul> element.

Try this:

ul, li, ul li a {
display: block;
list-style: none;
text-decoration: none;
width: 100%;
margin: 0;
padding-left: 4px;
color: #ffffff;
font-weight: bold;
background-color: #87714a;
border: 1px #666666 outset;
font-size: 11px;
}


So you mean really set a padding-left of 4px for the ul, the
li, and the a? That's 12px padding-left all together. ;-)
Plus I think something will go wrong visually by setting all
those to 100% width...

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: David Bowie - Space Oddity
Jul 21 '05 #4

P: n/a
Els wrote:
... Plus I think something will go wrong visually by setting all
those to 100% width...

Probably, but I did not feel like doing a CSS Tutorial writeup right
now ;)

All right Howard, you really should check out one of the many CSS
tutorials out there. Your question reveals that you are even more newbie
than me :D
Jul 21 '05 #5

P: n/a
Howard Martin wrote:
I have a page at http://www.develop.check.com.au/hols/ where I'm
trying to put a navigation strip on the left of the page. Try as I
may, I can't get rid of the bullets and move the list over to the
left.

See if this helps you out:
http://css.maxdesign.com.au/listutorial/index.htm

The HTML is:
<ul>
<li><a href="area.html?a=ah">Alexandra Headland</a></li>
<li><a href="area.html?a=ca">Caloundra</a></li>
<SNIP>
</ul>

... contained within a <DIV> to position it on the page.

The CSS is:

ul li a {
display: block;
list-style: none;
text-decoration: none;
width: 100%;
margin: 0;
padding-left: 4px;
color: #ffffff;
font-weight: bold;
background-color: #87714a;
border: 1px #666666 outset;
font-size: 11px;
}

ul li a:hover {
color: #4ba513;
}

TIA for a solution to this problem.

--

*** Remove the DELETE from my address to reply ***

================================================== ====
Kevin Scholl http://www.ksscholl.com/
ks*****@comcast.DELETE.net
------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
================================================== ====
Jul 21 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.