css ordered list help

  • Resolved bespokeordie

    (@bespokeordie)


    15 years, 10 months ago

    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="https://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
    https://www.bespokeordie.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter bespokeordie

    (@bespokeordie)

    bumpy bump bump

    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="https://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

    (@bespokeordie)

    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.