Title: css ordered list help
Last modified: August 19, 2016

---

# css ordered list help

 *  Resolved [bespokeordie](https://wordpress.org/support/users/bespokeordie/)
 * (@bespokeordie)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/css-ordered-list-help/)
 * Hello Again Everyone,
 * I am working on the header for my site. The RSS section at the top right shows
   an icon followed by 3 links. I have been trying unsuccessfully to add a twitter
   icon followed by the word “twitter” right before the RSS info already there on
   the same line. I think the problem may be because i am trying to put 2 ordered
   lists on the same line with the ul class function. Here is the relevant code:
 * .PHP HEADER FILE:
 *     ```
       <div id="page_navi" class="wrap">
       				<div class="col-left">
       					<ul id="nav">
       						<?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
       						<li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
       						<?php wp_list_pages('sort_column=menu_order&amp;depth=0&amp;title_li='); ?>
       					</ul>
       				</div>
       				<div class="col-right">
       					<ul class="rss">
       						<li><a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a></li>
       						<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></li>
       						<li class="last"><a href="http://feedburner.google.com/fb/a/mailverify?uri=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>&amp;loc=en_US" target="_blank">Email</a></li>
       					</ul>
       				</div>
       			</div>
       ```
   
 * .CSS FILE:
 *     ```
       .col-right {
       	float: right;
       }
       /* I deleted the irrelevant code here */
       /* Page Navigation (rss) */
   
       #page_navi ul.rss {
       	background: url(images/bg_rss.gif) no-repeat 0 5px;
       	padding: 6px 0 2px 15px;
       }
   
       #page_navi ul.rss li {
       	padding: 0 10px;
       	display: inline;
       	background: url(images/bg_separator.gif) no-repeat right 4px;
       }
   
       #page_navi ul.rss li.last {
       	background: none;
       }
       ```
   
 * I tried copying this and creating a #page_nav ul.twitter, but it kept showing
   up above the rss line and not in front of it. Any thoughts? Thank you for your
   time and your help.
 * Chris
    [http://www.bespokeordie.com](http://www.bespokeordie.com)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [bespokeordie](https://wordpress.org/support/users/bespokeordie/)
 * (@bespokeordie)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/css-ordered-list-help/#post-1074422)
 * bumpy bump bump
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/css-ordered-list-help/#post-1074443)
 * They’re unordered lists – not ordered (numbered) lists.
 *     ```
       <ul class="rss">
       <li class="twitter"><a href="link_to_twitter"><img src="url_of_image" width="" height="" alt="Twitter" /></a></li>
       <li><a href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>">Posts</a></li>
       <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></li>
       <li class="last"><a href="http://feedburner.google.com/fb/a/mailverify?uri=<?php $feedburner_id = get_option('woo_feedburner_id'); echo $feedburner_id; ?>&amp;loc=en_US" target="_blank">Email</a></li>
       </ul>
       ```
   
 * is probably the easiest way to do it. Also ensures that, if images are disabled,
   the link is still visible.
 *  Thread Starter [bespokeordie](https://wordpress.org/support/users/bespokeordie/)
 * (@bespokeordie)
 * [17 years ago](https://wordpress.org/support/topic/css-ordered-list-help/#post-1074527)
 * Thank you so much for your help. You are always helping me out. I can’t thank
   you enough. I’m off to my next problem. Trying to figure out why my updated theme
   comments.php just removes the comments all together.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘css ordered list help’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [bespokeordie](https://wordpress.org/support/users/bespokeordie/)
 * Last activity: [17 years ago](https://wordpress.org/support/topic/css-ordered-list-help/#post-1074527)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics