18 replies [Last post]
newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

i'm using the code below on this site (http://willowbilliards.com/wordpress/) to put a custom bullet image (http://willowbilliards.com/wordpress/wp-content/themes/dwebhosting-theme/dwebhosting/images/diamond.gif)between the list items in the top nav bar. but for some reason those bullets are not appearing. any idea why? please advise. thanks!

ul#page-list li a {
text-decoration:none; 
color:#fff;
margin-top: 19px;
padding: 0 15px 0 15px;
float:left;
list-style-image: url(images/diamond.gif);
}

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 9 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Change it to background image?

And reposition with padding:

ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}
 
ul#page-list li a {
text-decoration:none; 
color:#fff;
margin-top: 16px;
padding: 3px 15px 0 20px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}

If you read my previous post ignore it, and oops...

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

thank you. that did work. now

thank you. that did work.

now as a followup, how do i create a first item class to remove the bullet for the first link only?

what complicates matters is the fact that there's php code that generates the list, so i'm not sure what to do. please advise. thanks!

<div id="page-menu">
<ul id="page-list">
 
<?php wp_list_pages('title_li='); ?>
 
</ul><!-- /page-list -->
</div><!-- /page-menu -->

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

First-child although

First-child although scripting this is usually the better approach.

Erm generally background bullets would be placed on the li element, but as long as it works.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 9 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Could

Could do...

#page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px -7px;
}
 
ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}
 
ul#page-list li {
display:inline;
font-size:16px; 
margin-top: 16px;
padding: 3px 7px 0 21px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}
 
ul#page-list li:first-child {
background: transparent;
}
 
ul#page-list li a {
text-decoration:none; 
color:#fff;
}

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

thanks, but then how do i

thanks, but then how do i write the php code to make the first one unique? pardon my ignorance but i'm very much a php beginner.

please advise. thanks.

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 9 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Do you need to?

I'm not savvy on php so can't help there.

The CSS that's included in my previous post, which is what Hugo was suggesting if your not changing the script, should work without editing the php?

Though ie6 and older will ignore the first-child I believe.

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

actually, i'm taking a

actually, i'm taking a different route now. i notice that the php code spits out the list like this:

<ul id="page-list">
 
<li class="page_item page-item-27 current_page_item"><a href="http://willowbilliards.com/wordpress" title="HOMEPAGE">HOMEPAGE</a></li>
<li class="page_item page-item-2"><a href="http://willowbilliards.com/wordpress/?page_id=2" title="ABOUT US">ABOUT US</a></li>
<li class="page_item page-item-14"><a href="http://willowbilliards.com/wordpress/?page_id=14" title="CONTACT US">CONTACT US</a></li>
<li class="page_item page-item-12"><a href="http://willowbilliards.com/wordpress/?page_id=12" title="DIRECTIONS">DIRECTIONS</a></li>
<li class="page_item page-item-10"><a href="http://willowbilliards.com/wordpress/?page_id=10" title="EVENTS">EVENTS</a></li>
<li class="page_item page-item-4"><a href="http://willowbilliards.com/wordpress/?page_id=4" title="LEAGUES">LEAGUES</a></li>
 
</ul><!-- /page-list -->

so i figured if i want to edit just the first list item to remove the diamond custom bullet image, and i added the following code, that would do it:

ul#page-list li.page-item-27 {font-size:10px; list-style-image: none;}
ul#page-list li.page-item-27 a {font-size:10px; list-style-image: none;}

i can tell the code is effecting the correct list item because the font size shrinks to 10 on just that heading. but how come the custom diamond image bullet doesnt go away???

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

it looks like you are setting

it looks like you are setting the diamond with a background and not list-style... Try setting background:none on the anchor

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

you mean remove the

you mean remove the background from here?

ul#page-list li a {
background:url("images/diamond.gif") no-repeat scroll left center transparent

i tried that and the diamond disappears from all the headings.

please advise.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As it would, do as you were

As it would, do as you were but:

li.page-item-27 a {background:none;}

that class is ok but bear in mind it's only good as long as the home page remains at that particular page created and given that -27 id, there is probably a better means of adding an action filter, but probably tricky and I'm not a fan of the means WP employ to generate their classes, seems too tricky to hack in to.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

so if i understand correctly

so if i understand correctly (which i probably dont) my css should now look like this:

ul#page-list li {
display:inline;
font-size:16px;
list-style-image:url("images/diamond.gif");
}
ul#page-list li.page-item-27 a {
background:none;
}
ul#page-list li a {
background:url("images/diamond.gif") no-repeat scroll left center transparent;
color:#FFFFFF;
float:left;
margin-top:19px;
padding:0 15px;
text-decoration:none;

if so, i tried that and now no diamond bullets appear. is the order wrong that i'm putting these into the css file? or is it something else?

thanks for bearing with me.

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 9 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Should be: ul#page-list

Should be:

ul#page-list li.page-item-27 a {
background: transparent;
}

Also, no need for the list-style-image on ul#page-list li...

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

thanks. i tried that but it

thanks. i tried that but it removed the diamonds next to the ones i want it next to.

right now, i'm pretty close with the code below. the only problem is that the list items dont line up horizontally, which i need them to do.

#page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px 0px;
}
 
ul#page-list  {
float:left;
margin:0;
padding:0;
white-space:nowrap;
width:1000px;
}
ul#page-list li {
font-size:16px;
margin-top:15px;
list-style-image:url(images/diamond.gif);
}
ul#page-list li a {
color:#FFFFFF;
float:left;
margin-top:5px;
margin-right:35px;
padding:0 0px;
text-decoration:none;
}
ul#page-list li.page-item-27 {
list-style-image:none;
list-style-type:none;
margin-left:10px;
}
ul#page-list li a:link, ul#navlist li a:visited {
text-decoration: none;
}
 
ul#page-list li a:hover {
text-decoration:none;
color:#00172c;
} 

please advise how i line them all up horizontally. thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

newdude you seem to be

newdude you seem to be changing rules mid stream which is not only confusing but hinders helping you.

The order of your rulesets a few posts up was incorrect!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 9 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

This: #page-menu{ width:

This:

#page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px -7px;
}
 
ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}
 
ul#page-list li {
display:inline;
font-size:16px; 
margin-top: 16px;
padding: 3px 7px 0 21px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}
 
ul#page-list li:first-child {
background: transparent;
}
 
ul#page-list li a {
text-decoration:none; 
color:#fff;
}

or this:

#page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px -7px;
}
 
ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}
 
ul#page-list li {
display:inline;
font-size:16px; 
margin-top: 16px;
padding: 3px 7px 0 21px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}
 
ul#page-list li.page-item-27 {
background: transparent;
}

will work.

Try cutting and pasting this code in its entirety and giving it a go. The reason you were loosing your bullets is because in this snippet of code:

ul#page-list li a {
background:url("images/diamond.gif") no-repeat scroll left center transparent;
color:#FFFFFF;
float:left;
margin-top:19px;
padding:0 15px;
text-decoration:none;

...scroll is not valid where you have it placed in the "background" property!

Placing the bullet image in the background allows for easier manipulation than using list-style-image imho, (someone can correct me if I'm wrong in that).

Also, I think for your application of the image, it's better placed in the "...li" rather than the "...li a" selector. If it's in the "...li a" selector it becomes part of the clickable region vs in the "...li" selector not being in the clickable region.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: Placing the bullet

Quote:

Placing the bullet image in the background allows for easier manipulation than using list-style-image imho, (someone can correct me if I'm wrong in that).

Not so much a personal opinion this is and has been best practise for always and a day or thereabouts bullets graphics are always described as backgrounds to li elements, link icons would perhaps be best placed on anchor elements to gain the linked region (if not block level). the LI style property for images has never been regarded that well conceived and lacked the finesse that the background property has in positioning.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

newdude
newdude's picture
Offline
Enthusiast
Last seen: 2 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

thank you everyone. that

thank you everyone. that seems to have worked!

huafeihua116
huafeihua116's picture
Offline
newbie
NY
Last seen: 9 years 4 days ago
NY
Timezone: GMT+8
Joined: 2010-04-11
Posts: 4
Points: 4

Panda wrote: Could

Panda wrote:

Could do...

#page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px -7px;
}
 
ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}
 
ul#page-list li {
display:inline;
font-size:16px; 
margin-top: 16px;
padding: 3px 7px 0 21px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}
 
ul#page-list li:first-child {
background: transparent;
}
 
ul#page-list li a {
text-decoration:none; 
color:#fff;
}

Great!